[gnome-games/wip/exalm/lists: 5/9] ui: Assorted list changes

[Alexander Mikhaylenko <alexm src gnome org>]

commit fc38e592dbb5ec1694d8acdfc1d2b7ca5fdfdf1b
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Jan 14 23:37:08 2020 +0500

    ui: Assorted list changes
    
    * Stop mimicking GtkStackSidebar for preferences sidebar.
    * Consistently use rounded corners and separators.
    * Add separators via css rather than programmatically.
    * Make sidebars look like content lists when folded.

 data/gtk-style.css                         | 43 ++++++++++++++++++++++++++----
 data/ui/platforms-view.ui                  | 21 +++++++++++++--
 data/ui/preferences-page-backup-restore.ui |  6 +++--
 data/ui/preferences-page-controllers.ui    |  6 +++--
 data/ui/preferences-page-platforms.ui      |  3 ++-
 data/ui/preferences-page-video.ui          |  3 ++-
 data/ui/preferences-page.ui                |  2 +-
 data/ui/preferences-sidebar-item.ui        |  4 +++
 data/ui/preferences-sidebar.ui             | 19 +++++++++----
 src/ui/preferences-sidebar.vala            | 12 ---------
 10 files changed, 88 insertions(+), 31 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index cb946b39..86d7425d 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -58,11 +58,6 @@ gamesflashbox {
  * https://source.puri.sm/Librem5/libhandy/blob/master/examples/style.css
  */
 
-stacksidebar list {
-       border-left-width: 0px;
-       border-right-width: 0px;
-}
-
 .list-icon {
        opacity: 0.7;
 }
@@ -70,3 +65,41 @@ stacksidebar list {
 .combo-list-box {
        background: none;
 }
+
+list.rounded {
+  border-radius: 5px;
+}
+
+box.sidebar,
+box.sidebar > list {
+       transition: all 200ms;
+       background: @theme_bg_color;
+       border: 0 solid @borders;
+}
+
+box.sidebar:backdrop,
+box.sidebar:backdrop > list {
+       background-color: @theme_unfocused_bg_color;
+       border-color: @unfocused_borders;
+}
+
+.folded box.sidebar {
+       padding: 18px;
+}
+
+list.rounded,
+.folded box.sidebar > list {
+       background: @theme_base_color;
+       border-radius: 6px;
+       border: 1px solid @borders;
+}
+
+list.rounded:backdrop,
+.folded:backdrop box.sidebar > list {
+       background: @theme_unfocused_base_color;
+       border-color: @unfocused_borders;
+}
+
+list.separators row:not(:last-child) {
+       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
diff --git a/data/ui/platforms-view.ui b/data/ui/platforms-view.ui
index 5f978337..7674ddd2 100644
--- a/data/ui/platforms-view.ui
+++ b/data/ui/platforms-view.ui
@@ -18,16 +18,33 @@
             <property name="vexpand">True</property>
             <property name="width-request">250</property>
             <child>
-              <object class="GtkListBox" id="list_box">
+              <object class="GtkBox">
                 <property name="visible">True</property>
-                <signal name="row-activated" handler="on_list_box_row_activated"/>
+                <property name="orientation">vertical</property>
                 <style>
                   <class name="sidebar"/>
                 </style>
+                <child>
+                  <object class="GtkListBox" id="list_box">
+                    <property name="visible">True</property>
+                    <signal name="row-activated" handler="on_list_box_row_activated"/>
+                    <style>
+                      <class name="separators"/>
+                    </style>
+                  </object>
+                </child>
               </object>
             </child>
           </object>
         </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="visible">True</property>
+            <style>
+              <class name="sidebar"/>
+            </style>
+          </object>
+        </child>
         <child>
           <object class="GamesCollectionIconView" id="collection_view">
             <property name="visible">True</property>
diff --git a/data/ui/preferences-page-backup-restore.ui b/data/ui/preferences-page-backup-restore.ui
index 8be29912..651da512 100644
--- a/data/ui/preferences-page-backup-restore.ui
+++ b/data/ui/preferences-page-backup-restore.ui
@@ -19,7 +19,8 @@
         <property name="visible">True</property>
         <property name="selection-mode">none</property>
         <style>
-          <class name="frame"/>
+          <class name="rounded"/>
+          <class name="separators"/>
         </style>
         <child>
           <object class="GtkListBoxRow">
@@ -71,7 +72,8 @@
         <property name="visible">True</property>
         <property name="selection-mode">none</property>
         <style>
-          <class name="frame"/>
+          <class name="rounded"/>
+          <class name="separators"/>
         </style>
         <child>
           <object class="GtkListBoxRow">
diff --git a/data/ui/preferences-page-controllers.ui b/data/ui/preferences-page-controllers.ui
index b5721e5d..c9459c3b 100644
--- a/data/ui/preferences-page-controllers.ui
+++ b/data/ui/preferences-page-controllers.ui
@@ -19,7 +19,8 @@
         <property name="selection-mode">none</property>
         <signal name="row-activated" handler="gamepads_list_box_row_activated"/>
         <style>
-          <class name="frame"/>
+          <class name="rounded"/>
+          <class name="separators"/>
         </style>
       </object>
     </child>
@@ -39,7 +40,8 @@
         <property name="selection-mode">none</property>
         <signal name="row-activated" handler="keyboard_list_box_row_activated"/>
         <style>
-          <class name="frame"/>
+          <class name="rounded"/>
+          <class name="separators"/>
         </style>
       </object>
     </child>
diff --git a/data/ui/preferences-page-platforms.ui b/data/ui/preferences-page-platforms.ui
index 90c259c0..e1cb326f 100644
--- a/data/ui/preferences-page-platforms.ui
+++ b/data/ui/preferences-page-platforms.ui
@@ -9,7 +9,8 @@
         <property name="visible">true</property>
         <signal name="row-activated" handler="on_row_activated"/>
         <style>
-          <class name="frame"/>
+          <class name="rounded"/>
+          <class name="separators"/>
         </style>
       </object>
     </child>
diff --git a/data/ui/preferences-page-video.ui b/data/ui/preferences-page-video.ui
index 5a272964..27ebfb61 100644
--- a/data/ui/preferences-page-video.ui
+++ b/data/ui/preferences-page-video.ui
@@ -19,7 +19,8 @@
         <property name="selection-mode">none</property>
         <signal name="row-activated" handler="filter_list_box_row_activated"/>
         <style>
-          <class name="frame"/>
+          <class name="rounded"/>
+          <class name="separators"/>
         </style>
       </object>
     </child>
diff --git a/data/ui/preferences-page.ui b/data/ui/preferences-page.ui
index b420b53d..bb77241a 100644
--- a/data/ui/preferences-page.ui
+++ b/data/ui/preferences-page.ui
@@ -24,7 +24,7 @@
                       <object class="GtkBox" id="box">
                         <property name="visible">True</property>
                         <property name="orientation">vertical</property>
-                        <property name="margin">12</property>
+                        <property name="margin">18</property>
                         <property name="spacing">12</property>
                       </object>
                     </child>
diff --git a/data/ui/preferences-sidebar-item.ui b/data/ui/preferences-sidebar-item.ui
index 332f6dc3..64a1b7f6 100644
--- a/data/ui/preferences-sidebar-item.ui
+++ b/data/ui/preferences-sidebar-item.ui
@@ -6,6 +6,10 @@
     <child>
       <object class="GtkLabel" id="label">
         <property name="visible">true</property>
+        <property name="margin-start">6</property>
+        <property name="margin-end">6</property>
+        <property name="margin-top">10</property>
+        <property name="margin-bottom">10</property>
         <property name="wrap">true</property>
         <property name="xalign">0</property>
       </object>
diff --git a/data/ui/preferences-sidebar.ui b/data/ui/preferences-sidebar.ui
index c841f9ba..ae350713 100644
--- a/data/ui/preferences-sidebar.ui
+++ b/data/ui/preferences-sidebar.ui
@@ -4,7 +4,6 @@
   <template class="GamesPreferencesSidebar" parent="GtkBin">
     <property name="visible">True</property>
     <style>
-      <class name="preferences"/>
       <class name="sidebar"/>
     </style>
     <child>
@@ -12,11 +11,21 @@
         <property name="visible">True</property>
         <property name="hscrollbar-policy">never</property>
         <child>
-          <object class="GtkListBox" id="list">
+          <object class="GtkBox">
             <property name="visible">True</property>
-            <property name="margin-top">4</property>
-            <property name="margin-bottom">4</property>
-            <signal name="row-activated" handler="row_activated"/>
+            <property name="orientation">vertical</property>
+            <style>
+              <class name="sidebar"/>
+            </style>
+            <child>
+              <object class="GtkListBox" id="list">
+                <property name="visible">True</property>
+                <signal name="row-activated" handler="row_activated"/>
+                <style>
+                  <class name="separators"/>
+                </style>
+              </object>
+            </child>
           </object>
         </child>
       </object>
diff --git a/src/ui/preferences-sidebar.vala b/src/ui/preferences-sidebar.vala
index 6807f7d3..108bf5cb 100644
--- a/src/ui/preferences-sidebar.vala
+++ b/src/ui/preferences-sidebar.vala
@@ -49,13 +49,8 @@ private class Games.PreferencesSidebar : Gtk.Bin {
        private Gtk.ListBox list;
        private HashTable<PreferencesPage, PreferencesSidebarItem> rows;
 
-       static construct {
-               set_css_name ("stacksidebar");
-       }
-
        construct {
                rows = new HashTable<PreferencesPage, PreferencesSidebarItem> (null, null);
-               list.set_header_func (update_header);
                show_selection = true;
        }
 
@@ -106,11 +101,4 @@ private class Games.PreferencesSidebar : Gtk.Bin {
                if (row != null)
                        list.select_row (row);
        }
-
-       private void update_header (Gtk.ListBoxRow row, Gtk.ListBoxRow? before) {
-               if (before != null && row.get_header () == null) {
-                       var separator = new Gtk.Separator (Gtk.Orientation.HORIZONTAL);
-                       row.set_header (separator);
-               }
-       }
 }