panel: Rework panel layout, and refactoring

components/mobileshell/TopPanelControls.qml

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

components/mobileshell/qmldir

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

containments/panel/package/contents/ui/IndicatorsRow.qml

@@ -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,93 +66,127 @@ Item {
         colorGroup: indicatorsRow.colorGroup
         anchors.fill: parent
         
-        // background
+        Controls.Control {
-        Rectangle {
+            id: control
-            anchors.fill: parent
+            topPadding: PlasmaCore.Units.smallSpacing
-            color: backgroundColor
+            bottomPadding: PlasmaCore.Units.smallSpacing
-        }
+            rightPadding: PlasmaCore.Units.smallSpacing * 3
-        Rectangle {
+            leftPadding: PlasmaCore.Units.smallSpacing * 3
-            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)
-                }
-            }
-        }
             
-        Loader {
+            anchors.fill: parent
-            id: strengthLoader
+            background: Rectangle {
-            height: parent.height
+                color: backgroundColor
-            width: item ? item.width : 0
-            active: signalStrengthProvider
-            sourceComponent: Indicators.SignalStrength {
-                provider: signalStrengthProvider
             }
-        }
             
-        Row {
+            contentItem: ColumnLayout {
-            id: statusNotifierIndicatorsRow
+                spacing: PlasmaCore.Units.smallSpacing / 2
-            anchors.left: strengthLoader.right
+                
-            height: parent.height
+                RowLayout {
-            Repeater {
+                    id: row
-                id: statusNotifierRepeater
+                    Layout.fillWidth: true
-                model: PlasmaCore.SortFilterModel {
+                    Layout.maximumHeight: MobileShell.TopPanelControls.panelHeight - control.topPadding - control.bottomPadding
-                    id: filteredStatusNotifiers
+                    spacing: 0
-                    filterRole: "Title"
+                    
-                    sourceModel: PlasmaCore.DataModel {
+                    // clock
-                        dataSource: statusNotifierSource
+                    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");
+                            }
+                        }
+                    }
+                    
+                    // spacing in the middle
+                    Item {
+                        Layout.fillWidth: true
+                    }
+                    
+                    // system tray
+                    Repeater {
+                        id: statusNotifierRepeater
+                        model: PlasmaCore.SortFilterModel {
+                            id: filteredStatusNotifiers
+                            filterRole: "Title"
+                            sourceModel: PlasmaCore.DataModel {
+                                dataSource: statusNotifierSource
+                            }
+                        }
+
+                        delegate: TaskWidget {
+                            Layout.leftMargin: indicatorsRow.elementSpacing
+                        }
+                    }
+                    
+                    // applet indicators
+                    RowLayout {
+                        id: appletIconsRow
+                        Layout.leftMargin: indicatorsRow.elementSpacing
+                        Layout.fillHeight: true
+                        spacing: indicatorsRow.elementSpacing
+                        visible: children.length > 0
+                    }
+                    
+                    // system indicators
+                    RowLayout {
+                        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
+                        }
                     }
                 }
                 
-                delegate: TaskWidget {}
+                // extra row with date and mobile provider (for quicksettings panel)
-            }
+                RowLayout {
-        }
+                    spacing: 0
+                    visible: indicatorsRow.showSecondRow
+                    Layout.fillWidth: true
                     
-        PlasmaComponents.Label {
+                    PlasmaComponents.Label {
-            id: clock
+                        text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd. MMMM d")
-            property bool is24HourTime: plasmoid.nativeInterface.isSystem24HourFormat
+                        color: PlasmaCore.ColorScope.disabledTextColor
-            
+                        font.pixelSize: indicatorsRow.textPixelSize * 0.8
-            anchors.fill: parent
+                    }
-            text: Qt.formatTime(timeSource.data.Local.DateTime, is24HourTime ? "h:mm" : "h:mm ap")
+                    Item { Layout.fillWidth: true }
-            color: PlasmaCore.ColorScope.textColor
+                    PlasmaComponents.Label {
-            horizontalAlignment: Qt.AlignHCenter
+                        text: signalStrengthProvider.label
-            verticalAlignment: Qt.AlignVCenter
+                        color: PlasmaCore.ColorScope.disabledTextColor
-            font.pixelSize: height / 2
+                        font.pixelSize: indicatorsRow.textPixelSize * 0.8
-
+                        horizontalAlignment: Qt.AlignRight
-            TapHandler {
+                    }
-                onTapped: {
-                    plasmoid.nativeInterface.launchApp("org.kde.kclock");
                 }
             }
         }
-
-        RowLayout {
-            id: appletIconsRow
-            anchors {
-                bottom: parent.bottom
-                right: simpleIndicatorsLayout.left
-            }
-            height: parent.height
-        }
-
-        RowLayout {
-            id: simpleIndicatorsLayout
-            anchors {
-                top: parent.top
-                bottom: parent.bottom
-                right: parent.right
-                rightMargin: PlasmaCore.Units.smallSpacing
-            }
-            Indicators.Bluetooth { provider: bluetoothProvider }
-            Indicators.Wifi { provider: wifiProvider }
-            Indicators.Volume { provider: volumeProvider }
-            Indicators.Battery { provider: batteryProvider }
-        }
     }
 }

