Volume control UI

src/qml/VolumeControl.qml

@@ -0,0 +1,61 @@
+import QtQuick 1.1
+import org.nemomobile.lipstick 0.1
+import com.jolla.components 1.0
+
+Item {
+    property bool isPortrait: true
+    id: volumeWindow
+    width: initialSize.width
+    height: initialSize.height
+
+    Rectangle {
+        property bool shouldBeVisible
+        id: volumeBar
+        width: volumeWindow.isPortrait ? volumeWindow.height : volumeWindow.width
+        height: volumeWindow.isPortrait ? volumeWindow.width : volumeWindow.height
+        transform: Rotation {
+            origin.x: volumeWindow.isPortrait ? volumeWindow.height / 2 : 0;
+            origin.y: volumeWindow.isPortrait ? volumeWindow.height / 2 : 0;
+            angle: volumeWindow.isPortrait ? -90 : 0
+        }
+        color: "black"
+        opacity: volumeBar.shouldBeVisible ? 0.85 : 0
+
+        Rectangle {
+            y: parent.height - height
+            width: parent.width
+            height: parent.height * volumeControl.volume / volumeControl.maximumVolume
+            color: "red"
+            opacity: 0.5
+            Behavior on height { NumberAnimation { duration: 250 } }
+        }
+
+        Timer {
+            id: volumeTimer
+            interval: 1500
+            onTriggered: volumeBar.shouldBeVisible = false
+        }
+
+        Connections {
+            target: volumeControl
+            onWindowVisibleChanged: if (volumeControl.windowVisible) { volumeTimer.restart(); volumeBar.shouldBeVisible = true }
+            onVolumeChanged: if (volumeControl.windowVisible) volumeTimer.restart()
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 250
+                onRunningChanged: if (!running && volumeBar.opacity == 0) volumeControl.windowVisible = false
+            }
+        }
+
+        Image {
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                bottom: parent.bottom
+                bottomMargin: 50
+            }
+            source: volumeControl.volume > 0 ? "image://theme/icon-m-toolbar-volume" : "image://theme/icon-m-common-volume-off"
+        }
+    }
+}

src/resources-qml.qrc

@@ -13,5 +13,6 @@
         <file>qml/pages/Cloud.qml</file>
         <file>qml/pages/Favorites.qml</file>
         <file>qml/NotificationPreview.qml</file>
+        <file>qml/VolumeControl.qml</file>
     </qresource>
 </RCC>

src/src.pro

@@ -35,4 +35,5 @@ OTHER_FILES += \
     qml/pages/Search.qml \
     qml/pages/Cloud.qml \
     qml/pages/Favorites.qml \
-    qml/NotificationPreview.qml
+    qml/NotificationPreview.qml \
+    qml/VolumeControl.qml