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

some styling improvements and fixes

This commit is contained in:
Dorian Zedler 2020-10-06 14:01:11 +02:00
parent 628e2c4e32
commit 08cabc0459
Signed by: dorian
GPG Key ID: D3B255CB8BC7CD37
7 changed files with 231 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
resources/qml/MainPage/CenterContent.qml
View File

@ -34,8 +34,9 @@ Item {
property double size
Layout.preferredHeight: app.landscape() ? centerLayout.height:Math.min(centerLayout.width * size, centerLayout.height * size)
Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):centerLayout.width
Layout.preferredHeight: app.landscape() ? centerLayout.height * 0.8:Math.min(centerLayout.width * size, centerLayout.height * size)
Layout.preferredWidth: app.landscape() ? Math.min(centerLayout.width * size, centerLayout.height * size):centerLayout.width * 0.8
Layout.alignment: Layout.Center
Behavior on size {
@ -49,7 +50,7 @@ Item {
id: centerExtraContentTopStack
anchors.fill: parent
anchors.margins: parent.width * 0.1
anchors.margins: 1
property QtObject newItem: emptyComp
@ -87,40 +88,93 @@ Item {
Component {
id: waitingDetailsComp
Item {
Column {
opacity: 0
scale: 0.9
Row {
anchors.fill: parent
id: stateIndicatorRow
spacing: centerExtraContentTopStack.anchors.margins
property int delegateWidth: width / stateIndicatorRepeater.model - (spacing * (stateIndicatorRepeater.model - 1) / stateIndicatorRepeater.model)
property int delegateHeight: height
StateIndicator {
width: parent.width * 0.5 - parent.spacing * 0.5
height: parent.height
width: parent.width
height: parent.height * 0.9
backgroundColor: appTheme.theme.colors.background
successColor: appTheme.theme.colors.success
spacing: width * 0.1
state: speedBackend.race.timers[0]["readyState"] === ScStwTimer.IsReady ? "success":"warn"
Repeater {
id: stateIndicatorRepeater
onStateChanged: {
console.log("STATE CHANGED: " + JSON.stringify( speedBackend.race.timers[0]))
model: speedBackend.race.timers.length
delegate: ColumnLayout {
id: timerStatusColumn
property var thisTimer: speedBackend.race.timers[index]
width: parent.delegateWidth
height: parent.delegateHeight
Label {
Layout.preferredWidth: parent.width
Layout.preferredHeight: parent.height * 0.1
font.pixelSize: height * 0.8
fontSizeMode: Text.Fit
minimumPointSize: 1
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: appTheme.theme.colors.text
text: "Lane " + timerStatusColumn.thisTimer["letter"]
}
StateIndicator {
Layout.fillWidth: true
Layout.fillHeight: true
backgroundColor: appTheme.theme.colors.background
successColor: appTheme.theme.colors.success
warningColor: appTheme.theme.colors.warning
state: timerStatusColumn.thisTimer["readyState"] === ScStwTimer.IsReady ?
"success":timerStatusColumn.thisTimer["readyState"] === ScStwTimer.IsDisabled ?
"unknown":"warn"
indicatorSize: 0.8
MouseArea {
anchors.fill: parent
onClicked: {
var disabled = timerStatusColumn.thisTimer["state"] !== ScStwTimer.DISABLED
console.log("setting timer to disabled: " + disabled)
speedBackend.race.setTimerDisabled(timerStatusColumn.thisTimer["id"], disabled)
}
}
}
}
}
StateIndicator {
width: parent.width * 0.5 - parent.spacing * 0.5
height: parent.height
backgroundColor: appTheme.theme.colors.background
successColor: appTheme.theme.colors.success
state: speedBackend.race.timers[1]["readyState"] === ScStwTimer.IsReady ? "success":"warn"
}
}
Label {
width: parent.width
height: parent.height * 0.1
font.pixelSize: height * 0.6
fontSizeMode: Text.Fit
minimumPointSize: 1
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: appTheme.theme.colors.text
text: "Tap on a lane to disable it"
}
}
}

31
resources/qml/MainPage/TopToolBar.qml
View File

@ -1,5 +1,5 @@
import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Controls 2.9
import "../components"
import "../components/layout"
@ -144,29 +144,42 @@ ToolBar {
model: Object.keys(speedBackend.scStwClient.extensions)
delegate: Rectangle {
id: statusRect
property string thisLetter: modelData
property var thisExtensions: speedBackend.scStwClient.extensions[modelData]
property bool allExtensionConnected: areAllExtensionConnected(thisExtensions)
width: height
height: parent.height
radius: width * 0.1
color: getStatusColor(speedBackend.scStwClient.extensions[modelData]) // TODO
color: appTheme.theme.colors.background
border.color: allExtensionConnected ? appTheme.theme.colors.success:appTheme.theme.colors.error
border.width: width * 0.08
onThisExtensionsChanged: {
allExtensionConnected = areAllExtensionConnected(thisExtensions)
}
function getStatusColor(extensions) {
function areAllExtensionConnected(extensions) {
for(var i = 0; i < extensions.length; i++) {
console.log(JSON.stringify(extensions[i]))
if(extensions[i]["state"] !== ScStw.ExtensionConnected || extensions[i]["batteryState"] !== ScStw.BatteryFine)
return appTheme.theme.colors.error
return false
}
return appTheme.theme.colors.success
return true
}
Behavior on border.color {
ColorAnimation {
duration: 200
}
}
Behavior on color {
ColorAnimation {
duration: 200
}
@ -178,10 +191,10 @@ ToolBar {
text: parent.thisLetter
fontSizeMode: Text.Fit
font.pixelSize: height
font.pixelSize: height * 0.7
font.bold: true
color: appTheme.theme.colors.background
color: statusRect.border.color
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter

8
resources/qml/SettingsDialog/SettingsExtensionsPage.qml
View File

@ -35,7 +35,7 @@ ListView {
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width * 0.98
height: parentObj.delegateHeight * extensionsList.model.length
height: parentObj.delegateHeight * extensionsList.model
radius: width * 0.05
@ -88,13 +88,13 @@ ListView {
interactive: false
model: speedBackend.scStwClient.extensions[parent.thisLane]
model: speedBackend.scStwClient.extensions[parent.thisLane].length
delegate: ConnectionDelegate {
property var thisExtension: modelData
property var thisExtension: speedBackend.scStwClient.extensions[laneContainerRect.thisLane][index]
property var stateTranslations: ["disconnected", "connecting", "connecting", "connected"]
height: extensionsList.height / extensionsList.model.length
height: extensionsList.height / extensionsList.model
enabled: true

44
resources/qml/components/ConnectionDelegate.qml
View File

@ -29,7 +29,7 @@ SmoothItemDelegate {
onStatusChanged: {
if(oldState !== status.status) {
if(status.status === "disconnected" && oldState === "connecting") {
statusIndicator.color_override = appTheme.theme.colors.error
statusIndicator.color_override = "error"
shortDelay.start()
}
oldState = status.status
@ -56,47 +56,19 @@ SmoothItemDelegate {
height: control.height * 0.4
width: height
Rectangle {
StateIndicator {
id: statusIndicator
property string color_override: ""
anchors.fill: parent
color: color_override === "" ? status.status === "connected" ? appTheme.theme.colors.success:"transparent":color_override
opacity: status.status === "connecting" ? 0:1
radius: height * 0.5
border.color: appTheme.theme.colors.line
border.width: 1
state: color_override === "" ? status.status === "connected" ? "success": status.status === "connecting" ? "working":"unknown":color_override
Behavior on color {
ColorAnimation {
duration: 200
}
}
indicatorSize: 0.8
Behavior on opacity {
NumberAnimation {
duration: 800
radius: border.width * 2
}
}
}
ProgressCircle {
id: prog
anchors.fill: parent
opacity: status.status === "connecting" ? 1:0
lineWidth: 1
arcBegin: 0
arcEnd: 360 * ( status.progress / 100 )
colorCircle: appTheme.theme.colors.line
onColorCircleChanged: prog.repaint()
onArcEndChanged: prog.repaint()
Behavior on opacity {
NumberAnimation {
duration: 200
}
}
backgroundColor: appTheme.theme.colors.background
successColor: appTheme.theme.colors.success
errorColor: appTheme.theme.colors.error
}
}
}

2
resources/qml/components/MainActionButton.qml
View File

@ -100,7 +100,7 @@ DelayButton {
onPaint: {
var progress
var showHoldProgress = ((control.oldSartProgress <= 0 || control.oldStartProgress === 1) && control.progressControlActivated)
var showHoldProgress = ((control.oldStartProgress <= 0 || control.oldStartProgress === 1) && control.progressControlActivated)
if(showHoldProgress)
progress = control.progress

129
resources/qml/components/StateIndicator.qml
View File

@ -8,18 +8,21 @@ Rectangle {
property color errorColor: "red"
property color unknownColor: "grey"
property color backgroundColor: "white"
property color workingColor: "grey"
property double indicatorSize: 1
height: app.height * 0.9
width: height * 0.8
color: backgroundColor
border.width: Math.min(width * 0.1, height * 0.1)
border.width: Math.min(width * 0.1, height * 0.1) * control.indicatorSize
border.color: "green"
radius: border.width * 0.5
state: "success"
clip: true
Rectangle {
id: higherRect
@ -28,6 +31,8 @@ Rectangle {
property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height))
radius: width * 0.5
border.width: 0
border.color: control.workingColor
color: "green"
@ -40,11 +45,105 @@ Rectangle {
property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height))
radius: width * 0.5
border.width: 0
border.color: control.workingColor
color: "green"
}
ParallelAnimation {
id: workingAnimation
property int from: Math.min(parent.width * 0.1, parent.height * 0.1) * control.indicatorSize
property int to: Math.max(parent.width * 0.98, parent.height * 0.98)
property bool shouldBeRunning: false
running: false
loops: Animation.Infinite
onShouldBeRunningChanged: {
pauseAnimation.start()
}
NumberAnimation {
target: higherRect
properties: "height"
from: workingAnimation.from
to: workingAnimation.to
duration: 1000
easing.type: Easing.InQuad
}
NumberAnimation {
target: higherRect
properties: "opacity"
from: 1
to: 0.5
duration: 1000
easing.type: Easing.InQuad
}
}
PauseAnimation {
id: pauseAnimation
duration: 400
onStopped: {
workingAnimation.running = workingAnimation.shouldBeRunning
}
}
states: [
State {
name: "working"
PropertyChanges {
target: control
border.color: control.workingColor
}
PropertyChanges {
target: higherRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: height
height: Math.min(parent.width * 0.1, parent.height * 0.1) * control.indicatorSize
color: "transparent"
border.color: control.workingColor
border.width: control.border.width
}
PropertyChanges {
target: lowerRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: height
height: Math.min(parent.width * 0.2, parent.height * 0.2) * control.indicatorSize
color: control.workingColor
}
PropertyChanges {
target: workingAnimation
shouldBeRunning: true
}
},
State {
name: "unknown"
PropertyChanges {
@ -59,7 +158,7 @@ Rectangle {
y: (parent.height - height) / 2
width: control.border.width
height: Math.min(parent.width * 0.7, parent.height * 0.7)
height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize
color: control.unknownColor
@ -73,7 +172,7 @@ Rectangle {
y: (parent.height - height) / 2
width: control.border.width
height: Math.min(parent.width * 0.7, parent.height * 0.7)
height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize
color: control.unknownColor
@ -82,7 +181,11 @@ Rectangle {
},
State {
id: errorState
name: "error"
property int distance: control.height * 0.1
PropertyChanges {
target: control
border.color: control.errorColor
@ -92,10 +195,10 @@ Rectangle {
target: higherRect
x: (parent.width - width) / 2
y: parent.height * 0.15
y: control.border.width + parent.height * 0.15
width: control.border.width
height: parent.height * 0.5
height: parent.height * 0.4 * control.indicatorSize
color: control.errorColor
}
@ -104,7 +207,7 @@ Rectangle {
target: lowerRect
x: (parent.width - width) / 2
y: parent.height - (parent.height * 0.15 + height)
y: higherRect.y + higherRect.height + errorState.distance
width: control.border.width * 1.3
height: width
@ -127,7 +230,7 @@ Rectangle {
y: (parent.height - height) / 2
width: control.border.width
height: Math.min(parent.width * 0.7, parent.height * 0.7)
height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize
color: control.warningColor
@ -141,7 +244,7 @@ Rectangle {
y: (parent.height - height) / 2
width: control.border.width
height: Math.min(parent.width * 0.7, parent.height * 0.7)
height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize
color: control.warningColor
@ -158,9 +261,9 @@ Rectangle {
name: "success"
PropertyChanges {
target: control
border.color: control.successColor
}
target: control
border.color: control.successColor
}
PropertyChanges {
target: higherRect
@ -169,7 +272,7 @@ Rectangle {
y: tickState.bottomY - height / 2 - (Math.cos(rotation * Math.PI / 180) * (height / 2 - radius))
width: control.border.width
height: Math.min(parent.width * 0.6, parent.height * 0.6)
height: Math.min(parent.width * 0.6, parent.height * 0.6) * control.indicatorSize
rotation: 40
@ -183,7 +286,7 @@ Rectangle {
y: tickState.bottomY - height / 2 - (Math.cos(rotation * Math.PI / 180) *(height / 2 - radius))
width: control.border.width
height: Math.min(parent.width * 0.3, parent.height * 0.3)
height: Math.min(parent.width * 0.3, parent.height * 0.3) * control.indicatorSize
rotation: -40

2
shared-libraries

@ -1 +1 @@
Subproject commit c9bf8126157252d6bf84a5216e0bf3f42214157f
Subproject commit bc7baa32bed3b7733b1dbbeb235bcc06fba73b82