extensionPrefs: Tweak UI

Update according to the latest mockups:
 - don't use a border around the list as specified
   by the latest HIG version
 - use more generous spacing between controls
 - allow extension descriptions to take up two lines
 - drop GNOME branding from the window title
 - make the app name consistent with the window title

https://bugzilla.gnome.org/show_bug.cgi?id=778672
This commit is contained in:
Florian Müllner 2015-12-15 00:37:47 +01:00
parent 5d07832e96
commit 75f8279a19
2 changed files with 21 additions and 12 deletions

View File

@ -1,6 +1,6 @@
[Desktop Entry] [Desktop Entry]
Type=Application Type=Application
Name=GNOME Shell Extension Preferences Name=Shell Extensions
Comment=Configure GNOME Shell Extensions Comment=Configure GNOME Shell Extensions
Exec=@bindir@/gnome-shell-extension-prefs %u Exec=@bindir@/gnome-shell-extension-prefs %u
X-GNOME-Bugzilla-Bugzilla=GNOME X-GNOME-Bugzilla-Bugzilla=GNOME

View File

@ -143,10 +143,10 @@ const Application = new Lang.Class({
this._window = new Gtk.ApplicationWindow({ application: app, this._window = new Gtk.ApplicationWindow({ application: app,
window_position: Gtk.WindowPosition.CENTER }); window_position: Gtk.WindowPosition.CENTER });
this._window.set_size_request(800, 500); this._window.set_default_size(800, 500);
this._titlebar = new Gtk.HeaderBar({ show_close_button: true, this._titlebar = new Gtk.HeaderBar({ show_close_button: true,
title: _("GNOME Shell Extensions") }); title: _("Shell Extensions") });
this._window.set_titlebar(this._titlebar); this._window.set_titlebar(this._titlebar);
let killSwitch = new Gtk.Switch({ valign: Gtk.Align.CENTER }); let killSwitch = new Gtk.Switch({ valign: Gtk.Align.CENTER });
@ -157,11 +157,7 @@ const Application = new Lang.Class({
Gio.SettingsBindFlags.BIND_DEFAULT | Gio.SettingsBindFlags.BIND_DEFAULT |
Gio.SettingsBindFlags.INVERT_BOOLEAN); Gio.SettingsBindFlags.INVERT_BOOLEAN);
let scroll = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER, let scroll = new Gtk.ScrolledWindow({ hscrollbar_policy: Gtk.PolicyType.NEVER });
shadow_type: Gtk.ShadowType.IN,
halign: Gtk.Align.CENTER,
propagate_natural_width: true,
margin: 18 });
this._window.add(scroll); this._window.add(scroll);
this._extensionSelector = new Gtk.ListBox({ selection_mode: Gtk.SelectionMode.NONE }); this._extensionSelector = new Gtk.ListBox({ selection_mode: Gtk.SelectionMode.NONE });
@ -254,6 +250,18 @@ const Application = new Lang.Class({
} }
}); });
const DescriptionLabel = new Lang.Class({
Name: 'DescriptionLabel',
Extends: Gtk.Label,
vfunc_get_preferred_height_for_width: function(width) {
// Hack: Request the maximum height allowed by the line limit
if (this.lines > 0)
return this.parent(0);
return this.parent(width);
}
});
const ExtensionRow = new Lang.Class({ const ExtensionRow = new Lang.Class({
Name: 'ExtensionRow', Name: 'ExtensionRow',
Extends: Gtk.ListBoxRow, Extends: Gtk.ListBoxRow,
@ -284,7 +292,8 @@ const ExtensionRow = new Lang.Class({
let extension = ExtensionUtils.extensions[this.uuid]; let extension = ExtensionUtils.extensions[this.uuid];
let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL, let hbox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
hexpand: true, margin: 12, spacing: 6 }); hexpand: true, margin_end: 24, spacing: 24,
margin: 12 });
this.add(hbox); this.add(hbox);
let vbox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL, let vbox = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
@ -298,9 +307,9 @@ const ExtensionRow = new Lang.Class({
vbox.add(label); vbox.add(label);
let desc = extension.metadata.description.split('\n')[0]; let desc = extension.metadata.description.split('\n')[0];
label = new Gtk.Label({ label: desc, label = new DescriptionLabel({ label: desc, wrap: true, lines: 2,
ellipsize: Pango.EllipsizeMode.END, ellipsize: Pango.EllipsizeMode.END,
halign: Gtk.Align.START }); xalign: 0, yalign: 0 });
vbox.add(label); vbox.add(label);
let button = new Gtk.Button({ valign: Gtk.Align.CENTER, let button = new Gtk.Button({ valign: Gtk.Align.CENTER,