updated clock module: added animations and removed redundancies
This commit is contained in:
SomeElse
@@ -203,14 +203,56 @@ Rectangle {
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: "‹"; color: root.t.clockPopupDim; font.pixelSize: 18; font.bold: true
|
||||
Rectangle {
|
||||
id: prevMonthBtn
|
||||
width: 26; height: 26; radius: 6
|
||||
color: prevBtnMouse.containsMouse
|
||||
? (prevBtnMouse.pressed ? root.t.calArrowBgPress : root.t.calArrowBgHover)
|
||||
: root.t.calArrowBg
|
||||
scale: prevBtnMouse.pressed ? 0.88 : 1.0
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
Behavior on scale { NumberAnimation { duration: 100; easing.type: Easing.OutCubic } }
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent; cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
cal.displayMonth -= 1
|
||||
if (cal.displayMonth < 0) { cal.displayMonth = 11; cal.displayYear -= 1 }
|
||||
id: prevBtnMouse
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
function goToPrev() {
|
||||
if (slideAnim.running) return
|
||||
cal.slideDir = -1
|
||||
let m = cal.displayMonth - 1
|
||||
let y = cal.displayYear
|
||||
if (m < 0) { m = 11; y -= 1 }
|
||||
cal.pendingMonth = m
|
||||
cal.pendingYear = y
|
||||
slideAnim.restart()
|
||||
}
|
||||
|
||||
onPressed: { goToPrev(); prevHoldDelay.restart() }
|
||||
onReleased: { prevHoldDelay.stop(); prevHoldRepeat.stop() }
|
||||
onCanceled: { prevHoldDelay.stop(); prevHoldRepeat.stop() }
|
||||
|
||||
Timer {
|
||||
id: prevHoldDelay
|
||||
interval: 400; repeat: false
|
||||
onTriggered: prevHoldRepeat.restart()
|
||||
}
|
||||
Timer {
|
||||
id: prevHoldRepeat
|
||||
interval: 200; repeat: true
|
||||
onTriggered: prevBtnMouse.goToPrev()
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "‹"
|
||||
color: prevBtnMouse.containsMouse ? root.t.calArrowIconHover : root.t.calArrowIcon
|
||||
font.pixelSize: 18; font.bold: true
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -221,14 +263,56 @@ Rectangle {
|
||||
Layout.fillWidth: true; horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "›"; color: root.t.clockPopupDim; font.pixelSize: 18; font.bold: true
|
||||
Rectangle {
|
||||
id: nextMonthBtn
|
||||
width: 26; height: 26; radius: 6
|
||||
color: nextBtnMouse.containsMouse
|
||||
? (nextBtnMouse.pressed ? root.t.calArrowBgPress : root.t.calArrowBgHover)
|
||||
: root.t.calArrowBg
|
||||
scale: nextBtnMouse.pressed ? 0.88 : 1.0
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
Behavior on scale { NumberAnimation { duration: 100; easing.type: Easing.OutCubic } }
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent; cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
cal.displayMonth += 1
|
||||
if (cal.displayMonth > 11) { cal.displayMonth = 0; cal.displayYear += 1 }
|
||||
id: nextBtnMouse
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
function goToNext() {
|
||||
if (slideAnim.running) return
|
||||
cal.slideDir = 1
|
||||
let m = cal.displayMonth + 1
|
||||
let y = cal.displayYear
|
||||
if (m > 11) { m = 0; y += 1 }
|
||||
cal.pendingMonth = m
|
||||
cal.pendingYear = y
|
||||
slideAnim.restart()
|
||||
}
|
||||
|
||||
onPressed: { goToNext(); nextHoldDelay.restart() }
|
||||
onReleased: { nextHoldDelay.stop(); nextHoldRepeat.stop() }
|
||||
onCanceled: { nextHoldDelay.stop(); nextHoldRepeat.stop() }
|
||||
|
||||
Timer {
|
||||
id: nextHoldDelay
|
||||
interval: 400; repeat: false
|
||||
onTriggered: nextHoldRepeat.restart()
|
||||
}
|
||||
Timer {
|
||||
id: nextHoldRepeat
|
||||
interval: 200; repeat: true
|
||||
onTriggered: nextBtnMouse.goToNext()
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "›"
|
||||
color: nextBtnMouse.containsMouse ? root.t.calArrowIconHover : root.t.calArrowIcon
|
||||
font.pixelSize: 18; font.bold: true
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -237,8 +321,11 @@ Rectangle {
|
||||
id: cal
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: gridCol.implicitHeight
|
||||
property int displayYear: timeManager.now.getFullYear()
|
||||
property int displayMonth: timeManager.now.getMonth()
|
||||
property int displayYear: timeManager.now.getFullYear()
|
||||
property int displayMonth: timeManager.now.getMonth()
|
||||
property int pendingYear: displayYear
|
||||
property int pendingMonth: displayMonth
|
||||
property int slideDir: 1
|
||||
|
||||
Connections {
|
||||
target: calendarPopup
|
||||
@@ -250,9 +337,35 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
id: slideAnim
|
||||
NumberAnimation {
|
||||
target: gridCol; property: "x"
|
||||
to: -cal.slideDir * cal.width
|
||||
duration: 80; easing.type: Easing.InCubic
|
||||
}
|
||||
ScriptAction {
|
||||
script: {
|
||||
cal.displayMonth = cal.pendingMonth
|
||||
cal.displayYear = cal.pendingYear
|
||||
gridCol.x = cal.slideDir * cal.width
|
||||
}
|
||||
}
|
||||
NumberAnimation {
|
||||
target: gridCol; property: "x"
|
||||
to: 0
|
||||
duration: 100; easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: calGridClip
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
|
||||
ColumnLayout {
|
||||
id: gridCol
|
||||
anchors.fill: parent
|
||||
width: parent.width
|
||||
spacing: 2
|
||||
|
||||
Row {
|
||||
@@ -298,28 +411,41 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle { Layout.fillWidth: true; height: 1; color: root.t.calSeparator }
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true; spacing: 12
|
||||
Text { text: ""; color: root.t.clockIcon; font.pixelSize: 16 }
|
||||
ColumnLayout {
|
||||
spacing: 0; Layout.fillWidth: true
|
||||
Text {
|
||||
text: timeManager.now.toLocaleTimeString(Qt.locale(), "t") || "UTC"
|
||||
color: root.t.clockPopupText; font.pixelSize: 12; font.bold: true
|
||||
}
|
||||
Text {
|
||||
text: "UTC " + (root.tzOffsetHours >= 0 ? "+" : "") + root.tzOffsetHours
|
||||
color: root.t.clockPopupDim; font.pixelSize: 10
|
||||
}
|
||||
}
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: 6
|
||||
Layout.rightMargin: 6
|
||||
|
||||
Text {
|
||||
text: timeManager.now.toLocaleTimeString(Qt.locale(), "HH:mm:ss")
|
||||
color: root.t.clockTime; font.pixelSize: 20; font.bold: true; font.family: "monospace"
|
||||
text: "UTC " + (root.tzOffsetHours >= 0 ? "+" : "") + root.tzOffsetHours
|
||||
color: root.t.clockPopupUtc
|
||||
font.pixelSize: 13
|
||||
font.bold: true
|
||||
font.family: "monospace"
|
||||
}
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
|
||||
Text {
|
||||
text: {
|
||||
let d = timeManager.now
|
||||
let month = d.getMonth() + 1
|
||||
let day = d.getDate()
|
||||
let year = d.getFullYear()
|
||||
if (Cfg.Config.clockDateFormat === "DMY")
|
||||
return day + "/" + month + "/" + year
|
||||
return month + "/" + day + "/" + year
|
||||
}
|
||||
color: root.t.clockPopupDate
|
||||
font.pixelSize: 14
|
||||
font.bold: true
|
||||
font.family: "monospace"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -402,6 +402,14 @@ Rectangle {
|
||||
onPressed: pos => sliderItem.seek(pos.x)
|
||||
onPositionChanged: pos => { if (pressed) sliderItem.seek(pos.x) }
|
||||
}
|
||||
WheelHandler {
|
||||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||
onWheel: event => {
|
||||
const step = 2
|
||||
const delta = event.angleDelta.y > 0 ? step : -step
|
||||
vs.sliderMoved(Math.max(0, Math.min(vs.maxVolume, vs.volume + delta)))
|
||||
}
|
||||
}
|
||||
function seek(x) {
|
||||
let ratio = Math.max(0.0, Math.min(1.0, x / sliderItem.width))
|
||||
vs.sliderMoved(Math.round(ratio * vs.maxVolume))
|
||||
|
||||
Reference in New Issue
Block a user