qtdoc/examples/demos/thermostat/content/TimeSelector.qml

164 lines
4.6 KiB
QML

// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls.Basic
import Thermostat
import ThermostatCustomControls
Rectangle {
id: root
width: 1010
height: 200
radius: 12
required property ScheduleViewForm scheduleViewRoot
gradient: Gradient {
GradientStop {
position: 0.0
color: Constants.backgroundColor
}
GradientStop {
position: 1.0
color: "transparent"
}
}
Row {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
Repeater {
model: root.scheduleViewRoot.selectedHours
Item {
id: column
required property int index
required property int modelData
height: root.height
width: internal.itemWidth
Label {
id: hour
text: column.index
font.pixelSize: internal.hourSize
horizontalAlignment: Text.AlignHCenter
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
font.weight: 700
font.family: "Titillium Web"
color: "#2CDE85"
visible: column.index % 6 === 0 || column.index === 23
}
CustomRoundButton {
id: rec
height: internal.itemHeight
width: internal.itemWidth
contentColor: "#2CDE85"
text: ""
radius: 12
anchors.top: parent.top
anchors.topMargin: internal.itemTopMargin
checked: column.modelData
Connections {
function onClicked() {
root.scheduleViewRoot.selectedHours[column.index]
= !root.scheduleViewRoot.selectedHours[column.index]
}
}
}
Label {
id: bottomHour
text: column.index
font.pixelSize: 14
horizontalAlignment: Text.AlignHCenter
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
font.weight: 600
font.family: "Titillium Web"
color: "#D9D9D9"
visible: internal.bottomHourVisibility
}
}
}
}
QtObject {
id: internal
property int hourSize: 24
property int itemWidth: 40
property int itemHeight: 120
property int itemTopMargin: 55
property int columnHeight: 165
property bool bottomHourVisibility: true
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: root
width: 1010
height: 200
}
PropertyChanges {
target: internal
hourSize: 24
itemWidth: 40
itemHeight: 120
columnHeight: 165
bottomHourVisibility: true
itemTopMargin: 55
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: root
width: 326
height: 150
}
PropertyChanges {
target: internal
hourSize: 14
itemWidth: 13
itemHeight: 110
columnHeight: 110
bottomHourVisibility: false
itemTopMargin: 32
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: root
width: 388
height: 150
}
PropertyChanges {
target: internal
hourSize: 14
itemWidth: 16
itemHeight: 110
columnHeight: 110
bottomHourVisibility: false
itemTopMargin: 24
}
}
]
}