[dconf-editor] Reorganize key list rows for more uniform sizing
- From: Arnaud Bonatti <arnaudb src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [dconf-editor] Reorganize key list rows for more uniform sizing
- Date: Fri, 17 Nov 2017 05:43:52 +0000 (UTC)
commit 2bf33a5af6efd1187cdd66bbba4eb827ea10b429
Author: Davi da Silva Böger <dsboger gmail com>
Date: Thu Nov 9 11:19:11 2017 -0200
Reorganize key list rows for more uniform sizing
- Move summary below key name for greater proximity (and apply
"dim-label")
- Align key value to the right for better recognition
- Limit amount of visible text content to 3 lines (2 when
small-keys-list-rows is enabled)
- Uniform height for key rows
- Add separators between rows
- Limit row width when window is too wide
- Align folder names with key names
- Move "delayed modification" emblem to the left (aligned with folder
emblem)
See https://bugzilla.gnome.org/show_bug.cgi?id=790025
editor/dconf-editor.css | 71 ++++++++++++++++++++++++++++-------------
editor/dconf-window.vala | 30 ++++-------------
editor/folder-list-box-row.ui | 1 +
editor/key-list-box-row.ui | 71 +++++++++++++++++++++++++---------------
editor/key-list-box-row.vala | 39 ++++++++++++++++++++++-
editor/registry-view.vala | 39 ++++++++++++++++++++++-
6 files changed, 177 insertions(+), 74 deletions(-)
---
diff --git a/editor/dconf-editor.css b/editor/dconf-editor.css
index bf6a4ff..777887b 100644
--- a/editor/dconf-editor.css
+++ b/editor/dconf-editor.css
@@ -25,13 +25,38 @@
\*/
/* row height */
- .keys-list > row { transition:min-height 0.3s; } /*
not for .bookmarks, as the transition will start at the popover opening */
+ .keys-list > row { transition:min-height
0.3s,
+ margin-left
0.3s, margin-right 0.3s,
+ padding-left
0.3s, padding-right 0.3s,
+ /* margin 0.3s,
+ padding 0.3s,
these cause stuttering in the transition */
+ border-radius
0.3s; } /* not for .bookmarks, as the transition will start at the popover opening */
+ /* .keys-list > row:hover,
+ .keys-list > row:selected{ transition:min-height
0.3s,
+ margin 0.3s,
+ padding 0.3s,
+ border-radius
0.3s; } stuttering of a single row is almost bearable */
+
+ .keys-list > .key-row { min-height:4em; }
+ .keys-list > .folder-row { min-height:2em; }
+ .keys-list > row { margin:0;
padding-top:0.25em; padding-bottom:0.25em; }
+.large-window .keys-list > row { margin:0.25em;
padding-top:0; padding-bottom:0; }
+
+ .small-keys-list-rows .keys-list > .key-row { min-height:2.5em; }
+ .small-keys-list-rows .keys-list > .folder-row { min-height:1.5em; }
+ .small-keys-list-rows .keys-list > row { margin:0; padding-top:0;
padding-bottom:0; }
+.large-window.small-keys-list-rows .keys-list > row { margin:0; padding-top:0;
padding-bottom:0; }
- .keys-list > row,
.bookmarks list > row { min-height:2.6rem; }
- .small-keys-list-rows .keys-list > row { min-height:2.0rem; }
.small-bookmarks-rows .bookmarks list > row { min-height:1.3rem; }
+/* round borders for large windows */
+
+.large-window .keys-list > row { border-radius:0.5em;
+
-gtk-outline-radius:calc(0.5em - 1px); }
+.large-window.small-keys-list-rows .keys-list > row { border-radius:0;
+ -gtk-outline-radius:2px;
/* gtk+ defaults */ }
+
/* bookmarks */
.small-bookmarks-rows .bookmarks list > row > grid > button.circular.flat {
min-height:0;
@@ -57,12 +82,16 @@
/* .non-symbolic .keys-list > row:active > .folder > grid {
background-image:-gtk-icontheme("folder-open"); } */
/* visual padding */
- .keys-list:dir(ltr) > row > .key > grid { padding-left:
10px; } /* looks cool */
- .keys-list:dir(rtl) > row > .key > grid { padding-right:
10px; }
+ .keys-list:dir(ltr) > row > .key > grid { padding-left:
10px; padding-right:20px; } /* looks cool */
+ .keys-list:dir(rtl) > row > .key > grid {
padding-right:10px; padding-left: 20px; }
+ .keys-list > row > .key > grid {
transition:padding-left 0.3s, padding-right 0.3s; }
.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; }
+ .keys-list:dir(ltr) > row > .key > grid > :last-child {
margin-left: 4em; }
+ .keys-list:dir(rtl) > row > .key > grid > :last-child {
margin-right:4em; }
+
/* icon sizing */
.keys-list > row > .folder > grid {
background-size:1.5rem; }
/* .non-symbolic .keys-list > row > .folder > grid {
background-size:1.75rem; } */
@@ -71,15 +100,20 @@
{
background-size:1rem; }
/* technical padding: icon visual padding + icon size + some padding */
- .keys-list:dir(ltr) > row > .folder > grid { padding-left:
3rem; }
+ .keys-list:dir(ltr) > row > .folder > grid,
+ .keys-list:dir(ltr) > row > .key > 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 /*,
+ .small-keys-list-rows .keys-list:dir(ltr) > row > .folder > grid,
+ .small-keys-list-rows .keys-list:dir(ltr) > row > .key > 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; }
+ .keys-list:dir(rtl) > row > .folder > grid,
+ .keys-list:dir(rtl) > row > .key > 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 /*,
+ .small-keys-list-rows .keys-list:dir(rtl) > row > .folder > grid,
+ .small-keys-list-rows .keys-list:dir(rtl) > row > .key > grid /*,
.non-symbolic.small-keys-list-rows .keys-list:dir(rtl) > row > .folder > grid */
{ padding-right:
2.25rem; }
@@ -99,11 +133,6 @@
.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 */
.keys-list:dir(ltr) > row grid > label { padding-right:
0.5em; }
.keys-list:dir(rtl) > row grid > label { padding-left:
0.5em; }
@@ -114,15 +143,13 @@
.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"); }
- .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; }
+ .keys-list > row > .key.delayed {
background-size:1.5rem; transition:background-size 0.3s; }
+ .small-keys-list-rows .keys-list > row > .key.delayed {
background-size:1rem; }
- .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); }
+ .keys-list:dir(ltr) > row > .key {
background-position: 0.75rem center; }
+ .keys-list:dir(rtl) > row > .key {
background-position:calc(100% - 0.75rem) center; }
+ .small-keys-list-rows .keys-list:dir(ltr) > row > .key {
background-position: 0.75rem center; }
+ .small-keys-list-rows .keys-list:dir(rtl) > row > .key {
background-position:calc(100% - 0.75rem) center; }
/*\
* * pathbar
diff --git a/editor/dconf-window.vala b/editor/dconf-window.vala
index 368ab2a..0dfeb7c 100644
--- a/editor/dconf-window.vala
+++ b/editor/dconf-window.vala
@@ -83,11 +83,13 @@ class DConfWindow : ApplicationWindow
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"))
+ bool small_rows = settings.get_boolean ("small-keys-list-rows");
+ if (small_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");
+ registry_view.small_keys_list_rows = small_rows;
});
small_bookmarks_rows_handler = settings.changed ["small-bookmarks-rows"].connect (() => {
if (settings.get_boolean ("small-bookmarks-rows"))
@@ -98,8 +100,10 @@ class DConfWindow : ApplicationWindow
});
/* if (settings.get_string ("theme") == "non-symbolic-keys-list")
context.add_class ("non-symbolic"); */
- if (settings.get_boolean ("small-keys-list-rows"))
+ bool small_rows = settings.get_boolean ("small-keys-list-rows");
+ if (small_rows)
context.add_class ("small-keys-list-rows");
+ registry_view.small_keys_list_rows = small_rows;
if (settings.get_boolean ("small-bookmarks-rows"))
context.add_class ("small-bookmarks-rows");
@@ -177,30 +181,10 @@ class DConfWindow : ApplicationWindow
/* responsive design */
StyleContext context = get_style_context ();
- if (allocation.width > 1200)
- {
- context.add_class ("xxl");
- context.add_class ("xl");
- context.add_class ("large-window");
- }
- else if (allocation.width > 1100)
- {
- context.remove_class ("xxl");
- context.add_class ("xl");
- context.add_class ("large-window");
- }
- else if (allocation.width > 1000)
- {
- context.remove_class ("xxl");
- context.remove_class ("xl");
+ if (allocation.width > MAX_ROW_WIDTH + 42)
context.add_class ("large-window");
- }
else
- {
- context.remove_class ("xxl");
- context.remove_class ("xl");
context.remove_class ("large-window");
- }
/* save size */
diff --git a/editor/folder-list-box-row.ui b/editor/folder-list-box-row.ui
index f8b3341..2cf4b19 100644
--- a/editor/folder-list-box-row.ui
+++ b/editor/folder-list-box-row.ui
@@ -2,6 +2,7 @@
<interface>
<!-- interface-requires gtk+ 3.0 -->
<template class="FolderListBoxRow" parent="ClickableListBoxRow">
+ <property name="visible">True</property>
<style>
<class name="folder"/>
</style>
diff --git a/editor/key-list-box-row.ui b/editor/key-list-box-row.ui
index 6e9d2ef..df5ae0a 100644
--- a/editor/key-list-box-row.ui
+++ b/editor/key-list-box-row.ui
@@ -2,52 +2,69 @@
<interface>
<!-- interface-requires gtk+ 3.0 -->
<template class="KeyListBoxRow" parent="ClickableListBoxRow">
+ <property name="visible">True</property>
<style>
<class name="key"/>
</style>
<child>
- <object class="GtkGrid">
+ <object class="GtkGrid" id="key_name_and_value_grid">
<property name="visible">True</property>
<property name="orientation">horizontal</property>
<child>
- <object class="GtkGrid" id="key_name_and_value_grid">
+ <object class="GtkLabel" id="key_name_label">
<property name="visible">True</property>
- <property name="orientation">horizontal</property>
- <child>
- <object class="GtkLabel" id="key_name_label">
- <property name="visible">True</property>
- <property name="vexpand">True</property>
- <property name="xalign">0</property>
- <property name="wrap">True</property>
- <property name="wrap-mode">PANGO_WRAP_WORD_CHAR</property>
- <property name="single-line-mode">True</property>
- <style>
- <class name="key-name"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkLabel" id="key_value_label">
- <property name="visible">True</property>
- <property name="vexpand">True</property>
- <property name="xalign">0</property>
- <property name="wrap">True</property>
- <property name="wrap-mode">PANGO_WRAP_WORD_CHAR</property>
- <property name="single-line-mode">True</property>
- </object>
- </child>
+ <property name="vexpand">True</property>
+ <property name="valign">end</property>
+ <property name="xalign">0</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">PANGO_WRAP_WORD_CHAR</property>
+ <property name="single-line-mode">True</property>
+ <style>
+ <class name="key-name"/>
+ </style>
</object>
+ <packing>
+ <property name="left-attach">0</property>
+ <property name="top-attach">0</property>
+ </packing>
</child>
<child>
<object class="GtkLabel" id="key_info_label">
<property name="visible">True</property>
<property name="vexpand">True</property>
+ <property name="valign">start</property>
<property name="xalign">0</property>
<property name="hexpand">True</property>
- <property name="wrap">False</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">PANGO_WRAP_WORD_CHAR</property>
+ <property name="lines">2</property>
+ <property name="ellipsize">end</property>
<property name="single-line-mode">True</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
+ </object>
+ <packing>
+ <property name="left-attach">0</property>
+ <property name="top-attach">1</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkLabel" id="key_value_label">
+ <property name="visible">True</property>
+ <property name="vexpand">True</property>
+ <property name="xalign">1</property>
+ <property name="wrap">True</property>
+ <property name="wrap-mode">PANGO_WRAP_WORD_CHAR</property>
+ <property name="lines">3</property>
<property name="ellipsize">end</property>
+ <property name="single-line-mode">True</property>
</object>
+ <packing>
+ <property name="left-attach">1</property>
+ <property name="top-attach">0</property>
+ <property name="height">2</property>
+ </packing>
</child>
</object>
</child>
diff --git a/editor/key-list-box-row.vala b/editor/key-list-box-row.vala
index a92e2f8..20388a2 100644
--- a/editor/key-list-box-row.vala
+++ b/editor/key-list-box-row.vala
@@ -17,6 +17,26 @@
using Gtk;
+const int MAX_ROW_WIDTH = 1000;
+
+private class ListBoxRowWrapper : ListBoxRow
+{
+ public override void get_preferred_width (out int minimum_width, out int natural_width)
+ {
+ base.get_preferred_width (out minimum_width, out natural_width);
+ natural_width = MAX_ROW_WIDTH;
+ }
+}
+
+private class ListBoxRowHeader : Separator
+{
+ public override void get_preferred_width (out int minimum_width, out int natural_width)
+ {
+ base.get_preferred_width (out minimum_width, out natural_width);
+ natural_width = MAX_ROW_WIDTH;
+ }
+}
+
private abstract class ClickableListBoxRow : EventBox
{
public signal void on_row_clicked ();
@@ -126,6 +146,23 @@ private abstract class KeyListBoxRow : ClickableListBoxRow
[GtkChild] protected Label key_info_label;
protected Switch? boolean_switch = null;
+ public bool small_keys_list_rows
+ {
+ set
+ {
+ if (value)
+ {
+ key_value_label.set_lines (2);
+ key_info_label.set_lines (1);
+ }
+ else
+ {
+ key_value_label.set_lines (3);
+ key_info_label.set_lines (2);
+ }
+ }
+ }
+
protected StyleContext name_context;
protected StyleContext value_context;
@@ -149,7 +186,7 @@ private abstract class KeyListBoxRow : ClickableListBoxRow
((!) boolean_switch).valign = Align.CENTER;
((!) boolean_switch).show ();
key_value_label.hide ();
- key_name_and_value_grid.add ((!) boolean_switch);
+ key_name_and_value_grid.attach ((!) boolean_switch, 1, 0, 1, 2);
}
update ();
diff --git a/editor/registry-view.vala b/editor/registry-view.vala
index 515f7cc..3401363 100644
--- a/editor/registry-view.vala
+++ b/editor/registry-view.vala
@@ -42,6 +42,20 @@ class RegistryView : Grid, PathElement
private GLib.ListStore rows_possibly_with_popover = new GLib.ListStore (typeof (ClickableListBoxRow));
+ private bool _small_keys_list_rows;
+ public bool small_keys_list_rows
+ {
+ set
+ {
+ _small_keys_list_rows = value;
+ key_list_box.foreach((row) => {
+ Widget row_child = ((ListBoxRow) row).get_child ();
+ if (row_child is KeyListBoxRow)
+ ((KeyListBoxRow) row_child).small_keys_list_rows = value;
+ });
+ }
+ }
+
[GtkChild] private ModificationsRevealer revealer;
[GtkChild] private SearchBar search_bar;
@@ -71,6 +85,8 @@ class RegistryView : Grid, PathElement
application_settings.bind ("sort-case-sensitive", sorting_options, "case-sensitive",
GLib.SettingsBindFlags.GET);
application_settings.bind ("sort-folders", sorting_options, "sort-folders",
GLib.SettingsBindFlags.GET);
+ key_list_box.set_header_func (update_row_header);
+
destroy.connect (() => {
revealer.disconnect (revealer_reload_handler);
buffer.disconnect (search_entry_buffer_deleted_text_handler);
@@ -303,6 +319,17 @@ class RegistryView : Grid, PathElement
* * Key ListBox
\*/
+ private void update_row_header (ListBoxRow row, ListBoxRow? before)
+ {
+ if (before != null)
+ {
+ ListBoxRowHeader header = new ListBoxRowHeader ();
+ header.set_halign (Align.CENTER);
+ header.show ();
+ row.set_header (header);
+ }
+ }
+
private Widget new_list_box_row (Object item)
{
ClickableListBoxRow row;
@@ -323,6 +350,8 @@ class RegistryView : Grid, PathElement
Key key = (Key) setting_object;
KeyListBoxRow key_row = (KeyListBoxRow) row;
+ key_row.small_keys_list_rows = _small_keys_list_rows;
+
on_delete_call_handler = row.on_delete_call.connect (() => set_key_value (key, null));
ulong set_key_value_handler = key_row.set_key_value.connect ((variant) => { set_key_value (key,
variant); set_delayed_icon (row, key); });
ulong change_dismissed_handler = key_row.change_dismissed.connect (() => revealer.dismiss_change
(key));
@@ -348,7 +377,15 @@ class RegistryView : Grid, PathElement
row.disconnect (button_press_event_handler);
});
- return row;
+ /* Wrapper ensures max width for rows */
+ ListBoxRowWrapper wrapper = new ListBoxRowWrapper ();
+ wrapper.set_halign (Align.CENTER);
+ wrapper.add (row);
+ if (row is FolderListBoxRow)
+ wrapper.get_style_context ().add_class ("folder-row");
+ else
+ wrapper.get_style_context ().add_class ("key-row");
+ return wrapper;
}
private void set_delayed_icon (ClickableListBoxRow row, Key key)
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
