From dc26169fe0338dbe3b52416b499433bbd1b6770a Mon Sep 17 00:00:00 2001 From: dorian Date: Fri, 29 Mar 2019 19:15:20 +0100 Subject: [PATCH] - many design improvements: - new text inputs - new delegate highlighting - better text scaling - some cleanup --- qml/SettingsDialog.qml | 164 ++++++++++-------------- qml/components/ConnectionDelegate.qml | 6 - qml/components/InputDelegate.qml | 57 ++++++++ qml/components/NextPageDelegate.qml | 4 +- qml/components/SimpleIndicator.qml | 52 -------- qml/components/SmoothItemDelegate.qml | 20 ++- qml/components/SmoothSwitchDelegate.qml | 68 ++++++++-- qml/qml.qrc | 2 +- 8 files changed, 208 insertions(+), 165 deletions(-) create mode 100644 qml/components/InputDelegate.qml delete mode 100644 qml/components/SimpleIndicator.qml diff --git a/qml/SettingsDialog.qml b/qml/SettingsDialog.qml index b470c4c..e267c90 100644 --- a/qml/SettingsDialog.qml +++ b/qml/SettingsDialog.qml @@ -21,6 +21,7 @@ import QtQuick.Window 2.2 import QtQuick.Controls 2.2 import QtQuick.Layouts 1.3 import QtGraphicalEffects 1.0 + import QtQuick.Controls.Styles 1.4 import "./components" Popup { @@ -76,7 +77,7 @@ Popup { } RectangularGlow { - id: effect_2 + id: headerUnderlineEffect glowRadius: 7 spread: 0.02 color: "black" @@ -139,14 +140,21 @@ Popup { Label { id: head_text - text: options_stack.currentItem.title - font.pixelSize: headlineUnderline.width * 0.05 - color: enabled ? appTheme.style.textColor:appTheme.style.disabledTextColor + anchors { - horizontalCenter: parent.horizontalCenter - top: parent.top - topMargin: headlineUnderline.anchors.topMargin / 2 - height / 2 + centerIn: parent } + + width: headlineUnderline.width * 0.4 + height: parent.height + + fontSizeMode: Text.Fit + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + + text: options_stack.currentItem.title + font.pixelSize: headlineUnderline.width * 0.1 + color: enabled ? appTheme.style.textColor:appTheme.style.disabledTextColor } } @@ -195,13 +203,12 @@ Popup { } } } - } StackView { id: options_stack - property int text_pixelSize: root.height * 0.06 - property int rowSpacing: root.height * 0.01 + property int delegateHeight: height * 0.2 + property int rowSpacing: height * 0.01 initialItem: settings width: headlineUnderline.width @@ -224,13 +231,17 @@ Popup { id: settings Column { - property string title: qsTr("Options") id: settings_col + + property string title: qsTr("Options") spacing: options_stack.rowSpacing /*----Connect to external devices----*/ NextPageDelegate { id: connect_del + + height: options_stack.delegateHeight + text: qsTr("Base Station") onClicked: { options_stack.push(connect) @@ -240,6 +251,9 @@ Popup { /*----Automated Start----*/ NextPageDelegate { id: autostart_del + + height: options_stack.delegateHeight + text: qsTr("start sequence") onClicked: { @@ -252,6 +266,9 @@ Popup { id: styleDel text: qsTr("dark mode") + width: parent.width + height: options_stack.delegateHeight + checked: speedBackend.readSetting("theme") === "Dark" onCheckedChanged: { @@ -268,7 +285,9 @@ Popup { Column { id: connect_col property string title: qsTr("Base Station") - property int delegateHeight: height*0.18 + property int delegateHeight: height * 0.18 + + spacing: options_stack.rowSpacing ConnectionDelegate { id: connect_base_del @@ -279,6 +298,8 @@ Popup { type: "baseStation" width: parent.width + height: options_stack.delegateHeight + font.pixelSize: height * 0.6 } @@ -286,6 +307,9 @@ Popup { id: baseStationConnections_del text: qsTr("connected extentions") + width: parent.width + height: options_stack.delegateHeight + onClicked: { options_stack.push(baseStationConnections) } @@ -298,132 +322,85 @@ Popup { id: autostart Column { id: autostart_col + + spacing: options_stack.rowSpacing + property string title: "Autostart" - property int delegateHeight: height*0.18 function updateSetting(key, val, del){ - del.enabled = false - speedBackend.writeSetting(key, val) - - del.enabled = true } function loadSetting(key, del){ - del.enabled = false var val val = speedBackend.readSetting(key) - del.enabled = true return val } SmoothSwitchDelegate { id: ready_del + + width: parent.width + height: options_stack.delegateHeight + text: qsTr("say 'ready'") - contentItem: Text { - text: parent.text - color: appTheme.style.textColor - font.pixelSize: options_stack.text_pixelSize - } checked: parent.loadSetting("ready_en", ready_del) === "true" - width: parent.width - height: parent.delegateHeight - - font.pixelSize: options_stack.text_pixelSize onCheckedChanged: { parent.updateSetting("ready_en",checked, ready_del) - } - - indicator: SimpleIndicator{} } - SmoothItemDelegate { + InputDelegate { id: ready_delay_del - text: qsTr("delay (ms)") - contentItem: Text { - text: parent.text - color: appTheme.style.textColor - font.pixelSize: options_stack.text_pixelSize - } + + width: parent.width + height: options_stack.delegateHeight enabled: ready_del.checked - width: parent.width - font.pixelSize: options_stack.text_pixelSize - height: parent.delegateHeight - TextField { - focus: true - placeholderText: qsTr("time") - width: parent.width * 0.3 - height: parent.height - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - inputMethodHints: Qt.ImhFormattedNumbersOnly + text: qsTr("delay (ms)") - text: autostart_col.loadSetting("ready_delay", ready_del) + inputText: autostart_col.loadSetting("ready_delay", ready_del) - onTextChanged: { - autostart_col.updateSetting("ready_delay", text, ready_delay_del) - } + onInputTextChanged: { + autostart_col.updateSetting("ready_delay", inputText, ready_delay_del) } } SmoothSwitchDelegate { id: at_marks_del - text: qsTr("say\n'at your marks'") - contentItem: Text { - text: parent.text - color: appTheme.style.textColor - font.pixelSize: options_stack.text_pixelSize - } + + width: parent.width + height: options_stack.delegateHeight + + text: qsTr("say 'at your marks'") checked: autostart_col.loadSetting("at_marks_en", ready_del) === "true" - width: parent.width - //height: parent.delegateHeight * 1.5 - - font.pixelSize: options_stack.text_pixelSize onCheckedChanged: { parent.updateSetting("at_marks_en",at_marks_del.checked, at_marks_del) } - - indicator: SimpleIndicator{} } - SmoothItemDelegate { + + InputDelegate { id: at_marks_delay_del + + width: parent.width + height: options_stack.delegateHeight + text: qsTr("delay (ms)") - contentItem: Text { - text: parent.text - color: appTheme.style.textColor - font.pixelSize: options_stack.text_pixelSize - } enabled: at_marks_del.checked - width: parent.width - height: parent.delegateHeight - font.pixelSize: options_stack.text_pixelSize + inputText: autostart_col.loadSetting("at_marks_delay", at_marks_delay_del) - TextField { - focus: true - placeholderText: qsTr("time") - width: parent.width * 0.3 - height: parent.height - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - inputMethodHints: Qt.ImhFormattedNumbersOnly - - text: autostart_col.loadSetting("at_marks_delay", ready_del) - - onTextChanged: { - autostart_col.updateSetting("at_marks_delay",text, at_marks_delay_del) - } + onInputTextChanged: { + autostart_col.updateSetting("at_marks_delay", inputText, at_marks_delay_del) } } } @@ -434,17 +411,18 @@ Popup { id: baseStationConnections ListView { id: baseStationConnections_list - property string title: qsTr("connections") - property int delegateHeight: height * 0.18 + property string title: qsTr("connections") + + spacing: options_stack.rowSpacing boundsBehavior: Flickable.StopAtBounds model: speedBackend.baseStationConnections.length delegate: ConnectionDelegate { - enabled: false - font.pixelSize: height * 0.6 width: parent.width - //height: baseStationConnections_list.delegateHeight + height: options_stack.delegateHeight + + enabled: false text: speedBackend.baseStationConnections[index]["name"] status: {'status': speedBackend.baseStationConnections[index]["state"], 'progress': speedBackend.baseStationConnections[index]["progress"]} diff --git a/qml/components/ConnectionDelegate.qml b/qml/components/ConnectionDelegate.qml index b6edc0c..8e792bb 100644 --- a/qml/components/ConnectionDelegate.qml +++ b/qml/components/ConnectionDelegate.qml @@ -18,12 +18,6 @@ SmoothItemDelegate { } } - contentItem: Text { - text: parent.text - color: appTheme.style.textColor - font.pixelSize: options_stack.text_pixelSize - } - Timer { id: shortDelay running: false diff --git a/qml/components/InputDelegate.qml b/qml/components/InputDelegate.qml new file mode 100644 index 0000000..39c6477 --- /dev/null +++ b/qml/components/InputDelegate.qml @@ -0,0 +1,57 @@ +import QtQuick 2.0 +import QtQuick.Controls 2.3 + +SmoothItemDelegate { + id: control + + property string inputText: "" + + onInputTextChanged: { + textField.text = inputText + } + + text: qsTr("delay (ms)") + + width: parent.width + height: parent.delegateHeight + + TextField { + id: textField + + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + + width: parent.width * 0.3 + height: parent.height + + focus: true + placeholderText: qsTr("time") + + font.pixelSize: height * 0.4 + + opacity: control.enabled ? 1:0.2 + + inputMethodHints: Qt.ImhFormattedNumbersOnly + + palette.text: appTheme.style.textColor + + onTextChanged: { + control.inputText = text + control.inputTextChanged() + } + + background: Rectangle { + implicitWidth: 200 + implicitHeight: 40 + color: "transparent"//control.enabled ? "transparent" : "#353637" + border.color: (textField.activeFocus ? "#21be2b" : "#999999") + radius: height * 0.3 + } + + Behavior on opacity { + NumberAnimation { + duration: 200 + } + } + } +} diff --git a/qml/components/NextPageDelegate.qml b/qml/components/NextPageDelegate.qml index e294c34..cb72245 100644 --- a/qml/components/NextPageDelegate.qml +++ b/qml/components/NextPageDelegate.qml @@ -9,12 +9,12 @@ SmoothItemDelegate { id: forwardImage source: appTheme.style.backIcon rotation: 180 - height: control.font.pixelSize + height: control.height * 0.4 width: height anchors { verticalCenter: parent.verticalCenter right: parent.right - rightMargin: 10 + rightMargin: control.width * 0.01 } } } diff --git a/qml/components/SimpleIndicator.qml b/qml/components/SimpleIndicator.qml deleted file mode 100644 index e4d8acd..0000000 --- a/qml/components/SimpleIndicator.qml +++ /dev/null @@ -1,52 +0,0 @@ -/* - Speed Climbing Stopwatch - Simple Stopwatch for Climbers - Copyright (C) 2018 Itsblue Development - Dorian Zeder - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published - by the Free Software Foundation, version 3 of the License. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -import QtQuick 2.0 - -Rectangle { - property bool checked: parent.checked - property bool down: parent.down - property int set_height: parent.font.pixelSize * 1.4 - implicitWidth: set_height * 1.84 - implicitHeight: set_height - x: parent.width - width - parent.rightPadding - y: parent.height / 2 - height / 2 - radius: implicitHeight * 0.5 - color: parent.checked ? "#17a81a" : "transparent" - border.color: parent.checked ? "#17a81a" : "#cccccc" - Behavior on color{ - ColorAnimation{ - duration: 200 - } - } - - Rectangle { - x: parent.checked ? parent.width - width : 0 - width: parent.height - height: parent.height - radius: height * 0.5 - color: parent.down ? "#cccccc" : "#ffffff" - border.color: parent.checked ? (parent.down ? "#17a81a" : "#21be2b") : "#999999" - Behavior on x{ - NumberAnimation { - property: "x" - duration: 200 - easing.type: Easing.InOutQuad - } - } - } -} diff --git a/qml/components/SmoothItemDelegate.qml b/qml/components/SmoothItemDelegate.qml index cd8fc3c..49810e9 100644 --- a/qml/components/SmoothItemDelegate.qml +++ b/qml/components/SmoothItemDelegate.qml @@ -8,9 +8,23 @@ ItemDelegate { property color textColor: appTheme.style.textColor contentItem: Text { - text: parent.text - color: control.textColor - font.pixelSize: parent.font.pixelSize + visible: false + } + + Text { + + anchors { + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: control.width * 0.02 + } + + text: control.text + color: appTheme.style.textColor + + fontSizeMode: Text.Fit + + font.pixelSize: control.height * 0.4 } width: parent.width diff --git a/qml/components/SmoothSwitchDelegate.qml b/qml/components/SmoothSwitchDelegate.qml index 61ef88f..4c7cccd 100644 --- a/qml/components/SmoothSwitchDelegate.qml +++ b/qml/components/SmoothSwitchDelegate.qml @@ -3,21 +3,73 @@ import QtQuick.Controls 2.3 SwitchDelegate { id: control - text: qsTr("dark mode") + + implicitHeight: 50 + implicitWidth: 100 + + baselineOffset: 100 contentItem: Text { - text: parent.text - color: appTheme.style.textColor - font.pixelSize: options_stack.text_pixelSize + visible: false } + Text { - width: parent.width - height: parent.delegateHeight + anchors { + verticalCenter: parent.verticalCenter + left: parent.left + right: indicator.left + leftMargin: control.width * 0.02 + } - font.pixelSize: options_stack.text_pixelSize + text: control.text + color: appTheme.style.textColor - indicator: SimpleIndicator{} + fontSizeMode: Text.Fit + + font.pixelSize: control.height * 0.4 + } + + indicator: Rectangle { + + property bool checked: parent.checked + property bool down: parent.down + + height: parent.height * 0.6 + width: height * 1.84 + + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: control.width * 0.02 + } + + radius: height * 0.5 + color: parent.checked ? "#17a81a" : "transparent" + border.color: parent.checked ? "#17a81a" : "#cccccc" + + Behavior on color{ + ColorAnimation{ + duration: 200 + } + } + + Rectangle { + x: parent.checked ? parent.width - width : 0 + width: parent.height + height: parent.height + radius: height * 0.5 + color: parent.down ? "#cccccc" : "#ffffff" + border.color: parent.checked ? (parent.down ? "#17a81a" : "#21be2b") : "#999999" + Behavior on x{ + NumberAnimation { + property: "x" + duration: 200 + easing.type: Easing.InOutQuad + } + } + } + } background: Rectangle { opacity: enabled ? 1 : 0.3 diff --git a/qml/qml.qrc b/qml/qml.qrc index 3cc214c..ecb48d7 100644 --- a/qml/qml.qrc +++ b/qml/qml.qrc @@ -4,7 +4,6 @@ ProfilesDialog.qml SettingsDialog.qml components/ProgressCircle.qml - components/SimpleIndicator.qml components/ConnectionDelegate.qml components/FadeAnimation.qml components/ConnectionIcon.qml @@ -13,5 +12,6 @@ components/FancyButton.qml components/SmoothItemDelegate.qml components/SmoothSwitchDelegate.qml + components/InputDelegate.qml