[gtk/wip/jimmac/rich-list-styling] Adwaita: rich-list styling




commit 2613fbc9dffc62fc7da6fe239f4b6be8cd1d64e3
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon Aug 17 13:18:07 2020 +0200

    Adwaita: rich-list styling
    
    FIXME: why is the second list in Demo>List Box>Controls taller?
    
    https://gitlab.gnome.org/GNOME/gtk/-/issues/3073

 demos/widget-factory/widget-factory.ui | 57 +---------------------------------
 gtk/theme/Adwaita/_common.scss         | 21 +++++++++++--
 2 files changed, 20 insertions(+), 58 deletions(-)
---
diff --git a/demos/widget-factory/widget-factory.ui b/demos/widget-factory/widget-factory.ui
index fccbb520d9..dd9903ce7a 100644
--- a/demos/widget-factory/widget-factory.ui
+++ b/demos/widget-factory/widget-factory.ui
@@ -1643,10 +1643,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 1</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1654,10 +1650,6 @@ microphone-sensitivity-medium-symbolic</property>
                                               <object class="GtkSwitch" id="listboxrow1switch">
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                               </object>
                                             </child>
                                           </object>
@@ -1674,10 +1666,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 2</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1685,10 +1673,6 @@ microphone-sensitivity-medium-symbolic</property>
                                               <object class="GtkScale" id="opacity">
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                                 <property name="draw-value">0</property>
                                                 <property name="width-request">150</property>
                                                 <property name="adjustment">adjustment1</property>
@@ -1707,10 +1691,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 3</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1719,10 +1699,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="icon-name">object-select-symbolic</property>
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                                 <property name="opacity">0</property>
                                               </object>
                                             </child>
@@ -1740,10 +1716,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 4</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1753,10 +1725,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="hexpand">1</property>
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                               </object>
                                             </child>
                                           </object>
@@ -1773,10 +1741,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 5</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1784,10 +1748,6 @@ microphone-sensitivity-medium-symbolic</property>
                                               <object class="GtkButton" id="listboxrow5button">
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                                 <property 
name="icon-name">appointment-soon-symbolic</property>
                                               </object>
                                             </child>
@@ -1805,10 +1765,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 6</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1816,10 +1772,6 @@ microphone-sensitivity-medium-symbolic</property>
                                               <object class="GtkCheckButton">
                                                 <property name="halign">end</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
-                                                <property name="margin-start">12</property>
-                                                <property name="margin-end">12</property>
                                               </object>
                                             </child>
                                           </object>
@@ -1835,10 +1787,6 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 7</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
@@ -1855,10 +1803,7 @@ microphone-sensitivity-medium-symbolic</property>
                                                 <property name="label" translatable="yes">Row 8</property>
                                                 <property name="halign">start</property>
                                                 <property name="valign">center</property>
-                                                <property name="margin-start">6</property>
-                                                <property name="margin-end">6</property>
-                                                <property name="margin-top">6</property>
-                                                <property name="margin-bottom">6</property>
+
                                                 <property name="hexpand">1</property>
                                               </object>
                                             </child>
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 11e14836df..4516faa98a 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3072,7 +3072,7 @@ separator {
  * Lists *
  *********/
 listview,
-list, .rich-list {
+list  {
   color: $text_color;
   background-color: $base_color;
   border-color: $borders_color;
@@ -3083,7 +3083,7 @@ list, .rich-list {
     border-color: $backdrop_borders_color;
   }
 
-  > row { padding: 18px; }
+  > row { padding: 2px; }
   > row.expander { padding: 0px; }
   > row.expander .row-header { padding: 2px; }
 
@@ -3145,6 +3145,23 @@ row {
     background-color: $selected_bg_color;
   }
 
+/*******************************************************
+ * Rich Lists                                          *
+ * Large list usually containing lots of widgets       *
+ * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073    *
+ *******************************************************/
+
+
+.rich-list { /* rich lists usually containing other widgets than just labels/text */
+  & > row {
+    padding: 6px;
+    min-height: 58px; /* should be tall even when only containing a label */
+
+    & > box {
+      border-spacing: 12px;
+    }
+  }
+}
 
 /*********************
  * App Notifications *


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]