Use Material design for Android application

Bionus · Nov 1, 2020 · 624e0bf · 624e0bf
1 parent 917513b
commit 624e0bf
Show file tree

Hide file tree

Showing 17 changed files with 194 additions and 91 deletions.
diff --git a/src/gui-qml/resources/images/icons/palette.png b/src/gui-qml/resources/images/icons/palette.png
diff --git a/src/gui-qml/resources/images/icons/palette@2x.png b/src/gui-qml/resources/images/icons/palette@2x.png
diff --git a/src/gui-qml/resources/images/icons/palette@3x.png b/src/gui-qml/resources/images/icons/palette@3x.png
diff --git a/src/gui-qml/resources/images/icons/palette@4x.png b/src/gui-qml/resources/images/icons/palette@4x.png
diff --git a/src/gui-qml/resources/resources.qrc b/src/gui-qml/resources/resources.qrc
@@ -81,5 +81,9 @@
         <file>images/icons/play@2x.png</file>
         <file>images/icons/play@3x.png</file>
         <file>images/icons/play@4x.png</file>
+        <file>images/icons/palette.png</file>
+        <file>images/icons/palette@2x.png</file>
+        <file>images/icons/palette@3x.png</file>
+        <file>images/icons/palette@4x.png</file>
     </qresource>
 </RCC>
