1 files changed, 95 insertions, 31 deletions
diff --git a/basicsuite/mediaplayer/VolumeControl.qml b/basicsuite/mediaplayer/VolumeControl.qml
index f2bd427..c1f3dce 100755..100644
--- a/basicsuite/mediaplayer/VolumeControl.qml
+++ b/basicsuite/mediaplayer/VolumeControl.qml
@@ -49,46 +49,110 @@
 ****************************************************************************/
 
 import QtQuick 2.0
-
+import QtDeviceUtilities.QtButtonImageProvider 1.0
+import QtQuick.Controls 2.2
 Item {
     id: root
-    width: 210
-    height: volumeUp.height
-
+    width: parent.width * 0.1
+    height: parent.height
     property alias volume: volumeSlider.value
+    property bool muted: root.volume == 0.0
+    property bool volumeItemUp: volumeItem.y == (volumeItem.height + volumeItem.height * 0.05)
 
     //Volume Controls
-    ImageButton {
-        id: volumeDown
-        imageSource: "images/VolumeDown.png"
-        anchors.verticalCenter: root.verticalCenter
-        anchors.left: root.left
-        scale: 1.4
+    QtButton{
+        id: toggleVolumeButton
+        width: controlBar.width * 0.06
+        height: width
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: controlBar.width * 0.02
+        anchors.horizontalCenter: parent.horizontalCenter
+        fillColor: viewSettings.buttonGreenColor
+
+        Image{
+            anchors.centerIn: parent
+            width: parent.width * 0.5
+            height: width
+            source: !muted ? "images/volume_icon.svg" : "images/mute_icon.svg"
+            sourceSize.width: parent.width
+            sourceSize.height: parent.height
+        }
         onClicked: {
-            root.volume = 0.0;
+            if (volumeItem.opacity == 0)
+                volumeItem.opacity = 1;
+            else if (volumeItem.opacity > 0)
+                volumeItem.opacity = 0;
+
+            if (volumeItem.y === 0)
+                volumeItem.y -= (volumeItem.height + volumeItem.height * 0.05);
+            else if (volumeItem !== 0)
+                volumeItem.y = 0;
         }
     }
-    Slider {
-        id: volumeSlider
-        anchors.left: volumeDown.right
-        anchors.leftMargin: 22
-        anchors.rightMargin: 22
-        anchors.right: volumeUp.left
-        maximum: 1.0
-        minimum: 0.0
-        anchors.verticalCenter: root.verticalCenter
-        anchors.verticalCenterOffset: 1
-    }
 
-    ImageButton {
-        id: volumeUp
-        imageSource: "images/VolumeUp.png"
-        anchors.verticalCenter: root.verticalCenter
-        anchors.verticalCenterOffset: 1
-        anchors.right: root.right
-        scale: 1.4
-        onClicked: {
-            root.volume = 1.0
+    Item{
+        id: volumeItem
+        height: applicationWindow.height * 0.4
+        anchors.right: toggleVolumeButton.left //?
+        opacity: 0
+        y: 0
+        z: -1000
+        QtButton{
+            id: muteVolumeButton
+            width: controlBar.width * 0.06
+            height: width
+            anchors.bottom: parent.bottom
+            fillColor: viewSettings.buttonGrayColor
+            borderColor: "transparent"
+            Image{
+                anchors.centerIn: parent
+                width: parent.width * 0.5
+                height: parent.height * 0.5
+                source: "images/mute_icon.svg"
+                sourceSize.width: parent.width
+                sourceSize.height: parent.height
+            }
+            onClicked: {
+                root.volume = 0.0
+            }
         }
+
+        Slider {
+            id: volumeSlider
+            anchors.bottom: muteVolumeButton.top
+            anchors.bottomMargin: parent.height * 0.05
+            anchors.top: parent.top
+            anchors.horizontalCenter: muteVolumeButton.horizontalCenter
+            orientation: Qt.Vertical
+
+            background: Rectangle{
+                id: sliderBackground
+                x: volumeSlider.leftPadding + volumeSlider.availableWidth / 2 - width / 2
+                y: volumeSlider.bottomPadding
+                implicitWidth: 5
+                implicitHeight: 200
+                height: volumeSlider.availableHeight
+                width: implicitWidth
+                radius: 2
+                color: "white"
+                Rectangle{
+                    height: volumeSlider.visualPosition * parent.height
+                    width: parent.width
+                    color: defaultGrey
+                    radius: 2
+                }
+            }
+            handle: Rectangle{
+                x: volumeSlider.leftPadding + volumeSlider.availableWidth / 2 - width / 2
+                y: volumeSlider.bottomPadding + volumeSlider.visualPosition * (volumeSlider.availableHeight - height)
+                width: sliderBackground.width * 7
+                height: width
+                radius: height * 0.5
+                color: defaultGreen
+            }
+        }
+
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+        Behavior on y { NumberAnimation { duration: 100 } }
     }
 }