From 5da75348f79a007e572baf2a3c80f77f766b4f8f Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Wed, 9 Jun 2021 08:44:48 +0000 Subject: [PATCH] Use Plasma Theme and layout fixes This moves all background rendering of elements in the top sliding panel to use the plasma theme, making full use of themes that can be downloaded from the store, doing so decreases the usage of the Qt.GraphicalEffects import which is slow and not in Qt6. There are some layout and behavioral fixes especially in widescreen mode --- .../package/contents/ui/DrawerBackground.qml | 34 ++--- .../package/contents/ui/FullContainer.qml | 8 +- .../package/contents/ui/SlidingContainer.qml | 23 +++- .../panel/package/contents/ui/main.qml | 23 ++-- .../ui/quicksettings/QuickSettingsPanel.qml | 121 ++++++++---------- 5 files changed, 99 insertions(+), 110 deletions(-) diff --git a/containments/panel/package/contents/ui/DrawerBackground.qml b/containments/panel/package/contents/ui/DrawerBackground.qml index 1e158fe8..e922de7e 100644 --- a/containments/panel/package/contents/ui/DrawerBackground.qml +++ b/containments/panel/package/contents/ui/DrawerBackground.qml @@ -14,35 +14,17 @@ import org.kde.kirigami 2.12 as Kirigami QQC2.Control { id: root - - required property color backgroundColor - - leftPadding: units.largeSpacing - topPadding: units.largeSpacing - rightPadding: units.largeSpacing - bottomPadding: units.largeSpacing - background: Item { + leftPadding: frameSvg.margins.left + topPadding: frameSvg.margins.top + rightPadding: frameSvg.margins.right + bottomPadding: frameSvg.margins.bottom + + background: PlasmaCore.FrameSvgItem { + id: frameSvg + imagePath: "widgets/background" MouseArea { anchors.fill: parent } - PlasmaCore.FrameSvgItem { - imagePath: "widgets/panel-background" - prefix: "shadow" - anchors.fill: container - anchors.margins: -PlasmaCore.Units.smallSpacing - } - Rectangle { - id: container - color: backgroundColor - anchors { - fill: parent - leftMargin: PlasmaCore.Units.smallSpacing - rightMargin: PlasmaCore.Units.smallSpacing - topMargin: PlasmaCore.Units.smallSpacing - bottomMargin: PlasmaCore.Units.smallSpacing - } - radius: PlasmaCore.Units.smallSpacing - } } } diff --git a/containments/panel/package/contents/ui/FullContainer.qml b/containments/panel/package/contents/ui/FullContainer.qml index 2f1e2c1a..688899bd 100644 --- a/containments/panel/package/contents/ui/FullContainer.qml +++ b/containments/panel/package/contents/ui/FullContainer.qml @@ -17,7 +17,6 @@ DrawerBackground { property ObjectModel fullRepresentationModel property ListView fullRepresentationView - backgroundColor: (applet.backgroundHints === PlasmaCore.Types.NoBackground) ? "transparent" : Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.backgroundColor, {"alpha": 0.8*255}) visible: shouldBeVisible property bool shouldBeVisible: applet && (applet.status != PlasmaCore.Types.HiddenStatus && applet.status != PlasmaCore.Types.PassiveStatus) @@ -35,7 +34,12 @@ DrawerBackground { return; } } - fullRepresentationModel.append(this); + if (applet && applet.pluginName == "org.kde.plasma.notifications") { + fullRepresentationModel.insert(0, this); + } else { + fullRepresentationModel.append(this); + } + fullRepresentationView.forceLayout(); fullRepresentationView.currentIndex = ObjectModel.index; diff --git a/containments/panel/package/contents/ui/SlidingContainer.qml b/containments/panel/package/contents/ui/SlidingContainer.qml index c7def8b7..7c2067da 100644 --- a/containments/panel/package/contents/ui/SlidingContainer.qml +++ b/containments/panel/package/contents/ui/SlidingContainer.qml @@ -28,8 +28,8 @@ NanoShell.FullScreenOverlay { readonly property int openedContentY: wideScreen || offset > (collapsedHeight + openThreshold) ? -topEmptyAreaHeight : offsetToContentY(collapsedHeight) readonly property int closedContentY: mainFlickable.contentHeight - readonly property bool wideScreen: width > height || width > units.gridUnit * 45 - readonly property int drawerWidth: wideScreen ? contentItem.implicitWidth : width + readonly property bool wideScreen: false//width > height || width > units.gridUnit * 45 + readonly property int drawerWidth: 400//wideScreen ? contentItem.implicitWidth : width property int drawerX: 0 property alias fixedArea: mainScope @@ -88,6 +88,11 @@ NanoShell.FullScreenOverlay { closeAnim.restart(); initiallyOpened = false; } + function expand() { + cancelAnimations(); + expandAnim.restart(); + initiallyOpened = true; + } function updateState() { cancelAnimations(); if (window.offset <= 0) { @@ -140,6 +145,14 @@ NanoShell.FullScreenOverlay { easing.type: Easing.InOutQuad to: window.openedContentY } + PropertyAnimation { + id: expandAnim + target: mainFlickable + properties: "contentY" + duration: PlasmaCore.Units.longDuration + easing.type: Easing.InOutQuad + to: 0 + } // fullscreen background Rectangle { @@ -203,13 +216,13 @@ NanoShell.FullScreenOverlay { width: parent.width height: mainFlickable.contentHeight onClicked: window.close(); - + // actual sliding contents PlasmaComponents.Control { id: contentArea z: 1 - x: drawerX - width: drawerWidth + x: Math.max(0, Math.min(window.drawerX, window.width - window.drawerWidth)) + width: Math.min(window.width, window.drawerWidth) } } } diff --git a/containments/panel/package/contents/ui/main.qml b/containments/panel/package/contents/ui/main.qml index 2ef44927..c2c45df6 100644 --- a/containments/panel/package/contents/ui/main.qml +++ b/containments/panel/package/contents/ui/main.qml @@ -70,7 +70,7 @@ Item { fullContainer = fullContainerComponent.createObject(fullRepresentationView.contentItem, {"fullRepresentationModel": fullRepresentationModel, "fullRepresentationView": fullRepresentationView}); } - applet.fullRepresentationItem.parent = fullContainer; + // applet.fullRepresentationItem.parent = fullContainer; fullContainer.applet = applet; fullContainer.contentItem = applet.fullRepresentationItem; //applet.fullRepresentationItem.anchors.fill = fullContainer; @@ -209,12 +209,12 @@ Item { contentItem: MouseArea { // mousearea captures touch presses so that the flickable picks them up for swiping - implicitWidth: slidingPanel.width + implicitWidth: slidingPanel.wideScreen ? panelContents.implicitWidth : slidingPanel.width implicitHeight: Math.min(slidingPanel.height, quickSettings.implicitHeight) GridLayout { id: panelContents - anchors.fill: parent + width: slidingPanel.wideScreen ? Math.min(parent.width, implicitWidth) : parent.width columns: slidingPanel.wideScreen ? 2 : 1 rows: slidingPanel.wideScreen ? 1 : 2 @@ -229,18 +229,21 @@ Item { Layout.preferredWidth: slidingPanel.wideScreen ? Math.min(slidingPanel.width/2, units.gridUnit * 25) : panelContents.width parentSlidingPanel: slidingPanel - onCloseRequested: slidingPanel.hide() + onExpandRequested: slidingPanel.expand() + onCloseRequested: slidingPanel.close() } // notifications ListView { id: fullRepresentationView implicitHeight: units.gridUnit * 20 - Layout.topMargin: slidingPanel.wideScreen ? 0 : Math.round(Kirigami.Units.gridUnit * 1.5) // add height of bottom bar Layout.preferredWidth: slidingPanel.wideScreen ? Math.min(slidingPanel.width/2, quickSettings.width*fullRepresentationModel.count) : panelContents.width - Layout.preferredHeight: Math.min(plasmoid.screenGeometry.height - quickSettings.implicitHeight - bottomBar.height + slidingPanel.topEmptyAreaHeight, implicitHeight) + Layout.preferredHeight: slidingPanel.wideScreen + ? Math.min(units.gridUnit * 20, Math.max(units.gridUnit * 15, quickSettings.implicitHeight)) + : Math.min(plasmoid.screenGeometry.height - quickSettings.implicitHeight - bottomBar.height + slidingPanel.topEmptyAreaHeight, implicitHeight) + z: 1 - interactive: count > 0 && width < contentWidth + interactive: true//count > 0 && width < contentWidth clip: slidingPanel.wideScreen y: slidingPanel.wideScreen ? 0 : quickSettings.trueHeight @@ -251,11 +254,11 @@ Item { return fullRepresentationModel.count > 0 && slidingPanel.offset / slidingPanel.collapsedHeight; } } - preferredHighlightBegin: slidingPanel.drawerX + //preferredHighlightBegin: slidingPanel.drawerX cacheBuffer: width * 100 highlightFollowsCurrentItem: true - highlightRangeMode: ListView.StrictlyEnforceRange + highlightRangeMode: ListView.ApplyRange highlightMoveDuration: units.longDuration snapMode: slidingPanel.wideScreen ? ListView.NoSnap : ListView.SnapOneItem model: ObjectModel { @@ -279,8 +282,6 @@ Item { right: parent.right bottom: parent.bottom } - backgroundColor: Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.backgroundColor, {"alpha": 0.8*255}) - parent: slidingPanel.fixedArea opacity: fullRepresentationView.opacity visible: !slidingPanel.wideScreen && fullRepresentationModel.count > 1 diff --git a/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml b/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml index 3f8840dd..19e585af 100644 --- a/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml +++ b/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml @@ -24,19 +24,23 @@ import "../" Item { id: root implicitWidth: column.implicitWidth + PlasmaCore.Units.smallSpacing * 6 - implicitHeight: column.implicitHeight + PlasmaCore.Units.smallSpacing * 2 + implicitHeight: background.implicitHeight + signal expandRequested signal closeRequested signal closed property bool expandedMode: parentSlidingPanel.wideScreen - readonly property real expandedRatio: expandedMode ? 1 : Math.max(0, Math.min(1, (parentSlidingPanel.offset - (parentSlidingPanel.topPanelHeight + firstRowHeight) - parentSlidingPanel.topPanelHeight) / otherRowsHeight + 0.05)) // HACK: add 0.05 to prevent jumping since this height isn't exact + readonly property real expandedRatio: expandedMode + ? 1 + // This counts also all spacings in form of Lyout.topMargin that some elements has + : Math.max(0, Math.min(1, (parentSlidingPanel.offset - firstRowHeight - indicatorsRow.height - Kirigami.Units.largeSpacing - Kirigami.Units.smallSpacing * 2 - bottomBar.height - background.margins.top -background.fixedMargins.bottom) / otherRowsHeight + 0.05)) // HACK: add 0.05 to prevent jumping since this height isn't exact readonly property real topEmptyAreaHeight: parentSlidingPanel.userInteracting ? (root.height - collapsedHeight) * (1 - expandedRatio) : (expandedMode ? 0 : root.height - collapsedHeight) - readonly property real collapsedHeight: parentSlidingPanel.topPanelHeight + firstRowHeight + PlasmaCore.Units.smallSpacing * 2 + readonly property real collapsedHeight: parentSlidingPanel.topPanelHeight + firstRowHeight + bottomBar.height + background.margins.top + background.fixedMargins.bottom readonly property real firstRowHeight: flow.children[0].height readonly property real otherRowsHeight: column.implicitHeight - firstRowHeight - parentSlidingPanel.topPanelHeight @@ -67,80 +71,65 @@ Item { property QuickSettingsModel quickSettingsModel: QuickSettingsModel {} - // shadow below panel (only if not widescreen) - Rectangle { - visible: !parentSlidingPanel.wideScreen - anchors.bottom: background.bottom - anchors.left: background.left - anchors.right: background.right - height: PlasmaCore.Units.gridUnit - gradient: Gradient { - GradientStop { - position: 0.0 - color: Qt.rgba(0, 0, 0, 0.05) - } - GradientStop { - position: 1.0 - color: "transparent" - } - } - } - // shadow for bottom bar - RectangularGlow { - z: 1 - anchors.topMargin: 1 - anchors.fill: bottomBar - cached: true - glowRadius: 4 - spread: 0.2 - color: Qt.rgba(0, 0, 0, 0.1) - } - // shadow for whole panel (only if widescreen) - RectangularGlow { - visible: parentSlidingPanel.wideScreen - anchors.topMargin: 1 - anchors.top: background.top - anchors.left: background.left - anchors.right: background.right - anchors.bottom: bottomBar.bottom - cached: true - glowRadius: 4 - spread: 0.2 - color: Qt.rgba(0, 0, 0, 0.1) - } // bottom "handle bar" - Rectangle { + Item { id: bottomBar - anchors.top: background.bottom - anchors.left: background.left - anchors.right: background.right - color: PlasmaCore.Theme.backgroundColor - height: Math.round(PlasmaCore.Units.gridUnit * 1.3) + anchors { + bottom: background.bottom + left: background.left + right: background.right + leftMargin: background.fixedMargins.left + rightMargin: background.fixedMargins.right + bottomMargin: background.fixedMargins.bottom + } + visible: !parentSlidingPanel.wideScreen + height: visible ? Math.round(PlasmaCore.Units.gridUnit * 1.3) : 0 z: 1 - - Kirigami.Icon { - visible: !parentSlidingPanel.wideScreen + Kirigami.Separator { + anchors { + left: parent.left + right: parent.right + } color: PlasmaCore.Theme.disabledTextColor - source: expandedRatio >= 1 ? "go-up-symbolic" : "go-down-symbolic" + opacity: 0.3 + } + Kirigami.Icon { + color: PlasmaCore.Theme.disabledTextColor + source: expandedRatio >= 0.5 ? "go-up-symbolic" : "go-down-symbolic" implicitWidth: PlasmaCore.Units.gridUnit implicitHeight: width anchors.centerIn: parent } + TapHandler { + onTapped: { + if (root.expandedMode) { + root.closeRequested(); + } else { + root.expandRequested(); + root.expandedMode = true; + } + } + } } - Rectangle { + PlasmaCore.FrameSvgItem { id: background - color: PlasmaCore.Theme.backgroundColor + implicitHeight: column.implicitHeight + bottomBar.height + margins.top + fixedMargins.bottom + enabledBorders: parentSlidingPanel.wideScreen ? PlasmaCore.FrameSvg.AllBorders : PlasmaCore.FrameSvg.BottomBorder anchors.fill: parent - + imagePath: "widgets/background" + ColumnLayout { id: column - anchors.leftMargin: PlasmaCore.Units.smallSpacing - anchors.rightMargin: PlasmaCore.Units.smallSpacing - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom + anchors { + leftMargin: parent.fixedMargins.left + rightMargin: parent.fixedMargins.right + bottomMargin: parent.fixedMargins.bottom + bottomBar.height + left: parent.left + right: parent.right + bottom: parent.bottom + } spacing: 0 clip: expandedRatio > 0 && expandedRatio < 1 // only clip when necessary to improve performance @@ -157,7 +146,7 @@ Item { showGradientBackground: false showDropShadow: false transform: Translate { - y: otherRowsHeight * (1 - root.expandedRatio) - PlasmaCore.Units.smallSpacing + y: otherRowsHeight * (1 - root.expandedRatio) } } @@ -165,14 +154,14 @@ Item { id: flow Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true - Layout.leftMargin: units.smallSpacing + (units.largeSpacing - units.smallSpacing) * root.expandedRatio - Layout.rightMargin: units.smallSpacing + (units.largeSpacing - units.smallSpacing) * root.expandedRatio + Layout.leftMargin: root.expandedRatio < 0.4 ? -background.fixedMargins.left * (1 - root.expandedRatio) : 0 + Layout.rightMargin: root.expandedRatio < 0.4 ? -background.fixedMargins.right * (1 - root.expandedRatio) : 0 Layout.topMargin: units.largeSpacing readonly property real cellSizeHint: units.iconSizes.large + units.smallSpacing * 6 readonly property real columns: Math.floor(width / cellSizeHint) readonly property real columnsWhenCollapsed: 1.05 // .05 to account for the fact that we have an overshoot on the panel on first flick, we don't want the movement to be jarring - readonly property real columnWidth: Math.floor(width / (columns + (columnsWhenCollapsed - columnsWhenCollapsed * root.expandedRatio))) + readonly property real columnWidth: Math.floor(width / columns) spacing: 0 Repeater {