ETM-Schurig/powersync-app
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve closable views a bit

Browse Source
This commit is contained in:
Michael Zanetti 2019-11-30 14:19:34 +01:00
parent 1ab384428b
commit d9ab4ad200
4 changed files with 92 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
nymea-app/resources.qrc
View File

@ -187,6 +187,7 @@
<file>ui/devicepages/DeviceBrowserPage.qml</file>
<file>ui/devicelistpages/MediaDeviceListPage.qml</file>
<file>ui/components/MediaControls.qml</file>
<file>ui/components/ClosableArrowAnimation.qml</file>
<file>ui/components/MediaArtworkImage.qml</file>
<file>ui/components/BrowserContextMenu.qml</file>
<file>ui/magic/SelectBrowserItemActionPage.qml</file>

48
nymea-app/ui/components/ClosableArrowAnimation.qml Normal file
View File

@ -0,0 +1,48 @@
import QtQuick 2.0
Item {
id: arrows
width: app.iconSize * 2
height: parent.height * .6
clip: true
visible: state !== ""
state: "" // "opening", "closing" or ""
readonly property bool up: arrows.state === "opening"
// NumberAnimation doesn't reload to/from while it's running. If we switch from closing to opening or vice versa
// we need to somehow stop and start the animation
property bool animationHack: true
onAnimationHackChanged: {
if (!animationHack) hackTimer.start();
}
Timer { id: hackTimer; interval: 1; onTriggered: arrows.animationHack = true }
onStateChanged: arrows.animationHack = false
NumberAnimation {
target: arrowColumn
property: "y"
duration: 500
easing.type: Easing.Linear
from: arrows.up ? app.iconSize : -app.iconSize
to: arrows.up ? -app.iconSize : app.iconSize
loops: Animation.Infinite
running: arrows.animationHack && (arrows.state === "opening" || arrows.state === "closing")
}
Column {
id: arrowColumn
width: parent.width
Repeater {
model: arrows.height / app.iconSize + 1
ColorIcon {
name: arrows.up ? "../images/up.svg" : "../images/down.svg"
width: parent.width
height: width
color: app.accentColor
}
}
}
}

17
nymea-app/ui/components/ShutterControls.qml
View File

@ -14,6 +14,8 @@ RowLayout {
property bool invert: false
signal activated(string button);
ItemDelegate {
Layout.preferredWidth: app.iconSize * 2
Layout.preferredHeight: width
@ -24,7 +26,10 @@ RowLayout {
name: root.invert ? "../images/down.svg" : "../images/up.svg"
color: root.openState && root.openState.value === "opening" ? Material.accent : keyColor
}
onClicked: engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("open").id)
onClicked: {
engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("open").id)
root.activated("open")
}
}
@ -39,7 +44,10 @@ RowLayout {
anchors.margins: app.margins
name: "../images/media-playback-stop.svg"
}
onClicked: engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("stop").id)
onClicked: {
engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("stop").id)
root.activated("stop")
}
}
ItemDelegate {
@ -52,6 +60,9 @@ RowLayout {
name: root.invert ? "../images/up.svg" : "../images/down.svg"
color: root.openState && root.openState.value === "closing" ? Material.accent : keyColor
}
onClicked: engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("close").id)
onClicked: {
engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("close").id)
root.activated("close")
}
}
}

31
nymea-app/ui/devicepages/ShutterDevicePage.qml
View File

@ -22,8 +22,26 @@ DevicePageBase {
id: shutterImage
Layout.preferredWidth: root.landscape ? Math.min(parent.width - shutterControlsContainer.width, parent.height) - app.margins : parent.width
Layout.preferredHeight: width
name: "../images/shutter/shutter-" + app.pad(Math.round(root.percentageState.value / 10) * 10, 3) + ".svg"
visible: isExtended
name: "../images/shutter/shutter-" + app.pad(isExtended ? Math.round(root.percentageState.value / 10) * 10 : 50, 3) + ".svg"
ClosableArrowAnimation {
id: arrowAnimation
anchors.centerIn: parent
onStateChanged: {
if (state != "") {
animationTimer.start();
}
}
Timer {
id: animationTimer
running: false
interval: 5000
repeat: false
onTriggered: parent.state = ""
}
}
}
Item {
@ -73,6 +91,15 @@ DevicePageBase {
device: root.device
anchors.horizontalCenter: parent.horizontalCenter
spacing: (parent.width - app.iconSize*2*children.length) / (children.length - 1)
onActivated: {
if (button == "open") {
arrowAnimation.state = "opening"
} else if (button == "close") {
arrowAnimation.state = "closing"
} else {
arrowAnimation.state = ""
}
}
}
}
}