diff options
| -rw-r--r-- | bar/ActiveWindow.qml | 91 |
1 files changed, 60 insertions, 31 deletions
diff --git a/bar/ActiveWindow.qml b/bar/ActiveWindow.qml index 2665569..dff75be 100644 --- a/bar/ActiveWindow.qml +++ b/bar/ActiveWindow.qml @@ -3,25 +3,28 @@ import QtQuick.Layouts import Quickshell import Quickshell.Wayland import Quickshell.Widgets - import qs.components import qs.config +// TODO use a item wrapping loader for opacity Behavior Rectangle { id: root - + // hyprland toplevel isn't shown immediately... property var toplevel: ToplevelManager.activeToplevel property var icon: Quickshell.iconPath(AppSearch.guessIcon(toplevel?.appId), "image-missing") - // according to docs, null could happen but doesn't seem to happen in practice so.. - // hypr toplevel.activated is always true and doesn't change either so.. + property var activated: toplevel?.activated || false - implicitWidth: activated ? loader.item.implicitWidth + General.rectMargin * 4 : 0 - implicitHeight: loader.item.implicitHeight + General.rectMargin * 2 + // use IRect + implicitWidth: activated ? rowLayout.implicitWidth + General.rectMargin * 4 : 0 + implicitHeight: rowLayout.implicitHeight + General.rectMargin * 2 anchors.centerIn: parent color: WallustColors.color4 + // according to docs, null could happen but doesn't seem to happen in practice so.. + // hypr toplevel.activated is always true and doesn't change either so.. opacity: activated ? 1 : 0 + radius: Style.rounding.smaller function strip(s) { @@ -32,40 +35,42 @@ Rectangle { return out?.trim() || s; } - Loader { - id: loader - active: activated + RowLayout { + id: rowLayout anchors.centerIn: parent - sourceComponent: rowComponent - } + spacing: Bar.resourceIconTextSpacing - Component { - id: rowComponent - RowLayout { - spacing: Bar.resourceIconTextSpacing + IconImage { + id: icon + source: root.icon + implicitWidth: Bar.appIconSize + implicitHeight: Bar.appIconSize - IconImage { - id: icon - source: root.icon - implicitWidth: Bar.appIconSize - implicitHeight: Bar.appIconSize + // sync animation + opacity: root.activated ? 1 : 0 + Behavior on opacity { + NumberAnimation { + duration: General.animateDuration / 4 + } } + } + + IText { + animate: true + font.pixelSize: General.fontSize + text: strip(root?.toplevel?.title) || "" - IText { - animate: true - font.pixelSize: General.fontSize - text: strip(root?.toplevel?.title) || "" + // sync animation + opacity: root.activated ? 1 : 0 + Behavior on opacity { + NumberAnimation { + duration: General.animateDuration / 4 + } } } } - onIconChanged: { - if (loader.item) { - loader.item.icon.opacity = 0; - loader.item.icon.source = root.icon; - loader.item.icon.opacity = 1; - } - } + onIconChanged: fadeIcon.start() Behavior on opacity { NumberAnimation { @@ -79,4 +84,28 @@ Rectangle { damping: General.springAnimationDamping * 1.3 } } + + SequentialAnimation { + id: fadeIcon + running: false + + PropertyAnimation { + target: icon + property: "opacity" + to: 0 + duration: General.animateDuration / 4 + } + ScriptAction { + script: icon.source = root.icon + } + PropertyAnimation { + target: icon + property: "opacity" + to: 1 + duration: General.animateDuration / 4 + } + ScriptAction { + script: icon.source = root.icon + } + } } |