Merge lp:~danrabbit/pantheon-notify/ui-fixes into lp:~tombeckmann/pantheon-notify/trunk

[Danielle Foré]

Just some UI fixes.

CSS - I'm just keeping the critical and low states the same as the normal ones for now. I'll come back and replace those with some good ones after I've had time to make some nice mocks. Adding -unico-inner-stroke for the top highlight and reverted the outer border to a single color stroke.

Text padding - Text should now have sane padding all the way around it and not run into the edge of the window in any way

Icons - Using the nice big 48px icons from the mockup for super easy recognition and for consistency with gtk.dialog

=== modified file 'data/notifications.css'
--- data/notifications.css	2012-04-21 18:21:59 +0000
+++ data/notifications.css	2012-04-21 19:53:20 +0000
@@ -5,23 +5,29 @@
 * {
     /*-notify-shadow: 0px 2px 18px alpha (#000, 0.60);*/
     
-    border-radius: 4px;
+    border-radius: 5px;
     border-width: 1px;
     border-style: solid;
+	-unico-inner-stroke-width: 1px;
     
     border-color: alpha (#000, 0.3);
-    border-top-color: #fbfbfb;
+
+    -unico-inner-stroke-gradient: -gtk-gradient (linear,
+                     left bottom, left top,
+                     from (alpha (#fff, 0.40)),
+                     color-stop (0.20, alpha (#fff, 0.10)),
+                     color-stop (0.80, alpha (#fff, 0.10)),
+                     to (#fff));
     
-    background-color: alpha (#f9f9f9, 0.9);
+    background-color: alpha (#f8f8f8, 0.9);
 }
 
 /*low priority*/
 .low {
-    background-color: alpha (#f9f9f9, 0.5);
+    /*background-color: alpha (#f9f9f9, 0.5);*/
 }
 
 /*high priority*/
 .critical {
-    background-color: alpha (#f50000, 0.9);
-    border-top-color: #f00;
+    /*background-color: alpha (#f50000, 0.9);*/
 }
 \ No newline at end of file
 
=== modified file 'src/notification.vala'
--- src/notification.vala	2012-04-21 19:46:06 +0000
+++ src/notification.vala	2012-04-21 19:53:20 +0000
@@ -90,9 +90,15 @@
         
         text = new Clutter.Text.with_text ("", "");
         
+        text.x = SHADOW + 60;
         this.set_text (name, body);
+<<<<<<< TREE
         text.add_constraint (new Clutter.BindConstraint (draw, Clutter.BindCoordinate.HEIGHT, -SHADOW*2-5));
         text.width = WIDTH - (text.x+SHADOW);
+=======
+        text.add_constraint (new Clutter.BindConstraint (draw, Clutter.BindCoordinate.HEIGHT, -SHADOW * 2 - 9));
+        text.width = WIDTH - (text.x+SHADOW) - 6;
+>>>>>>> MERGE-SOURCE
         text.line_wrap = true;
         text.line_wrap_mode = Pango.WrapMode.WORD_CHAR;
         text.ellipsize = Pango.EllipsizeMode.END;
@@ -117,12 +123,17 @@
         
         
         text.y = SHADOW+8;
+<<<<<<< TREE
         tex.y  = SHADOW+8;
         tex.x  = SHADOW+5;
         text.x = tex.x + tex.width + 5;
         
         category.x = WIDTH-(42+SHADOW);
         category.y = tex.y;
+=======
+        tex.y  = SHADOW+3;
+        tex.x  = SHADOW+3;
+>>>>>>> MERGE-SOURCE
         
         this.width  = WIDTH;
         this.reactive = true;
@@ -234,21 +245,21 @@
             } else {
                 try {
                     tex.set_from_icon_name (new Gtk.Image (), 
-                        hints.lookup ("image-path").get_string (), Gtk.IconSize.DND);
+                        hints.lookup ("image-path").get_string (), Gtk.IconSize.DIALOG);
                 } catch (Error e) { warning (e.message); }
             }
         } else if (icon != "") {                                    /*app_icon*/
             debug ("Using app icon");
             try {
-                tex.set_from_icon_name (new Gtk.Image (), icon, Gtk.IconSize.DND);
+                tex.set_from_icon_name (new Gtk.Image (), icon, Gtk.IconSize.DIALOG);
             } catch (Error e) {  //not an icon name? try a stock icon
                 try {
                     print ("Trying stock icon %s\n", icon);
-                    tex.set_from_stock (new Gtk.Image (), icon, Gtk.IconSize.DND);
+                    tex.set_from_stock (new Gtk.Image (), icon, Gtk.IconSize.DIALOG);
                 } catch (Error e) { //still not? well... the app name perhaps?
                     try {
                         print ("Trying app icon %s\n", app);
-                        tex.set_from_icon_name (new Gtk.Image (), app, Gtk.IconSize.DND);
+                        tex.set_from_icon_name (new Gtk.Image (), app, Gtk.IconSize.DIALOG);
                     } catch (Error e) { warning (e.message); } //hm...
                 }
             }
@@ -264,11 +275,11 @@
         } else {
             try {                                                   /*icon from the app perhaps?*/
                 debug ("Using app name");
-                tex.set_from_icon_name (new Gtk.Image (), app.down (), Gtk.IconSize.DND);
+                tex.set_from_icon_name (new Gtk.Image (), app.down (), Gtk.IconSize.DIALOG);
             } catch (Error e) {
                 debug ("Using fallback");
                 try {                                               /*dialog-information icon as fallback*/
-                    tex.set_from_icon_name (new Gtk.Image (), "dialog-information", Gtk.IconSize.DND);
+                    tex.set_from_icon_name (new Gtk.Image (), "dialog-information", Gtk.IconSize.DIALOG);
                 } catch (Error e) { warning (e.message); }
             }
         }
 
=== modified file 'src/pantheon-notify.vala'
--- src/pantheon-notify.vala	2012-04-21 19:45:28 +0000
+++ src/pantheon-notify.vala	2012-04-21 19:53:20 +0000
@@ -1,6 +1,16 @@
 
+<<<<<<< TREE
 public const int WIDTH = 300;
 public const int HEIGHT = 76; //56+2*10px shadow
+=======
+public const string NOTIFY_STYLE = """
+
+""";
+
+// FIXME: Width and Height should automatically take shadow into account
+public const int WIDTH = 320; //300 + (2 * 10)px shadow
+public const int HEIGHT = 76; //56 + (2 * 10)px shadow
+>>>>>>> MERGE-SOURCE
 public const int SHADOW = 10;
 public const int EXPIRE = 7000; //in ms