containments/panel/package/contents/ui/TaskWidget.qml

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

containments/panel/package/contents/ui/indicators/Battery.qml

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

containments/panel/package/contents/ui/indicators/SignalStrength.qml

@@ -17,8 +17,8 @@ import "providers"
 Item {
     required property QtObject provider
     
-    width: strengthIcon.height + strengthLabel.width
+    width: strengthIcon.height
-    Layout.minimumWidth: strengthIcon.height + strengthLabel.width
+    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
-    }
 }

containments/panel/package/contents/ui/main.qml

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

containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml

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

containments/taskpanel/package/contents/ui/main.qml

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

look-and-feel/contents/lockscreen/SimpleHeaderBar.qml

@@ -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 {
+    Providers.SignalStrengthProvider {
-        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 {
         id: signalStrengthProviderLoader
-        source: Qt.resolvedUrl("indicators/providers/SignalStrengthProvider.qml")
     }
     
-    PlasmaComponents.Label {
+    Controls.Control {
-        id: clock
+        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
-    }
         
-    RowLayout {
+        contentItem: RowLayout {
-        id: appletIconsRow
+            id: row
-        anchors {
+            spacing: 0
-            bottom: parent.bottom
-            right: simpleIndicatorsLayout.left
-        }
-        height: parent.height
-    }
             
-    RowLayout {
+            Indicators.SignalStrength {
-        id: simpleIndicatorsLayout
+                provider: signalStrengthProviderLoader
-        anchors {
+                labelPixelSize: textPixelSize
-            top: parent.top
+                Layout.fillHeight: true
-            bottom: parent.bottom
+            }
-            right: parent.right
+            
-            rightMargin: PlasmaCore.Units.smallSpacing
+            // spacing in the middle
+            Item {
+                Layout.fillWidth: true
+            }
+            
+            RowLayout {
+                id: indicators
+                spacing: PlasmaCore.Units.smallSpacing * 1.5
+                Layout.fillHeight: true
+
+                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 {}
     }
 }

look-and-feel/contents/lockscreen/indicators/Battery.qml

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

look-and-feel/contents/lockscreen/indicators/SignalStrength.qml

@@ -16,8 +16,10 @@ import "providers"
 Item {
     required property QtObject provider
 
-    width: strengthIcon.height + strengthLabel.width
+    property real labelPixelSize
-    Layout.minimumWidth: strengthIcon.height + strengthLabel.width
+    
+    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
     }
 }

shell/contents/layout.js

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

shell/contents/updates/panelsfix.js

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