GNOME.org
 

[dconf-editor] Rework theming.

commit 2957b5e5c6ea7507f76040fa1a15d36122305079
Author: Arnaud Bonatti <arnaud bonatti gmail com>
Date:   Thu Jul 28 16:34:25 2016 +0200

    Rework theming.

 editor/bookmarks.ui                      |    3 +
 editor/ca.desrt.dconf-editor.gschema.xml |   14 +++-
 editor/dconf-editor.css                  |  134 +++++++++++++++++------------
 editor/dconf-window.vala                 |   37 +++++++--
 editor/registry-view.ui                  |    2 +-
 5 files changed, 124 insertions(+), 66 deletions(-)
---
diff --git a/editor/bookmarks.ui b/editor/bookmarks.ui
index cb96810..dbf075c 100644
--- a/editor/bookmarks.ui
+++ b/editor/bookmarks.ui
@@ -4,6 +4,9 @@
   <object class="GtkPopover" id="bookmarks_popover">
     <property name="width-request">350</property>
     <property name="height-request">300</property>
+    <style>
+      <class name="bookmarks"/>
+    </style>
     <child>
       <object class="GtkGrid">
         <property name="visible">True</property>
diff --git a/editor/ca.desrt.dconf-editor.gschema.xml b/editor/ca.desrt.dconf-editor.gschema.xml
index 0b42363..f9c8d02 100644
--- a/editor/ca.desrt.dconf-editor.gschema.xml
+++ b/editor/ca.desrt.dconf-editor.gschema.xml
@@ -2,7 +2,7 @@
 <schemalist gettext-domain='dconf'>
   <enum id="ca.desrt.dconf-editor.Themes">
     <value value="0" nick="three-twenty-two"/>
-    <value value="1" nick="small-rows"/>
+    <value value="1" nick="non-symbolic-keys-list"/>
   </enum>
   <enum id="ca.desrt.dconf-editor.Behaviour">
     <value value="0" nick="unsafe"/>
@@ -48,10 +48,20 @@
       <summary>Show initial warning</summary>
       <description>If 'true', Dconf Editor opens a popup when launched reminding the user to be 
careful.</description>
     </key>
+    <key name="small-keys-list-rows" type="b">
+      <default>false</default>
+      <summary>A flag to enable small rows for keys list</summary>
+      <description>If 'true', the keys list use smaller rows.</description>
+    </key>
+    <key name="small-bookmarks-rows" type="b">
+      <default>false</default>
+      <summary>A flag to enable small rows for bookmarks list</summary>
+      <description>If 'true', the bookmarks list use smaller rows.</description>
+    </key>
     <key name="theme" enum="ca.desrt.dconf-editor.Themes">
       <default>'three-twenty-two'</default>
       <summary>The theme of the navigation list</summary>
-      <description>The themes are defined by the application, you cannot add one. Two themes are available 
for now: 'three-twenty-two' that will remain as close as possible to the default theme of the 3.22 release, 
and 'small-rows' that tries to minimize the rows height.</description>
+      <description>The themes are defined by the application, you cannot add one. The theme 
'three-twenty-two' will remain as close as possible to the default theme of the 3.22 release.</description>
     </key>
     <key name="behaviour" enum="ca.desrt.dconf-editor.Behaviour">
       <default>'always-confirm-implicit'</default>
diff --git a/editor/dconf-editor.css b/editor/dconf-editor.css
index 7f46a37..2767c15 100644
--- a/editor/dconf-editor.css
+++ b/editor/dconf-editor.css
@@ -25,81 +25,103 @@ window > popover.menu {
 }
 
 /*\
-* * rows height and icon
+* * lists rows height and icon
 \*/
 
 /* row height */
-.dconf-list > row {
-  transition:min-height 0.3s;
-}
-            .dconf-list > row { min-height:2.6rem; }
-.small-rows .dconf-list > row { min-height:1.3rem; }
+                                                .keys-list          > row { transition:min-height 0.3s; } /* 
not for .bookmarks, as the transition will start at the popover opening */
+
+                                                .keys-list          > row,
+                                                .bookmarks     list > row { min-height:2.6rem; }
+                          .small-keys-list-rows .keys-list          > row,
+                          .small-bookmarks-rows .bookmarks     list > row { min-height:1.3rem; }
+
+/* bookmarks */
+                          .small-bookmarks-rows .bookmarks     list > row > grid > button.circular.flat {
+                            min-height:0;
+                            padding-bottom:1px;
+                            padding-top:1px;
+                            margin-top:-2px;
+                            margin-bottom:-2px;
+                          }
 
 /* folder icon */
