- many design improvements:
- new text inputs - new delegate highlighting - better text scaling - some cleanup
This commit is contained in:
parent
f62a2f5b94
commit
dc26169fe0
8 changed files with 208 additions and 165 deletions
|
|
@ -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"]}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
57
qml/components/InputDelegate.qml
Normal file
57
qml/components/InputDelegate.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Reference in a new issue