[dconf-editor] Handle horizontal OverlayedList.

[Arnaud B. <arnaudb src gnome org>]

commit e08b355f6765ee3fb1ec4a9ed58af0fc72521b9f
Author: Arnaud Bonatti <arnaud bonatti gmail com>
Date:   Sat Nov 24 11:05:55 2018 +0100

    Handle horizontal OverlayedList.

 editor/browser-view.vala   |  4 ++++
 editor/dconf-editor.css    | 50 +++++++++++++++++++++++++++++++++-------------
 editor/overlayed-list.ui   |  7 ++++---
 editor/overlayed-list.vala | 30 +++++++++++++++++++++++++++-
 4 files changed, 73 insertions(+), 18 deletions(-)
---
diff --git a/editor/browser-view.vala b/editor/browser-view.vala
index 0a064de..5f22b7a 100644
--- a/editor/browser-view.vala
+++ b/editor/browser-view.vala
@@ -65,6 +65,10 @@ private class BrowserView : Stack, AdaptativeWidget
     private void set_window_size (AdaptativeWidget.WindowSize new_size)
     {
         current_child.set_window_size (new_size);
+        bookmarks_list.set_window_size (new_size);
+        modifications_list.set_window_size (new_size);
+        about_list.set_window_size (new_size);
+
         bool _phone_window = AdaptativeWidget.WindowSize.is_phone (new_size);
         if (phone_window == _phone_window)
             return;
diff --git a/editor/dconf-editor.css b/editor/dconf-editor.css
index b1cd3d4..4f66606 100644
--- a/editor/dconf-editor.css
+++ b/editor/dconf-editor.css
@@ -60,33 +60,58 @@
   margin-bottom:0;
 }
 
