From 1f7edbc9941310dabb1bcd1478a838749a500b77 Mon Sep 17 00:00:00 2001 From: Pier Luigi Fiorini Date: Tue, 17 Jan 2017 00:25:17 +0100 Subject: [PATCH] Keyboard: redo UI Reimplement the UI following MD guidelines. Closes: #22 --- modules/keyboard/contents/AddDialog.qml | 2 + modules/keyboard/contents/LayoutPage.qml | 130 ++++++++--------- modules/keyboard/contents/Preflet.qml | 12 +- modules/keyboard/contents/TypingPage.qml | 178 ++++++----------------- 4 files changed, 107 insertions(+), 215 deletions(-) diff --git a/modules/keyboard/contents/AddDialog.qml b/modules/keyboard/contents/AddDialog.qml index 81f436d..dc1e5c9 100644 --- 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 index 7665b8a..c81b4a0 100644 --- 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 index 54847b9..246d074 100644 --- 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 {} diff --git a/modules/keyboard/contents/TypingPage.qml b/modules/keyboard/contents/TypingPage.qml index 4a7738b..be6ea8c 100644 --- a/modules/keyboard/contents/TypingPage.qml +++ b/modules/keyboard/contents/TypingPage.qml @@ -26,10 +26,9 @@ import QtQuick.Layouts 1.0 import QtQuick.Controls 2.0 import Vibe.Settings 1.0 import Fluid.Controls 1.0 +import Liri.Settings 1.0 -ColumnLayout { - spacing: Units.smallSpacing - +PrefletPage { Settings { id: keyboardSettings schema.id: "io.liri.desktop.peripherals.keyboard" @@ -42,186 +41,97 @@ ColumnLayout { schema.path: "/io/liri/desktop/interface/" } - GroupBox { - id: repeatKeysGroup - label: CheckBox { - text: qsTr("Repeat Keys") - onCheckedChanged: keyboardSettings.repeat = checked - } - - GridLayout { - rows: 2 - columns: 4 - - /* - * Delay - */ - - Label { - text: qsTr("Delay:") - - Layout.alignment: Qt.AlignRight - } + ModuleContainer { + title: qsTr("Typing") - Label { - text: qsTr("Short") - scale: 0.82999999999999996 + ListItem { + text: qsTr("Repeat Keys") + rightItem: Switch { + id: repeatKeysSwitch + anchors.centerIn: parent + onCheckedChanged: keyboardSettings.repeat = checked } + } - Slider { + ListItem { + text: qsTr("Delay") + rightItem: Slider { id: inputIntervalSlider + anchors.centerIn: parent stepSize: 1 from: 0 to: 1000 onValueChanged: keyboardSettings.repeatInterval = to - value - - Layout.fillWidth: true - } - - Label { - text: qsTr("Long") - scale: 0.82999999999999996 - } - - /* - * Speed - */ - - Label { - text: qsTr("Speed:") - - Layout.alignment: Qt.AlignRight - } - - Label { - text: qsTr("Slow") - scale: 0.82999999999999996 } + } - Slider { + ListItem { + text: qsTr("Speed") + rightItem: Slider { id: autoRepeatRateSlider + anchors.centerIn: parent stepSize: 1 from: 0 to: 1000 onValueChanged: keyboardSettings.delay = to - value - - Layout.fillWidth: true - } - - Label { - text: qsTr("Fast") - scale: 0.82999999999999996 } } - - Layout.fillWidth: true } - GroupBox { - id: cursorBlinkingGroup - label: CheckBox { - text: qsTr("Cursor Blinking") - onCheckedChanged: uiSettings.cursorBlink = checked - } - - GridLayout { - rows: 2 - columns: 4 + ModuleContainer { + title: qsTr("Cursor") - /* - * Blink Time - */ - - Label { - text: qsTr("Speed:") - - Layout.alignment: Qt.AlignRight - } - - Label { - text: qsTr("Slow") - scale: 0.82999999999999996 + ListItem { + text: qsTr("Cursor Blinking") + rightItem: Switch { + id: cursorBlinkingSwitch + anchors.centerIn: parent } + } - Slider { + ListItem { + text: qsTr("Speed") + rightItem: Slider { id: cursorFlashTimeSlider + anchors.centerIn: parent stepSize: 1 from: 100 to: 2500 onValueChanged: uiSettings.cursorBlinkTime = to - value - - Layout.fillWidth: true - } - - Label { - text: qsTr("Fast") - scale: 0.82999999999999996 - } - - /* - * Blink Timeout - */ - - Label { - text: qsTr("Timeout:") - - Layout.alignment: Qt.AlignRight - } - - Label { - text: qsTr("Slow") - scale: 0.82999999999999996 } + } - Slider { + ListItem { + text: qsTr("Timeout") + rightItem: Slider { id: cursorFlashTimeoutSlider + anchors.centerIn: parent stepSize: 1 from: 1 to: 2147483647 onValueChanged: uiSettings.cursorBlinkTimeout = to - value - - Layout.fillWidth: true - } - - Label { - text: qsTr("Fast") - scale: 0.82999999999999996 } } - - Layout.fillWidth: true } - GroupBox { - id: inputSourcesGroup + ModuleContainer { title: qsTr("Input Sources") - RowLayout { - spacing: Units.smallSpacing - - Switch { + ListItem { + text: qsTr("Virtual Keyboard") + rightItem: Switch { id: virtualKeyboardSwitch onCheckedChanged: uiSettings.inputMethod = checked ? "qtvirtualkeyboard" : "" } - - Label { - text: qsTr("Virtual Keyboard") - } } - - Layout.fillWidth: true - } - - Item { - Layout.fillHeight: true } Component.onCompleted: { - repeatKeysGroup.label.checked = keyboardSettings.repeat; - cursorBlinkingGroup.label.checked = uiSettings.cursorBlink; + repeatKeysSwitch.checked = keyboardSettings.repeat; + cursorBlinkingSwitch.checked = uiSettings.cursorBlink; inputIntervalSlider.value = inputIntervalSlider.to - keyboardSettings.repeatInterval; autoRepeatRateSlider.value = autoRepeatRateSlider.to - keyboardSettings.delay; cursorFlashTimeSlider.value = cursorFlashTimeSlider.to - uiSettings.cursorBlinkTime; - virtualKeyboardSwitch.checked = uiSettings.inputMethod == "qtvirtualkeyboard" + virtualKeyboardSwitch.checked = uiSettings.inputMethod === "qtvirtualkeyboard"; } }