-.dconf-list > row > .folder > grid {
-  background-image:-gtk-icontheme("folder-symbolic");
-  background-repeat:no-repeat;
+                                                .keys-list          > row        > .folder > grid {
+                                                  background-repeat:no-repeat;
+                                                  transition:background-position 0.3s,
+                                                             background-size 0.3s,
+                                                             padding-left 0.3s,
+                                                             padding-right 0.3s; /* warning: ltr/rtl */
+                                                }
 
-  transition:background-position 0.3s,
-             background-size 0.3s,
-             padding-left 0.3s,
-             padding-right 0.3s; /* warning: ltr/rtl */
-}
+                                                .keys-list          > row        > .folder > grid { 
background-image:-gtk-icontheme("folder-symbolic"); }
+                                                .keys-list          > row:active > .folder > grid { 
background-image:-gtk-icontheme("folder-open-symbolic"); }
 
-.dconf-list > row:active > .folder > grid {
-  background-image:-gtk-icontheme("folder-open-symbolic");
-}
+             .non-symbolic                      .keys-list          > row        > .folder > grid { 
background-image:-gtk-icontheme("folder"); }
+             .non-symbolic                      .keys-list          > row:active > .folder > grid { 
background-image:-gtk-icontheme("folder-open"); }
 
-/* visual padding: 0.75rem */
-                         .dconf-list:dir(ltr) > row > .folder > grid { background-position:0.75rem           
   center; }
-                         .dconf-list:dir(rtl) > row > .folder > grid { background-position:calc(100% - 
0.75rem) center; }
+/* visual padding */
+                                                .keys-list:dir(ltr) > row > .key    > grid { padding-left:  
10px; } /* looks cool */
+                                                .keys-list:dir(rtl) > row > .key    > grid { padding-right: 
10px; }
 
-/* icon sizing */
-                         .dconf-list          > row > .folder > grid { background-size:1.5rem; }
-             .small-rows .dconf-list          > row > .folder > grid { background-size:0.75rem; }
+                                                .keys-list:dir(ltr) > row > .folder > grid { 
background-position:            0.75rem  center; }
+                                                .keys-list:dir(rtl) > row > .folder > grid { 
background-position:calc(100% - 0.75rem) center; }
 
-/* technical padding: (2 * visual padding) + icon size */
-                         .dconf-list:dir(ltr) > row > .key    > grid { padding-left:  10px; } /* looks cool 
*/
-                         .dconf-list:dir(ltr) > row > .folder > grid { padding-left:  3rem; }
-             .small-rows .dconf-list:dir(ltr) > row > .folder > grid { padding-left:  2.25rem; }
-                         .dconf-list:dir(rtl) > row > .key    > grid { padding-right: 10px; }
-                         .dconf-list:dir(rtl) > row > .folder > grid { padding-right: 3rem; }
-             .small-rows .dconf-list:dir(rtl) > row > .folder > grid { padding-right: 2.25rem; }
+/* icon sizing */
+                                                .keys-list          > row > .folder > grid { 
background-size:1.5rem; }
+             .non-symbolic                      .keys-list          > row > .folder > grid { 
background-size:1.75rem; }
+                          .small-keys-list-rows .keys-list          > row > .folder > grid,
+             .non-symbolic.small-keys-list-rows .keys-list          > row > .folder > grid { 
background-size:1rem; }
+
+/* technical padding: icon visual padding + icon size + some padding */
+                                                .keys-list:dir(ltr) > row > .folder > grid { padding-left:  
3rem; }
+             .non-symbolic                      .keys-list:dir(ltr) > row > .folder > grid { padding-left:  
3.25rem; }
+                          .small-keys-list-rows .keys-list:dir(ltr) > row > .folder > grid,
+             .non-symbolic.small-keys-list-rows .keys-list:dir(ltr) > row > .folder > grid { padding-left:  
2.25rem; }
+
+                                                .keys-list:dir(rtl) > row > .folder > grid { padding-right: 
3rem; }
+             .non-symbolic                      .keys-list:dir(rtl) > row > .folder > grid { padding-right: 
3.25rem; }
+                          .small-keys-list-rows .keys-list:dir(rtl) > row > .folder > grid,
+             .non-symbolic.small-keys-list-rows .keys-list:dir(rtl) > row > .folder > grid { padding-right: 
2.25rem; }
 
 /* technical labels placing */
