diff --git a/Modules/Updates/UpdatesPopout.qml b/Modules/Updates/UpdatesPopout.qml index 5f0d161..1665777 100644 --- a/Modules/Updates/UpdatesPopout.qml +++ b/Modules/Updates/UpdatesPopout.qml @@ -11,150 +11,161 @@ import qs.Helpers CustomClippingRect { id: root + readonly property bool hasUpdates: Object.keys(Updates.updates)?.length > 0 readonly property int itemHeight: 50 + Appearance.padding.smaller * 2 required property var wrapper color: DynamicColors.tPalette.m3surfaceContainer - implicitHeight: updatesList.visible ? updatesList.implicitHeight + Appearance.padding.small * 2 : noUpdates.height - implicitWidth: updatesList.visible ? updatesList.contentWidth + Appearance.padding.small * 2 : noUpdates.width + implicitHeight: hasUpdates ? updatesListLoader.item?.implicitHeight + Appearance.padding.small * 2 : noUpdatesLoader.item.height + implicitWidth: hasUpdates ? updatesListLoader.item?.contentWidth + Appearance.padding.small * 2 : noUpdatesLoader.item.width radius: Appearance.rounding.small - Item { - id: noUpdates + Loader { + id: noUpdatesLoader + active: !root.hasUpdates anchors.centerIn: parent - height: 200 - visible: script.values.length === 0 - width: 600 - MaterialIcon { - id: noUpdatesIcon + sourceComponent: Item { + id: noUpdates - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - color: DynamicColors.tPalette.m3onSurfaceVariant - font.pointSize: Appearance.font.size.extraLarge * 3 - horizontalAlignment: Text.AlignHCenter - text: "check" - } + height: 200 + width: 300 - CustomText { - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: noUpdatesIcon.bottom - color: DynamicColors.tPalette.m3onSurfaceVariant - horizontalAlignment: Text.AlignHCenter - text: qsTr("No updates available") - verticalAlignment: Text.AlignVCenter + MaterialIcon { + id: noUpdatesIcon + + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + color: DynamicColors.tPalette.m3onSurfaceVariant + font.pointSize: Appearance.font.size.extraLarge * 3 + horizontalAlignment: Text.AlignHCenter + text: "check" + } + + CustomText { + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: noUpdatesIcon.bottom + color: DynamicColors.tPalette.m3onSurfaceVariant + horizontalAlignment: Text.AlignHCenter + text: qsTr("No updates available") + verticalAlignment: Text.AlignVCenter + } } } - CustomListView { - id: updatesList + Loader { + id: updatesListLoader + active: root.hasUpdates anchors.centerIn: parent - contentHeight: childrenRect.height - contentWidth: 600 - displayMarginBeginning: root.itemHeight - displayMarginEnd: root.itemHeight - implicitHeight: Math.min(contentHeight, (root.itemHeight + spacing) * 5 - spacing) - implicitWidth: contentWidth - spacing: Appearance.spacing.normal - visible: script.values.length > 0 - delegate: CustomRect { - id: update + sourceComponent: CustomListView { + id: updatesList - required property var modelData - readonly property list sections: modelData.update.split(" ") + contentHeight: childrenRect.height + contentWidth: 600 + displayMarginBeginning: root.itemHeight + displayMarginEnd: root.itemHeight + implicitHeight: Math.min(contentHeight, (root.itemHeight + spacing) * 5 - spacing) + implicitWidth: contentWidth + spacing: Appearance.spacing.normal - // anchors.left: parent.left - // anchors.right: parent.right - color: DynamicColors.tPalette.m3surfaceContainer - implicitHeight: root.itemHeight - implicitWidth: 600 - radius: Appearance.rounding.small - Appearance.padding.small + delegate: CustomRect { + id: update - RowLayout { - anchors.fill: parent - anchors.leftMargin: Appearance.padding.smaller - anchors.rightMargin: Appearance.padding.smaller + required property var modelData + readonly property list sections: modelData.update.split(" ") - MaterialIcon { - font.pointSize: Appearance.font.size.large * 2 - text: "package_2" - } - - ColumnLayout { - Layout.fillWidth: true - - CustomText { - Layout.fillWidth: true - Layout.preferredHeight: 25 - elide: Text.ElideRight - font.pointSize: Appearance.font.size.large - text: update.sections[0] - } - - CustomText { - Layout.fillWidth: true - color: DynamicColors.palette.m3onSurfaceVariant - text: Updates.formatUpdateTime(update.modelData.timestamp) - } - } + // anchors.left: parent.left + // anchors.right: parent.right + color: DynamicColors.tPalette.m3surfaceContainer + implicitHeight: root.itemHeight + implicitWidth: 600 + radius: Appearance.rounding.small - Appearance.padding.small RowLayout { - Layout.fillHeight: true - Layout.preferredWidth: 300 - - MarqueeText { - id: versionFrom - - Layout.fillHeight: true - Layout.preferredWidth: 125 - animate: true - color: DynamicColors.palette.m3tertiary - font.pointSize: Appearance.font.size.large - horizontalAlignment: Text.AlignHCenter - marqueeEnabled: true - pauseMs: 4000 - text: update.sections[1] - width: 125 - } + anchors.fill: parent + anchors.leftMargin: Appearance.padding.smaller + anchors.rightMargin: Appearance.padding.smaller MaterialIcon { - Layout.fillHeight: true - color: DynamicColors.palette.m3secondary - font.pointSize: Appearance.font.size.extraLarge - horizontalAlignment: Text.AlignHCenter - text: "arrow_right_alt" - verticalAlignment: Text.AlignVCenter + font.pointSize: Appearance.font.size.large * 2 + text: "package_2" } - MarqueeText { - id: versionTo + ColumnLayout { + Layout.fillWidth: true + CustomText { + Layout.fillWidth: true + Layout.preferredHeight: 25 + elide: Text.ElideRight + font.pointSize: Appearance.font.size.large + text: update.sections[0] + } + + CustomText { + Layout.fillWidth: true + color: DynamicColors.palette.m3onSurfaceVariant + text: Updates.formatUpdateTime(update.modelData.timestamp) + } + } + + RowLayout { Layout.fillHeight: true - Layout.preferredWidth: 120 - animate: true - color: DynamicColors.palette.m3primary - font.pointSize: Appearance.font.size.large - horizontalAlignment: Text.AlignHCenter - marqueeEnabled: true - pauseMs: 4000 - text: update.sections[3] - width: 125 + Layout.preferredWidth: 300 + + MarqueeText { + id: versionFrom + + Layout.fillHeight: true + Layout.preferredWidth: 125 + animate: true + color: DynamicColors.palette.m3tertiary + font.pointSize: Appearance.font.size.large + horizontalAlignment: Text.AlignHCenter + marqueeEnabled: true + pauseMs: 4000 + text: update.sections[1] + width: 125 + } + + MaterialIcon { + Layout.fillHeight: true + color: DynamicColors.palette.m3secondary + font.pointSize: Appearance.font.size.extraLarge + horizontalAlignment: Text.AlignHCenter + text: "arrow_right_alt" + verticalAlignment: Text.AlignVCenter + } + + MarqueeText { + id: versionTo + + Layout.fillHeight: true + Layout.preferredWidth: 120 + animate: true + color: DynamicColors.palette.m3primary + font.pointSize: Appearance.font.size.large + horizontalAlignment: Text.AlignHCenter + marqueeEnabled: true + pauseMs: 4000 + text: update.sections[3] + width: 125 + } } } } - } - model: ScriptModel { - id: script + model: ScriptModel { + id: script - objectProp: "update" - values: Object.entries(Updates.updates).sort((a, b) => b[1] - a[1]).map(([update, timestamp]) => ({ - update, - timestamp - })) + objectProp: "update" + values: Object.entries(Updates.updates).sort((a, b) => b[1] - a[1]).map(([update, timestamp]) => ({ + update, + timestamp + })) + } } } } diff --git a/Modules/Wrapper.qml b/Modules/Wrapper.qml index 8bf0ab7..77f9c9e 100644 --- a/Modules/Wrapper.qml +++ b/Modules/Wrapper.qml @@ -15,9 +15,8 @@ Item { property real currentCenter property alias currentName: popoutState.currentName property string detachedMode - readonly property bool isDetached: detachedMode.length > 0 property alias hasCurrent: popoutState.hasCurrent - readonly property real nonAnimHeight: children.find(c => c.shouldBeActive)?.implicitHeight ?? content.implicitHeight + readonly property real nonAnimHeight: content.implicitHeight || 150 readonly property real nonAnimWidth: children.find(c => c.shouldBeActive)?.implicitWidth ?? content.implicitWidth required property real offsetScale property string queuedMode @@ -28,29 +27,13 @@ Item { detachedMode = ""; } - function detach(mode: string): void { - setAnims(true); - if (mode === "winfo") { - detachedMode = mode; - } else { - queuedMode = mode; - detachedMode = "any"; - } - setAnims(false); - focus = true; - } - - function setAnims(detach: bool): void { - const type = `expressive${detach ? "Slow" : "Default"}Spatial`; - animLength = Appearance.anim.durations[type]; - animCurve = Appearance.anim.curves[type]; - } - focus: hasCurrent implicitHeight: nonAnimHeight implicitWidth: nonAnimWidth Behavior on implicitHeight { + enabled: root.offsetScale < 1 + Anim { duration: root.animLength easing.bezierCurve: root.animCurve @@ -72,41 +55,15 @@ Item { Comp { id: content - // anchors.horizontalCenter: parent.horizontalCenter - // anchors.top: parent.top anchors.centerIn: parent - shouldBeActive: root.hasCurrent && !root.detachedMode + shouldBeActive: root.hasCurrent sourceComponent: Content { popouts: popoutState } - } - // Comp { - // id: winfo - // - // anchors.centerIn: parent - // shouldBeActive: root.detachedMode === "winfo" - // - // sourceComponent: WindowInfo { - // client: Hypr.activeToplevel - // screen: root.screen - // } - // } - // - // Comp { - // id: controlCenter - // - // anchors.centerIn: parent - // shouldBeActive: root.detachedMode === "any" - // - // sourceComponent: ControlCenter { - // active: root.queuedMode - // screen: root.screen - // - // onClose: root.close() - // } - // } + onActiveChanged: console.log("active:", content.implicitHeight) + } component Comp: Loader { id: comp