-.bookmarks .padding-bottom {
+  .vertical.overlayed-list:not(.delayed-list)          > scrolledwindow > viewport > list {
   padding-bottom:0;
   transition:padding-bottom 0.3s,
              font-size      0.3s;
 }
-.bookmarks .padding-bottom:not(.empty-list) {
-  padding-bottom:2.8rem;
+  .vertical.overlayed-list:not(.delayed-list)          > scrolledwindow > viewport > list:not(.empty-list) {
+  padding-bottom:3rem;
 }
-
-.linked-circular {
+  .vertical.overlayed-list:not(.delayed-list)          > .linked-circular {
   margin-bottom:0.3rem;
 }
 
-.linked-circular:dir(rtl) .right-on-ltr,
-.linked-circular:dir(ltr) .left-on-ltr {
+.horizontal.overlayed-list:dir(ltr):not(.delayed-list) > scrolledwindow > viewport > list > row {
+  padding-right:calc(160px+1rem); /* width-request of edit_mode_box + a bit */
+}
+.horizontal.overlayed-list:dir(rtl):not(.delayed-list) > scrolledwindow > viewport > list > row {
+  padding-left :calc(160px+1rem); /* width-request of edit_mode_box + a bit */
+}
+.horizontal.overlayed-list:dir(ltr):not(.delayed-list) > .linked-circular {
+  margin-right:1.5rem;
+}
+.horizontal.overlayed-list:dir(rtl):not(.delayed-list) > .linked-circular {
+  margin-left :1.5rem;
+}
+
+  .vertical.overlayed-list:dir(rtl) > .linked-circular > .right-on-ltr,
+  .vertical.overlayed-list:dir(ltr) > .linked-circular > .left-on-ltr {
   border-radius:2rem 0 0 2rem;
-  -gtk-outline-top-left-radius:2rem;
+  -gtk-outline-top-left-radius   :2rem;
   -gtk-outline-bottom-left-radius:2rem;
 }
 
-.linked-circular:dir(ltr) .right-on-ltr,
-.linked-circular:dir(rtl) .left-on-ltr {
+  .vertical.overlayed-list:dir(ltr) > .linked-circular > .right-on-ltr,
+  .vertical.overlayed-list:dir(rtl) > .linked-circular > .left-on-ltr {
   border-radius:0 2rem 2rem 0;
-  -gtk-outline-top-right-radius:2rem;
+  -gtk-outline-top-right-radius   :2rem;
   -gtk-outline-bottom-right-radius:2rem;
 }
 
+.horizontal.overlayed-list:dir(rtl) > .linked-circular > .right-on-ltr,
+.horizontal.overlayed-list:dir(ltr) > .linked-circular > .left-on-ltr {
+  border-radius:1.5rem 1.5rem 0 0;
+  -gtk-outline-top-right-radius:1.4rem;
+  -gtk-outline-top-left-radius :1.4rem;
+}
+.horizontal.overlayed-list:dir(ltr) > .linked-circular > .right-on-ltr,
+.horizontal.overlayed-list:dir(rtl) > .linked-circular > .left-on-ltr {
+  border-radius:0 0 1.5rem 1.5rem;
+  -gtk-outline-bottom-right-radius:1.4rem;
+  -gtk-outline-bottom-left-radius :1.4rem;
+}
+
 /* hack: fix the double space when the child of the revealer is hidden; 6px is the spacing of the 
centerwidget box */
 .centerwidget:dir(ltr) .headerbar-revealer { padding-right:6px; }
 .centerwidget:dir(rtl) .headerbar-revealer { padding-left :6px; }
@@ -117,9 +142,6 @@
 * * in-window about
 \*/
 
-.about-list            > scrolledwindow > viewport > list {
-  padding-bottom:3rem;
-}
 .about-list            > scrolledwindow > viewport > list > row {
   padding:4px;
   min-height:1.3rem;
diff --git a/editor/overlayed-list.ui b/editor/overlayed-list.ui
index e95ab94..9f4168b 100644
--- a/editor/overlayed-list.ui
+++ b/editor/overlayed-list.ui
@@ -4,6 +4,10 @@
   <template class="OverlayedList" parent="GtkOverlay">
     <property name="expand">True</property>
     <property name="valign">fill</property>
+    <style>
+      <class name="overlayed-list"/>
+      <class name="vertical"/>
+    </style>
     <child>
       <object class="GtkScrolledWindow" id="scrolled">
         <property name="visible">True</property>
@@ -17,9 +21,6 @@
           <object class="GtkListBox" id="main_list_box">
             <property name="visible">True</property>
             <signal name="selected-rows-changed" handler="on_selection_changed"/>
-            <style>
-              <class name="padding-bottom"/>
-            </style>
           </object>
         </child>
       </object>
diff --git a/editor/overlayed-list.vala b/editor/overlayed-list.vala
index 7bc9b8e..4d324be 100644
--- a/editor/overlayed-list.vala
+++ b/editor/overlayed-list.vala
@@ -18,7 +18,7 @@
 using Gtk;
 
 [GtkTemplate (ui = "/ca/desrt/dconf-editor/ui/overlayed-list.ui")]
-private abstract class OverlayedList : Overlay
+private abstract class OverlayedList : Overlay, AdaptativeWidget
 {
     [GtkChild] protected ListBox        main_list_box;
                private StyleContext     main_list_box_context;
@@ -34,6 +34,7 @@ private abstract class OverlayedList : Overlay
     construct
     {
         main_list_box_context = main_list_box.get_style_context ();
+        main_context = get_style_context ();
         connect_handlers ();
         main_list_box.bind_model (main_list_store, create_rows);
     }
@@ -78,6 +79,33 @@ private abstract class OverlayedList : Overlay
         main_list_box.set_placeholder (placeholder);
     }
 
+    /*\
+    * * responsive design
+    \*/
+
+    private StyleContext main_context;
+    internal void set_window_size (AdaptativeWidget.WindowSize new_size)
+    {
+        if (!AdaptativeWidget.WindowSize.is_thin (new_size) && AdaptativeWidget.WindowSize.is_fun (new_size))
+        {
+            main_context.remove_class ("vertical");
+            edit_mode_box.halign = Align.END;
+            edit_mode_box.valign = Align.CENTER;
+            edit_mode_box.orientation = Orientation.VERTICAL;
+            edit_mode_box.width_request = 160;
+            main_context.add_class ("horizontal");
+        }
+        else
+        {
+            main_context.remove_class ("horizontal");
+            edit_mode_box.halign = Align.CENTER;
+            edit_mode_box.valign = Align.END;
+            edit_mode_box.orientation = Orientation.HORIZONTAL;
+            edit_mode_box.width_request = 200;
+            main_context.add_class ("vertical");
+        }
+    }
+
     /*\
     * * keyboard
     \*/