Improve settings dialog

src/qml/SettingsDialog.qml

@@ -4,185 +4,108 @@ import QtQuick.Window 2.12
 import QtQuick.Controls 2.12
 import FishUI 1.0 as FishUI
 
-FishUI.Window {
+Window {
     id: control
 
+    title: qsTr("Settings")
+
     width: 400
-    height: 400
+    height: _mainLayout.implicitHeight + FishUI.Units.largeSpacing * 4
 
-    maximumHeight: 400
+    maximumHeight: _mainLayout.implicitHeight + FishUI.Units.largeSpacing * 4
     maximumWidth: 400
     minimumWidth: 400
-    minimumHeight: 400
+    minimumHeight: _mainLayout.implicitHeight + FishUI.Units.largeSpacing * 4
+
+    flags: Qt.Dialog
+    modality: Qt.WindowModal
 
     visible: false
 
-    ColumnLayout {
-        id: _mainLayout
+    Rectangle {
         anchors.fill: parent
-        anchors.leftMargin: FishUI.Units.largeSpacing
-        anchors.rightMargin: FishUI.Units.largeSpacing
-        spacing: FishUI.Units.largeSpacing
-
-        Item {
-            Layout.fillWidth: true
-            Layout.preferredHeight: 45
-
-            Rectangle {
-                anchors.fill: parent
-                color: FishUI.Theme.secondBackgroundColor
-                radius: FishUI.Theme.smallRadius
-            }
-
-            RowLayout {
-                anchors.fill: parent
-                anchors.leftMargin: FishUI.Units.largeSpacing
-                anchors.rightMargin: FishUI.Units.largeSpacing
-
-                Label {
-                    text: qsTr("Font")
-                }
-
-                Item {
-                    width: FishUI.Units.largeSpacing
-                }
-
-                ComboBox {
-                    id: fontsCombobox
-                    model: Fonts.families
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
+        color: FishUI.Theme.secondBackgroundColor
+    }
 
-                    onCurrentTextChanged: {
-                        settings.fontName = currentText
-                    }
+    GridLayout {
+        id: _mainLayout
+        anchors.fill: parent
+        anchors.margins: FishUI.Units.largeSpacing
+        columns: 2
+        columnSpacing: FishUI.Units.largeSpacing * 2
+        rowSpacing: FishUI.Units.largeSpacing * 2
 
-                    Component.onCompleted: {
-                        for (var i = 0; i <= fontsCombobox.model.length; ++i) {
-                            if (fontsCombobox.model[i] === settings.fontName) {
-                                fontsCombobox.currentIndex = i
-                                break
-                            }
-                        }
-                    }
-                }
-            }
+        Label {
+            text: qsTr("Font")
         }
 
-        // Font size
-        Item {
+        ComboBox {
+            id: fontsCombobox
+            model: Fonts.families
+            // Layout.fillHeight: true
             Layout.fillWidth: true
-            Layout.preferredHeight: 45
 
-            Rectangle {
-                anchors.fill: parent
-                color: FishUI.Theme.secondBackgroundColor
-                radius: FishUI.Theme.smallRadius
+            onCurrentTextChanged: {
+                settings.fontName = currentText
             }
 
-            RowLayout {
-                anchors.fill: parent
-                anchors.leftMargin: FishUI.Units.largeSpacing
-                anchors.rightMargin: FishUI.Units.largeSpacing
-
-                Label {
-                    text: qsTr("Font Size")
-                }
-
-                Item {
-                    width: FishUI.Units.largeSpacing
-                }
-
-                Slider {
-                    id: fontSizeSlider
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    from: 5
-                    to: 30
-                    stepSize: 1
-
-                    Component.onCompleted: {
-                        fontSizeSlider.value = settings.fontPointSize
+            Component.onCompleted: {
+                for (var i = 0; i <= fontsCombobox.model.length; ++i) {
+                    if (fontsCombobox.model[i] === settings.fontName) {
+                        fontsCombobox.currentIndex = i
+                        break
                     }
-
-                    onValueChanged: settings.fontPointSize = fontSizeSlider.value
                 }
             }
         }
 
-        Item {
+        Label {
+            text: qsTr("Font Size")
+        }
+
+        Slider {
+            id: fontSizeSlider
+            Layout.fillHeight: true
             Layout.fillWidth: true
-            Layout.preferredHeight: 45
+            from: 5
+            to: 30
+            stepSize: 1
 
-            Rectangle {
-                anchors.fill: parent
-                color: FishUI.Theme.secondBackgroundColor
-                radius: FishUI.Theme.smallRadius
+            Component.onCompleted: {
+                fontSizeSlider.value = settings.fontPointSize
             }
 
-            RowLayout {
-                anchors.fill: parent
-                anchors.leftMargin: FishUI.Units.largeSpacing
-                anchors.rightMargin: FishUI.Units.largeSpacing
-
-                Label {
-                    text: qsTr("Transparency")
-                }
-
-                Item {
-                    width: FishUI.Units.largeSpacing
-                }
-
-                Slider {
-                    id: transparencySlider
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    from: 0.1
-                    to: 1.0
-                    stepSize: 0.05
-
-                    Component.onCompleted: {
-                        transparencySlider.value = settings.opacity
-                    }
+            onValueChanged: settings.fontPointSize = fontSizeSlider.value
+        }
 
-                    onValueChanged: settings.opacity = transparencySlider.value
-                }
-            }
+        Label {
+            text: qsTr("Transparency")
         }
 
-        Item {
+        Slider {
+            id: transparencySlider
+            Layout.fillHeight: true
             Layout.fillWidth: true
-            Layout.preferredHeight: 45
+            from: 0.1
+            to: 1.0
+            stepSize: 0.05
 
-            Rectangle {
-                anchors.fill: parent
-                color: FishUI.Theme.secondBackgroundColor
-                radius: FishUI.Theme.smallRadius
+            Component.onCompleted: {
+                transparencySlider.value = settings.opacity
             }
 
-            RowLayout {
-                anchors.fill: parent
-                anchors.leftMargin: FishUI.Units.largeSpacing
-                anchors.rightMargin: FishUI.Units.smallSpacing
-
-                Label {
-                    text: qsTr("Window Blur")
-                }
-
-                Item {
-                    Layout.fillWidth: true
-                }
+            onValueChanged: settings.opacity = transparencySlider.value
+        }
 
-                Switch {
-                    Layout.fillHeight: true
-                    checked: settings.blur
-                    onCheckedChanged: settings.blur = checked
-                }
-            }
+        Label {
+            text: qsTr("Window Blur")
         }
 
-        Item {
+        Switch {
+            Layout.alignment: Qt.AlignRight
             Layout.fillHeight: true
+            checked: settings.blur
+            onCheckedChanged: settings.blur = checked
         }
     }
 }

translations/en_US.ts

@@ -22,22 +22,27 @@
 <context>
     <name>SettingsDialog</name>
     <message>
-        <location filename="../src/qml/SettingsDialog.qml" line="43"/>
+        <location filename="../src/qml/SettingsDialog.qml" line="10"/>
+        <source>Settings</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="../src/qml/SettingsDialog.qml" line="39"/>
         <source>Font</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/qml/SettingsDialog.qml" line="89"/>
+        <location filename="../src/qml/SettingsDialog.qml" line="63"/>
         <source>Font Size</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/qml/SettingsDialog.qml" line="129"/>
+        <location filename="../src/qml/SettingsDialog.qml" line="82"/>
         <source>Transparency</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location filename="../src/qml/SettingsDialog.qml" line="169"/>
+        <location filename="../src/qml/SettingsDialog.qml" line="101"/>
         <source>Window Blur</source>
         <translation type="unfinished"></translation>
     </message>

translations/zh_CN.ts

@@ -22,22 +22,27 @@
 <context>
     <name>SettingsDialog</name>
     <message>
-        <location filename="../src/qml/SettingsDialog.qml" line="43"/>
+        <location filename="../src/qml/SettingsDialog.qml" line="10"/>
+        <source>Settings</source>
+        <translation>设置</translation>
+    </message>
+    <message>
+        <location filename="../src/qml/SettingsDialog.qml" line="39"/>
         <source>Font</source>
         <translation>字体</translation>
     </message>
     <message>
-        <location filename="../src/qml/SettingsDialog.qml" line="89"/>
+        <location filename="../src/qml/SettingsDialog.qml" line="63"/>
         <source>Font Size</source>
         <translation>字体大小</translation>
     </message>
     <message>
-        <location filename="../src/qml/SettingsDialog.qml" line="129"/>
+        <location filename="../src/qml/SettingsDialog.qml" line="82"/>
         <source>Transparency</source>
         <translation>透明度</translation>
     </message>
     <message>
-        <location filename="../src/qml/SettingsDialog.qml" line="169"/>
+        <location filename="../src/qml/SettingsDialog.qml" line="101"/>
         <source>Window Blur</source>
         <translation>窗口模糊</translation>
     </message>