-                         .dconf-list          > row                   label.key-name { transition:min-width 
0.3s; }
-                         .dconf-list          > row > .key    > grid  label.key-name { min-width:     222px; 
}
-                         .dconf-list          > row > .folder > grid  label.key-name { min-width:calc(222px 
+ 10px - 3rem); }
-             .small-rows .dconf-list          > row > .folder > grid  label.key-name { min-width:calc(222px 
+ 10px - 2.25rem); }
-
-.large-window            .dconf-list          > row > .key    > grid  label.key-name { min-width:     250px; 
}
-.large-window            .dconf-list          > row > .folder > grid  label.key-name { min-width:calc(250px 
+ 10px - 3rem); }
-.large-window.small-rows .dconf-list          > row > .folder > grid  label.key-name { min-width:calc(250px 
+ 10px - 2.25rem); }
-
-                         .dconf-list          > row > .key    > grid > grid          { min-width:400px; 
transition:min-width 0.3s; }
-.large-window            .dconf-list          > row > .key    > grid > grid          { min-width:450px; }
-.large-window.xl         .dconf-list          > row > .key    > grid > grid          { min-width:474px; }
-.large-window.xl.xxl     .dconf-list          > row > .key    > grid > grid          { min-width:500px; }
+                                                .keys-list          > row                   label.key-name { 
transition:min-width 0.3s; }
+                                                .keys-list          > row > .key    > grid  label.key-name { 
min-width:     222px; }
+                                                .keys-list          > row > .folder > grid  label.key-name { 
min-width:calc(222px + 10px - 3rem); }
+             .non-symbolic                      .keys-list          > row > .folder > grid  label.key-name { 
min-width:calc(222px + 10px - 3.25rem); }
+                          .small-keys-list-rows .keys-list          > row > .folder > grid  label.key-name,
+             .non-symbolic.small-keys-list-rows .keys-list          > row > .folder > grid  label.key-name { 
min-width:calc(222px + 10px - 2.25rem); }
+
+.large-window                                   .keys-list          > row > .key    > grid  label.key-name { 
min-width:     250px; }
+.large-window                                   .keys-list          > row > .folder > grid  label.key-name { 
min-width:calc(250px + 10px - 3rem); }
+.large-window.non-symbolic                      .keys-list          > row > .folder > grid  label.key-name { 
min-width:calc(250px + 10px - 3.25rem); }
+.large-window             .small-keys-list-rows .keys-list          > row > .folder > grid  label.key-name,
+.large-window.non-symbolic.small-keys-list-rows .keys-list          > row > .folder > grid  label.key-name { 
min-width:calc(250px + 10px - 2.25rem); }
+
+                                                .keys-list          > row > .key    > grid > grid          { 
min-width:400px; transition:min-width 0.3s; }
+.large-window                                   .keys-list          > row > .key    > grid > grid          { 
min-width:450px; }
+.large-window.xl                                .keys-list          > row > .key    > grid > grid          { 
min-width:474px; }
+.large-window.xl.xxl                            .keys-list          > row > .key    > grid > grid          { 
min-width:500px; }
 
 /* grid spacing and padding-end */
-                         .dconf-list:dir(ltr) > row  grid > label { padding-right: 0.5em; }
-                         .dconf-list:dir(rtl) > row  grid > label { padding-left:  0.5em; }
+                                                .keys-list:dir(ltr) > row  grid > label { padding-right: 
0.5em; }
+                                                .keys-list:dir(rtl) > row  grid > label { padding-left:  
0.5em; }
 
 /* pending change icon */
 
-                         .dconf-list          > row > .key         { transition:background-position 0.3s; }
-                         .dconf-list          > row > .key.delayed { 
background-image:-gtk-icontheme("document-open-recent-symbolic"); background-repeat:no-repeat; }
-                         .dconf-list          > row > .key.delayed.erase { 
background-image:-gtk-icontheme("user-trash-symbolic"); }
+                                                .keys-list          > row > .key         { 
transition:background-position 0.3s; }
+                                                .keys-list          > row > .key.delayed { 
background-image:-gtk-icontheme("document-open-recent-symbolic"); background-repeat:no-repeat; }
+                                                .keys-list          > row > .key.delayed.erase { 
background-image:-gtk-icontheme("user-trash-symbolic"); }
 
-                         .dconf-list          > row > .key.delayed { background-size:16px; 
transition:background-size 0.3s; }
-             .small-rows .dconf-list          > row > .key.delayed { background-size:12px; }
+                                                .keys-list          > row > .key.delayed { 
background-size:16px; transition:background-size 0.3s; }
+                          .small-keys-list-rows .keys-list          > row > .key.delayed { 
background-size:12px; }
 
