From 2282ab14cc86245bf21711064a22caa3ec2f0e0c Mon Sep 17 00:00:00 2001 From: cutefishd Date: Sun, 18 Apr 2021 04:12:39 +0800 Subject: [PATCH] Improve UI --- src/qml/AboutPage.qml | 52 ++-- src/qml/AccountsPage.qml | 59 ++--- src/qml/AppearancePage.qml | 363 ++++++++++++++-------------- src/qml/BatteryPage.qml | 110 ++++----- src/qml/DisplayPage.qml | 400 ++++++++++++++++--------------- src/qml/DockPage.qml | 161 +++++++------ src/qml/NetworkPage/WifiView.qml | 3 +- src/qml/NetworkPage/main.qml | 8 +- src/qml/RoundedItem.qml | 24 ++ src/qml/SideBar.qml | 2 +- src/qml/main.qml | 5 +- src/resources.qrc | 1 + 12 files changed, 618 insertions(+), 570 deletions(-) create mode 100644 src/qml/RoundedItem.qml diff --git a/src/qml/AboutPage.qml b/src/qml/AboutPage.qml index a071cf4..2ab810a 100644 --- a/src/qml/AboutPage.qml +++ b/src/qml/AboutPage.qml @@ -36,6 +36,10 @@ ItemPage { rightPadding: FishUI.Units.largeSpacing * 2 } + Item { + height: FishUI.Units.largeSpacing + } + // Label { // text: qsTr("Built on ") + about.prettyProductName // Layout.alignment: Qt.AlignTop | Qt.AlignHCenter @@ -43,34 +47,36 @@ ItemPage { // color: FishUI.Theme.disabledTextColor // } - StandardItem { - key: qsTr("System Version") - value: "0.2" - } + RoundedItem { + StandardItem { + key: qsTr("System Version") + value: "0.2" + } - StandardItem { - key: qsTr("System Type") - value: about.architecture - } + StandardItem { + key: qsTr("System Type") + value: about.architecture + } - StandardItem { - key: qsTr("Kernel Version") - value: about.kernelVersion - } + StandardItem { + key: qsTr("Kernel Version") + value: about.kernelVersion + } - StandardItem { - key: qsTr("Processor") - value: about.cpuInfo - } + StandardItem { + key: qsTr("Processor") + value: about.cpuInfo + } - StandardItem { - key: qsTr("RAM") - value: about.memorySize - } + StandardItem { + key: qsTr("RAM") + value: about.memorySize + } - StandardItem { - key: qsTr("Internal Storage") - value: about.internalStorage + StandardItem { + key: qsTr("Internal Storage") + value: about.internalStorage + } } } } diff --git a/src/qml/AccountsPage.qml b/src/qml/AccountsPage.qml index f552ab2..f53ad33 100644 --- a/src/qml/AccountsPage.qml +++ b/src/qml/AccountsPage.qml @@ -32,41 +32,44 @@ ItemPage { id: layout anchors.fill: parent - ListView { - id: _userView - model: userModel - Layout.fillWidth: true - spacing: FishUI.Units.largeSpacing - interactive: false + RoundedItem { - Layout.preferredHeight: { - var totalHeight = 0 - for (var i = 0; i < _userView.visibleChildren.length; ++i) { - totalHeight += _userView.visibleChildren[i].height + ListView { + id: _userView + model: userModel + Layout.fillWidth: true + spacing: FishUI.Units.largeSpacing + interactive: false + + Layout.preferredHeight: { + var totalHeight = 0 + for (var i = 0; i < _userView.visibleChildren.length; ++i) { + totalHeight += _userView.visibleChildren[i].height + } + totalHeight += (_userView.count - 1) * _userView.spacing + return totalHeight } - totalHeight += (_userView.count - 1) * _userView.spacing - return totalHeight - } - property int itemHeight: 64 + property int itemHeight: 64 - delegate: UserDelegateItem { - width: _userView.width + delegate: UserDelegateItem { + width: _userView.width + } } - } - Item { - height: FishUI.Units.smallSpacing - } + Item { + height: FishUI.Units.smallSpacing + } - Button { - id: _addUserButton - text: qsTr("Add user") - onClicked: { - var component = Qt.createComponent("AddUserDialog.qml") - if (component.status === Component.Ready) { - var dialog = component.createObject(rootWindow) - dialog.open() + Button { + id: _addUserButton + text: qsTr("Add user") + onClicked: { + var component = Qt.createComponent("AddUserDialog.qml") + if (component.status === Component.Ready) { + var dialog = component.createObject(rootWindow) + dialog.open() + } } } } diff --git a/src/qml/AppearancePage.qml b/src/qml/AppearancePage.qml index d9f7e52..3c9665d 100644 --- a/src/qml/AppearancePage.qml +++ b/src/qml/AppearancePage.qml @@ -47,234 +47,237 @@ ItemPage { id: layout anchors.fill: parent anchors.bottomMargin: FishUI.Units.largeSpacing + spacing: FishUI.Units.largeSpacing * 2 - Label { - text: qsTr("Theme") - color: FishUI.Theme.disabledTextColor - bottomPadding: FishUI.Units.smallSpacing - } - - // Light Mode and Dark Mode - RowLayout { - spacing: FishUI.Units.largeSpacing * 2 - - IconCheckBox { - source: "qrc:/images/light_mode.svg" - text: qsTr("Light") - checked: !FishUI.Theme.darkMode - onClicked: appearance.switchDarkMode(false) + RoundedItem { + Label { + text: qsTr("Theme") + color: FishUI.Theme.disabledTextColor + bottomPadding: FishUI.Units.smallSpacing } - IconCheckBox { - source: "qrc:/images/dark_mode.svg" - text: qsTr("Dark") - checked: FishUI.Theme.darkMode - onClicked: appearance.switchDarkMode(true) - } - } + // Light Mode and Dark Mode + RowLayout { + spacing: FishUI.Units.largeSpacing * 2 - Item { - height: FishUI.Units.largeSpacing - } - - RowLayout { - spacing: FishUI.Units.largeSpacing + IconCheckBox { + source: "qrc:/images/light_mode.svg" + text: qsTr("Light") + checked: !FishUI.Theme.darkMode + onClicked: appearance.switchDarkMode(false) + } - Label { - id: dimsTipsLabel - text: qsTr("Dim the wallpaper in dark theme") - Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft + IconCheckBox { + source: "qrc:/images/dark_mode.svg" + text: qsTr("Dark") + checked: FishUI.Theme.darkMode + onClicked: appearance.switchDarkMode(true) + } } Item { - Layout.fillWidth: true + height: FishUI.Units.largeSpacing } - Switch { - checked: appearance.dimsWallpaper - height: dimsTipsLabel.height - Layout.alignment: Qt.AlignVCenter | Qt.AlignRight - onCheckedChanged: appearance.setDimsWallpaper(checked) - } - } + RowLayout { + spacing: FishUI.Units.largeSpacing + + Label { + id: dimsTipsLabel + text: qsTr("Dim the wallpaper in dark theme") + Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft + } - HorizontalDivider {} + Item { + Layout.fillWidth: true + } - Label { - text: qsTr("Accent color") - color: FishUI.Theme.disabledTextColor - bottomPadding: FishUI.Units.smallSpacing + Switch { + checked: appearance.dimsWallpaper + height: dimsTipsLabel.height + Layout.alignment: Qt.AlignVCenter | Qt.AlignRight + onCheckedChanged: appearance.setDimsWallpaper(checked) + } + } } - GridView { - id: accentColorView - height: itemSize + FishUI.Units.largeSpacing * 2 - Layout.fillWidth: true - cellWidth: height - cellHeight: height - interactive: false - model: ListModel {} - - property var itemSize: 32 - - Component.onCompleted: { - model.append({"accentColor": String(FishUI.Theme.blueColor)}) - model.append({"accentColor": String(FishUI.Theme.redColor)}) - model.append({"accentColor": String(FishUI.Theme.greenColor)}) - model.append({"accentColor": String(FishUI.Theme.purpleColor)}) - model.append({"accentColor": String(FishUI.Theme.pinkColor)}) - model.append({"accentColor": String(FishUI.Theme.orangeColor)}) + RoundedItem { + Label { + text: qsTr("Accent color") + color: FishUI.Theme.disabledTextColor + bottomPadding: FishUI.Units.smallSpacing } - delegate: Rectangle { - property bool checked: Qt.colorEqual(FishUI.Theme.highlightColor, accentColor) - property color currentColor: accentColor - - width: accentColorView.itemSize + FishUI.Units.largeSpacing - height: width - color: "transparent" - radius: width / 2 - border.color: _mouseArea.pressed ? Qt.rgba(currentColor.r, - currentColor.g, - currentColor.b, 0.6) - : Qt.rgba(currentColor.r, - currentColor.g, - currentColor.b, 0.4) - border.width: checked ? 3 : _mouseArea.containsMouse ? 2 : 0 - - MouseArea { - id: _mouseArea - anchors.fill: parent - hoverEnabled: true - onClicked: appearance.setAccentColor(index) + GridView { + id: accentColorView + height: itemSize + FishUI.Units.largeSpacing * 2 + Layout.fillWidth: true + cellWidth: height + cellHeight: height + interactive: false + model: ListModel {} + + property var itemSize: 32 + + Component.onCompleted: { + model.append({"accentColor": String(FishUI.Theme.blueColor)}) + model.append({"accentColor": String(FishUI.Theme.redColor)}) + model.append({"accentColor": String(FishUI.Theme.greenColor)}) + model.append({"accentColor": String(FishUI.Theme.purpleColor)}) + model.append({"accentColor": String(FishUI.Theme.pinkColor)}) + model.append({"accentColor": String(FishUI.Theme.orangeColor)}) } - Rectangle { - width: 32 + delegate: Rectangle { + property bool checked: Qt.colorEqual(FishUI.Theme.highlightColor, accentColor) + property color currentColor: accentColor + + width: accentColorView.itemSize + FishUI.Units.largeSpacing height: width - anchors.centerIn: parent - color: currentColor + color: "transparent" radius: width / 2 + border.color: _mouseArea.pressed ? Qt.rgba(currentColor.r, + currentColor.g, + currentColor.b, 0.6) + : Qt.rgba(currentColor.r, + currentColor.g, + currentColor.b, 0.4) + border.width: checked ? 3 : _mouseArea.containsMouse ? 2 : 0 + + MouseArea { + id: _mouseArea + anchors.fill: parent + hoverEnabled: true + onClicked: appearance.setAccentColor(index) + } - Image { - anchors.centerIn: parent - width: parent.height * 0.5 + Rectangle { + width: 32 height: width - sourceSize: Qt.size(width, height) - source: "qrc:/images/checked.svg" - visible: checked - - ColorOverlay { - anchors.fill: parent - source: parent - color: FishUI.Theme.highlightedTextColor - opacity: 1 - visible: true + anchors.centerIn: parent + color: currentColor + radius: width / 2 + + Image { + anchors.centerIn: parent + width: parent.height * 0.5 + height: width + sourceSize: Qt.size(width, height) + source: "qrc:/images/checked.svg" + visible: checked + + ColorOverlay { + anchors.fill: parent + source: parent + color: FishUI.Theme.highlightedTextColor + opacity: 1 + visible: true + } } } } } } - HorizontalDivider {} - - // Font - Label { - text: qsTr("Font") - color: FishUI.Theme.disabledTextColor - bottomPadding: FishUI.Units.smallSpacing - } - - GridLayout { - rows: 3 - columns: 2 - - columnSpacing: FishUI.Units.largeSpacing * 2 - + RoundedItem { + // Font Label { - text: qsTr("General Font") + text: qsTr("Font") + color: FishUI.Theme.disabledTextColor bottomPadding: FishUI.Units.smallSpacing } - ComboBox { - id: generalFontComboBox - model: fontsModel.generalFonts - enabled: true - Layout.fillWidth: true - onActivated: appearance.setGenericFontFamily(currentText) - } + GridLayout { + rows: 3 + columns: 2 - Label { - text: qsTr("Fixed Font") - bottomPadding: FishUI.Units.smallSpacing - } - - ComboBox { - id: fixedFontComboBox - model: fontsModel.fixedFonts - enabled: true - Layout.fillWidth: true - onActivated: appearance.setFixedFontFamily(currentText) - } - - Label { - text: qsTr("Font Size") - bottomPadding: FishUI.Units.smallSpacing - } + columnSpacing: FishUI.Units.largeSpacing * 2 - TabBar { - Layout.fillWidth: true + Label { + text: qsTr("General Font") + bottomPadding: FishUI.Units.smallSpacing + } - TabButton { - text: qsTr("Small") + ComboBox { + id: generalFontComboBox + model: fontsModel.generalFonts + enabled: true + Layout.fillWidth: true + onActivated: appearance.setGenericFontFamily(currentText) } - TabButton { - text: qsTr("Medium") + Label { + text: qsTr("Fixed Font") + bottomPadding: FishUI.Units.smallSpacing } - TabButton { - text: qsTr("Large") + ComboBox { + id: fixedFontComboBox + model: fontsModel.fixedFonts + enabled: true + Layout.fillWidth: true + onActivated: appearance.setFixedFontFamily(currentText) } - TabButton { - text: qsTr("Huge") + Label { + text: qsTr("Font Size") + bottomPadding: FishUI.Units.smallSpacing } - currentIndex: { - var index = 0 + TabBar { + Layout.fillWidth: true - if (appearance.fontPointSize <= 10) - index = 0 - else if (appearance.fontPointSize <= 11) - index = 1 - else if (appearance.fontPointSize <= 13) - index = 2 - else if (appearance.fontPointSize <= 16) - index = 3 + TabButton { + text: qsTr("Small") + } - return index - } + TabButton { + text: qsTr("Medium") + } + + TabButton { + text: qsTr("Large") + } - onCurrentIndexChanged: { - var fontSize = 0 - - switch (currentIndex) { - case 0: - fontSize = 10 - break; - case 1: - fontSize = 11 - break; - case 2: - fontSize = 13 - break; - case 3: - fontSize = 16 - break; + TabButton { + text: qsTr("Huge") } - appearance.setFontPointSize(fontSize) + currentIndex: { + var index = 0 + + if (appearance.fontPointSize <= 10) + index = 0 + else if (appearance.fontPointSize <= 11) + index = 1 + else if (appearance.fontPointSize <= 13) + index = 2 + else if (appearance.fontPointSize <= 16) + index = 3 + + return index + } + + onCurrentIndexChanged: { + var fontSize = 0 + + switch (currentIndex) { + case 0: + fontSize = 10 + break; + case 1: + fontSize = 11 + break; + case 2: + fontSize = 13 + break; + case 3: + fontSize = 16 + break; + } + + appearance.setFontPointSize(fontSize) + } } } } diff --git a/src/qml/BatteryPage.qml b/src/qml/BatteryPage.qml index bffa548..3f6b380 100644 --- a/src/qml/BatteryPage.qml +++ b/src/qml/BatteryPage.qml @@ -44,7 +44,7 @@ ItemPage { ColumnLayout { id: layout anchors.fill: parent - spacing: FishUI.Units.largeSpacing + spacing: FishUI.Units.largeSpacing * 2 // Battery Info BatteryItem { @@ -98,68 +98,68 @@ ItemPage { } } - Item { - height: FishUI.Units.largeSpacing - } - - Label { - text: qsTr("History") - color: FishUI.Theme.disabledTextColor - } + RoundedItem { + Label { + text: qsTr("History") + color: FishUI.Theme.disabledTextColor + } - HistoryGraph { - Layout.fillWidth: true - height: 300 - - data: history.points - - readonly property real xTicksAtDontCare: 0 - readonly property real xTicksAtTwelveOClock: 1 - readonly property real xTicksAtFullHour: 2 - readonly property real xTicksAtHalfHour: 3 - readonly property real xTicksAtFullSecondHour: 4 - readonly property real xTicksAtTenMinutes: 5 - readonly property var xTicksAtList: [xTicksAtTenMinutes, xTicksAtHalfHour, xTicksAtHalfHour, - xTicksAtFullHour, xTicksAtFullSecondHour, xTicksAtTwelveOClock] - - // Set grid lines distances which directly correspondent to the xTicksAt variables - readonly property var xDivisionWidths: [1000 * 60 * 10, 1000 * 60 * 60 * 12, 1000 * 60 * 60, 1000 * 60 * 30, 1000 * 60 * 60 * 2, 1000 * 60 * 10] - xTicksAt: xTicksAtList[4] - xDivisionWidth: xDivisionWidths[xTicksAt] - - xMin: history.firstDataPointTime - xMax: history.lastDataPointTime - xDuration: history.duration - - yUnits: batteryPage.historyType === BatteryHistoryModel.RateType ? qsTr("W") : "%" - yMax: { - if (batteryPage.historyType === BatteryHistoryModel.RateType) { - // ceil to nearest 10 - var max = Math.floor(history.largestValue) - max = max - max % 10 + 10 - - return max; - } else { - return 100; + HistoryGraph { + Layout.fillWidth: true + height: 300 + + data: history.points + + readonly property real xTicksAtDontCare: 0 + readonly property real xTicksAtTwelveOClock: 1 + readonly property real xTicksAtFullHour: 2 + readonly property real xTicksAtHalfHour: 3 + readonly property real xTicksAtFullSecondHour: 4 + readonly property real xTicksAtTenMinutes: 5 + readonly property var xTicksAtList: [xTicksAtTenMinutes, xTicksAtHalfHour, xTicksAtHalfHour, + xTicksAtFullHour, xTicksAtFullSecondHour, xTicksAtTwelveOClock] + + // Set grid lines distances which directly correspondent to the xTicksAt variables + readonly property var xDivisionWidths: [1000 * 60 * 10, 1000 * 60 * 60 * 12, 1000 * 60 * 60, 1000 * 60 * 30, 1000 * 60 * 60 * 2, 1000 * 60 * 10] + xTicksAt: xTicksAtList[4] + xDivisionWidth: xDivisionWidths[xTicksAt] + + xMin: history.firstDataPointTime + xMax: history.lastDataPointTime + xDuration: history.duration + + yUnits: batteryPage.historyType === BatteryHistoryModel.RateType ? qsTr("W") : "%" + yMax: { + if (batteryPage.historyType === BatteryHistoryModel.RateType) { + // ceil to nearest 10 + var max = Math.floor(history.largestValue) + max = max - max % 10 + 10 + + return max; + } else { + return 100; + } } + yStep: batteryPage.historyType === BatteryHistoryModel.RateType ? 10 : 20 + visible: history.count > 1 } - yStep: batteryPage.historyType === BatteryHistoryModel.RateType ? 10 : 20 - visible: history.count > 1 } - Item { - height: FishUI.Units.smallSpacing - } + RoundedItem { + StandardItem { + key: qsTr("Last Charged to") + " " + battery.lastChargedPercent + "%" + value: battery.lastChargedTime + visible: battery.lastChargedPercent !== 0 + } - StandardItem { - key: qsTr("Last Charged to") + " " + battery.lastChargedPercent + "%" - value: battery.lastChargedTime - visible: battery.lastChargedPercent !== 0 + StandardItem { + key: qsTr("Maximum Capacity") + value: battery.capacity + "%" + } } - StandardItem { - key: qsTr("Maximum Capacity") - value: battery.capacity + "%" + Item { + height: FishUI.Units.largeSpacing } } } diff --git a/src/qml/DisplayPage.qml b/src/qml/DisplayPage.qml index 3a1fb3f..f52b8d1 100644 --- a/src/qml/DisplayPage.qml +++ b/src/qml/DisplayPage.qml @@ -35,256 +35,258 @@ ItemPage { ColumnLayout { id: layout anchors.fill: parent + spacing: FishUI.Units.largeSpacing * 2 - Label { - text: qsTr("Brightness") - color: FishUI.Theme.disabledTextColor - bottomPadding: FishUI.Units.largeSpacing - visible: brightness.enabled - } - - RowLayout { - spacing: FishUI.Units.largeSpacing - visible: brightness.enabled + RoundedItem { + Layout.fillWidth: true - Image { - width: brightnessSlider.height - height: width - sourceSize.width: width - sourceSize.height: height - source: "qrc:/images/" + (FishUI.Theme.darkMode ? "dark" : "light") + "/display-brightness-low-symbolic.svg" + Label { + text: qsTr("Brightness") + color: FishUI.Theme.disabledTextColor + bottomPadding: FishUI.Units.largeSpacing + visible: brightness.enabled } - Slider { - id: brightnessSlider - Layout.fillWidth: true - value: brightness.value - from: 0 - to: 100 - stepSize: 1 - onMoved: brightnessTimer.start() - } + RowLayout { + spacing: FishUI.Units.largeSpacing + visible: brightness.enabled - Image { - width: brightnessSlider.height - height: width - sourceSize.width: width - sourceSize.height: height - source: "qrc:/images/" + (FishUI.Theme.darkMode ? "dark" : "light") + "/display-brightness-symbolic.svg" - } - } + Image { + width: brightnessSlider.height + height: width + sourceSize.width: width + sourceSize.height: height + source: "qrc:/images/" + (FishUI.Theme.darkMode ? "dark" : "light") + "/display-brightness-low-symbolic.svg" + } - Item { - height: FishUI.Units.largeSpacing - visible: brightness.enabled - } + Slider { + id: brightnessSlider + Layout.fillWidth: true + value: brightness.value + from: 0 + to: 100 + stepSize: 1 + onMoved: brightnessTimer.start() + } - HorizontalDivider { - visible: brightness.enabled - } + Image { + width: brightnessSlider.height + height: width + sourceSize.width: width + sourceSize.height: height + source: "qrc:/images/" + (FishUI.Theme.darkMode ? "dark" : "light") + "/display-brightness-symbolic.svg" + } + } - Label { - text: qsTr("Screen") - color: FishUI.Theme.disabledTextColor - bottomPadding: FishUI.Units.smallSpacing - visible: _screenView.count > 0 + Item { + height: FishUI.Units.smallSpacing + } } - ListView { - id: _screenView - Layout.fillWidth: true - model: screen.outputModel - orientation: ListView.Horizontal - interactive: false - clip: true + RoundedItem { + Label { + text: qsTr("Screen") + color: FishUI.Theme.disabledTextColor + bottomPadding: FishUI.Units.smallSpacing + visible: _screenView.count > 0 + } - Layout.preferredHeight: currentItem ? currentItem.layout.implicitHeight : 0 + ListView { + id: _screenView + Layout.fillWidth: true + model: screen.outputModel + orientation: ListView.Horizontal + interactive: false + clip: true - delegate: Item { - id: screenItem - height: ListView.view.height - width: ListView.view.width + Layout.preferredHeight: currentItem ? currentItem.layout.implicitHeight : 0 - property var element: model - property var layout: _mainLayout + delegate: Item { + id: screenItem + height: ListView.view.height + width: ListView.view.width - ColumnLayout { - id: _mainLayout - anchors.fill: parent + property var element: model + property var layout: _mainLayout - // Label { - // text: element.display - // } + ColumnLayout { + id: _mainLayout + anchors.fill: parent - GridLayout { - columns: 2 - columnSpacing: FishUI.Units.largeSpacing - rowSpacing: FishUI.Units.smallSpacing + // Label { + // text: element.display + // } - Label { - text: qsTr("Resolution") - } + GridLayout { + columns: 2 + columnSpacing: FishUI.Units.largeSpacing + rowSpacing: FishUI.Units.smallSpacing - ComboBox { - Layout.fillWidth: true - model: element.resolutions - currentIndex: element.resolutionIndex !== undefined ? - element.resolutionIndex : -1 - onActivated: { - element.resolutionIndex = currentIndex - screen.save() + Label { + text: qsTr("Resolution") } - } - Label { - text: qsTr("Refresh rate") - } + ComboBox { + Layout.fillWidth: true + model: element.resolutions + currentIndex: element.resolutionIndex !== undefined ? + element.resolutionIndex : -1 + onActivated: { + element.resolutionIndex = currentIndex + screen.save() + } + } - ComboBox { - id: refreshRate - Layout.fillWidth: true - model: element.refreshRates - currentIndex: element.refreshRateIndex ? - element.refreshRateIndex : 0 - onActivated: { - element.refreshRateIndex = currentIndex - screen.save() + Label { + text: qsTr("Refresh rate") } - } - Label { - text: qsTr("Rotation") - } + ComboBox { + id: refreshRate + Layout.fillWidth: true + model: element.refreshRates + currentIndex: element.refreshRateIndex ? + element.refreshRateIndex : 0 + onActivated: { + element.refreshRateIndex = currentIndex + screen.save() + } + } - Item { - id: rotationItem - Layout.fillWidth: true - height: rotationLayout.implicitHeight + Label { + text: qsTr("Rotation") + } - RowLayout { - id: rotationLayout - anchors.fill: parent + Item { + id: rotationItem + Layout.fillWidth: true + height: rotationLayout.implicitHeight - RotationButton { - value: 0 - } + RowLayout { + id: rotationLayout + anchors.fill: parent - RotationButton { - value: 90 - } + RotationButton { + value: 0 + } - RotationButton { - value: 180 - } + RotationButton { + value: 90 + } - RotationButton { - value: 270 + RotationButton { + value: 180 + } + + RotationButton { + value: 270 + } } } - } - Label { - text: qsTr("Enabled") - visible: enabledBox.visible - } + Label { + text: qsTr("Enabled") + visible: enabledBox.visible + } - CheckBox { - id: enabledBox - checked: element.enabled - visible: _screenView.count > 1 - onClicked: { - element.enabled = checked - screen.save() + CheckBox { + id: enabledBox + checked: element.enabled + visible: _screenView.count > 1 + onClicked: { + element.enabled = checked + screen.save() + } } } } } } - } - PageIndicator { - id: screenPageIndicator - Layout.alignment: Qt.AlignHCenter - count: _screenView.count - currentIndex: _screenView.currentIndex - onCurrentIndexChanged: _screenView.currentIndex = currentIndex - interactive: true - visible: count > 1 - } - - HorizontalDivider { } - - Label { - text: qsTr("Scale") - color: FishUI.Theme.disabledTextColor - bottomPadding: FishUI.Units.smallSpacing + PageIndicator { + id: screenPageIndicator + Layout.alignment: Qt.AlignHCenter + count: _screenView.count + currentIndex: _screenView.currentIndex + onCurrentIndexChanged: _screenView.currentIndex = currentIndex + interactive: true + visible: count > 1 + } } - TabBar { - id: dockSizeTabbar - Layout.fillWidth: true - - TabButton { - text: "100%" + RoundedItem { + Label { + text: qsTr("Scale") + color: FishUI.Theme.disabledTextColor + bottomPadding: FishUI.Units.smallSpacing } - TabButton { - text: "125%" - } + TabBar { + id: dockSizeTabbar + Layout.fillWidth: true - TabButton { - text: "150%" - } + TabButton { + text: "100%" + } - TabButton { - text: "175%" - } + TabButton { + text: "125%" + } - TabButton { - text: "200%" - } + TabButton { + text: "150%" + } - currentIndex: { - var index = 0 - - if (appearance.devicePixelRatio <= 1.0) - index = 0 - else if (appearance.devicePixelRatio <= 1.25) - index = 1 - else if (appearance.devicePixelRatio <= 1.50) - index = 2 - else if (appearance.devicePixelRatio <= 1.75) - index = 3 - else if (appearance.devicePixelRatio <= 2.0) - index = 4 - - return index - } + TabButton { + text: "175%" + } - onCurrentIndexChanged: { - var value = 1.0 - - switch (currentIndex) { - case 0: - value = 1.0 - break; - case 1: - value = 1.25 - break; - case 2: - value = 1.50 - break; - case 3: - value = 1.75 - break; - case 4: - value = 2.0 - break; + TabButton { + text: "200%" } - rootWindow.showPassiveNotification(qsTr("Need to log in again to take effect"), "short") + currentIndex: { + var index = 0 + + if (appearance.devicePixelRatio <= 1.0) + index = 0 + else if (appearance.devicePixelRatio <= 1.25) + index = 1 + else if (appearance.devicePixelRatio <= 1.50) + index = 2 + else if (appearance.devicePixelRatio <= 1.75) + index = 3 + else if (appearance.devicePixelRatio <= 2.0) + index = 4 + + return index + } - appearance.setDevicePixelRatio(value) + onCurrentIndexChanged: { + var value = 1.0 + + switch (currentIndex) { + case 0: + value = 1.0 + break; + case 1: + value = 1.25 + break; + case 2: + value = 1.50 + break; + case 3: + value = 1.75 + break; + case 4: + value = 2.0 + break; + } + + rootWindow.showPassiveNotification(qsTr("Need to log in again to take effect"), "short") + + appearance.setDevicePixelRatio(value) + } } } diff --git a/src/qml/DockPage.qml b/src/qml/DockPage.qml index 39b3f43..1fa311e 100644 --- a/src/qml/DockPage.qml +++ b/src/qml/DockPage.qml @@ -18,102 +18,105 @@ ItemPage { ColumnLayout { id: layout anchors.fill: parent - - // Dock - Label { - text: qsTr("Position on screen") - color: FishUI.Theme.disabledTextColor - bottomPadding: FishUI.Units.smallSpacing - } - - RowLayout { - spacing: FishUI.Units.largeSpacing * 2 - - IconCheckBox { - source: "qrc:/images/dock_left.svg" - text: qsTr("Left") - checked: appearance.dockDirection === 0 - onClicked: appearance.setDockDirection(0) + spacing: FishUI.Units.largeSpacing * 2 + + RoundedItem { + // Dock + Label { + text: qsTr("Position on screen") + color: FishUI.Theme.disabledTextColor + bottomPadding: FishUI.Units.smallSpacing } - IconCheckBox { - source: "qrc:/images/dock_bottom.svg" - text: qsTr("Bottom") - checked: appearance.dockDirection === 1 - onClicked: appearance.setDockDirection(1) - } + RowLayout { + spacing: FishUI.Units.largeSpacing * 2 - IconCheckBox { - source: "qrc:/images/dock_right.svg" - text: qsTr("Right") - checked: appearance.dockDirection === 2 - onClicked: appearance.setDockDirection(2) - } - } + IconCheckBox { + source: "qrc:/images/dock_left.svg" + text: qsTr("Left") + checked: appearance.dockDirection === 0 + onClicked: appearance.setDockDirection(0) + } - HorizontalDivider {} + IconCheckBox { + source: "qrc:/images/dock_bottom.svg" + text: qsTr("Bottom") + checked: appearance.dockDirection === 1 + onClicked: appearance.setDockDirection(1) + } - Label { - text: qsTr("Size") - color: FishUI.Theme.disabledTextColor - bottomPadding: FishUI.Units.smallSpacing + IconCheckBox { + source: "qrc:/images/dock_right.svg" + text: qsTr("Right") + checked: appearance.dockDirection === 2 + onClicked: appearance.setDockDirection(2) + } + } } - TabBar { - id: dockSizeTabbar - Layout.fillWidth: true - bottomPadding: FishUI.Units.smallSpacing - - TabButton { - text: qsTr("Small") + RoundedItem { + Label { + text: qsTr("Size") + color: FishUI.Theme.disabledTextColor + bottomPadding: FishUI.Units.smallSpacing } - TabButton { - text: qsTr("Medium") - } + TabBar { + id: dockSizeTabbar + Layout.fillWidth: true + bottomPadding: FishUI.Units.smallSpacing - TabButton { - text: qsTr("Large") - } + TabButton { + text: qsTr("Small") + } - TabButton { - text: qsTr("Huge") - } + TabButton { + text: qsTr("Medium") + } - currentIndex: { - var index = 0 + TabButton { + text: qsTr("Large") + } - if (appearance.dockIconSize <= 50) - index = 0 - else if (appearance.dockIconSize <= 65) - index = 1 - else if (appearance.dockIconSize <= 90) - index = 2 - else if (appearance.dockIconSize <= 130) - index = 3 + TabButton { + text: qsTr("Huge") + } - return index - } + currentIndex: { + var index = 0 - onCurrentIndexChanged: { - var iconSize = 0 - - switch (currentIndex) { - case 0: - iconSize = 50 - break; - case 1: - iconSize = 65 - break; - case 2: - iconSize = 90 - break; - case 3: - iconSize = 130 - break; + if (appearance.dockIconSize <= 50) + index = 0 + else if (appearance.dockIconSize <= 65) + index = 1 + else if (appearance.dockIconSize <= 90) + index = 2 + else if (appearance.dockIconSize <= 130) + index = 3 + + return index } - appearance.setDockIconSize(iconSize) + onCurrentIndexChanged: { + var iconSize = 0 + + switch (currentIndex) { + case 0: + iconSize = 50 + break; + case 1: + iconSize = 65 + break; + case 2: + iconSize = 90 + break; + case 3: + iconSize = 130 + break; + } + + appearance.setDockIconSize(iconSize) + } } } diff --git a/src/qml/NetworkPage/WifiView.qml b/src/qml/NetworkPage/WifiView.qml index ad34d7c..3f060c5 100644 --- a/src/qml/NetworkPage/WifiView.qml +++ b/src/qml/NetworkPage/WifiView.qml @@ -54,9 +54,10 @@ Item { ListView { id: wirelessView Layout.fillWidth: true - Layout.preferredHeight: itemHeight * count + Layout.preferredHeight: itemHeight * count + ((count - 1) * FishUI.Units.smallSpacing) clip: true model: appletProxyModel + spacing: FishUI.Units.smallSpacing interactive: false visible: enabledConnections.wirelessEnabled diff --git a/src/qml/NetworkPage/main.qml b/src/qml/NetworkPage/main.qml index 72d5bef..45cd48d 100644 --- a/src/qml/NetworkPage/main.qml +++ b/src/qml/NetworkPage/main.qml @@ -97,9 +97,11 @@ ItemPage { visible: wiredView.visible && enabledConnections.wirelessHwEnabled } - WifiView { - Layout.fillWidth: true - visible: enabledConnections.wirelessHwEnabled + RoundedItem { + WifiView { + Layout.fillWidth: true + visible: enabledConnections.wirelessHwEnabled + } } } } diff --git a/src/qml/RoundedItem.qml b/src/qml/RoundedItem.qml new file mode 100644 index 0000000..f2977a8 --- /dev/null +++ b/src/qml/RoundedItem.qml @@ -0,0 +1,24 @@ +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import FishUI 1.0 as FishUI + +Rectangle { + Layout.fillWidth: true + + default property alias content : _mainLayout.data + + color: FishUI.Theme.darkMode ? "#363636" : "#FFFFFF" + radius: FishUI.Theme.mediumRadius + + implicitHeight: _mainLayout.implicitHeight + FishUI.Units.largeSpacing * 2 + + 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 + anchors.bottomMargin: FishUI.Units.largeSpacing + } +} diff --git a/src/qml/SideBar.qml b/src/qml/SideBar.qml index 7b6a613..9be7aa8 100644 --- a/src/qml/SideBar.qml +++ b/src/qml/SideBar.qml @@ -15,7 +15,7 @@ Item { Rectangle { anchors.fill: parent - color: FishUI.Theme.secondBackgroundColor + color: FishUI.Theme.backgroundColor Behavior on color { ColorAnimation { diff --git a/src/qml/main.qml b/src/qml/main.qml index b789c64..5a24ba7 100644 --- a/src/qml/main.qml +++ b/src/qml/main.qml @@ -16,6 +16,9 @@ FishUI.Window { minimumHeight: 600 headerBarHeight: 50 + backgroundColor: FishUI.Theme.darkMode ? Qt.rgba(38 / 255, 38 / 255, 38 / 255, 255) + : Qt.rgba(237 / 255, 237 / 255, 242 / 255, 255) + headerBar: Item { Rectangle { id: leftArea @@ -23,7 +26,7 @@ FishUI.Window { anchors.top: parent.top anchors.bottom: parent.bottom implicitWidth: sideBar.width - color: FishUI.Theme.secondBackgroundColor + color: FishUI.Theme.backgroundColor Behavior on color { ColorAnimation { diff --git a/src/resources.qrc b/src/resources.qrc index c7eba51..52635b9 100644 --- a/src/resources.qrc +++ b/src/resources.qrc @@ -86,5 +86,6 @@ qml/NetworkPage/WifiItem.qml qml/NetworkPage/WirelessDetailsDialog.qml qml/NetworkPage/WiredItem.qml + qml/RoundedItem.qml