diff --git a/fractal-gtk/res/app.css b/fractal-gtk/res/app.css index 4c3e5e0e..0d75e139 100644 --- a/fractal-gtk/res/app.css +++ b/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; +} +**/ diff --git a/fractal-gtk/src/widgets/avatar.rs b/fractal-gtk/src/widgets/avatar.rs index 0b03b59a..cdf36dc9 100644 --- a/fractal-gtk/src/widgets/avatar.rs +++ b/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 } diff --git a/fractal-gtk/src/widgets/roomlist.rs b/fractal-gtk/src/widgets/roomlist.rs index ba9d706a..531f03cf 100644 --- a/fractal-gtk/src/widgets/roomlist.rs +++ 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(); diff --git a/fractal-gtk/src/widgets/roomrow.rs b/fractal-gtk/src/widgets/roomrow.rs index bc2763b2..0206eb44 100644 --- a/fractal-gtk/src/widgets/roomrow.rs +++ b/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 } }