Keyboard: redo UI

Reimplement the UI following MD guidelines. Closes: #22
lirios · Jan 18, 2017 · 1f7edbc · 1f7edbc
1 parent b6e4dfd
commit 1f7edbc
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 215 deletions.
diff --git a/modules/keyboard/contents/AddDialog.qml b/modules/keyboard/contents/AddDialog.qml
@@ -95,11 +95,13 @@ Popup {
 
             Button {
                 text: qsTr("Cancel")
+                flat: true
                 onClicked: addDialog.close()
             }
 
             Button {
                 text: qsTr("OK")
+                flat: true
                 onClicked: {
                     var layout = keyboardData.layouts[layoutComboBox.currentIndex];
                     var variant = layout.variants[variantComboBox.currentIndex];

diff --git a/modules/keyboard/contents/LayoutPage.qml b/modules/keyboard/contents/LayoutPage.qml
@@ -24,13 +24,14 @@
 import QtQuick 2.1
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.0
+import QtQuick.Controls.Material 2.0
 import Fluid.Controls 1.0
+import Fluid.Material 1.0
 import Vibe.Settings 1.0
+import Liri.Settings 1.0
 import Liri.Settings.Keyboard 1.0
 
-ColumnLayout {
-    spacing: Units.largeSpacing
-
+PrefletPage {
     Settings {
         id: keyboardSettings
         schema.id: "io.liri.desktop.peripherals.keyboard"
@@ -66,78 +67,18 @@ ColumnLayout {
         id: addDialog
     }
 
-    ColumnLayout {
-        spacing: Units.smallSpacing
-
-        ColumnLayout {
-            Frame {
-                ListView {
-                    id: savedLayouts
-                    anchors.fill: parent
-                    model: layoutModel
-                    clip: true
-                    delegate: ItemDelegate {
-                        text: model.label
-                        width: savedLayouts.width
-                    }
-
-                    ScrollBar.vertical: ScrollBar {}
-                }
-
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
-
-            Row {
-                ToolButton {
-                    //iconName: "list-add-symbolic"
-                    width: Units.iconSizes.smallMedium
-                    height: width
-                    onClicked: addDialog.open()
-                }
-
-                ToolButton {
-                    //iconName: "list-remove-symbolic"
-                    width: Units.iconSizes.smallMedium
-                    height: width
-                    enabled: savedLayouts.selection.count > 0
-                    onClicked: {
-                        savedLayouts.selection.forEach(function(rowIndex) {
-                            // Remove entry from settings
-                            var layouts = keyboardSettings.layouts;
-                            layouts.splice(rowIndex, 1);
-                            keyboardSettings.layouts = layouts;
-
-                            var variants = keyboardSettings.variants;
-                            variants.splice(rowIndex, 1);
-                            keyboardSettings.variants = variants;
-
-                            // Remove row from model
-                            layoutModel.remove(rowIndex);
-                        });
-                    }
-                }
-            }
-
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-        }
-
-        RowLayout {
-            spacing: Units.smallSpacing
-
-            Label {
-                text: qsTr("Keyboard model:")
-            }
+    ModuleContainer {
+        title: qsTr("Model and Test")
 
-            ComboBox {
+        ListItem {
+            text: qsTr("Model")
+            rightItem: ComboBox {
                 id: modelComboBox
+                anchors.centerIn: parent
                 model: keyboardData.models
                 textRole: "description"
                 onActivated: keyboardSettings.model = keyboardData.models[index].name
 
-                Layout.fillWidth: true
-
                 Component.onCompleted: {
                     var i, value = keyboardSettings.model;
                     for (i = 0; i < keyboardData.models.length; i++) {
@@ -153,13 +94,56 @@ ColumnLayout {
             }
         }
 
-        Pane {
-            TextField {
-                anchors.fill: parent
+        ListItem {
+            secondaryItem: TextField {
+                width: parent.width
                 placeholderText: qsTr("Type to test the layout...")
             }
+        }
+    }
+
+    ModuleContainer {
+        title: qsTr("Layout")
+
+        Repeater {
+            model: layoutModel
+
+            ListItem {
+                text: model.label
+                subText: model.variant || qsTr("No variant")
+                rightItem: Button {
+                    anchors.centerIn: parent
+                    text: qsTr("Remove")
+                    flat: true
+                    onClicked: {
+                        // Remove entry from settings
+                        var layouts = keyboardSettings.layouts;
+                        layouts.splice(index, 1);
+                        keyboardSettings.layouts = layouts;
+
+                        var variants = keyboardSettings.variants;
+                        variants.splice(index, 1);
+                        keyboardSettings.variants = variants;
 
-            Layout.fillWidth: true
+                        // Remove row from model
+                        layoutModel.remove(index);
+                    }
+                }
+            }
+        }
+    }
+
+    ActionButton {
+        anchors {
+            right: parent.right
+            bottom: parent.bottom
+            rightMargin: 100
         }
+
+        iconName: "content/add"
+        onClicked: addDialog.open()
+
+        Material.background: Material.primaryColor
+        Material.elevation: 1
     }
 }
diff --git a/modules/keyboard/contents/Preflet.qml b/modules/keyboard/contents/Preflet.qml
@@ -27,7 +27,7 @@ import QtQuick.Controls 2.0
 import Fluid.Controls 1.0
 import Liri.Settings 1.0
 
-PrefletPage {
+Page {
     header: ToolBar {
         height: bar.height
 
@@ -51,15 +51,11 @@ PrefletPage {
 
     StackLayout {
         anchors.fill: parent
-        anchors.margins: Units.largeSpacing
         currentIndex: bar.currentIndex
 
-        ColumnLayout {
-            Label {
-                text: "Not yet implemented"
-
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            }
+        Placeholder {
+            iconName: "alert/warning"
+            text: "Not implemented yet"
         }
 
         TypingPage {}