[fractal] directory: Adapt room directory for mobile sizes

[Daniel Garcia Moreno <danigm src gnome org>]

commit 197e0631579f8d02269c081deaf2b0037916ea76
Author: Christopher Davis <brainblasted disroot org>
Date:   Mon Jul 8 02:02:16 2019 -0700

    directory: Adapt room directory for mobile sizes
    
    Makes it so that the room directory can scale down to mobile
    sizes.

 fractal-gtk/res/app.css                  |  10 +++
 fractal-gtk/res/ui/main_window.ui        | 104 ++++++++++++++++++++++---------
 fractal-gtk/src/app/connect/directory.rs |   3 +
 fractal-gtk/src/app/connect/markdown.rs  |   2 +-
 fractal-gtk/src/widgets/room.rs          |  16 ++---
 5 files changed, 97 insertions(+), 38 deletions(-)
---
diff --git a/fractal-gtk/res/app.css b/fractal-gtk/res/app.css
index e170d607..d1b2c3b0 100644
--- a/fractal-gtk/res/app.css
+++ b/fractal-gtk/res/app.css
@@ -79,6 +79,16 @@
   font-size: x-small;
 }
 
+frame.room-directory > border {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.room-directory {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
 .room-directory row {
   padding-top: 18px;
   padding-bottom: 18px;
diff --git a/fractal-gtk/res/ui/main_window.ui b/fractal-gtk/res/ui/main_window.ui
index 1cac9479..10198e8e 100644
--- a/fractal-gtk/res/ui/main_window.ui
+++ b/fractal-gtk/res/ui/main_window.ui
@@ -634,9 +634,11 @@
                 <property name="can_focus">False</property>
                 <property name="orientation">vertical</property>
                 <child>
-                  <object class="GtkHeaderBar">
+                  <object class="HdyHeaderBar">
                     <property name="can_focus">False</property>
                     <property name="show_close_button">True</property>
+                    <property name="width_request">360</property>
+                    <property name="centering_policy">HDY_CENTERING_POLICY_STRICT</property>
                     <child>
                       <object class="GtkButton" id="back_button">
                         <property name="visible">True</property>
@@ -658,56 +660,98 @@
                       </object>
                     </child>
                     <child type="title">
-                      <object class="GtkSearchEntry" id="directory_search_entry">
+                      <object class="HdyColumn">
+                        <property name="can_focus">False</property>
                         <property name="visible">True</property>
-                        <property name="can_focus">True</property>
-                        <property name="width_chars">30</property>
-                        <property name="primary_icon_name">edit-find-symbolic</property>
-                        <property name="primary_icon_activatable">False</property>
-                        <property name="primary_icon_sensitive">False</property>
+                        <property name="maximum_width">288</property>
+                        <property name="linear_growth_width">288</property>
+                        <child>
+                          <object class="GtkSearchEntry" id="directory_search_entry">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="hexpand">True</property>
+                            <property name="primary_icon_name">edit-find-symbolic</property>
+                            <property name="primary_icon_activatable">False</property>
+                            <property name="primary_icon_sensitive">False</property>
+                          </object>
+                        </child>
                       </object>
                     </child>
                     <child>
-                      <object class="GtkMenuButton" id="server_chooser_menu">
-                        <property name="visible">True</property>
-                        <property name="can_focus">True</property>
-                        <property name="receives_default">True</property>
-                        <property name="popover">server_chooser_popover</property>
+                      <object class="HdySqueezer">
                         <child>
-                          <object class="GtkBox">
+                          <object class="GtkMenuButton" id="server_chooser_menu">
                             <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="spacing">6</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <property name="popover">server_chooser_popover</property>
                             <child>
-                              <object class="GtkLabel" id="directory_choice_label">
+                              <object class="GtkBox">
                                 <property name="visible">True</property>
                                 <property name="can_focus">False</property>
-                                <property name="label" translatable="yes">Default Matrix Server</property>
+                                <property name="spacing">6</property>
+                                <child>
+                                  <object class="GtkLabel" id="directory_choice_label">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="label" translatable="yes">Default Matrix 
Server</property>
+                                  </object>
+                                  <packing>
+                                    <property name="expand">False</property>
+                                    <property name="fill">True</property>
+                                    <property name="position">0</property>
+                                  </packing>
+                                </child>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="icon_name">pan-down-symbolic</property>
+                                  </object>
+                                  <packing>
+                                    <property name="expand">False</property>
+                                    <property name="fill">True</property>
+                                    <property name="position">1</property>
+                                  </packing>
+                                </child>
                               </object>
-                              <packing>
-                                <property name="expand">False</property>
-                                <property name="fill">True</property>
-                                <property name="position">0</property>
-                              </packing>
                             </child>
+                          </object>
+                        </child>
+                        <child>
+                          <object class="GtkMenuButton" id="server_chooser_menu_small">
+                            <property name="visible">True</property>
+                            <property name="can_focus">True</property>
+                            <property name="receives_default">True</property>
+                            <property name="popover">server_chooser_popover</property>
+                            <property name="hexpand">False</property>
+                            <property name="halign">end</property>
                             <child>
-                              <object class="GtkImage">
+                              <object class="GtkBox">
                                 <property name="visible">True</property>
                                 <property name="can_focus">False</property>
-                                <property name="icon_name">pan-down-symbolic</property>
+                                <property name="spacing">6</property>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="icon_name">network-server-symbolic</property>
+                                  </object>
+                                </child>
+                                <child>
+                                  <object class="GtkImage">
+                                    <property name="visible">True</property>
+                                    <property name="can_focus">False</property>
+                                    <property name="icon_name">pan-down-symbolic</property>
+                                  </object>
+                                </child>
                               </object>
-                              <packing>
-                                <property name="expand">False</property>
-                                <property name="fill">True</property>
-                                <property name="position">1</property>
-                              </packing>
                             </child>
                           </object>
                         </child>
                       </object>
                       <packing>
                         <property name="pack_type">end</property>
-                        <property name="position">1</property>
                       </packing>
                     </child>
                   </object>
diff --git a/fractal-gtk/src/app/connect/directory.rs b/fractal-gtk/src/app/connect/directory.rs
index a5688e28..67113e5a 100644
--- a/fractal-gtk/src/app/connect/directory.rs
+++ b/fractal-gtk/src/app/connect/directory.rs
@@ -33,10 +33,13 @@ impl App {
         column.set_hexpand(true);
         column.set_vexpand(true);
         column.set_margin_top(24);
+        column.set_margin_start(12);
+        column.set_margin_end(12);
 
         let frame = gtk::Frame::new(None);
         frame.set_shadow_type(gtk::ShadowType::In);
         frame.add(&listbox);
+        frame.get_style_context().add_class("room-directory");
         column.add(&frame);
         listbox.show();
         frame.show();
diff --git a/fractal-gtk/src/app/connect/markdown.rs b/fractal-gtk/src/app/connect/markdown.rs
index 6878979d..8f0ad6d7 100644
--- a/fractal-gtk/src/app/connect/markdown.rs
+++ b/fractal-gtk/src/app/connect/markdown.rs
@@ -46,7 +46,7 @@ impl App {
 
             if let Some(md_lang) = md_lang.clone() {
                 buffer.set_highlight_matching_brackets(true);
-                buffer.set_language(&md_lang);
+                buffer.set_language(Some(&md_lang));
                 buffer.set_highlight_syntax(true);
             }
         }
diff --git a/fractal-gtk/src/widgets/room.rs b/fractal-gtk/src/widgets/room.rs
index 8f3acb4e..8d56a946 100644
--- a/fractal-gtk/src/widgets/room.rs
+++ b/fractal-gtk/src/widgets/room.rs
@@ -83,6 +83,8 @@ impl<'a> RoomBox<'a> {
         }
 
         let alias_label = gtk::Label::new(None);
+        alias_label.set_line_wrap(true);
+        alias_label.set_line_wrap_mode(pango::WrapMode::WordChar);
         alias_label.set_markup(&format!(
             "<span alpha=\"60%\">{}</span>",
             room.alias.clone().unwrap_or_default()
@@ -102,10 +104,8 @@ impl<'a> RoomBox<'a> {
         }
         details_box.add(&alias_label);
 
-        widget_box.pack_start(&details_box, true, true, 0);
-
         let membership_grid = gtk::Grid::new();
-        membership_grid.set_row_spacing(6);
+        membership_grid.set_column_spacing(6);
 
         let members_icon = gtk::Image::new_from_icon_name(
             Some("system-users-symbolic"),
@@ -124,11 +124,13 @@ impl<'a> RoomBox<'a> {
         });
         join_button.set_property_width_request(JOIN_BUTTON_WIDTH);
 
-        membership_grid.attach(&members_icon, 1, 0, 1, 1);
-        membership_grid.attach(&members_count, 2, 0, 1, 1);
-        membership_grid.attach(&join_button, 0, 1, 4, 1);
+        membership_grid.attach(&join_button, 0, 0, 4, 1);
+        membership_grid.attach(&members_icon, 5, 0, 1, 1);
+        membership_grid.attach(&members_count, 6, 0, 1, 1);
 
-        widget_box.pack_start(&membership_grid, false, false, 18);
+        details_box.add(&membership_grid);
+
+        widget_box.pack_start(&details_box, true, true, 0);
 
         widget_box.show_all();
         widget_box