- many design improvements:

- new text inputs
 - new delegate highlighting
 - better text scaling
- some cleanup

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
+                    centerIn: parent
-                    top: parent.top
-                    topMargin: headlineUnderline.anchors.topMargin / 2 - height / 2
                 }
+
+                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 delegateHeight: height * 0.2
-        property int rowSpacing: root.height * 0.01
+        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: {
@@ -270,6 +287,8 @@ Popup {
                 property string title: qsTr("Base Station")
                 property int delegateHeight: height * 0.18
 
+                spacing: options_stack.rowSpacing
+
                 ConnectionDelegate {
                     id: connect_base_del
                     text: "connect"
@@ -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{}
+                InputDelegate {
-                }
-
-                SmoothItemDelegate {
                     id: ready_delay_del
-                    text: qsTr("delay (ms)")
+
-                    contentItem: Text {
+                    width: parent.width
-                        text: parent.text
+                    height: options_stack.delegateHeight
-                        color: appTheme.style.textColor
-                        font.pixelSize: options_stack.text_pixelSize
-                    }
 
                     enabled: ready_del.checked
-                    width: parent.width
-                    font.pixelSize: options_stack.text_pixelSize
-                    height: parent.delegateHeight
 
-                    TextField {
+                    text: qsTr("delay (ms)")
-                        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("ready_delay", ready_del)
+                    inputText: autostart_col.loadSetting("ready_delay", ready_del)
 
-                        onTextChanged: {
+                    onInputTextChanged: {
-                            autostart_col.updateSetting("ready_delay", text, ready_delay_del)
+                        autostart_col.updateSetting("ready_delay", inputText, ready_delay_del)
-                        }
                     }
                 }
 
                 SmoothSwitchDelegate {
                     id: at_marks_del
-                    text: qsTr("say\n'at your marks'")
+
-                    contentItem: Text {
+                    width: parent.width
-                        text: parent.text
+                    height: options_stack.delegateHeight
-                        color: appTheme.style.textColor
+
-                        font.pixelSize: options_stack.text_pixelSize
+                    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 {
+                    onInputTextChanged: {
-                        focus: true
+                        autostart_col.updateSetting("at_marks_delay", inputText, at_marks_delay_del)
-                        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)
-                        }
                     }
                 }
             }
@@ -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"]}

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

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
+            }
+        }
+    }
+}

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
         }
     }
 }

qml/components/SimpleIndicator.qml

@@ -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 <https://www.gnu.org/licenses/>.
-*/
-
-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
-            }
-        }
-    }
-}

qml/components/SmoothItemDelegate.qml

@@ -8,9 +8,23 @@ ItemDelegate {
     property color textColor: appTheme.style.textColor
 
     contentItem: Text {
-        text: parent.text
+        visible: false
-        color: control.textColor
+    }
-        font.pixelSize: parent.font.pixelSize
+
+    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

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
+        visible: false
-        color: appTheme.style.textColor
-        font.pixelSize: options_stack.text_pixelSize
     }
 
+    Text {
 
-    width: parent.width
+        anchors {
-    height: parent.delegateHeight
+            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

qml/qml.qrc

@@ -4,7 +4,6 @@
         <file>ProfilesDialog.qml</file>
         <file>SettingsDialog.qml</file>
         <file>components/ProgressCircle.qml</file>
-        <file>components/SimpleIndicator.qml</file>
         <file>components/ConnectionDelegate.qml</file>
         <file>components/FadeAnimation.qml</file>
         <file>components/ConnectionIcon.qml</file>
@@ -13,5 +12,6 @@
         <file>components/FancyButton.qml</file>
         <file>components/SmoothItemDelegate.qml</file>
         <file>components/SmoothSwitchDelegate.qml</file>
+        <file>components/InputDelegate.qml</file>
     </qresource>
 </RCC>