mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-08-03 10:14:45 +00:00
Top panel: some simplification and smoother
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
parent
992950085d
commit
7ef50d4af4
3 changed files with 102 additions and 108 deletions
|
|
@ -199,7 +199,7 @@ Item {
|
||||||
topPanelHeight: topPanel.height
|
topPanelHeight: topPanel.height
|
||||||
topEmptyAreaHeight: quickSettings.topEmptyAreaHeight
|
topEmptyAreaHeight: quickSettings.topEmptyAreaHeight
|
||||||
collapsedHeight: quickSettings.collapsedHeight
|
collapsedHeight: quickSettings.collapsedHeight
|
||||||
fullyOpenHeight: quickSettings.implicitHeight
|
fullyOpenHeight: quickSettings.expandedHeight
|
||||||
|
|
||||||
appletsShown: fullRepresentationView.count > 0
|
appletsShown: fullRepresentationView.count > 0
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,25 +24,26 @@ import "../"
|
||||||
Item {
|
Item {
|
||||||
id: root
|
id: root
|
||||||
implicitWidth: column.implicitWidth + PlasmaCore.Units.smallSpacing * 6
|
implicitWidth: column.implicitWidth + PlasmaCore.Units.smallSpacing * 6
|
||||||
implicitHeight: background.implicitHeight
|
implicitHeight: expandedHeight
|
||||||
|
|
||||||
signal expandRequested
|
signal expandRequested
|
||||||
signal closeRequested
|
signal closeRequested
|
||||||
signal closed
|
signal closed
|
||||||
|
|
||||||
property bool expandedMode: parentSlidingPanel.wideScreen
|
property bool expandedMode: parentSlidingPanel.wideScreen
|
||||||
|
|
||||||
readonly property real expandedRatio: expandedMode
|
readonly property real expandedRatio: expandedMode
|
||||||
? 1
|
? 1
|
||||||
// This counts also all spacings in form of Lyout.topMargin that some elements has
|
: Math.max(0, Math.min(1, (parentSlidingPanel.offset - collapsedHeight) /(expandedHeight-collapsedHeight)))
|
||||||
: 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
|
readonly property real topEmptyAreaHeight: parentSlidingPanel.userInteracting
|
||||||
? (root.height - collapsedHeight) * (1 - expandedRatio)
|
? (root.height - collapsedHeight) * (1 - expandedRatio)
|
||||||
: (expandedMode ? 0 : root.height - collapsedHeight)
|
: (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 collapsedHeight: column.Layout.minimumHeight + background.fixedMargins.top + background.fixedMargins.bottom
|
||||||
readonly property real otherRowsHeight: column.implicitHeight - firstRowHeight - parentSlidingPanel.topPanelHeight
|
|
||||||
|
readonly property real expandedHeight: column.Layout.maximumHeight + background.fixedMargins.top + background.fixedMargins.bottom
|
||||||
|
|
||||||
Connections {
|
Connections {
|
||||||
target: root.parentSlidingPanel
|
target: root.parentSlidingPanel
|
||||||
|
|
@ -71,20 +72,111 @@ Item {
|
||||||
|
|
||||||
property QuickSettingsModel quickSettingsModel: QuickSettingsModel {}
|
property QuickSettingsModel quickSettingsModel: QuickSettingsModel {}
|
||||||
|
|
||||||
|
PlasmaCore.FrameSvgItem {
|
||||||
|
id: background
|
||||||
|
implicitHeight: root.expandedHeight
|
||||||
|
enabledBorders: parentSlidingPanel.wideScreen ? PlasmaCore.FrameSvg.AllBorders : PlasmaCore.FrameSvg.BottomBorder
|
||||||
|
anchors.fill: parent
|
||||||
|
imagePath: "widgets/background"
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
id: column
|
||||||
|
anchors {
|
||||||
|
leftMargin: parent.fixedMargins.left
|
||||||
|
rightMargin: parent.fixedMargins.right
|
||||||
|
bottomMargin: parent.fixedMargins.bottom
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
bottom: parent.bottom
|
||||||
|
}
|
||||||
|
spacing: 0
|
||||||
|
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))
|
||||||
|
|
||||||
|
IndicatorsRow {
|
||||||
|
id: indicatorsRow
|
||||||
|
z: 1
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.preferredHeight: parentSlidingPanel.topPanelHeight
|
||||||
|
colorGroup: PlasmaCore.Theme.NormalColorGroup
|
||||||
|
backgroundColor: "transparent"
|
||||||
|
showGradientBackground: false
|
||||||
|
showDropShadow: false
|
||||||
|
}
|
||||||
|
ColumnLayout {
|
||||||
|
clip: expandedRatio > 0 && expandedRatio < 1 // only clip when necessary to improve performance
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.fillHeight: true
|
||||||
|
Layout.minimumHeight: flow.Layout.minimumHeight
|
||||||
|
|
||||||
|
spacing: 0
|
||||||
|
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))
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// bottom "handle bar"
|
// bottom "handle bar"
|
||||||
Item {
|
Item {
|
||||||
id: bottomBar
|
id: bottomBar
|
||||||
anchors {
|
Layout.fillWidth: true
|
||||||
bottom: background.bottom
|
|
||||||
left: background.left
|
|
||||||
right: background.right
|
|
||||||
leftMargin: background.fixedMargins.left
|
|
||||||
rightMargin: background.fixedMargins.right
|
|
||||||
bottomMargin: background.fixedMargins.bottom
|
|
||||||
}
|
|
||||||
visible: !parentSlidingPanel.wideScreen
|
visible: !parentSlidingPanel.wideScreen
|
||||||
height: visible ? Math.round(PlasmaCore.Units.gridUnit * 1.3) : 0
|
implicitHeight: visible ? Math.round(PlasmaCore.Units.gridUnit * 1.3) : 0
|
||||||
z: 1
|
z: 1
|
||||||
Kirigami.Separator {
|
Kirigami.Separator {
|
||||||
anchors {
|
anchors {
|
||||||
|
|
@ -112,104 +204,6 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
PlasmaCore.FrameSvgItem {
|
|
||||||
id: background
|
|
||||||
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: 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
|
|
||||||
|
|
||||||
readonly property real cellSizeHint: units.iconSizes.large + units.smallSpacing * 6
|
|
||||||
readonly property real columnWidth: Math.floor(width / Math.floor(width / cellSizeHint))
|
|
||||||
|
|
||||||
IndicatorsRow {
|
|
||||||
id: indicatorsRow
|
|
||||||
z: 1
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.preferredHeight: parentSlidingPanel.topPanelHeight
|
|
||||||
colorGroup: PlasmaCore.Theme.NormalColorGroup
|
|
||||||
backgroundColor: "transparent"
|
|
||||||
showGradientBackground: false
|
|
||||||
showDropShadow: false
|
|
||||||
transform: Translate {
|
|
||||||
y: otherRowsHeight * (1 - root.expandedRatio)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Flow {
|
|
||||||
id: flow
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
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)
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
Connections {
|
|
||||||
target: delegateItem
|
|
||||||
onCloseRequested: root.closeRequested();
|
|
||||||
}
|
|
||||||
Connections {
|
|
||||||
target: root
|
|
||||||
onClosed: delegateItem.panelClosed();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
move: Transition {
|
|
||||||
NumberAnimation {
|
|
||||||
duration: units.shortDuration
|
|
||||||
easing.type: Easing.Linear
|
|
||||||
properties: "x,y"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
BrightnessItem {
|
|
||||||
id: brightnessSlider
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
Layout.topMargin: units.smallSpacing
|
|
||||||
Layout.bottomMargin: units.smallSpacing
|
|
||||||
Layout.leftMargin: units.largeSpacing
|
|
||||||
Layout.rightMargin: units.largeSpacing
|
|
||||||
Layout.fillWidth: true
|
|
||||||
|
|
||||||
opacity: root.expandedRatio
|
|
||||||
transform: Translate {
|
|
||||||
y: otherRowsHeight * (1 - root.expandedRatio) - PlasmaCore.Units.smallSpacing * 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue