marcoallegretti/shift-shell
1
0
Fork 0
mirror of https://invent.kde.org/marcoa/shift-shell.git synced 2026-04-29 15:03:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Top panel: some simplification and smoother

Browse source 
Simplify the code of the collapsing quick settings panel a bit, and make animations and positioning way smoother
This commit is contained in:
Marco Martin 2021-06-16 09:30:28 +00:00
parent 992950085d
commit 7ef50d4af4
3 changed files with 102 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
containments/panel/package/contents/ui/SlidingContainer.qml
View file

@ -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); }

2
containments/panel/package/contents/ui/main.qml
View file

@ -199,7 +199,7 @@ Item {
topPanelHeight: topPanel.height
topEmptyAreaHeight: quickSettings.topEmptyAreaHeight
collapsedHeight: quickSettings.collapsedHeight
fullyOpenHeight: quickSettings.implicitHeight
fullyOpenHeight: quickSettings.expandedHeight
appletsShown: fullRepresentationView.count > 0

204
containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml
View file

@ -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;
}
}
}
}
}