[dconf-editor] Make key and value columns larger on large windows.

[Arnaud Bonatti <arnaudb src gnome org>]

commit fe14ed6e49ce923463a9e7f1b561a15241a15a93
Author: Arnaud Bonatti <arnaud bonatti gmail com>
Date:   Sun Jul 3 12:04:15 2016 +0200

    Make key and value columns larger on large windows.

 editor/dconf-editor.css  |   38 ++++++++++++++++++++++----------------
 editor/dconf-window.vala |   12 +++++++++++-
 2 files changed, 33 insertions(+), 17 deletions(-)
---
diff --git a/editor/dconf-editor.css b/editor/dconf-editor.css
index f9614d6..6fd4d0a 100644
--- a/editor/dconf-editor.css
+++ b/editor/dconf-editor.css
@@ -47,31 +47,37 @@ window > popover.menu {
 }
 
 /* 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; }
+                         .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; }
 
 /* icon sizing */
-            .dconf-list > row > .folder > grid { background-size:1.5rem; }
-.small-rows .dconf-list > row > .folder > grid { background-size:0.75rem; }
+                         .dconf-list          > row > .folder > grid { background-size:1.5rem; }
+             .small-rows .dconf-list          > row > .folder > grid { background-size:0.75rem; }
 
 /* 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; }
+                         .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; }
 
 /* technical labels placing */
-            .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); }
+                         .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); }
 
-            .dconf-list          > row > .key    > grid > grid          { min-width:400px; }
+.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; }
 
 /* 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; }
+                         .dconf-list:dir(ltr) > row  grid > label { padding-right: 0.5em; }
+                         .dconf-list:dir(rtl) > row  grid > label { padding-left:  0.5em; }
 
 /*\
 * * pathbar
diff --git a/editor/dconf-window.vala b/editor/dconf-window.vala
index 7aa29c9..e853785 100644
--- a/editor/dconf-window.vala
+++ b/editor/dconf-window.vala
@@ -122,8 +122,18 @@ class DConfWindow : ApplicationWindow
     }
 
     [GtkCallback]
-    private void on_size_allocate ()
+    private void on_size_allocate (Allocation allocation)
     {
+        /* responsive design */
+
+        StyleContext context = get_style_context ();
+        if (allocation.width > 1000)
+            context.add_class ("large-window");
+        else
+            context.remove_class ("large-window");
+
+        /* save size */
+
         if (window_is_maximized || window_is_tiled)
             return;
         get_size (out window_width, out window_height);