Index: sources/gui/qml/components/NotificationBar.qml
===================================================================
diff -u -re58be51c4aa52938af250db3ee579e98de08542c -rcd769413344091cea88a30861b49188c8c147cba
--- sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision e58be51c4aa52938af250db3ee579e98de08542c)
+++ sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision cd769413344091cea88a30861b49188c8c147cba)
@@ -25,30 +25,28 @@
     objectName: "NotificationBar" // SquishQt
     property alias text             : _text.text
     property alias textColor        : _text.color
-    property int   level            : 0
-    property bool  isSilenced       : false
-    property int   muteTimeoutSec   : 0
-    property color backgroundColor  : Colors.textNotificationNoneBg
+    property alias isSilenced       : _muteButton.isSilenced
+    property alias timeout          : _muteButton.timeout
+    property alias backgroundColor  : _root.color
     property alias iconVisible      : _icon.visible
+    property bool  enableMute       : true
 
+    clip    : true // the mute button expands so we need to clip the outside unwanted area.
     visible : _text.text
     height  : Variables.notificationHeight
     color   : Colors.textNotificationNoneBg
-    //radius  : Variables.dialogRadius
+    radius  : Variables.dialogRadiusHalf
     anchors {
         bottom  : parent.bottom
         left    : parent.left
         right   : parent.right
     }
 
-    signal clickedNotificationBar()
+    signal clicked()
+    signal muteClicked()
+    signal listClicked()
+    signal maximizeClicked()
 
-    function toggleSilence(silence, timeoutSec) {
-        isSilenced = silence;
-        muteTimeoutSec = !isSilenced ? 0 : timeoutSec;
-        _bell.source = isSilenced ? "qrc:/images/iBellOff" : "qrc:/images/iBellOn"
-    }
-
     Image {
         id: _icon
         source: "qrc:/images/iAlarm"
@@ -68,37 +66,56 @@
 
     }
 
-    Image {
-        id: _bell
-        source: isSilenced ? "qrc:/images/iBellOff" : "qrc:/images/iBellOn"
-        anchors.left: _root.left
-        anchors.leftMargin: Variables.silenceIconMargin;
-        anchors.verticalCenter: parent.verticalCenter;
-        sourceSize.height: Variables.notificationBarIconHeight;
-        sourceSize.width: Variables.notificationBarIconWidth;
-    }
-
-    Text { id: _timeout_text
-        color               : Colors.textMain;
-        anchors.left        : _bell.right
-        anchors.leftMargin  : Variables.notificationBarIconMargin;
-        anchors.verticalCenter: parent.verticalCenter;
-        font.pixelSize      : Fonts.fontPixelNotification
-        horizontalAlignment : Text.AlignHCenter
-        verticalAlignment   : Text.AlignVCenter
-        text: muteTimeoutSec; // will be 60 second or less (see PRS)
-        visible: isSilenced;
-    }
-
     MouseArea {
         id: _TouchArea
         anchors.fill: parent;
-        onClicked: _root.clickedNotificationBar()
+        onClicked: _root.clicked()
     }
 
+    MuteButton { id: _muteButton
+        anchors {
+            verticalCenter  : _root.verticalCenter
+            left            : _root.left
+            leftMargin      : Variables.silenceIconMargin
+        }
+        // might be another event
+        // but call the same as the rest of the bar for now
+        // when it has it's own event then the borderColor transparency can be removed as well
+        // to indicate the touchable area.
+        borderColor : _root.enableMute ? Colors.white       : Colors.transparent
+        onClicked   : _root.enableMute ? _root.muteClicked(): _root.clicked()
+    }
 
-    onLevelChanged: {
-        [_root.color, _text.color] = getRootTextFromAlarmLevel(level);
+    UpDownButton { id: _updownButton
+        isUp: true
+        anchors {
+            verticalCenter  : _root.verticalCenter
+            right           : _root.right
+            rightMargin     : Variables.silenceIconMargin
+        }
+        onClicked: _root.maximizeClicked()
     }
 
+    TouchRect { id: _alarmsList
+        height: 45
+        width : height
+
+        color       : Colors.transparent
+        borderColor : Colors.white
+
+        anchors {
+            verticalCenter  : _root.verticalCenter
+            right           : _updownButton.left
+            rightMargin     : Variables.silenceIconMargin * 2
+        }
+
+        Image { id: _image
+            anchors.centerIn: parent
+            height  : 25
+            width   : 25
+            source  : "qrc:/images/iList"
+        }
+
+        onClicked: _root.listClicked()
+    }
 }