GNOME.org
 

[dconf-editor] Make RegistryInfo work on small screens.

commit 78f01c3ecde1531cfa89dcd26b518b2bb4315c36
Author: Arnaud Bonatti <arnaud bonatti gmail com>
Date:   Wed Oct 24 14:48:39 2018 +0200

    Make RegistryInfo work on small screens.

 editor/dconf-editor.css          | 85 ++++++++++++++++++++++++++++------------
 editor/dconf-editor.ui           |  2 +-
 editor/dconf-view.vala           |  5 ++-
 editor/dconf-window.vala         |  9 +++++
 editor/modifications-revealer.ui |  1 +
 editor/property-row.ui           |  9 +++--
 editor/registry-info.vala        | 30 ++++++++++----
 7 files changed, 103 insertions(+), 38 deletions(-)
---
diff --git a/editor/dconf-editor.css b/editor/dconf-editor.css
index 3f2b7ae..565deb3 100644
--- a/editor/dconf-editor.css
+++ b/editor/dconf-editor.css
@@ -373,26 +373,72 @@
   padding:0;
 }
 
-/* rows usual height */
-            list.properties-list          > row > grid > label {
-  min-height:1.5rem;
-  padding-top:0.6rem;
-  padding-bottom:0.6rem;
-  transition:padding-top 0.3s, padding-bottom 0.3s;
+/* phone mode */
+
+.extra-small-window .properties-list > row { outline-offset:-5px; }   /* just for the left and right */
+
+                    .property-name-label {
+  margin-left :1rem;
+  margin-right:1rem;
+
+  transition:min-width     0.5s,
+             color         0.5s,
+
+             margin-top    0.3s,
+             margin-bottom 0.3s;
+
+  min-width:13rem;
+
+  margin-top   :0.6rem;
+  margin-bottom:0.6rem;
 }
-.small-rows list.properties-list          > row > grid > label {
-  padding-top:0.3rem;
-  padding-bottom:0.3rem;
+
+.small-keys-list-rows                          .property-name-label,
+.small-keys-list-rows:not(.extra-small-window) .property-value {
+  margin-top   :0.3rem;
+  margin-bottom:0.3rem;
 }
 
-/* rows content placement */
-            list.properties-list          > row > grid > :first-child {
-  min-width:12.5rem;
+.extra-small-window .property-name-label {
+  min-width:0;
 }
-            list.properties-list:dir(ltr) > row > grid > label { padding-right:1em; }
-            list.properties-list:dir(rtl) > row > grid > label { padding-left:1em; }
 
-/* key-editor-child properties */
+  /* see also ".greyed-label" */
+                             .property-name-label          { color:@theme_fg_color; }
+  /* TODO report bug: better would be mix(@theme_fg_color,@theme_bg_color,1.5); but that renders white... */
+.extra-small-window          .property-name-label          { 
color:mix(@theme_fg_color,@insensitive_fg_color,0.6); }
+                   :backdrop .property-name-label,
+.extra-small-window:backdrop .property-name-label          { color:@theme_unfocused_fg_color; }
+                             .property-name-label:disabled,
+.extra-small-window          .property-name-label:disabled { color:@insensitive_fg_color; }
+                   :backdrop .property-name-label:disabled,
+.extra-small-window:backdrop .property-name-label:disabled { color:@unfocused_insensitive_color; }
+
+                                         .property-value          { margin-left  : 1.0rem;
+                                                                    margin-right : 1.0rem;
+                                                                    transition:margin-top    0.3s,   /* both 
*/
+                                                                               margin-bottom 0.3s,   /* 
small-keys-list-rows */
+                                                                               margin-left   0.5s,   /* 
extra-small-window */
+                                                                               margin-right  0.5s;   /* 
extra-small-window */
+
+                                                                    margin-top   : 0.6rem;
+                                                                    margin-bottom: 0.6rem; }
+
+                     .extra-small-window .property-value          { margin-top   : 2.2rem; }
+.small-keys-list-rows.extra-small-window .property-value          { margin-top   : 1.9rem; }
+
+                                         .property-value:dir(ltr) { margin-left  :15.0rem; }
+                                         .property-value:dir(rtl) { margin-right :15.0rem; }
+                     .extra-small-window .property-value:dir(ltr) { margin-left  : 1.0rem; }
+                     .extra-small-window .property-value:dir(rtl) { margin-right : 1.0rem; }
+
+                    .properties-list .property-warning          { padding-top:0.6rem;
+                                                                  transition:margin-left  0.3s, /* for ltr */
+                                                                             margin-right 0.3s; /* for rtl 
*/ }
+                    .properties-list .property-warning:dir(ltr) { margin-left :-7.5rem; }
+                    .properties-list .property-warning:dir(rtl) { margin-right:-7.5rem; }
+.extra-small-window .properties-list .property-warning:dir(ltr) { margin-left : 0; }
+.extra-small-window .properties-list .property-warning:dir(ltr) { margin-right: 0; }
 
 .key-editor-child-array {
   min-height:10em;
@@ -402,15 +448,6 @@
   padding:0.2em 0.3em;
 }
 
-.key-editor-child-array:dir(ltr),
-.key-editor-child-entry:dir(ltr) {
-  margin-right:1em;
-}
-.key-editor-child-array:dir(rtl),
-.key-editor-child-entry:dir(rtl) {
-  margin-left:1em;
-}
-
 /*\
 * * text formating
 \*/
diff --git a/editor/dconf-editor.ui b/editor/dconf-editor.ui
index d83f9ef..4852525 100644
--- a/editor/dconf-editor.ui
+++ b/editor/dconf-editor.ui
@@ -5,7 +5,7 @@
     <property name="visible">False</property>
     <property name="title" translatable="yes">dconf Editor</property>
     <property name="height-request">420</property>
-    <property name="width-request">630</property>
+    <property name="width-request">550</property>
     <signal name="key-press-event" handler="on_key_press_event"/>
     <signal name="button-press-event" handler="on_button_press_event"/>
     <signal name="window-state-event" handler="on_window_state_event"/>
diff --git a/editor/dconf-view.vala b/editor/dconf-view.vala
index caaa2fc..295c1df 100644
--- a/editor/dconf-view.vala
+++ b/editor/dconf-view.vala
@@ -108,7 +108,7 @@ private class KeyEditorChildFlags : Grid, KeyEditorChild
         this.orientation = Orientation.HORIZONTAL;
         this.column_spacing = 8;
 
-        MenuButton button = new MenuButton ();
+        MenuButton button = new MenuButton ();  // TODO change icon when popover will go up
         button.visible = true;
         button.use_popover = true;
         button.halign = Align.START;
@@ -583,7 +583,7 @@ private class KeyEditorChildNumberInt : SpinButton, KeyEditorChild
         this.snap_to_ticks = true;
         this.numeric = true;
         this.input_purpose = InputPurpose.NUMBER;   // TODO could be DIGITS for UnsignedInt
-        this.width_chars = 30;
+        this.max_width_chars = 30;
 
         EntryBuffer ref_buffer = buffer;    // an EntryBuffer doesn't emit a "destroy" signal
         deleted_text_handler = ref_buffer.deleted_text.connect (() => value_has_changed (test_value ()));
@@ -803,6 +803,7 @@ private class KeyEditorChildArray : Grid, KeyEditorChild
 
         Label error_label = new Label (_("This value is invalid for the key type."));
         error_label.visible = true;
+        error_label.wrap = true;
         error_bar.pack_start (error_label);
 
         text_view.buffer.text = initial_value.print (false);
diff --git a/editor/dconf-window.vala b/editor/dconf-window.vala
index 3dfc853..33fa8ec 100644
--- a/editor/dconf-window.vala
+++ b/editor/dconf-window.vala
@@ -449,18 +449,27 @@ private class DConfWindow : ApplicationWindow
         StyleContext context = get_style_context ();
         if (allocation.width > MAX_ROW_WIDTH + 42)
         {
+            context.remove_class ("extra-small-window");
             context.remove_class ("small-window");
             context.add_class ("large-window");
         }
+        else if (allocation.width < 590)
+        {
+            context.remove_class ("large-window");
+            context.add_class ("small-window");
+            context.add_class ("extra-small-window");
+        }
         else if (allocation.width < 787)
         {
             context.remove_class ("large-window");
+            context.remove_class ("extra-small-window");
             context.add_class ("small-window");
         }
         else
         {
             context.remove_class ("large-window");
             context.remove_class ("small-window");
+            context.remove_class ("extra-small-window");
         }
 
         /* save size */
diff --git a/editor/modifications-revealer.ui b/editor/modifications-revealer.ui
index 249ad8e..e6478c6 100644
--- a/editor/modifications-revealer.ui
+++ b/editor/modifications-revealer.ui
@@ -32,6 +32,7 @@
             <property name="visible">True</property>
             <property name="margin-start">6</property><!-- GtkActionBar creates a GtkBox which "spacing" 
property is not editable -->
             <property name="margin-end">6</property>
+            <property name="ellipsize">end</property>
           </object>
         </child>
         <child>
diff --git a/editor/property-row.ui b/editor/property-row.ui
index 80450f8..c51beab 100644
--- a/editor/property-row.ui
+++ b/editor/property-row.ui
@@ -5,18 +5,19 @@
     <property name="visible">True</property>
     <property name="halign">center</property>
     <child>
-      <object class="GtkGrid" id="grid">
+      <object class="GtkOverlay" id="overlay">
         <property name="visible">True</property>
-        <property name="orientation">horizontal</property>
-        <child>
+        <child type="overlay">
           <object class="GtkLabel" id="name_label">
             <property name="visible">True</property>
+            <property name="hexpand">False</property>
+            <property name="halign">start</property>
             <property name="valign">start</property>
             <property name="vexpand">true</property>
             <property name="xalign">1</property>
             <property name="yalign">0</property>
             <style>
-              <class name="greyed-label"/>
+              <class name="property-name-label"/>
             </style>
           </object>
         </child>
diff --git a/editor/registry-info.vala b/editor/registry-info.vala
index 0aa62a8..67cda4a 100644
--- a/editor/registry-info.vala
+++ b/editor/registry-info.vala
@@ -216,6 +216,7 @@ private class RegistryInfo : Grid, BrowsableView
         current_value_label.xalign = 0;
         current_value_label.yalign = 0;
         current_value_label.wrap = true;
+        current_value_label.wrap_mode = Pango.WrapMode.WORD_CHAR;
         current_value_label.hexpand = true;
         current_value_label.show ();
         add_row_from_widget (_("Current value"), current_value_label);
@@ -594,7 +595,7 @@ private class RegistryInfo : Grid, BrowsableView
 [GtkTemplate (ui = "/ca/desrt/dconf-editor/ui/property-row.ui")]
 private class PropertyRow : ListBoxRowWrapper
 {
-    [GtkChild] private Grid grid;
+    [GtkChild] private Overlay overlay;
     [GtkChild] private Label name_label;
 
     private Widget? value_widget = null;
@@ -605,14 +606,21 @@ private class PropertyRow : ListBoxRowWrapper
 
         Label value_label = new Label (property_value);
         value_widget = value_label;
+        value_label.hexpand = true;
+        value_label.halign = Align.FILL;
         value_label.valign = Align.START;
         value_label.xalign = 0;
         value_label.yalign = 0;
         value_label.wrap = true;
+        value_label.wrap_mode = Pango.WrapMode.WORD_CHAR;
+
+        StyleContext context = value_label.get_style_context ();
         if (use_italic)
-            value_label.get_style_context ().add_class ("italic-label");
+            context.add_class ("italic-label");
+        context.add_class ("property-value");
+
         value_label.show ();
-        grid.attach (value_label, 1, 0, 1, 1);
+        overlay.add (value_label);
     }
 
     internal PropertyRow.from_widgets (string property_name, Widget widget, Widget? warning)
@@ -622,17 +630,25 @@ private class PropertyRow : ListBoxRowWrapper
         if (widget is Label)    // TODO handle other rows
             value_widget = widget;
 
-        grid.attach (widget, 1, 0, 1, 1);
-        widget.valign = Align.CENTER;
+        Grid grid = new Grid ();
+        grid.orientation = Orientation.VERTICAL;
+        grid.add (widget);
+
+        StyleContext context = grid.get_style_context ();
+        context.add_class ("property-value");
 
         if (warning != null)
         {
             ((!) warning).hexpand = true;
             ((!) warning).halign = Align.CENTER;
+            ((!) warning).get_style_context ().add_class ("property-warning");
             ((!) warning).show ();
-            grid.row_spacing = 4;
-            grid.attach ((!) warning, 0, 1, 2, 1);
+            grid.add ((!) warning);
         }
+
+        grid.show ();
+        overlay.add (grid);
+        grid.valign = Align.CENTER;
     }
 
     internal string? get_copy_text ()
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]