ScStw/app
ScStw/app
2
0
Fork 0
Code Issues 6 Pull requests Packages Projects Releases 2 Wiki Activity

- many design improvements:

Browse source 
- new text inputs
 - new delegate highlighting
 - better text scaling
- some cleanup
This commit is contained in:
Dorian Zedler 2019-03-29 19:15:20 +01:00
parent f62a2f5b94
commit dc26169fe0
8 changed files with 208 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
qml/SettingsDialog.qml
View file

@ -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"]}

6
qml/components/ConnectionDelegate.qml
View file

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

4
qml/components/NextPageDelegate.qml
View file

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

52
qml/components/SimpleIndicator.qml
View file

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

20
qml/components/SmoothItemDelegate.qml
View file

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

68
qml/components/SmoothSwitchDelegate.qml
View file

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

2
qml/qml.qrc
View file

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