mirror of
https://github.com/kossLAN/dots.git
synced 2025-11-04 22:49:50 -05:00
more work on popups
This commit is contained in:
parent
9cc386b5b5
commit
ec04d07e24
6 changed files with 134 additions and 125 deletions
|
|
@ -63,7 +63,6 @@ Variants {
|
|||
Layout.alignment: Qt.AlignRight
|
||||
|
||||
SysTray {
|
||||
id: sysTray
|
||||
bar: root
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
|
@ -77,8 +76,8 @@ Variants {
|
|||
// Layout.bottomMargin: 2
|
||||
// }
|
||||
|
||||
// BatteryIndicator {
|
||||
// id: batteryIndicator
|
||||
// PowerMenu {
|
||||
// bar: root
|
||||
// Layout.fillHeight: true
|
||||
// }
|
||||
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@ Scope {
|
|||
if (lastActiveItem != null && lastActiveItem != activeItem) {
|
||||
lastActiveItem.targetVisible = false;
|
||||
}
|
||||
}
|
||||
|
||||
function setItem(item: PopupItem) {
|
||||
if (activeItem != null) {
|
||||
lastActiveItem = activeItem;
|
||||
}
|
||||
}
|
||||
|
||||
function setItem(item: PopupItem) {
|
||||
activeItem = item;
|
||||
}
|
||||
|
||||
|
|
@ -48,10 +48,19 @@ Scope {
|
|||
|
||||
function onHidden(item: PopupItem) {
|
||||
if (item == lastActiveItem) {
|
||||
console.log("triggered");
|
||||
lastActiveItem = null;
|
||||
}
|
||||
}
|
||||
|
||||
property real scaleMul: lastActiveItem && lastActiveItem.targetVisible ? 1 : 0
|
||||
|
||||
Behavior on scaleMul {
|
||||
SmoothedAnimation {
|
||||
velocity: 5
|
||||
}
|
||||
}
|
||||
|
||||
LazyLoader {
|
||||
id: popupLoader
|
||||
activeAsync: root.shownItem != null
|
||||
|
|
@ -84,18 +93,34 @@ Scope {
|
|||
}
|
||||
}
|
||||
|
||||
// HyprlandWindow.opacity: root.scaleMul
|
||||
|
||||
HyprlandWindow.visibleMask: Region {
|
||||
id: mask
|
||||
item: parentItem
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: root
|
||||
|
||||
function onScaleMulChanged() {
|
||||
mask.changed();
|
||||
}
|
||||
}
|
||||
|
||||
StyledRectangle {
|
||||
id: parentItem
|
||||
width: targetWidth
|
||||
height: targetHeight
|
||||
x: targetX
|
||||
y: root.gaps
|
||||
clip: true
|
||||
|
||||
transform: Scale {
|
||||
origin.x: parentItem.targetX
|
||||
origin.y: 0
|
||||
xScale: 1
|
||||
yScale: root.scaleMul
|
||||
}
|
||||
|
||||
readonly property var targetWidth: root.shownItem?.implicitWidth ?? 0
|
||||
readonly property var targetHeight: root.shownItem?.implicitHeight ?? 0
|
||||
|
|
@ -107,11 +132,16 @@ Scope {
|
|||
|
||||
let owner = root.shownItem.owner;
|
||||
let bar = root.bar;
|
||||
let isCentered = root.shownItem.centered;
|
||||
let xPos = owner.mapToItem(bar.contentItem, 0, bar.height, owner.width, 0).x;
|
||||
|
||||
let rightEdge = xPos + targetWidth;
|
||||
let maxRightEdge = popup.width;
|
||||
|
||||
if (isCentered) {
|
||||
return xPos - (targetWidth / 2) + (owner.width / 2);
|
||||
}
|
||||
|
||||
if (rightEdge > maxRightEdge) {
|
||||
// touching right edge, reposition
|
||||
// console.log("touching right edge");
|
||||
|
|
@ -132,28 +162,36 @@ Scope {
|
|||
// TODO: Make a close animation, a little complicated, will need to track if an animation is running
|
||||
// and stop unload from occuring until its done, in the LazyLoader.
|
||||
|
||||
Behavior on x {
|
||||
enabled: root.lastActiveItem != null
|
||||
SmoothedAnimation {
|
||||
duration: 200
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on width {
|
||||
enabled: root.lastActiveItem != null
|
||||
SmoothedAnimation {
|
||||
duration: 300
|
||||
duration: 200
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on height {
|
||||
enabled: root.lastActiveItem != null
|
||||
SmoothedAnimation {
|
||||
duration: 300
|
||||
duration: 200
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
enabled: root.lastActiveItem != null
|
||||
SmoothedAnimation {
|
||||
duration: 300
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
// SmoothedAnimation on height {
|
||||
// duration: 200
|
||||
// easing.type: Easing.InOutQuad
|
||||
// to: parentItem.targetHeight
|
||||
// onToChanged: restart()
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import QtQuick
|
||||
import qs.widgets
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
|
@ -48,6 +49,7 @@ Item {
|
|||
|
||||
required property var popup
|
||||
required property var owner
|
||||
property bool centered: false
|
||||
property bool show: false
|
||||
|
||||
signal closed
|
||||
|
|
@ -61,10 +63,4 @@ Item {
|
|||
velocity: 5
|
||||
}
|
||||
}
|
||||
|
||||
function snapOpacity(opacity: real) {
|
||||
opacityAnimation.enabled = false;
|
||||
targetOpacity = opacity;
|
||||
opacityAnimation.enabled = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,100 +0,0 @@
|
|||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import Quickshell.Widgets
|
||||
import Quickshell.Services.UPower
|
||||
import "../../widgets" as Widgets
|
||||
import "../.."
|
||||
|
||||
// todo: redo the tray icon handling
|
||||
Item {
|
||||
id: root
|
||||
implicitWidth: height + 8 // for margin
|
||||
visible: UPower.displayDevice.isLaptopBattery
|
||||
|
||||
required property var popup
|
||||
|
||||
Widgets.StyledMouseArea {
|
||||
id: batteryButton
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
if (root.popup.content == powerMenu) {
|
||||
root.popup.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
root.popup.set(this, powerMenu);
|
||||
}
|
||||
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 1
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: parent.height
|
||||
implicitHeight: parent.height
|
||||
anchors.centerIn: parent
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
source: Rectangle {
|
||||
width: root.width
|
||||
height: root.height
|
||||
color: "white"
|
||||
}
|
||||
|
||||
maskSource: IconImage {
|
||||
implicitSize: root.width
|
||||
source: "root:resources/battery/battery.svg"
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: batteryBackground
|
||||
color: Qt.color(ShellSettings.colors["surface"]).lighter(4)
|
||||
opacity: 0.75
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 2
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: batteryPercentage
|
||||
width: (parent.width - 4) * UPower.displayDevice.percentage
|
||||
color: ShellSettings.colors["inverse_surface"]
|
||||
|
||||
anchors {
|
||||
left: batteryBackground.left
|
||||
top: batteryBackground.top
|
||||
bottom: batteryBackground.bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: powerMenu
|
||||
visible: false
|
||||
implicitWidth: 250
|
||||
implicitHeight: 80
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
|
||||
// ComboBox {
|
||||
// model: ScriptModel {
|
||||
// values: ["Power Save", "Balanced", "Performance"]
|
||||
// }
|
||||
//
|
||||
// currentIndex: PowerProfiles.profile
|
||||
// onCurrentIndexChanged: {
|
||||
// PowerProfiles.profile = this.currentIndex;
|
||||
// console.log(PowerProfile.toString(PowerProfiles.profile));
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
72
shell/bar/power/PowerMenu.qml
Normal file
72
shell/bar/power/PowerMenu.qml
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import Qt5Compat.GraphicalEffects
|
||||
import Quickshell.Widgets
|
||||
import Quickshell.Services.UPower
|
||||
import qs.widgets
|
||||
import qs.bar
|
||||
import qs
|
||||
|
||||
// todo: redo the tray icon handling
|
||||
StyledMouseArea {
|
||||
id: root
|
||||
implicitWidth: height + 8 // for margin
|
||||
visible: UPower.displayDevice.isLaptopBattery
|
||||
onClicked: showMenu = !showMenu
|
||||
|
||||
required property var bar
|
||||
property bool showMenu: false
|
||||
|
||||
Item {
|
||||
implicitWidth: parent.height
|
||||
implicitHeight: parent.height
|
||||
anchors.centerIn: parent
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
source: Rectangle {
|
||||
width: root.width
|
||||
height: root.height
|
||||
color: "white"
|
||||
}
|
||||
|
||||
maskSource: IconImage {
|
||||
implicitSize: root.width
|
||||
source: "root:resources/battery/battery.svg"
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: batteryBackground
|
||||
color: Qt.color(ShellSettings.colors["surface"]).lighter(4)
|
||||
opacity: 0.75
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 2
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: batteryPercentage
|
||||
width: (parent.width - 4) * UPower.displayDevice.percentage
|
||||
color: ShellSettings.colors["inverse_surface"]
|
||||
|
||||
anchors {
|
||||
left: batteryBackground.left
|
||||
top: batteryBackground.top
|
||||
bottom: batteryBackground.bottom
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
property PopupItem menu: PopupItem {
|
||||
owner: root
|
||||
popup: root.bar.popup
|
||||
show: root.showMenu
|
||||
onClosed: root.showMenu = false
|
||||
centered: true
|
||||
|
||||
implicitWidth: 250
|
||||
implicitHeight: 250
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,11 @@ import Quickshell.Services.SystemTray
|
|||
import "../../widgets"
|
||||
import ".."
|
||||
|
||||
// TODO:
|
||||
// 1. Get rid of leftItem/rightItem properties on menu
|
||||
// 2. Load menu properly, right now its pretty buggy
|
||||
// 3. Fix bug that causes close on update (nm-applet wifi networks updating)
|
||||
|
||||
RowLayout {
|
||||
id: root
|
||||
spacing: 5
|
||||
|
|
@ -60,7 +65,6 @@ RowLayout {
|
|||
implicitWidth: content.implicitWidth + (2 * 8)
|
||||
implicitHeight: content.implicitHeight + (2 * 8)
|
||||
|
||||
// TODO: come up with a better way instead of having to do this
|
||||
property var leftItem: false
|
||||
property var rightItem: false
|
||||
|
||||
|
|
@ -80,8 +84,8 @@ RowLayout {
|
|||
rootMenu: menu
|
||||
|
||||
onInteracted: {
|
||||
menuOpener.menu = null;
|
||||
button.showMenu = false;
|
||||
menuOpener.menu = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue