isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

extensionPrefs: Move description into a expander

Browse Source 
The description can be useful information, but also increases the
visual complexity of the extensions list. Move it into a hidden
details area that can be expanded, which unclutters the interface
while keeping the information readily available.

https://gitlab.gnome.org/GNOME/gnome-shell/issues/1968
This commit is contained in:
Florian Müllner 2020-01-24 02:02:10 +01:00
parent 059524b007
commit 1067642300
4 changed files with 89 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
js/extensionPrefs/css/application.css Normal file
View File

@ -0,0 +1,9 @@
.details-button image {
transition: 250ms;
}
.details-button.expanded:dir(ltr) image {
-gtk-icon-transform: rotate(0.25turn);
}
.details-button.expanded:dir(rtl) image {
-gtk-icon-transform: rotate(-0.25turn);
}

23
js/extensionPrefs/main.js
View File

@ -44,6 +44,17 @@ class Application extends Gtk.Application {
vfunc_startup() {
super.vfunc_startup();
let provider = new Gtk.CssProvider();
let uri = 'resource:///org/gnome/shell/css/application.css';
try {
provider.load_from_file(Gio.File.new_for_uri(uri));
} catch (e) {
logError(e, 'Failed to add application style');
}
Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
this._shellProxy = new GnomeShellProxy(Gio.DBus.session, 'org.gnome.Shell', '/org/gnome/Shell');
this._window = new ExtensionsWindow({ application: this });
}
@ -472,6 +483,8 @@ var ExtensionRow = GObject.registerClass({
InternalChildren: [
'nameLabel',
'descriptionLabel',
'revealButton',
'revealer',
],
}, class ExtensionRow extends Gtk.ListBoxRow {
_init(extension) {
@ -514,6 +527,16 @@ var ExtensionRow = GObject.registerClass({
let desc = this._extension.metadata.description.split('\n')[0];
this._descriptionLabel.label = desc;
this._revealButton.connect('clicked', () => {
this._revealer.reveal_child = !this._revealer.reveal_child;
});
this._revealer.connect('notify::reveal-child', () => {
if (this._revealer.reveal_child)
this._revealButton.get_style_context().add_class('expanded');
else
this._revealButton.get_style_context().remove_class('expanded');
});
this.connect('destroy', this._onDestroy.bind(this));
this._extensionStateChangedId = this._app.shellProxy.connectSignal(

75
js/extensionPrefs/ui/extension-row.ui
View File

@ -8,20 +8,13 @@
<child>
<object class="GtkGrid">
<property name="visible">True</property>
<property name="margin_start">12</property>
<property name="margin_end">24</property>
<property name="margin_top">12</property>
<property name="margin_bottom">12</property>
<property name="row_spacing">6</property>
<property name="column_spacing">24</property>
<property name="margin">12</property>
<property name="column_spacing">12</property>
<child>
<object class="GtkLabel" id="nameLabel">
<property name="visible">True</property>
<property name="hexpand">True</property>
<property name="halign">start</property>
<attributes>
<attribute name="weight" value="bold"/>
</attributes>
</object>
</child>
<child>
@ -46,9 +39,6 @@
</object>
</child>
</object>
<packing>
<property name="height">2</property>
</packing>
</child>
<child>
<object class="GtkSwitch">
@ -57,21 +47,66 @@
<property name="valign">center</property>
<property name="action-name">row.enabled</property>
</object>
<packing>
<property name="height">2</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="descriptionLabel">
<object class="GtkSeparator">
<property name="visible">True</property>
<property name="ellipsize">end</property>
<property name="max_width_chars">60</property>
<property name="xalign">0</property>
<property name="yalign">0</property>
</object>
</child>
<child>
<object class="GtkButton" id="revealButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="valign">center</property>
<style>
<class name="details-button"/>
<class name="image-button"/>
<class name="flat"/>
</style>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="icon_name">pan-end-symbolic</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkRevealer" id="revealer">
<property name="visible">True</property>
<child>
<object class="GtkGrid">
<property name="visible">True</property>
<property name="margin_top">12</property>
<property name="row_spacing">6</property>
<property name="column_spacing">12</property>
<child>
<object class="GtkLabel">
<property name="visible">True</property>
<property name="label" translatable="yes">Description</property>
<property name="xalign">0</property>
<style>
<class name="dim-label"/>
</style>
</object>
</child>
<child>
<object class="GtkLabel" id="descriptionLabel">
<property name="visible">True</property>
<property name="ellipsize">end</property>
<property name="max_width_chars">60</property>
<property name="xalign">0</property>
<property name="yalign">0</property>
</object>
</child>
</object>
</child>
</object>
<packing>
<property name="left_attach">0</property>
<property name="top_attach">1</property>
<property name="width">5</property>
</packing>
</child>
</object>

2
js/prefs-resources.gresource.xml
View File

@ -8,6 +8,8 @@
<file>misc/fileUtils.js</file>
<file>misc/params.js</file>
<file alias="css/application.css">extensionPrefs/css/application.css</file>
<file alias="ui/extension-row.ui">extensionPrefs/ui/extension-row.ui</file>
<file alias="ui/extensions-window.ui">extensionPrefs/ui/extensions-window.ui</file>
</gresource>