diff --git a/components/mobileshell/TopPanelControls.qml b/components/mobileshell/TopPanelControls.qml new file mode 100644 index 00000000..93d62f74 --- /dev/null +++ b/components/mobileshell/TopPanelControls.qml @@ -0,0 +1,15 @@ +/* + * SPDX-FileCopyrightText: 2021 Devin Lin + * + * 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 +} diff --git a/components/mobileshell/qmldir b/components/mobileshell/qmldir index a59c74ae..37fd2cd2 100644 --- a/components/mobileshell/qmldir +++ b/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 diff --git a/containments/panel/package/contents/ui/IndicatorsRow.qml b/containments/panel/package/contents/ui/IndicatorsRow.qml index 95760b6a..df50937d 100644 --- a/containments/panel/package/contents/ui/IndicatorsRow.qml +++ b/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 - Rectangle { - anchors.fill: parent - 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) - } - } - } - - Loader { - id: strengthLoader - height: parent.height - width: item ? item.width : 0 - active: signalStrengthProvider - sourceComponent: Indicators.SignalStrength { - provider: signalStrengthProvider - } - } - - Row { - id: statusNotifierIndicatorsRow - anchors.left: strengthLoader.right - height: parent.height - Repeater { - id: statusNotifierRepeater - model: PlasmaCore.SortFilterModel { - id: filteredStatusNotifiers - filterRole: "Title" - sourceModel: PlasmaCore.DataModel { - dataSource: statusNotifierSource - } - } - - delegate: TaskWidget {} - } - } - - PlasmaComponents.Label { - id: clock - property bool is24HourTime: plasmoid.nativeInterface.isSystem24HourFormat + 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 - 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 + background: Rectangle { + color: backgroundColor + } + + 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"); + 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 + } + } + } + + // 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 + } } } } - - 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 } - } } } diff --git a/containments/panel/package/contents/ui/TaskWidget.qml b/containments/panel/package/contents/ui/TaskWidget.qml index 6f22105c..15c28cd3 100644 --- a/containments/panel/package/contents/ui/TaskWidget.qml +++ b/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 diff --git a/containments/panel/package/contents/ui/indicators/Battery.qml b/containments/panel/package/contents/ui/indicators/Battery.qml index d870c239..e36b5a12 100644 --- a/containments/panel/package/contents/ui/indicators/Battery.qml +++ b/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 } } diff --git a/containments/panel/package/contents/ui/indicators/SignalStrength.qml b/containments/panel/package/contents/ui/indicators/SignalStrength.qml index ca891976..04b5190c 100644 --- a/containments/panel/package/contents/ui/indicators/SignalStrength.qml +++ b/containments/panel/package/contents/ui/indicators/SignalStrength.qml @@ -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 - } } diff --git a/containments/panel/package/contents/ui/main.qml b/containments/panel/package/contents/ui/main.qml index 0f64c8cd..fba64f23 100644 --- a/containments/panel/package/contents/ui/main.qml +++ b/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 } diff --git a/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml b/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml index c1835654..5eaafc5d 100644 --- a/containments/panel/package/contents/ui/quicksettings/QuickSettingsPanel.qml +++ b/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 } diff --git a/containments/taskpanel/package/contents/ui/main.qml b/containments/taskpanel/package/contents/ui/main.qml index bc85b3a4..213fb577 100644 --- a/containments/taskpanel/package/contents/ui/main.qml +++ b/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 }); } diff --git a/look-and-feel/contents/lockscreen/SimpleHeaderBar.qml b/look-and-feel/contents/lockscreen/SimpleHeaderBar.qml index e24cc98f..5b3dafff 100644 --- a/look-and-feel/contents/lockscreen/SimpleHeaderBar.qml +++ b/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 { - 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: indicators + spacing: PlasmaCore.Units.smallSpacing * 1.5 + Layout.fillHeight: true - RowLayout { - id: appletIconsRow - anchors { - bottom: parent.bottom - right: simpleIndicatorsLayout.left + 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 + } + } } - height: parent.height - } - - RowLayout { - id: simpleIndicatorsLayout - anchors { - top: parent.top - bottom: parent.bottom - right: parent.right - rightMargin: PlasmaCore.Units.smallSpacing - } - Indicators.Bluetooth {} - Indicators.Wifi {} - Indicators.Volume {} - Indicators.Battery {} } } diff --git a/look-and-feel/contents/lockscreen/indicators/Battery.qml b/look-and-feel/contents/lockscreen/indicators/Battery.qml index 133fdc54..cac12546 100644 --- a/look-and-feel/contents/lockscreen/indicators/Battery.qml +++ b/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 } } diff --git a/look-and-feel/contents/lockscreen/indicators/SignalStrength.qml b/look-and-feel/contents/lockscreen/indicators/SignalStrength.qml index 3574e6d1..5467e67d 100644 --- a/look-and-feel/contents/lockscreen/indicators/SignalStrength.qml +++ b/look-and-feel/contents/lockscreen/indicators/SignalStrength.qml @@ -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 } } diff --git a/shell/contents/layout.js b/shell/contents/layout.js index e349af70..57452667 100644 --- a/shell/contents/layout.js +++ b/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; diff --git a/shell/contents/updates/panelsfix.js b/shell/contents/updates/panelsfix.js index e2dfeb0d..bbd2f104 100644 --- a/shell/contents/updates/panelsfix.js +++ b/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")