diff --git a/src/gui-qml/src/components/AddSourceScreen.qml b/src/gui-qml/src/components/AddSourceScreen.qml
@@ -39,7 +39,7 @@ Page {
     ColumnLayout {
         anchors.fill: parent
 
-        Text {
+        Label {
             Layout.fillWidth: true
             text: qsTr("Type")
         }
@@ -49,7 +49,7 @@ Page {
             model: backend.sources
         }
 
-        Text {
+        Label {
             Layout.fillWidth: true
             text: qsTr("URL")
         }

diff --git a/src/gui-qml/src/components/ImageScreen.qml b/src/gui-qml/src/components/ImageScreen.qml
@@ -119,10 +119,10 @@ Page {
                         clip: true
                         padding: 8
 
-                        Text {
+                        Label {
+                            anchors.fill: parent
                             text: modelData.tags.join("<br/>")
                             textFormat: Text.RichText
-                            lineHeight: 1.1
 
                             onLinkActivated: {
                                 root.closed()

diff --git a/src/gui-qml/src/components/LogScreen.qml b/src/gui-qml/src/components/LogScreen.qml
@@ -27,11 +27,10 @@ Page {
     ScrollView {
         anchors.fill: parent
         clip: true
+        padding: 6
 
         Label {
             anchors.fill: parent
-            padding: 6
-            lineHeight: 1.1
             text: log
             textFormat: Text.RichText
         }

diff --git a/src/gui-qml/src/components/SearchField.qml b/src/gui-qml/src/components/SearchField.qml
@@ -10,13 +10,7 @@ FocusScope {
     property alias text: textInput.text
     property alias placeholderText: placeholder.text
 
-    anchors.right: parent.right
-    anchors.rightMargin: 40
-    anchors.left: parent.left
-    anchors.top: parent.top
     activeFocusOnTab: true
-    implicitHeight: 40
-    implicitWidth: Math.round(parent.width)
 
     Rectangle {
         anchors.fill: editbg

diff --git a/src/gui-qml/src/components/SearchScreen.qml b/src/gui-qml/src/components/SearchScreen.qml
@@ -1,6 +1,7 @@
 import QtQml 2.12
 import QtQuick 2.12
 import QtQuick.Controls 2.5
+import QtQuick.Controls.Material 2.12
 import QtQuick.Layouts 1.12
 
 import "../vendor"
@@ -52,96 +53,121 @@ Page {
         }
     }
 
-    ScrollView {
-        anchors.bottomMargin: 40
-        anchors.topMargin: 40
+    ColumnLayout {
+        spacing: 0
         anchors.fill: parent
-        contentHeight: resultsLayout.contentHeight
 
-        ColumnFlow {
-            id: resultsLayout
-            anchors.fill: parent
-            columns: gSettings.resultsColumnCount.value
-            model: results
-
-            onColumnsChanged: resultsRefresher.restart()
+        RowLayout {
+            spacing: 0
+            Layout.fillWidth: true
+            Layout.fillHeight: false
 
-            delegate: Image {
-                source: modelData.previewUrl
-                fillMode: Image.PreserveAspectFit
+            SearchField {
+                id: textFieldSearch
 
-                onHeightChanged: resultsRefresher.restart()
+                text: ""
+                placeholderText: qsTr("Search...")
+                Layout.fillHeight: true
+                Layout.fillWidth: true
 
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: mainStackView.push(imageScreen, { index: index })
-                }
+                onEnterPressed: searchTab.load()
             }
-        }
 
-        Timer {
-            id: resultsRefresher
-            interval: 100
-            running: false
-            repeat: false
+            Button {
+                id: searchButton
+
+                width: 40
+                background.anchors.fill: searchButton
+                text: qsTr("Go")
+                Layout.fillHeight: true
+                Material.elevation: 0
 
-            onTriggered: resultsLayout.reEvalColumns()
+                onClicked: searchTab.load()
+            }
         }
-    }
 
-    Button {
-        width: 40
-        text: "<"
-        anchors.left: parent.left
-        anchors.bottom: parent.bottom
-        enabled: query !== "" && page > 1
+        ScrollView {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            contentHeight: resultsLayout.contentHeight
+            clip: true
 
-        onClicked: {
-            page--
-            searchTab.load()
-        }
-    }
+            ColumnFlow {
+                id: resultsLayout
+                anchors.fill: parent
+                columns: gSettings.resultsColumnCount.value
+                model: results
 
-    Button {
-        width: 40
-        text: ">"
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        enabled: query !== ""
+                onColumnsChanged: resultsRefresher.restart()
 
-        onClicked: {
-            page++
-            searchTab.load()
-        }
-    }
+                delegate: Image {
+                    source: modelData.previewUrl
+                    fillMode: Image.PreserveAspectFit
+
+                    onHeightChanged: resultsRefresher.restart()
 
-    SearchField {
-        id: textFieldSearch
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: mainStackView.push(imageScreen, { index: index })
+                    }
+                }
+            }
 
-        text: ""
-        placeholderText: qsTr("Search...")
+            Timer {
+                id: resultsRefresher
+                interval: 100
+                running: false
+                repeat: false
 
-        onEnterPressed: searchTab.load()
-    }
+                onTriggered: resultsLayout.reEvalColumns()
+            }
+        }
 
-    Button {
-        text: qsTr("Sources")
-        anchors.bottom: parent.bottom
-        anchors.right: parent.right
-        anchors.rightMargin: 40
-        anchors.left: parent.left
-        anchors.leftMargin: 40
+        RowLayout {
+            spacing: 0
+            Layout.fillWidth: true
+            Layout.fillHeight: false
+
+            Button {
+                id: prevButton
+                background.anchors.fill: prevButton
+                width: 40
+                text: "<"
+                enabled: query !== "" && page > 1
+                Layout.fillHeight: true
+                Material.elevation: 0
+
+                onClicked: {
+                    page--
+                    searchTab.load()
+                }
+            }
 
-        onClicked: searchTab.openSources()
-    }
+            Button {
+                id: sourcesButton
+                background.anchors.fill: sourcesButton
+                text: qsTr("Sources")
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Material.elevation: 0
 
-    Button {
-        id: searchButton
-        width: 40
-        text: qsTr("Go")
-        anchors.right: parent.right
-        anchors.top: parent.top
+                onClicked: searchTab.openSources()
+            }
 
-        onClicked: searchTab.load()
+            Button {
+                id: nextButton
+                background.anchors.fill: nextButton
+                width: 40
+                text: ">"
+                enabled: query !== ""
+                Layout.fillHeight: true
+                Material.elevation: 0
+
+                onClicked: {
+                    page++
+                    searchTab.load()
+                }
+            }
+        }
     }
 }
diff --git a/src/gui-qml/src/components/settings/Setting.qml b/src/gui-qml/src/components/settings/Setting.qml
@@ -6,10 +6,12 @@ Item {
     property string key
     property var def
     property var obj: settings
+    property var parser: null
 
-    property var value: root.obj
+    property var value: parser !== null ? parser(rawValue) : rawValue
+    property var rawValue: root.obj
         ? root.obj.value(root.key, root.def)
-        : (typeof def === "boolean" ? false : (typeof def === "number" ? 0 : ""))
+        : root.def
 
     function setValue(val) {
         root.obj.setValue(root.key, val, root.def)

diff --git a/src/gui-qml/src/components/settings/SettingItem.qml b/src/gui-qml/src/components/settings/SettingItem.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.5
 import QtQuick.Controls.impl 2.5
+import QtQuick.Controls.Material 2.12
 import QtQuick.Layouts 1.12
 
 Rectangle {
@@ -33,14 +34,14 @@ Rectangle {
                 width: parent.width
                 spacing: 2
 
-                Text {
+                Label {
                     text: name
                 }
-                Text {
+                Label {
                     visible: !!subtitle
                     text: subtitle
                     font.italic: true
-                    color: Qt.rgba(0, 0, 0, 0.8)
+                    color: Material.secondaryTextColor
                 }
             }
         }

diff --git a/src/gui-qml/src/components/settings/SettingTitle.qml b/src/gui-qml/src/components/settings/SettingTitle.qml
@@ -1,6 +1,6 @@
-import QtQuick 2.12
+import QtQuick.Controls 2.12
 
-Text {
+Label {
     font.bold: true
     padding: 8
     bottomPadding: 4

diff --git a/src/gui-qml/src/components/settings/Settings.qml b/src/gui-qml/src/components/settings/Settings.qml
@@ -1,4 +1,5 @@
 import QtQuick 2.12
+import QtQuick.Controls.Material 2.12
 import Qt.labs.platform 1.1
 
 Item {
@@ -121,6 +122,26 @@ Item {
         obj: root.obj
     }
 
+    // Appearance
+    property Setting appearance_materialTheme: Setting {
+        key: "Appearance/materialTheme"
+        def: Material.System
+        obj: root.obj
+        parser: (v) => globals.materialThemes[Number(v)]
+    }
+    property Setting appearance_materialPrimary: Setting {
+        key: "Appearance/materialPrimary"
+        def: Material.Blue
+        obj: root.obj
+        parser: (v) => globals.materialColors[Number(v)]
+    }
+    property Setting appearance_materialAccent: Setting {
+        key: "Appearance/materialAccent"
+        def: Material.Amber
+        obj: root.obj
+        parser: (v) => globals.materialColors[Number(v)]
+    }
+
     // Mobile-specific settings
     property Setting mobile_confirmExit: Setting {
         key: "Mobile/confirmExit"