From 54c45efe9b5f2aa792395f180d1ff15a80237cd5 Mon Sep 17 00:00:00 2001 From: kate Date: Thu, 17 Feb 2022 13:04:23 +0800 Subject: [PATCH] feat: new control center design --- qml/CardItem.qml | 105 ++++++++++-------------- qml/ControlCenter.qml | 113 +++++++++++-------------- qml/MprisItem.qml | 5 +- qml/ShutdownDialog.qml | 182 ++++++++++++++++++++++++++--------------- translations/en_US.ts | 29 +++---- translations/zh_CN.ts | 31 +++---- 6 files changed, 224 insertions(+), 241 deletions(-) diff --git a/qml/CardItem.qml b/qml/CardItem.qml index 0e3f30a..142ad06 100644 --- a/qml/CardItem.qml +++ b/qml/CardItem.qml @@ -29,7 +29,6 @@ Item { property bool checked: false property alias icon: _image.source property alias label: _titleLabel.text - property alias text: _label.text signal clicked signal pressAndHold @@ -53,93 +52,71 @@ Item { acceptedButtons: Qt.LeftButton onClicked: control.clicked() - onPressedChanged: { - control.scale = pressed ? 0.95 : 1.0 - } - onPressAndHold: { control.pressAndHold() } } - Behavior on scale { - NumberAnimation { - duration: 200 - easing.type: Easing.OutSine - } - } - - Rectangle { - anchors.fill: parent - radius: FishUI.Theme.bigRadius - opacity: 1 - - color: { - if (control.checked) { - if (_mouseArea.pressed) - return highlightPressedColor - else if (_mouseArea.containsMouse) - return highlightHoverColor - else - return FishUI.Theme.highlightColor - } else { - if (_mouseArea.pressed) - return pressedColor - else if (_mouseArea.containsMouse) - return hoverColor - else - return backgroundColor - } - } - } - ColumnLayout { anchors.fill: parent anchors.leftMargin: FishUI.Theme.smallRadius anchors.rightMargin: FishUI.Theme.smallRadius - spacing: FishUI.Units.smallSpacing + spacing: FishUI.Units.largeSpacing Item { Layout.fillHeight: true } - Image { - id: _image - Layout.preferredWidth: 28 - Layout.preferredHeight: 28 - sourceSize: Qt.size(28, 28) - asynchronous: true + Item { + Layout.preferredWidth: 28 + FishUI.Units.largeSpacing * 2 + Layout.preferredHeight: 28 + FishUI.Units.largeSpacing * 2 + Layout.alignment: Qt.AlignHCenter - Layout.topMargin: FishUI.Units.largeSpacing - antialiasing: true - smooth: true - -// ColorOverlay { -// anchors.fill: _image -// source: _image -// color: control.checked ? FishUI.Theme.highlightedTextColor : FishUI.Theme.disabledTextColor -// } + + Rectangle { + anchors.fill: parent + radius: height / 2 +// color: "#E5E5E5" + + color: { + if (control.checked) { + if (_mouseArea.pressed) + return highlightPressedColor + else if (_mouseArea.containsMouse) + return highlightHoverColor + else + return FishUI.Theme.highlightColor + } else { + if (_mouseArea.pressed) + return pressedColor + else if (_mouseArea.containsMouse) + return hoverColor + else + return backgroundColor + } + } + } + + Image { + id: _image + Layout.preferredWidth: 28 + Layout.preferredHeight: 28 + anchors.centerIn: parent + sourceSize: Qt.size(28, 28) + asynchronous: true + antialiasing: true + smooth: true + } } Label { id: _titleLabel - color: control.checked ? FishUI.Theme.highlightedTextColor : FishUI.Theme.textColor +// color: control.checked ? FishUI.Theme.highlightedTextColor : FishUI.Theme.textColor Layout.preferredHeight: control.height * 0.15 Layout.alignment: Qt.AlignHCenter visible: text } - Label { - id: _label - color: control.checked ? FishUI.Theme.highlightedTextColor : FishUI.Theme.textColor - elide: Label.ElideRight - Layout.preferredHeight: control.height * 0.1 - Layout.alignment: Qt.AlignHCenter - Layout.maximumWidth: control.width - FishUI.Units.largeSpacing - Layout.bottomMargin: FishUI.Units.largeSpacing - visible: text - } - Item { Layout.fillHeight: true } diff --git a/qml/ControlCenter.qml b/qml/ControlCenter.qml index 21cd06d..6fce8a9 100644 --- a/qml/ControlCenter.qml +++ b/qml/ControlCenter.qml @@ -32,8 +32,8 @@ import FishUI 1.0 as FishUI ControlCenterDialog { id: control - width: 420 - height: _mainLayout.implicitHeight + FishUI.Units.largeSpacing * 2.5 + width: 450 + height: _mainLayout.implicitHeight + FishUI.Units.largeSpacing * 2 property var margin: 4 * Screen.devicePixelRatio property point position: Qt.point(0, 0) @@ -132,8 +132,8 @@ ControlCenterDialog { id: _background anchors.fill: parent radius: windowHelper.compositing ? FishUI.Theme.bigRadius * 1.5 : 0 - color: FishUI.Theme.darkMode ? "#4D4D4D" : "#FFFFFF" - opacity: windowHelper.compositing ? FishUI.Theme.darkMode ? 0.5 : 0.7 : 1.0 + color: FishUI.Theme.darkMode ? "#4D4D4D" : "#F0F0F0" + opacity: windowHelper.compositing ? FishUI.Theme.darkMode ? 0.6 : 0.8 : 1.0 antialiasing: true border.width: 1 / Screen.devicePixelRatio border.pixelAligned: Screen.devicePixelRatio > 1 ? false : true @@ -150,54 +150,26 @@ ControlCenterDialog { ColumnLayout { id: _mainLayout anchors.fill: parent - anchors.leftMargin: FishUI.Units.largeSpacing * 1.5 - anchors.rightMargin: FishUI.Units.largeSpacing * 1.5 - anchors.topMargin: FishUI.Units.largeSpacing * 1.5 - anchors.bottomMargin: FishUI.Units.largeSpacing + anchors.margins: FishUI.Units.largeSpacing spacing: FishUI.Units.largeSpacing Item { id: topItem Layout.fillWidth: true - height: 36 + height: 32 RowLayout { id: topItemLayout anchors.fill: parent + anchors.rightMargin: FishUI.Units.largeSpacing spacing: FishUI.Units.largeSpacing - Image { - id: userIcon - - property int iconSize: 36 - - Layout.preferredHeight: iconSize - Layout.preferredWidth: iconSize - sourceSize: String(source) === "image://icontheme/default-user" ? Qt.size(iconSize, iconSize) : undefined - source: currentUser.iconFileName ? "file:///" + currentUser.iconFileName : "image://icontheme/default-user" - antialiasing: true - smooth: false - - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Item { - width: userIcon.width - height: userIcon.height - - Rectangle { - anchors.fill: parent - radius: parent.height / 2 - } - } - } - } - Label { - id: userLabel - text: currentUser.userName - Layout.fillHeight: true + leftPadding: FishUI.Units.largeSpacing + text: qsTr("Control Center") + font.bold: true + font.pointSize: 14 Layout.fillWidth: true - elide: Label.ElideRight } IconButton { @@ -229,12 +201,17 @@ ControlCenterDialog { Item { id: cardItems Layout.fillWidth: true - height: 100 - visible: wirelessItem.visible || bluetoothItem.visible + height: 110 - RowLayout { + Rectangle { + anchors.fill: parent + color: FishUI.Theme.darkMode ? "#AEAEAE" : "white" + radius: FishUI.Theme.bigRadius + opacity: 0.8 + } + + GridLayout { anchors.fill: parent - spacing: FishUI.Units.largeSpacing CardItem { id: wirelessItem @@ -244,10 +221,7 @@ ControlCenterDialog { : "qrc:/images/light/network-wireless-connected-100.svg" visible: enabledConnections.wirelessHwEnabled checked: enabledConnections.wirelessEnabled - label: qsTr("Wi-Fi") - text: enabledConnections.wirelessEnabled ? activeConnection.wirelessName ? - activeConnection.wirelessName : - qsTr("On") : qsTr("Off") + label: activeConnection.wirelessName ? activeConnection.wirelessName : qsTr("Wi-Fi") onClicked: nmHandler.enableWireless(!checked) onPressAndHold: { control.visible = false @@ -263,7 +237,6 @@ ControlCenterDialog { : "qrc:/images/light/bluetooth-symbolic.svg" checked: !control.bluetoothDisConnected label: qsTr("Bluetooth") - text: checked ? qsTr("On") : qsTr("Off") visible: Bluez.Manager.adapters.length onClicked: control.toggleBluetooth() onPressAndHold: { @@ -280,13 +253,8 @@ ControlCenterDialog { : "qrc:/images/light/dark-mode.svg" checked: FishUI.Theme.darkMode label: qsTr("Dark Mode") - text: FishUI.Theme.darkMode ? qsTr("On") : qsTr("Off") onClicked: appearance.switchDarkMode(!FishUI.Theme.darkMode) } - - Item { - Layout.fillWidth: true - } } } @@ -304,9 +272,9 @@ ControlCenterDialog { Rectangle { id: brightnessItemBg anchors.fill: parent + color: FishUI.Theme.darkMode ? "#AEAEAE" : "white" radius: FishUI.Theme.bigRadius - color: FishUI.Theme.darkMode ? Qt.rgba(255, 255, 255, 0.1) - : Qt.rgba(0, 0, 0, 0.05) + opacity: 0.8 } RowLayout { @@ -344,11 +312,11 @@ ControlCenterDialog { onMoved: brightnessTimer.start() } - Label { - text: brightnessSlider.value + "%" - color: FishUI.Theme.disabledTextColor - Layout.preferredWidth: _fontMetrics.advanceWidth("100%") - } +// Label { +// text: brightnessSlider.value + "%" +// color: FishUI.Theme.disabledTextColor +// Layout.preferredWidth: _fontMetrics.advanceWidth("100%") +// } } } @@ -361,9 +329,9 @@ ControlCenterDialog { Rectangle { id: volumeItemBg anchors.fill: parent + color: FishUI.Theme.darkMode ? "#AEAEAE" : "white" radius: FishUI.Theme.bigRadius - color: FishUI.Theme.darkMode ? Qt.rgba(255, 255, 255, 0.1) - : Qt.rgba(0, 0, 0, 0.05) + opacity: 0.8 } RowLayout { @@ -405,11 +373,11 @@ ControlCenterDialog { } } - Label { - text: parseInt(volumeSlider.value / PulseAudio.NormalVolume * 100.0) + "%" - Layout.preferredWidth: _fontMetrics.advanceWidth("100%") - color: FishUI.Theme.disabledTextColor - } +// Label { +// text: parseInt(volumeSlider.value / PulseAudio.NormalVolume * 100.0) + "%" +// Layout.preferredWidth: _fontMetrics.advanceWidth("100%") +// color: FishUI.Theme.disabledTextColor +// } } } @@ -477,4 +445,15 @@ ControlCenterDialog { } } } + + function calcExtraSpacing(cellSize, containerSize) { + var availableColumns = Math.floor(containerSize / cellSize) + var extraSpacing = 0 + if (availableColumns > 0) { + var allColumnSize = availableColumns * cellSize + var extraSpace = Math.max(containerSize - allColumnSize, 0) + extraSpacing = extraSpace / availableColumns + } + return Math.floor(extraSpacing) + } } diff --git a/qml/MprisItem.qml b/qml/MprisItem.qml index cbf8e28..77767fd 100644 --- a/qml/MprisItem.qml +++ b/qml/MprisItem.qml @@ -60,10 +60,9 @@ Item { Rectangle { anchors.fill: parent + color: FishUI.Theme.darkMode ? "#AEAEAE" : "white" radius: FishUI.Theme.bigRadius - color: FishUI.Theme.darkMode ? Qt.rgba(255, 255, 255, 0.4) - : Qt.rgba(0, 0, 0, 0.1) - opacity: FishUI.Theme.darkMode ? 0.3 : 0.5 + opacity: 0.8 } RowLayout { diff --git a/qml/ShutdownDialog.qml b/qml/ShutdownDialog.qml index fedb341..f4c4ff4 100644 --- a/qml/ShutdownDialog.qml +++ b/qml/ShutdownDialog.qml @@ -45,6 +45,10 @@ ControlCenterDialog { : Qt.rgba(0, 0, 0, 0.2) : FishUI.Theme.darkMode ? Qt.rgba(255, 255, 255, 0.15) : Qt.rgba(0, 0, 0, 0.15) + Accounts.UserAccount { + id: currentUser + } + FishUI.WindowBlur { view: control geometry: Qt.rect(control.x, control.y, control.width, control.height) @@ -77,86 +81,128 @@ ControlCenterDialog { } } - GridLayout { + ColumnLayout { id: _mainLayout anchors.fill: parent anchors.margins: FishUI.Units.largeSpacing * 1.5 - rowSpacing: FishUI.Units.largeSpacing - columnSpacing: FishUI.Units.largeSpacing - columns: 3 - - StandardCard { - Layout.preferredWidth: 96 - Layout.preferredHeight: 96 - icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-shutdown.svg" - : "qrc:/images/light/system-shutdown.svg" - visible: true - checked: false - text: qsTr("Shutdown") - - onClicked: { - control.visible = false - actions.shutdown() + spacing: FishUI.Units.largeSpacing + + RowLayout { + spacing: FishUI.Units.smallSpacing * 1.5 + + Image { + id: userIcon + + property int iconSize: 33 + + Layout.preferredHeight: iconSize + Layout.preferredWidth: iconSize + sourceSize: String(source) === "image://icontheme/default-user" ? Qt.size(iconSize, iconSize) : undefined + source: currentUser.iconFileName ? "file:///" + currentUser.iconFileName : "image://icontheme/default-user" + antialiasing: true + smooth: false + + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Item { + width: userIcon.width + height: userIcon.height + + Rectangle { + anchors.fill: parent + radius: parent.height / 2 + } + } + } } - } - StandardCard { - Layout.preferredWidth: 96 - Layout.preferredHeight: 96 - icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-reboot.svg" - : "qrc:/images/light/system-reboot.svg" - visible: true - checked: false - text: qsTr("Reboot") - - onClicked: { - control.visible = false - actions.reboot() + Label { + id: userLabel + text: currentUser.userName + Layout.fillHeight: true + Layout.fillWidth: true + elide: Label.ElideRight } } - StandardCard { - Layout.preferredWidth: 96 - Layout.preferredHeight: 96 - icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-log-out.svg" - : "qrc:/images/light/system-log-out.svg" - visible: true - checked: false - text: qsTr("Log out") - - onClicked: { - control.visible = false - actions.logout() + GridLayout { + rowSpacing: FishUI.Units.largeSpacing + columnSpacing: FishUI.Units.largeSpacing + columns: 3 + + StandardCard { + Layout.preferredWidth: 96 + Layout.preferredHeight: 96 + icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-shutdown.svg" + : "qrc:/images/light/system-shutdown.svg" + visible: true + checked: false + text: qsTr("Shutdown") + + onClicked: { + control.visible = false + actions.shutdown() + } } - } - StandardCard { - Layout.preferredWidth: 96 - Layout.preferredHeight: 96 - icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-lock-screen.svg" - : "qrc:/images/light/system-lock-screen.svg" - visible: true - checked: false - text: qsTr("Lock Screen") - - onClicked: { - control.visible = false - actions.lockScreen() + StandardCard { + Layout.preferredWidth: 96 + Layout.preferredHeight: 96 + icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-reboot.svg" + : "qrc:/images/light/system-reboot.svg" + visible: true + checked: false + text: qsTr("Reboot") + + onClicked: { + control.visible = false + actions.reboot() + } + } + + StandardCard { + Layout.preferredWidth: 96 + Layout.preferredHeight: 96 + icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-log-out.svg" + : "qrc:/images/light/system-log-out.svg" + visible: true + checked: false + text: qsTr("Log out") + + onClicked: { + control.visible = false + actions.logout() + } + } + + StandardCard { + Layout.preferredWidth: 96 + Layout.preferredHeight: 96 + icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-lock-screen.svg" + : "qrc:/images/light/system-lock-screen.svg" + visible: true + checked: false + text: qsTr("Lock Screen") + + onClicked: { + control.visible = false + actions.lockScreen() + } } - } - StandardCard { - Layout.preferredWidth: 96 - Layout.preferredHeight: 96 - icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-suspend.svg" - : "qrc:/images/light/system-suspend.svg" - visible: true - checked: false - text: qsTr("Suspend") - - onClicked: { - control.visible = false - actions.suspend() + StandardCard { + Layout.preferredWidth: 96 + Layout.preferredHeight: 96 + icon: FishUI.Theme.darkMode ? "qrc:/images/dark/system-suspend.svg" + : "qrc:/images/light/system-suspend.svg" + visible: true + checked: false + text: qsTr("Suspend") + + onClicked: { + control.visible = false + actions.suspend() + } } } } diff --git a/translations/en_US.ts b/translations/en_US.ts index 3fd519f..bb6ad82 100644 --- a/translations/en_US.ts +++ b/translations/en_US.ts @@ -12,31 +12,22 @@ ControlCenter - + Wi-Fi - - - - On + + Control Center - - - - Off - - - - + Bluetooth - + Dark Mode @@ -44,27 +35,27 @@ ShutdownDialog - + Shutdown - + Reboot - + Log out - + Lock Screen - + Suspend diff --git a/translations/zh_CN.ts b/translations/zh_CN.ts index 4884777..d3eddfe 100644 --- a/translations/zh_CN.ts +++ b/translations/zh_CN.ts @@ -12,31 +12,22 @@ ControlCenter - + Wi-Fi 无线网络 - - - - On - 打开 + + Control Center + 控制中心 - - - - Off - 关闭 - - - + Bluetooth 蓝牙 - + Dark Mode 深色模式 @@ -44,27 +35,27 @@ ShutdownDialog - + Shutdown 关机 - + Reboot 重启 - + Log out 注销 - + Lock Screen 锁屏 - + Suspend 休眠