Notifications: Improve Windows notification style

gajim/data/gui/popup_notification_window.ui

 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.1 -->
+<!-- Generated with glade 3.22.2 -->
 <interface>
-  <requires lib="gtk+" version="3.12"/>
+  <requires lib="gtk+" version="3.20"/>
   <object class="GtkEventBox" id="eventbox">
-    <property name="name">PopupNotificationEventBox</property>
+    <property name="name">NotificationPopup</property>
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <child>
       <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="border_width">4</property>
         <property name="spacing">6</property>
         <child>
-          <object class="GtkImage" id="image">
-            <property name="width_request">68</property>
-            <property name="height_request">86</property>
+          <object class="GtkBox" id="color_bar">
+            <property name="width_request">6</property>
             <property name="visible">True</property>
             <property name="can_focus">False</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <placeholder/>
+            </child>
           </object>
           <packing>
             <property name="expand">False</property>
-            <property name="fill">False</property>
+            <property name="fill">True</property>
             <property name="position">0</property>
           </packing>
         </child>
+        <child>
+          <object class="GtkImage" id="image">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="icon_size">6</property>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
         <child>
           <object class="GtkBox">
             <property name="visible">True</property>
@@ -36,11 +50,10 @@
                 <property name="can_focus">False</property>
                 <child>
                   <object class="GtkLabel" id="event_type_label">
+                    <property name="name">NotificationPopupTitle</property>
                     <property name="width_request">196</property>
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
-                    <property name="label" translatable="yes">Event Type</property>
-                    <property name="use_markup">True</property>
                     <property name="wrap">True</property>
                     <property name="xalign">0</property>
                   </object>
@@ -68,7 +81,7 @@
                   </object>
                   <packing>
                     <property name="expand">False</property>
-                    <property name="fill">False</property>
+                    <property name="fill">True</property>
                     <property name="position">1</property>
                   </packing>
                 </child>
@@ -82,14 +95,14 @@
             <child>
               <object class="GtkLabel" id="event_description_label">
                 <property name="width_request">218</property>
-                <property name="height_request">64</property>
+                <property name="height_request">50</property>
                 <property name="visible">True</property>
                 <property name="can_focus">False</property>
-                <property name="label" translatable="yes">Event desc</property>
                 <property name="wrap">True</property>
                 <property name="ellipsize">end</property>
                 <property name="max_width_chars">30</property>
                 <property name="xalign">0</property>
+                <property name="yalign">0</property>
               </object>
               <packing>
                 <property name="expand">False</property>
@@ -101,7 +114,7 @@
           <packing>
             <property name="expand">False</property>
             <property name="fill">True</property>
-            <property name="position">1</property>
+            <property name="position">2</property>
           </packing>
         </child>
       </object>

gajim/data/style/default.css

@@ -50,3 +50,30 @@ .gajim-msg-correcting text {
 .gajim-search-highlight {
     color: rgb(170, 220, 220)
 }
+.gajim-notify-message {
+	color: rgb(30, 144, 255);
+}
+.gajim-notify-signin {
+	color: rgb(68, 134, 38);
+}
+.gajim-notify-signout {
+	color: rgb(134, 22, 22);
+}
+.gajim-notify-status {
+	color: rgb(170, 170, 170);
+}
+.gajim-notify-invite {
+	color: rgb(224, 145, 42);
+}
+.gajim-notify-ft-request {
+	color: rgb(240, 230, 140);
+}
+.gajim-notify-ft-error {
+	color: rgb(226, 33, 33);
+}
+.gajim-notify-ft-complete {
+	color: rgb(139, 185, 48);
+}
+.gajim-notify-other {
+	color: rgb(255, 255, 255);
+}

gajim/data/style/gajim.css

@@ -280,3 +280,23 @@ #GroupchatJoin > box {padding: 18px; }
 
 .assistant-grid { padding: 18px; margin: 6px;}
 .assistant-grid > box stack  { padding: 18px; }
+
+/* Windows notification */
+#NotificationPopup {
+    background-color: #333333;
+    padding: 4px;
+}
+#NotificationPopup label {
+    color: #FFF;
+}
+#NotificationPopup button {
+    border-width: 0;
+    background-image: none;
+    background-color: inherit;
+    box-shadow: none;
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+}
+#NotificationPopupTitle {
+    font-weight: bold;
+}

gajim/gtk/notification.py

@@ -36,6 +36,7 @@
 from gajim.common import app
 from gajim.common import helpers
 from gajim.common import ged
+from gajim.common.const import StyleAttr
 from gajim.common.i18n import _
 from gajim.common.nec import EventHelper
 
