Index: sources/gui/qml/components/NotificationBar.qml
===================================================================
diff -u -ra159e12630645a9a35fb0a5585cc7b639cfe6aa6 -rcbea4224ad67eecc2e7c4c66df9a7db711c72832
--- sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision a159e12630645a9a35fb0a5585cc7b639cfe6aa6)
+++ sources/gui/qml/components/NotificationBar.qml	(.../NotificationBar.qml)	(revision cbea4224ad67eecc2e7c4c66df9a7db711c72832)
@@ -21,18 +21,38 @@
 import "qrc:/globals"
 
 Rectangle { id: _root
-    objectName: "NotificationBar" // SquishQt
+    objectName: "NotificationBar"
+    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  imageSource     : _image.source
-    property bool   imageAutoSize   : false
-    property alias  text            : _text.text
-    property alias  textColor       : _text.color
-    property alias  textfontSize    : _text.font.pixelSize
-    property alias  rowAnchors      : _row.anchors
+    signal clickedNotificationBar()
 
-    property int    level           : 0
+    function toggleSilence(silence, timeoutSec) {
+        isSilenced = silence;
+        muteTimeoutSec = !isSilenced ? 0 : timeoutSec;
+        _bell.source = isSilenced ? "qrc:/images/bell-off.svg" : "qrc:/images/bell.svg"
+    }
 
+    // Placeholder animation
+    Timer {
+        id: _timer
+        interval: 1000;
+        running: false;
+        repeat: true;
+        onTriggered: {
+            _root.visible = !_root.visible;
 
+        }
+    }
+
+    function setFlashing(enable) {
+        _timer.running = enable;
+    }
+
     visible : _text.text
 
     height  : Variables.notificationHeight
@@ -44,40 +64,56 @@
         right   : parent.right
     }
 
-    Row { id: _row
-        anchors.centerIn: parent
-        spacing: 10
-        Image { id: _image
-            anchors.verticalCenter: parent.verticalCenter
-            width : imageAutoSize ? Math.min(_root.height, _root.width) : Variables.notificationIconSize
-            height: imageAutoSize ? Math.min(_root.height, _root.width) : Variables.notificationIconSize
-        }
-        Text { id: _text
-            color               : Colors.textNotificationNoneFg
-            font.pixelSize      : Fonts.fontPixelNotification
-            horizontalAlignment : Text.AlignHCenter
-            verticalAlignment   : Text.AlignVCenter
-        }
+    Image {
+        id: _icon
+        source: "qrc:/images/alarm.svg"
+        anchors.right: _text.left
+        anchors.rightMargin: Variables.notificationBarIconMargin;
+        anchors.verticalCenter: parent.verticalCenter;
+        sourceSize.height: Variables.notificationBarIconHeight;
+        sourceSize.width: Variables.notificationBarIconWidth;
     }
 
+    Text { id: _text
+        color               : Colors.textNotificationNoneFg
+        anchors.centerIn    : parent
+        font.pixelSize      : Fonts.fontPixelNotification
+        horizontalAlignment : Text.AlignHCenter
+        verticalAlignment   : Text.AlignVCenter
+
+    }
+
+    Image {
+        id: _bell
+        source: isSilenced ? "qrc:/images/bell-off.svg" : "qrc:/images/bell.svg"
+        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()
+    }
+
+
     onLevelChanged: {
-        switch (level) {
-        case GuiActions.ALARM_PRIORITY_HIGH:
-            _root.color = Colors.textNotificationHighBg;
-            _text.color = Colors.textNotificationHighFg;
-            break;
-        case GuiActions.ALARM_PRIORITY_MEDIUM:
-            _root.color = Colors.textNotificationMedBg;
-            _text.color = Colors.textNotificationMedFg;
-            break;
-        case GuiActions.ALARM_PRIORITY_LOW:
-            _root.color = Colors.textNotificationLowBg;
-            _text.color = Colors.textNotificationLowFg;
-            break;
-        default : // GuiActions.ALARM_PRIORITY_NONE
-            _root.color = Colors.textNotificationNoneBg;
-            _text.color = Colors.textNotificationNoneFg;
-            break;
-        }
+        [_root.color, _text.color] = getRootTextFromAlarmLevel(level);
     }
+
 }