diff --git a/containments/panel/package/contents/ui/SlidingContainer.qml b/containments/panel/package/contents/ui/SlidingContainer.qml index 6b1c9547..c1183d5d 100644 --- a/containments/panel/package/contents/ui/SlidingContainer.qml +++ b/containments/panel/package/contents/ui/SlidingContainer.qml @@ -30,7 +30,7 @@ NanoShell.FullScreenOverlay { readonly property bool wideScreen: width > height || width > units.gridUnit * 45 readonly property int drawerWidth: wideScreen ? contentItem.implicitWidth : width - + property int drawerX: 0 property alias fixedArea: mainScope property alias flickable: mainFlickable @@ -53,7 +53,7 @@ NanoShell.FullScreenOverlay { onInitiallyOpenedChanged: { if (initiallyOpened) mainFlickable.focus = true; } - + function offsetToContentY(num) { return -num + window.fullyOpenHeight; } function contentYToOffset(num) { return offsetToContentY(num); } diff --git a/containments/panel/package/contents/ui/main.qml b/containments/panel/package/contents/ui/main.qml index 167d9d94..871fe9b4 100644 --- a/containments/panel/package/contents/ui/main.qml +++ b/containments/panel/package/contents/ui/main.qml @@ -199,7 +199,7 @@ Item { topPanelHeight: topPanel.height topEmptyAreaHeight: quickSettings.topEmptyAreaHeight collapsedHeight: quickSettings.collapsedHeight - fullyOpenHeight: quickSettings.implicitHeight + fullyOpenHeight: quickSettings.expandedHeight appletsShown: fullRepresentationView.count > 0 diff --git a/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml b/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml index 19e585af..2c4d59e6 100644 --- a/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml +++ b/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml @@ -24,26 +24,27 @@ import "../" Item { id: root implicitWidth: column.implicitWidth + PlasmaCore.Units.smallSpacing * 6 - implicitHeight: background.implicitHeight + implicitHeight: expandedHeight signal expandRequested signal closeRequested signal closed property bool expandedMode: parentSlidingPanel.wideScreen + 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 + : Math.max(0, Math.min(1, (parentSlidingPanel.offset - collapsedHeight) /(expandedHeight-collapsedHeight))) readonly property real topEmptyAreaHeight: parentSlidingPanel.userInteracting ? (root.height - collapsedHeight) * (1 - expandedRatio) : (expandedMode ? 0 : root.height - collapsedHeight) - - 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 - + + + readonly property real collapsedHeight: column.Layout.minimumHeight + background.fixedMargins.top + background.fixedMargins.bottom + + readonly property real expandedHeight: column.Layout.maximumHeight + background.fixedMargins.top + background.fixedMargins.bottom + Connections { target: root.parentSlidingPanel function onUserInteractingChanged() { @@ -71,51 +72,9 @@ Item { property QuickSettingsModel quickSettingsModel: QuickSettingsModel {} - - // bottom "handle bar" - Item { - id: bottomBar - 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.Separator { - anchors { - left: parent.left - right: parent.right - } - color: PlasmaCore.Theme.disabledTextColor - 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; - } - } - } - } - PlasmaCore.FrameSvgItem { id: background - implicitHeight: column.implicitHeight + bottomBar.height + margins.top + fixedMargins.bottom + implicitHeight: root.expandedHeight enabledBorders: parentSlidingPanel.wideScreen ? PlasmaCore.FrameSvg.AllBorders : PlasmaCore.FrameSvg.BottomBorder anchors.fill: parent imagePath: "widgets/background" @@ -125,13 +84,14 @@ Item { anchors { leftMargin: parent.fixedMargins.left rightMargin: parent.fixedMargins.right - bottomMargin: parent.fixedMargins.bottom + bottomBar.height + bottomMargin: parent.fixedMargins.bottom left: parent.left right: parent.right bottom: parent.bottom } spacing: 0 - clip: expandedRatio > 0 && expandedRatio < 1 // only clip when necessary to improve performance + height: Layout.minimumHeight * (1 - root.expandedRatio) + (Layout.maximumHeight * root.expandedRatio) + // clip: expandedRatio > 0 && expandedRatio < 1 // only clip when necessary to improve performance readonly property real cellSizeHint: units.iconSizes.large + units.smallSpacing * 6 readonly property real columnWidth: Math.floor(width / Math.floor(width / cellSizeHint)) @@ -145,69 +105,103 @@ Item { backgroundColor: "transparent" showGradientBackground: false showDropShadow: false - transform: Translate { - y: otherRowsHeight * (1 - root.expandedRatio) - } } - - Flow { - id: flow - Layout.alignment: Qt.AlignHCenter + ColumnLayout { + clip: expandedRatio > 0 && expandedRatio < 1 // only clip when necessary to improve performance Layout.fillWidth: true - 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) - + Layout.fillHeight: true + Layout.minimumHeight: flow.Layout.minimumHeight + spacing: 0 - Repeater { - model: quickSettingsModel.model - delegate: Delegate { - id: delegateItem - settingsModel: quickSettingsModel - width: flow.columnWidth - - labelOpacity: y > 0 ? 1 : root.expandedRatio - opacity: y <= 0 ? 1 : root.expandedRatio - transform: Translate { - y: otherRowsHeight * (1 - root.expandedRatio) - PlasmaCore.Units.smallSpacing * 2 - } + Layout.topMargin: PlasmaCore.Units.largeSpacing + Flow { + id: flow + Layout.fillWidth: true + Layout.minimumHeight: cellSizeHint + Layout.preferredHeight: implicitHeight + Layout.maximumHeight: (flow.cellSizeHint * Math.ceil((flow.children.length - 1) / flow.columns)) - Connections { - target: delegateItem - onCloseRequested: root.closeRequested(); + readonly property real cellSizeHint: units.iconSizes.large + units.smallSpacing * 6 + readonly property real columns: Math.floor(width / cellSizeHint) + readonly property real columnWidth: Math.floor(width / columns) + + spacing: 0 + + Repeater { + model: quickSettingsModel.model + delegate: Delegate { + id: delegateItem + settingsModel: quickSettingsModel + width: root.expandedRatio < 0.4 + ? Math.max(implicitWidth + PlasmaCore.Units.smallSpacing * 2, flow.width / (flow.columns + 1)) + : Math.max(implicitWidth + PlasmaCore.Units.smallSpacing * 2, + (flow.width / (flow.columns + 1)) * (1 - root.expandedRatio) + (flow.width / flow.columns) * root.expandedRatio) + + labelOpacity: y > 0 ? 1 : root.expandedRatio + opacity: y <= 0 ? 1 : root.expandedRatio + + Connections { + target: delegateItem + onCloseRequested: root.closeRequested(); + } + Connections { + target: root + onClosed: delegateItem.panelClosed(); + } } - Connections { - target: root - onClosed: delegateItem.panelClosed(); + } + + move: Transition { + NumberAnimation { + duration: units.shortDuration + easing.type: Easing.Linear + properties: "x,y" } } } - - move: Transition { - NumberAnimation { - duration: units.shortDuration - easing.type: Easing.Linear - properties: "x,y" - } + BrightnessItem { + id: brightnessSlider + Layout.topMargin: units.largeSpacing + Layout.bottomMargin: units.smallSpacing + Layout.leftMargin: units.largeSpacing + Layout.rightMargin: units.largeSpacing + Layout.fillWidth: true + + opacity: root.expandedRatio } } - BrightnessItem { - id: brightnessSlider - Layout.alignment: Qt.AlignHCenter - Layout.topMargin: units.smallSpacing - Layout.bottomMargin: units.smallSpacing - Layout.leftMargin: units.largeSpacing - Layout.rightMargin: units.largeSpacing + + // bottom "handle bar" + Item { + id: bottomBar Layout.fillWidth: true - - opacity: root.expandedRatio - transform: Translate { - y: otherRowsHeight * (1 - root.expandedRatio) - PlasmaCore.Units.smallSpacing * 2 + visible: !parentSlidingPanel.wideScreen + implicitHeight: visible ? Math.round(PlasmaCore.Units.gridUnit * 1.3) : 0 + z: 1 + Kirigami.Separator { + anchors { + left: parent.left + right: parent.right + } + color: PlasmaCore.Theme.disabledTextColor + 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; + } + } } } }