feat: improve style of the notification box

Use the Channel box for that

src/app/chat/view.nim

@@ -206,7 +206,7 @@ QtObject:
   proc messagePushed*(self: ChatsView) {.signal.}
   proc newMessagePushed*(self: ChatsView) {.signal.}
 
-  proc messageNotificationPushed*(self: ChatsView, chatId: string, text: string) {.signal.}
+  proc messageNotificationPushed*(self: ChatsView, chatId: string, text: string, messageType: string, chatType: int, timestamp: string, identicon: string, username: string) {.signal.}
 
   proc messagesCleared*(self: ChatsView) {.signal.}
 
@@ -222,7 +222,8 @@ QtObject:
       self.messagePushed()
       if self.channelOpenTime.getOrDefault(msg.chatId, high(int64)) < msg.timestamp.parseFloat.fromUnixFloat.toUnix:
         if msg.chatId != self.activeChannel.id:
-          self.messageNotificationPushed(msg.chatId, msg.text)
+          let channel = self.chats.getChannelById(msg.chatId)
+          self.messageNotificationPushed(msg.chatId, msg.text, msg.messageType, channel.chatType.int, msg.timestamp, msg.identicon, msg.alias)
         else:
           self.newMessagePushed()
 

src/app/chat/views/channels_list.nim

@@ -96,6 +96,11 @@ QtObject:
 
   proc getChannel*(self: ChannelsList, index: int): Chat = self.chats[index]
 
+  proc getChannelById*(self: ChannelsList, chatId: string): Chat =
+    for chat in self.chats:
+      if chat.id == chatId:
+        return chat
+
   proc upsertChannel(self: ChannelsList, channel: Chat): int =
     let idx = self.chats.findIndexById(channel.id)
     if idx == -1:
@@ -109,9 +114,9 @@ QtObject:
       result = idx
 
   proc getChannelColor*(self: ChannelsList, name: string): string =
-    for chat in self.chats:
+    let channel = self.getChannelById(name)
-      if chat.name == name:
+    if (channel == nil): return
-        return chat.color
+    return channel.color
 
   proc updateChat*(self: ChannelsList, channel: Chat, moveToTop: bool = true) =
     let idx = self.upsertChannel(channel)

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -120,7 +120,7 @@ ScrollView {
             }
 
             onActiveChannelChanged: {
-                chatLogView.scrollToBottom(true)
+                Qt.callLater(chatLogView.scrollToBottom.bind(this, true))
             }
 
             onSendingMessage: {
@@ -140,8 +140,8 @@ ScrollView {
                 }, 500);
             }
 
-            onMessageNotificationPushed: function(chatId, msg) {
+            onMessageNotificationPushed: function(chatId, msg, messageType, chatType, timestamp, identicon, username) {
-                notificationWindow.notifyUser(chatId, msg)
+                notificationWindow.notifyUser(chatId, msg, messageType, chatType, timestamp, identicon, username)
             }
         }
 

ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml

@@ -9,6 +9,7 @@ Rectangle {
     property string lastMessage: "My latest message\n with a return"
     property string timestamp: "20/2/2020"
     property string unviewedMessagesCount: "2"
+    property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEXMzMz////TjRV2AAAAAWJLR0QB/wIt3gAAACpJREFUGBntwYEAAAAAw6D7Uw/gCtUAAAAAAAAAAAAAAAAAAAAAAAAAgBNPsAABAjKCqQAAAABJRU5ErkJggg=="
     property bool hasMentions: false
     property int chatType: Constants.chatTypePublic
     property string searchStr: ""
@@ -47,7 +48,7 @@ Rectangle {
       fontSize: !isCompact ? this.defaultFontSize : 14
       channelName: wrapper.name
       channelType: wrapper.chatType
-      channelIdenticon: identicon
+      channelIdenticon: wrapper.identicon
       anchors.left: parent.left
       anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
       anchors.verticalCenter: parent.verticalCenter

ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml

@@ -28,6 +28,7 @@ ScrollView {
             lastMessage: model.lastMessage
             timestamp: model.timestamp
             chatType: model.chatType
+            identicon: model.identicon
             unviewedMessagesCount: model.unviewedMessagesCount
             hasMentions: model.hasMentions
             contentType: model.contentType

ui/shared/NotificationWindow.qml

@@ -2,23 +2,33 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Window 2.12
 import QtQml 2.13
+import QtGraphicalEffects 1.13
 
 import "../imports"
+import "../app/AppLayouts/Chat/ContactsColumn"
 
 Item {
     id: root
-    property var chatId: ""
+    property string chatId: ""
-    property var message: "hello"
+    property string message: "Everything is connected"
+    property int messageType: 1
+    property int chatType: 1
+    property string timestamp: "20/2/2020"
+    property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEXMzMz////TjRV2AAAAAWJLR0QB/wIt3gAAACpJREFUGBntwYEAAAAAw6D7Uw/gCtUAAAAAAAAAAAAAAAAAAAAAAAAAgBNPsAABAjKCqQAAAABJRU5ErkJggg=="
+    property string username: "@jonas"
+
     property var processClick: Backpressure.oneInTime(root, 1000, function () {
         notificationSound.play()
         var w1 = winInit.createObject(null)
         w1.destroy()
-    });
+    })
 
     Component {
         id: winInit
         Window {
-            flags: Qt.WindowStaysOnTopHint | Qt.WindowStaysOnTopHint | Qt.Popup | Qt.WA_ShowWithoutActivating | Qt.WindowStaysOnTopHint | Qt.BypassWindowManagerHint | Qt.WindowStaysOnTopHint
+            flags: Qt.WindowStaysOnTopHint | Qt.WindowStaysOnTopHint | Qt.Popup
+                   | Qt.WA_ShowWithoutActivating | Qt.WindowStaysOnTopHint
+                   | Qt.BypassWindowManagerHint | Qt.WindowStaysOnTopHint
             width: 1
             height: 1
             Component.onCompleted: {
@@ -33,37 +43,57 @@ Item {
 
         Window {
             id: notificationWindowSub
-            flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint | Qt.WA_ShowWithoutActivating | Qt.BypassWindowManagerHint | Qt.WindowStaysOnTopHint | Qt.BypassWindowManagerHint
+            flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
-            x: Screen.width - 250
+                   | Qt.WA_ShowWithoutActivating | Qt.BypassWindowManagerHint
+                   | Qt.WindowStaysOnTopHint | Qt.BypassWindowManagerHint
+            width: 300 + 10
+            height: channelNotif.height + 10
+            x: Screen.width - (width + 50)
             y: 50
-            width: 200
-            height: 100
             visible: true
+            color: Style.current.transparent
+
+            Channel {
+                id: channelNotif
+                name: root.chatType === Constants.chatTypeOneToOne ? root.username : root.chatId
+                lastMessage: root.message
+                timestamp: root.timestamp
+                chatType: root.chatType
+                unviewedMessagesCount: "0"
+                hasMentions: false
+                contentType: root.messageType
+                identicon: root.identicon
+                searchStr: ""
+                isCompact: false
+                color: Style.current.background
+                anchors.rightMargin: 10
+            }
+            DropShadow {
+                anchors.fill: channelNotif
+                horizontalOffset: 2
+                verticalOffset: 5
+                visible: channelNotif.visible
+                source: channelNotif
+                radius: 10
+                samples: 15
+                color: "#ad000000"
+            }
 
-            Rectangle {
-                anchors.fill: parent
-                color: "white"
-                Text {
-                    anchors.centerIn: parent
-                    text: message
             MouseArea {
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
                 onClicked: {
                     timer.stop()
                     notificationWindowSub.close()
-                            mainWin.destroy()
                     applicationWindow.raise()
-                            chatsModel.setActiveChannel(chatId);
+                    chatsModel.setActiveChannel(chatId)
-                        }
-                    }
                 }
             }
 
             Timer {
                 id: timer
-                interval: 4000;
+                interval: 4000
-                running: false;
+                running: false
                 repeat: false
                 onTriggered: {
                     notificationWindowSub.close()
@@ -71,24 +101,29 @@ Item {
             }
             onVisibleChanged: {
                 if (visible) {
-                    timer.running = true;
+                    timer.running = true
                     if (applicationWindow.active) {
                         this.flags |= Qt.Popup
                     } else {
-                        this.flags = Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint | Qt.WA_ShowWithoutActivating | Qt.BypassWindowManagerHint | Qt.WindowStaysOnTopHint | Qt.BypassWindowManagerHint
+                        this.flags = Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint
+                             | Qt.WA_ShowWithoutActivating | Qt.BypassWindowManagerHint
+                             | Qt.WindowStaysOnTopHint | Qt.BypassWindowManagerHint
                     }
-
                 }
             }
         }
     }
 
-    function notifyUser(chatId, msg) {
+    function notifyUser(chatId, msg, messageType, chatType, timestamp, identicon, username) {
         this.chatId = chatId
         this.message = msg
+        this.messageType = parseInt(messageType, 10)
+        this.chatType = chatType
+        this.timestamp = timestamp
+        this.identicon = identicon
+        this.username = username
         processClick()
     }
-
 }
 
 /*##^##
@@ -96,3 +131,4 @@ Designer {
     D{i:0;autoSize:true;height:480;width:640}
 }
 ##^##*/
+