-                         .dconf-list:dir(ltr) > row > .key.delayed { padding-right: 28px; }
-                         .dconf-list:dir(rtl) > row > .key.delayed { padding-left:  28px; }
-                         .dconf-list:dir(ltr) > row > .key         { background-position:calc(100% - 16px) 
calc(1.3rem - 8px); }
-                         .dconf-list:dir(rtl) > row > .key         { background-position:            16px  
calc(1.3rem - 8px); }
-             .small-rows .dconf-list:dir(ltr) > row > .key         { background-position:calc(100% - 16px) 
calc(0.65rem - 5px); }
-             .small-rows .dconf-list:dir(rtl) > row > .key         { background-position:            16px  
calc(0.65rem - 5px); }
+                                                .keys-list:dir(ltr) > row > .key.delayed { padding-right: 
28px; }
+                                                .keys-list:dir(rtl) > row > .key.delayed { padding-left:  
28px; }
+                                                .keys-list:dir(ltr) > row > .key         { 
background-position:calc(100% - 16px) calc(1.3rem - 8px); }
+                                                .keys-list:dir(rtl) > row > .key         { 
background-position:            16px  calc(1.3rem - 8px); }
+                          .small-keys-list-rows .keys-list:dir(ltr) > row > .key         { 
background-position:calc(100% - 16px) calc(0.65rem - 5px); }
+                          .small-keys-list-rows .keys-list:dir(rtl) > row > .key         { 
background-position:            16px  calc(0.65rem - 5px); }
 
 /*\
 * * pathbar
diff --git a/editor/dconf-window.vala b/editor/dconf-window.vala
index 37204c8..37120e0 100644
--- a/editor/dconf-window.vala
+++ b/editor/dconf-window.vala
@@ -54,6 +54,8 @@ class DConfWindow : ApplicationWindow
 
     private ulong behaviour_changed_handler = 0;
     private ulong theme_changed_handler = 0;
+    private ulong small_keys_list_rows_handler = 0;
+    private ulong small_bookmarks_rows_handler = 0;
 
     public DConfWindow ()
     {
@@ -65,16 +67,35 @@ class DConfWindow : ApplicationWindow
         if (settings.get_boolean ("window-is-maximized"))
             maximize ();
 
+        StyleContext context = get_style_context ();
         theme_changed_handler = settings.changed ["theme"].connect (() => {
                 string theme = settings.get_string ("theme");
-                StyleContext context = get_style_context ();    // TODO only check once?
-                if (theme == "three-twenty-two" && context.has_class ("small-rows"))
-                    context.remove_class ("small-rows");
-                else if (theme == "small-rows" && !context.has_class ("small-rows"))
-                    context.add_class ("small-rows");
+                if (theme == "non-symbolic-keys-list")
+                {
+                    if (!context.has_class ("non-symbolic")) context.add_class ("non-symbolic");
+                }
+                else if (context.has_class ("non-symbolic")) context.remove_class ("non-symbolic");
+            });
+        small_keys_list_rows_handler = settings.changed ["small-keys-list-rows"].connect (() => {
+                if (settings.get_boolean ("small-keys-list-rows"))
+                {
+                    if (!context.has_class ("small-keys-list-rows")) context.add_class 
("small-keys-list-rows");
+                }
+                else if (context.has_class ("small-keys-list-rows")) context.remove_class 
("small-keys-list-rows");
+            });
+        small_bookmarks_rows_handler = settings.changed ["small-bookmarks-rows"].connect (() => {
+                if (settings.get_boolean ("small-bookmarks-rows"))
+                {
+                    if (!context.has_class ("small-bookmarks-rows")) context.add_class 
("small-bookmarks-rows");
+                }
+                else if (context.has_class ("small-bookmarks-rows")) context.remove_class 
("small-bookmarks-rows");
             });
-        if (settings.get_string ("theme") == "small-rows")
-            get_style_context ().add_class ("small-rows");
+        if (settings.get_string ("theme") == "non-symbolic-keys-list")
+            context.add_class ("non-symbolic");
+        if (settings.get_boolean ("small-keys-list-rows"))
+            context.add_class ("small-keys-list-rows");
+        if (settings.get_boolean ("small-bookmarks-rows"))
+            context.add_class ("small-bookmarks-rows");
 
         registry_view.bind_property ("current-path", this, "current-path");    // TODO in UI file?
         settings.bind ("behaviour", registry_view, "behaviour", 
SettingsBindFlags.GET|SettingsBindFlags.NO_SENSITIVITY);
@@ -173,6 +194,8 @@ class DConfWindow : ApplicationWindow
 
         settings.disconnect (behaviour_changed_handler);
         settings.disconnect (theme_changed_handler);
+        settings.disconnect (small_keys_list_rows_handler);
+        settings.disconnect (small_bookmarks_rows_handler);
 
         settings.delay ();
         settings.set_string ("saved-view", current_path);
diff --git a/editor/registry-view.ui b/editor/registry-view.ui
index cdb30ae..98b77bd 100644
--- a/editor/registry-view.ui
+++ b/editor/registry-view.ui
@@ -65,7 +65,7 @@
                 <property name="activate-on-single-click">True</property>
                 <property name="selection-mode">browse</property><!-- permits to not have an item selected 
-->
                 <style>
-                  <class name="dconf-list"/>
+                  <class name="keys-list"/>
                 </style>
                 <signal name="row-activated" handler="row_activated_cb"/>
                 <child type="placeholder">      <!-- see 
nautilus/src/resources/ui/nautilus-folder-is-empty.ui -->
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]