Room sidebar list styles

See #34

fractal-gtk/res/app.css

@@ -2,12 +2,37 @@
     background-color: alpha(@borders, 0.25);
 }
 
-.rooms:selected {
-  color: white;
-  background-color: @theme_selected_bg_color;
-}
-
 .full-separator {
     margin-top: 0px;
     margin-bottom: 0px;
 }
+
+.notify-badge {
+    background-color: #555;
+    color: white;
+    font-weight: bold;
+    font-size: 0.8em;
+    border-radius: 10px;
+    min-width: 10px;
+    padding: 1px 5px;
+}
+
+.room-row {
+    padding: 8px 0px;
+}
+
+.room-list list row:selected .notify-badge {
+    background-color: white;
+    color: @theme_selected_bg_color;
+}
+
+.room-list list {
+    background-color: #f4f4f3;
+}
+
+/**
+.room-list list row .avatar {
+    border: 2px solid white;
+    border-radius: 20px;
+}
+**/

fractal-gtk/src/widgets/avatar.rs

@@ -42,6 +42,9 @@ impl AvatarExt for gtk::Box {
         let b = gtk::Box::new(gtk::Orientation::Horizontal, 0);
         b.create_da(size);
         b.show_all();
+        if let Some(style) = b.get_style_context() {
+            style.add_class("avatar");
+        }
 
         b
     }
@@ -51,6 +54,9 @@ impl AvatarExt for gtk::Box {
         b.create_da(size);
         b.circle(path, size);
         b.show_all();
+        if let Some(style) = b.get_style_context() {
+            style.add_class("avatar");
+        }
 
         b
     }

fractal-gtk/src/widgets/roomlist.rs

@@ -49,7 +49,7 @@ impl RoomList {
 
     pub fn set_room_notifications(&self, room: String, n: i32) {
         if let Some(r) = self.rooms.get(&room) {
-            r.notifications.set_text(&format!("{}", n));
+            r.set_notifications(n);
         }
     }
 
@@ -67,6 +67,9 @@ impl RoomList {
 
     pub fn widget(&self) -> gtk::Box {
         let b = gtk::Box::new(gtk::Orientation::Vertical, 0);
+        if let Some(style) = b.get_style_context() {
+            style.add_class("room-list");
+        }
 
         b.pack_start(&self.list, true, true, 0);
         b.show_all();

fractal-gtk/src/widgets/roomrow.rs

@@ -1,3 +1,4 @@
+extern crate pango;
 extern crate url;
 extern crate gtk;
 
@@ -37,7 +38,13 @@ impl RoomRow {
         let avatar = room.avatar.clone().unwrap_or_default();
         let icon = widgets::Avatar::avatar_new(Some(ICON_SIZE));
         let text = gtk::Label::new(name.clone().as_str());
+        text.set_alignment(0.0, 0.0);
+        text.set_ellipsize(pango::EllipsizeMode::End);
+
         let notifications = gtk::Label::new(&format!("{}", room.notifications)[..]);
+        if let Some(style) = notifications.get_style_context() {
+            style.add_class("notify-badge");
+        }
 
         icon.default(String::from("avatar-default-symbolic"), Some(ICON_SIZE));
         download_avatar(baseu, room.id.clone(), name, avatar, &icon);
@@ -50,14 +57,29 @@ impl RoomRow {
         }
     }
 
+    pub fn set_notifications(&self, n: i32) {
+        self.notifications.set_text(&format!("{}", n));
+        match n {
+            0 => self.notifications.hide(),
+            _ => self.notifications.show(),
+        }
+    }
+
     pub fn widget(&self) -> gtk::Box {
-        let b = gtk::Box::new(gtk::Orientation::Horizontal, 0);
+        let b = gtk::Box::new(gtk::Orientation::Horizontal, 5);
+        if let Some(style) = b.get_style_context() {
+            style.add_class("room-row");
+        }
 
         b.pack_start(&self.icon, false, false, 5);
-        b.pack_start(&self.text, true, true, 5);
+        b.pack_start(&self.text, true, true, 0);
         b.pack_start(&self.notifications, false, false, 5);
         b.show_all();
 
+        if self.room.notifications == 0 {
+            self.notifications.hide();
+        }
+
         b
     }
 }