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

panel: Rework panel layout, and refactoring

Browse source
This commit is contained in:
Devin Lin 2021-10-12 13:50:36 +00:00
parent 957e5126a8
commit 7df05e09be
14 changed files with 229 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/mobileshell/TopPanelControls.qml Normal file
View file

@ -0,0 +1,15 @@
/*
* SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
*
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.12
import org.kde.plasma.core 2.0 as PlasmaCore
pragma Singleton
QtObject {
id: root
property real panelHeight: PlasmaCore.Units.gridUnit // set and updated in panel containment
}

1
components/mobileshell/qmldir
View file

@ -1,3 +1,4 @@
module org.kde.plasma.private.mobileshell
singleton HomeScreenControls 1.0 HomeScreenControls.qml
singleton TopPanelControls 1.0 TopPanelControls.qml

163
containments/panel/package/contents/ui/IndicatorsRow.qml
View file

@ -7,6 +7,7 @@
import QtQuick 2.12
import QtQuick.Controls 2.12 as Controls
import QtQuick.Layouts 1.3
import QtQml.Models 2.12
import QtGraphicalEffects 1.12
@ -28,13 +29,17 @@ import "indicators" as Indicators
Item {
id: indicatorsRow
required property var colorGroup
required property bool showGradientBackground
required property bool showDropShadow
required property color backgroundColor
property bool showSecondRow: false // show extra row with date and mobile provider
property alias colorScopeColor: icons.backgroundColor
property alias applets: appletIconsRow
property real textPixelSize: PlasmaCore.Units.gridUnit * 0.6
property real elementSpacing: PlasmaCore.Units.smallSpacing * 1.5
PlasmaCore.DataSource {
id: timeSource
engine: "time"
@ -48,9 +53,9 @@ Item {
cached: true
horizontalOffset: 0
verticalOffset: 1
radius: 4.0
radius: 6.0
samples: 17
color: Qt.rgba(0,0,0,0.8)
color: Qt.rgba(0,0,0,0.6)
source: icons
}
@ -61,40 +66,51 @@ Item {
colorGroup: indicatorsRow.colorGroup
anchors.fill: parent
// background
Rectangle {
Controls.Control {
id: control
topPadding: PlasmaCore.Units.smallSpacing
bottomPadding: PlasmaCore.Units.smallSpacing
rightPadding: PlasmaCore.Units.smallSpacing * 3
leftPadding: PlasmaCore.Units.smallSpacing * 3
anchors.fill: parent
background: Rectangle {
color: backgroundColor
}
Rectangle {
visible: showGradientBackground
anchors.fill: parent
gradient: Gradient {
GradientStop {
position: 1.0
color: "transparent"
}
GradientStop {
position: 0.0
color: Qt.rgba(0, 0, 0, 0.1)
contentItem: ColumnLayout {
spacing: PlasmaCore.Units.smallSpacing / 2
RowLayout {
id: row
Layout.fillWidth: true
Layout.maximumHeight: MobileShell.TopPanelControls.panelHeight - control.topPadding - control.bottomPadding
spacing: 0
// clock
PlasmaComponents.Label {
id: clock
property bool is24HourTime: plasmoid.nativeInterface.isSystem24HourFormat
Layout.fillHeight: true
text: Qt.formatTime(timeSource.data.Local.DateTime, is24HourTime ? "h:mm" : "h:mm ap")
color: PlasmaCore.ColorScope.textColor
verticalAlignment: Qt.AlignVCenter
font.pixelSize: textPixelSize
TapHandler {
onTapped: {
plasmoid.nativeInterface.launchApp("org.kde.kclock");
}
}
}
Loader {
id: strengthLoader
height: parent.height
width: item ? item.width : 0
active: signalStrengthProvider
sourceComponent: Indicators.SignalStrength {
provider: signalStrengthProvider
}
// spacing in the middle
Item {
Layout.fillWidth: true
}
Row {
id: statusNotifierIndicatorsRow
anchors.left: strengthLoader.right
height: parent.height
// system tray
Repeater {
id: statusNotifierRepeater
model: PlasmaCore.SortFilterModel {
@ -105,49 +121,72 @@ Item {
}
}
delegate: TaskWidget {}
}
}
PlasmaComponents.Label {
id: clock
property bool is24HourTime: plasmoid.nativeInterface.isSystem24HourFormat
anchors.fill: parent
text: Qt.formatTime(timeSource.data.Local.DateTime, is24HourTime ? "h:mm" : "h:mm ap")
color: PlasmaCore.ColorScope.textColor
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
font.pixelSize: height / 2
TapHandler {
onTapped: {
plasmoid.nativeInterface.launchApp("org.kde.kclock");
}
delegate: TaskWidget {
Layout.leftMargin: indicatorsRow.elementSpacing
}
}
// applet indicators
RowLayout {
id: appletIconsRow
anchors {
bottom: parent.bottom
right: simpleIndicatorsLayout.left
}
height: parent.height
Layout.leftMargin: indicatorsRow.elementSpacing
Layout.fillHeight: true
spacing: indicatorsRow.elementSpacing
visible: children.length > 0
}
// system indicators
RowLayout {
id: simpleIndicatorsLayout
anchors {
top: parent.top
bottom: parent.bottom
right: parent.right
rightMargin: PlasmaCore.Units.smallSpacing
id: indicators
Layout.leftMargin: PlasmaCore.Units.smallSpacing // applets have different spacing needs
Layout.fillHeight: true
spacing: indicatorsRow.elementSpacing
Indicators.SignalStrength {
provider: signalStrengthProvider
Layout.fillHeight: true
}
Indicators.Bluetooth {
provider: bluetoothProvider
Layout.fillHeight: true
}
Indicators.Wifi {
provider: wifiProvider
Layout.fillHeight: true
}
Indicators.Volume {
provider: volumeProvider
Layout.fillHeight: true
}
Indicators.Battery {
provider: batteryProvider
spacing: indicatorsRow.elementSpacing
labelHeight: textPixelSize
Layout.fillHeight: true
}
}
}
// extra row with date and mobile provider (for quicksettings panel)
RowLayout {
spacing: 0
visible: indicatorsRow.showSecondRow
Layout.fillWidth: true
PlasmaComponents.Label {
text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd. MMMM d")
color: PlasmaCore.ColorScope.disabledTextColor
font.pixelSize: indicatorsRow.textPixelSize * 0.8
}
Item { Layout.fillWidth: true }
PlasmaComponents.Label {
text: signalStrengthProvider.label
color: PlasmaCore.ColorScope.disabledTextColor
font.pixelSize: indicatorsRow.textPixelSize * 0.8
horizontalAlignment: Qt.AlignRight
}
}
}
Indicators.Bluetooth { provider: bluetoothProvider }
Indicators.Wifi { provider: wifiProvider }
Indicators.Volume { provider: volumeProvider }
Indicators.Battery { provider: batteryProvider }
}
}
}

1
containments/panel/package/contents/ui/TaskWidget.qml
View file

@ -23,6 +23,7 @@ Item {
}
PlasmaCore.IconItem {
id: icon
source: IconName ? IconName : Icon
width: Math.min(parent.width, parent.height)
height: width

3
containments/panel/package/contents/ui/indicators/Battery.qml
View file

@ -16,6 +16,7 @@ import "providers"
RowLayout {
required property BatteryProvider provider
property real labelHeight
visible: provider.isVisible
PW.BatteryIcon {
@ -36,6 +37,6 @@ RowLayout {
Layout.alignment: Qt.AlignVCenter
color: PlasmaCore.ColorScope.textColor
font.pixelSize: parent.height / 2
font.pixelSize: labelHeight
}
}

14
containments/panel/package/contents/ui/indicators/SignalStrength.qml
View file

@ -17,8 +17,8 @@ import "providers"
Item {
required property QtObject provider
width: strengthIcon.height + strengthLabel.width
Layout.minimumWidth: strengthIcon.height + strengthLabel.width
width: strengthIcon.height
Layout.minimumWidth: strengthIcon.height
PlasmaCore.IconItem {
id: strengthIcon
@ -30,14 +30,4 @@ Item {
source: provider.icon
}
PlasmaComponents.Label {
id: label
anchors.left: strengthIcon.right
anchors.verticalCenter: parent.verticalCenter
text: provider.label
color: PlasmaCore.ColorScope.textColor
font.pixelSize: parent.height / 2
}
}

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

@ -32,7 +32,21 @@ import "indicators/providers" as IndicatorProviders
Item {
id: root
width: 480
height: 30
height: PlasmaCore.Units.gridUnit
// set height binding to top panel API
Binding {
target: MobileShell.TopPanelControls
property: "panelHeight"
value: root.height
}
// set height binding to top panel API
Binding {
target: MobileShell.TopPanelControls
property: "panelHeight"
value: root.height
}
Plasmoid.backgroundHints: showingApp ? PlasmaCore.Types.StandardBackground : PlasmaCore.Types.NoBackground
@ -179,7 +193,6 @@ Item {
z: 1
colorGroup: showingApp ? PlasmaCore.Theme.HeaderColorGroup : PlasmaCore.Theme.ComplementaryColorGroup
backgroundColor: !showingApp ? "transparent" : root.backgroundColor
showGradientBackground: !showingApp
showDropShadow: !showingApp
}

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

@ -101,11 +101,15 @@ Item {
IndicatorsRow {
id: indicatorsRow
z: 1
Layout.leftMargin: -Kirigami.Units.largeSpacing
Layout.rightMargin: -Kirigami.Units.largeSpacing
Layout.fillWidth: true
Layout.preferredHeight: parentSlidingPanel.topPanelHeight
Layout.preferredHeight: parentSlidingPanel.topPanelHeight + PlasmaCore.Units.smallSpacing * 2
showSecondRow: true
colorGroup: PlasmaCore.Theme.NormalColorGroup
backgroundColor: "transparent"
showGradientBackground: false
showDropShadow: false
}

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

@ -255,7 +255,7 @@ PlasmaCore.ColorScope {
Window.window.offset = Qt.binding(() => {
// FIXME: find a more precise way to determine the top panel height
return plasmoid.formFactor === PlasmaCore.Types.Vertical ? PlasmaCore.Units.gridUnit : 0
return plasmoid.formFactor === PlasmaCore.Types.Vertical ? MobileShell.TopPanelControls.panelHeight : 0
});
}

105
look-and-feel/contents/lockscreen/SimpleHeaderBar.qml
View file

@ -6,6 +6,7 @@
*/
import QtQuick 2.12
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.12
@ -14,89 +15,73 @@ import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.plasma.workspace.components 2.0 as PW
import "indicators" as Indicators
import "indicators/providers" as Providers
// a simple version of the task panel
// in the future, it should share components with the existing task panel
PlasmaCore.ColorScope {
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
property real textPixelSize: PlasmaCore.Units.gridUnit * 0.6
layer.enabled: true
layer.effect: DropShadow {
visible: true
cached: true
horizontalOffset: 0
verticalOffset: 1
radius: 4.0
radius: 6.0
samples: 17
color: Qt.rgba(0,0,0,0.8)
color: Qt.rgba(0,0,0,0.6)
}
PlasmaCore.DataSource {
id: timeSource
engine: "time"
connectedSources: ["Local"]
interval: 60 * 1000
}
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop {
position: 1.0
color: "transparent"
}
GradientStop {
position: 0.0
color: Qt.rgba(0, 0, 0, 0.1)
}
}
}
Loader {
id: strengthLoader
height: parent.height
width: item ? item.width : 0
active: signalStrengthProviderLoader.item
sourceComponent: Indicators.SignalStrength {
provider: signalStrengthProviderLoader.item
}
}
Loader {
Providers.SignalStrengthProvider {
id: signalStrengthProviderLoader
source: Qt.resolvedUrl("indicators/providers/SignalStrengthProvider.qml")
}
PlasmaComponents.Label {
id: clock
Controls.Control {
topPadding: PlasmaCore.Units.smallSpacing
bottomPadding: PlasmaCore.Units.smallSpacing
rightPadding: PlasmaCore.Units.smallSpacing * 3
leftPadding: PlasmaCore.Units.smallSpacing * 3
anchors.fill: parent
text: Qt.formatTime(timeSource.data.Local.DateTime, root.is24HourTime ? "h:mm" : "h:mm ap")
color: PlasmaCore.ColorScope.textColor
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
font.pixelSize: height / 2
contentItem: RowLayout {
id: row
spacing: 0
Indicators.SignalStrength {
provider: signalStrengthProviderLoader
labelPixelSize: textPixelSize
Layout.fillHeight: true
}
// spacing in the middle
Item {
Layout.fillWidth: true
}
RowLayout {
id: appletIconsRow
anchors {
bottom: parent.bottom
right: simpleIndicatorsLayout.left
}
height: parent.height
}
id: indicators
spacing: PlasmaCore.Units.smallSpacing * 1.5
Layout.fillHeight: true
RowLayout {
id: simpleIndicatorsLayout
anchors {
top: parent.top
bottom: parent.bottom
right: parent.right
rightMargin: PlasmaCore.Units.smallSpacing
Indicators.Bluetooth {
Layout.fillHeight: true
}
Indicators.Wifi {
Layout.fillHeight: true
}
Indicators.Volume {
Layout.fillHeight: true
}
Indicators.Battery {
spacing: PlasmaCore.Units.smallSpacing * 1.5
labelPixelSize: textPixelSize
Layout.fillHeight: true
}
}
}
Indicators.Bluetooth {}
Indicators.Wifi {}
Indicators.Volume {}
Indicators.Battery {}
}
}

4
look-and-feel/contents/lockscreen/indicators/Battery.qml
View file

@ -15,6 +15,8 @@ import org.kde.plasma.workspace.components 2.0 as PW
RowLayout {
visible: pmSource.data["Battery"]["Has Cumulative"]
property real labelPixelSize
PW.BatteryIcon {
id: battery
Layout.preferredWidth: height
@ -39,6 +41,6 @@ RowLayout {
Layout.alignment: Qt.AlignVCenter
color: PlasmaCore.ColorScope.textColor
font.pixelSize: parent.height / 2
font.pixelSize: labelPixelSize
}
}

9
look-and-feel/contents/lockscreen/indicators/SignalStrength.qml
View file

@ -16,8 +16,10 @@ import "providers"
Item {
required property QtObject provider
width: strengthIcon.height + strengthLabel.width
Layout.minimumWidth: strengthIcon.height + strengthLabel.width
property real labelPixelSize
width: strengthIcon.height + label.width
Layout.minimumWidth: strengthIcon.height + label.width
PlasmaCore.IconItem {
id: strengthIcon
@ -32,11 +34,12 @@ Item {
PlasmaComponents.Label {
id: label
anchors.leftMargin: PlasmaCore.Units.smallSpacing
anchors.left: strengthIcon.right
anchors.verticalCenter: parent.verticalCenter
text: provider.label
color: PlasmaCore.ColorScope.textColor
font.pixelSize: parent.height / 2
font.pixelSize: labelPixelSize
}
}

4
shell/contents/layout.js
View file

@ -3,12 +3,14 @@ for (var j = 0; j < desktopsArray.length; j++) {
desktopsArray[j].wallpaperPlugin = "org.kde.image";
}
desktopsArray[0].addWidget("org.kde.phone.krunner", 0, 0, screenGeometry(0).width, 20)
// keep this list in sync with shell/contents/updates/panelsfix.js
var panel = new Panel("org.kde.phone.panel");
panel.location = "top";
panel.addWidget("org.kde.plasma.notifications");
panel.addWidget("org.kde.plasma.mediacontroller");
panel.height = 1 * gridUnit;
panel.height = 1.25 * gridUnit; // HACK: supposed to be gridUnit + smallSpacing, but it doesn't seem to give the correct number
var bottomPanel = new Panel("org.kde.phone.taskpanel")
bottomPanel.location = "bottom";
bottomPanel.height = 2 * gridUnit;

1
shell/contents/updates/panelsfix.js
View file

@ -16,6 +16,7 @@ if (!topFound) {
topPanel.addWidget("org.kde.plasma.notifications");
topPanel.addWidget("org.kde.plasma.mediacontroller");
topPanel.location = "top";
topPanel.height = 1.25 * gridUnit;
}
if (!bottomFound) {
let bottomPanel = new Panel("org.kde.phone.taskpanel")