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

Use Plasma Theme and layout fixes

Browse source 
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
This commit is contained in:
Marco Martin 2021-06-09 08:44:48 +00:00
parent b7525e4196
commit 5da75348f7
5 changed files with 99 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
containments/panel/package/contents/ui/DrawerBackground.qml
View file

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

8
containments/panel/package/contents/ui/FullContainer.qml
View file

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

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

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

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

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

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

@ -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 {