@@ -252,10 +253,8 @@ def __init__(self, event_type, jid, account, msg_type='',
         self.set_type_hint(Gdk.WindowTypeHint.NOTIFICATION)
         self.set_focus_on_map(False)
         self.set_accept_focus(False)
-        self.set_name('NotificationPopup')
         self.set_skip_taskbar_hint(True)
         self.set_decorated(False)
-        self.set_size_request(312, 95)
 
         self._timeout_id = None
         self.account = account
@@ -265,57 +264,53 @@ def __init__(self, event_type, jid, account, msg_type='',
         self._ui = get_builder('popup_notification_window.ui')
         self.add(self._ui.eventbox)
 
-        if not text:
-            text = app.get_name_from_jid(account, jid)  # default value of text
-        if not title:
-            title = ''
-
-        self._ui.event_type_label.set_markup(
-            '<span foreground="black" weight="bold">%s</span>' %
-            GLib.markup_escape_text(title))
-
-        css = '#NotificationPopup {background-color: black }'
-        gtkgui_helpers.add_css_to_widget(self, css)
-
         if event_type == _('Contact Signed In'):
-            bg_color = app.config.get('notif_signin_color')
+            bg_color = app.css_config.get_value('.gajim-notify-signin',
+                                                StyleAttr.COLOR)
         elif event_type == _('Contact Signed Out'):
-            bg_color = app.config.get('notif_signout_color')
+            bg_color = app.css_config.get_value('.gajim-notify-signout',
+                                                StyleAttr.COLOR)
         elif event_type in (_('New Message'),
-                            _('New Private Message'), _('New E-mail')):
-            bg_color = app.config.get('notif_message_color')
+                            _('New Private Message'),
+                            _('New E-mail')):
+            bg_color = app.css_config.get_value('.gajim-notify-message',
+                                                StyleAttr.COLOR)
         elif event_type == _('File Transfer Request'):
-            bg_color = app.config.get('notif_ftrequest_color')
+            bg_color = app.css_config.get_value('.gajim-notify-ft-request',
+                                                StyleAttr.COLOR)
         elif event_type == _('File Transfer Error'):
-            bg_color = app.config.get('notif_fterror_color')
+            bg_color = app.css_config.get_value('.gajim-notify-ft-error',
+                                                StyleAttr.COLOR)
         elif event_type in (_('File Transfer Completed'),
                             _('File Transfer Stopped')):
-            bg_color = app.config.get('notif_ftcomplete_color')
+            bg_color = app.css_config.get_value('.gajim-notify-ft-complete',
+                                                StyleAttr.COLOR)
         elif event_type == _('Group Chat Invitation'):
-            bg_color = app.config.get('notif_invite_color')
+            bg_color = app.css_config.get_value('.gajim-notify-invite',
+                                                StyleAttr.COLOR)
         elif event_type == _('Contact Changed Status'):
-            bg_color = app.config.get('notif_status_color')
-        else: # Unknown event! Shouldn't happen but deal with it
-            bg_color = app.config.get('notif_other_color')
+            bg_color = app.css_config.get_value('.gajim-notify-status',
+                                                StyleAttr.COLOR)
+        else:  # Unknown event (shouldn't happen, but deal with it)
+            bg_color = app.css_config.get_value('.gajim-notify-other',
+                                                StyleAttr.COLOR)
+
+        bar_class = '''
+            .popup-bar {
+                background-color: %s
+            }''' % bg_color
+        gtkgui_helpers.add_css_to_widget(self._ui.color_bar, bar_class)
+        self._ui.color_bar.get_style_context().add_class('popup-bar')
 
-        background_class = '''
-            .popup-style {
-                border-image: none;
-                background-image: none;
-                background-color: %s }''' % bg_color
-
-        gtkgui_helpers.add_css_to_widget(self._ui.eventbox, background_class)
-        self._ui.eventbox.get_style_context().add_class('popup-style')
-
-        gtkgui_helpers.add_css_to_widget(
-            self._ui.close_button, background_class)
-        self._ui.close_button.get_style_context().add_class('popup-style')
+        if not title:
+            title = ''
+        self._ui.event_type_label.set_markup(title)
 
+        if not text:
+            text = app.get_name_from_jid(account, jid)  # default value of text
         escaped_text = GLib.markup_escape_text(text)
-        self._ui.event_description_label.set_markup(
-            '<span foreground="black">%s</span>' % escaped_text)
+        self._ui.event_description_label.set_markup(escaped_text)
 
-        # set the image
         self._ui.image.set_from_icon_name(icon_name, Gtk.IconSize.DIALOG)
 
         self.move(*self._get_window_pos())