extensions-app: Remove extension row revealer

Make all the actions (open website, open preferences, remove extension) and
information (description, version number) readily available.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2114>
This commit is contained in:
Romain Vigier 2022-01-18 13:00:03 +01:00 committed by Marge Bot
parent db39b792c2
commit 859ded5790
3 changed files with 128 additions and 212 deletions

View File

@ -1,11 +1,20 @@
.details-button image { row.extension>box {
transition: 250ms; margin: 12px;
} }
.details-button.expanded:dir(ltr) image {
-gtk-icon-transform: rotate(0.25turn); row.extension>box,
row.extension box.header {
border-spacing: 12px;
} }
.details-button.expanded:dir(rtl) image {
-gtk-icon-transform: rotate(-0.25turn); row.extension box.actions,
row.extension box.actions>box {
border-spacing: 6px;
}
row.extension box.information,
row.extension box.status {
border-spacing: 3px;
} }
image.error { color: @error_color; } image.error { color: @error_color; }

View File

@ -1,21 +1,56 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<interface> <interface>
<template class="ExtensionRow" parent="GtkListBoxRow"> <template class="ExtensionRow" parent="GtkListBoxRow">
<property name="activatable">False</property> <property name="activatable">false</property>
<style>
<class name="extension"/>
</style>
<child> <child>
<object class="GtkGrid"> <object class="GtkBox">
<property name="margin-start">12</property> <property name="orientation">vertical</property>
<property name="margin-end">12</property>
<property name="margin-top">12</property>
<property name="margin-bottom">12</property>
<property name="column-spacing">12</property>
<child> <child>
<object class="GtkLabel" id="nameLabel"/> <object class="GtkBox">
<child>
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="hexpand">true</property>
<style>
<class name="information"/>
</style>
<child>
<object class="GtkBox">
<style>
<class name="header"/>
</style>
<child>
<object class="GtkLabel" id="nameLabel">
<property name="xalign">0</property>
<style>
<class name="title"/>
</style>
</object>
</child> </child>
<child>
<object class="GtkLabel" id="versionLabel">
<property name="visible">false</property>
<property name="xalign">0</property>
<property name="yalign">1</property>
<style>
<class name="caption"/>
<class name="dim-label"/>
</style>
</object>
</child>
<child>
<object class="GtkBox">
<style>
<class name="status"/>
</style>
<child> <child>
<object class="GtkImage" id="errorIcon"> <object class="GtkImage" id="errorIcon">
<property name="visible">False</property> <property name="visible">false</property>
<property name="icon-name">dialog-error-symbolic</property> <property name="icon-name">dialog-error-symbolic</property>
<property name="tooltip-text" translatable="yes">The extension had an error</property>
<style> <style>
<class name="error"/> <class name="error"/>
</style> </style>
@ -23,173 +58,75 @@
</child> </child>
<child> <child>
<object class="GtkImage" id="updatesIcon"> <object class="GtkImage" id="updatesIcon">
<property name="visible">False</property> <property name="visible">false</property>
<property name="icon-name">software-update-available-symbolic</property> <property name="icon-name">software-update-available-symbolic</property>
<property name="tooltip-text" translatable="yes">The extension can be updated</property>
<style> <style>
<class name="warning"/> <class name="warning"/>
</style> </style>
</object> </object>
</child> </child>
<child> </object>
<object class="GtkLabel"> </child>
<property name="hexpand">True</property>
</object> </object>
</child> </child>
<child> <child>
<object class="GtkButton" id="prefsButton"> <object class="GtkLabel" id="descriptionLabel">
<property name="visible" <property name="xalign">0</property>
bind-source="prefsButton" <property name="ellipsize">end</property>
bind-property="sensitive"
bind-flags="sync-create"/>
<property name="icon-name">emblem-system-symbolic</property>
<property name="receives-default">True</property>
<property name="valign">center</property>
<property name="action-name">row.show-prefs</property>
<style> <style>
<class name="circular"/> <class name="subtitle"/>
</style> </style>
</object> </object>
</child> </child>
<child>
<object class="GtkLabel" id="errorLabel">
<property name="visible">false</property>
<property name="selectable">true</property>
<property name="wrap">True</property>
<property name="xalign">0</property>
<style>
<class name="caption"/>
<class name="error"/>
</style>
</object>
</child>
</object>
</child>
<child> <child>
<object class="GtkSwitch" id="switch"> <object class="GtkSwitch" id="switch">
<property name="valign">center</property> <property name="valign">center</property>
<property name="action-name">row.enabled</property> <property name="action-name">row.enabled</property>
</object> </object>
</child> </child>
<child> </object>
<object class="GtkSeparator"/>
</child> </child>
<child> <child>
<object class="GtkButton" id="revealButton"> <object class="GtkCenterBox" id="actionsBox">
<property name="receives-default">True</property>
<property name="valign">center</property>
<property name="has-frame">False</property>
<property name="icon-name">pan-end-symbolic</property>
<style> <style>
<class name="details-button"/> <class name="actions"/>
</style> </style>
</object> <child type="start">
</child> <object class="GtkBox">
<child> <child>
<object class="GtkRevealer" id="revealer"> <object class="GtkButton" id="websiteButton">
<child>
<object class="GtkGrid">
<property name="margin-top">12</property>
<property name="row-spacing">6</property>
<property name="column-spacing">12</property>
<child>
<object class="GtkLabel">
<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="ellipsize">end</property>
<property name="xalign">0</property>
<property name="yalign">0</property>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="visible"
bind-source="versionLabel"
bind-property="visible"
bind-flags="sync-create"/>
<property name="label" translatable="yes">Version</property>
<property name="xalign">0</property>
<style>
<class name="dim-label"/>
</style>
<layout>
<property name="column">0</property>
<property name="row">1</property>
</layout>
</object>
</child>
<child>
<object class="GtkLabel" id="versionLabel">
<property name="visible">False</property>
<property name="xalign">0</property>
<layout>
<property name="column">1</property>
<property name="row">1</property>
</layout>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="visible"
bind-source="authorLabel"
bind-property="visible"
bind-flags="sync-create"/>
<property name="label" translatable="yes">Author</property>
<property name="xalign">0</property>
<style>
<class name="dim-label"/>
</style>
<layout>
<property name="column">0</property>
<property name="row">2</property>
</layout>
</object>
</child>
<child>
<object class="GtkLabel" id="authorLabel">
<property name="visible">False</property>
<property name="xalign">0</property>
<layout>
<property name="column">1</property>
<property name="row">2</property>
</layout>
</object>
</child>
<child>
<object class="GtkLabel">
<property name="visible"
bind-source="errorLabel"
bind-property="visible"
bind-flags="sync-create"/>
<property name="label" translatable="yes">Error</property>
<property name="xalign">0</property>
<property name="yalign">0</property>
<style>
<class name="dim-label"/>
</style>
<layout>
<property name="column">0</property>
<property name="row">3</property>
</layout>
</object>
</child>
<child>
<object class="GtkLabel" id="errorLabel">
<property name="visible">False</property>
<property name="selectable">True</property>
<property name="wrap">True</property>
<property name="xalign">0</property>
<layout>
<property name="column">1</property>
<property name="row">3</property>
</layout>
</object>
</child>
<child>
<object class="GtkButton">
<property name="label" translatable="yes">Website</property> <property name="label" translatable="yes">Website</property>
<property name="action-name">row.show-url</property> <property name="action-name">row.show-url</property>
<property name="valign">end</property>
<property name="margin-top">12</property>
<layout>
<property name="column">0</property>
<property name="row">4</property>
</layout>
</object> </object>
</child> </child>
<child> <child>
<object class="GtkButton" id="prefsButton">
<property name="visible"
bind-source="prefsButton"
bind-property="sensitive"
bind-flags="sync-create"/>
<property name="label" translatable="yes">Settings</property>
<property name="action-name">row.show-prefs</property>
</object>
</child>
</object>
</child>
<child type="end">
<object class="GtkButton" id="removeButton"> <object class="GtkButton" id="removeButton">
<property name="visible" <property name="visible"
bind-source="removeButton" bind-source="removeButton"
@ -197,27 +134,10 @@
bind-flags="sync-create"/> bind-flags="sync-create"/>
<property name="label" translatable="yes">Remove…</property> <property name="label" translatable="yes">Remove…</property>
<property name="action-name">row.uninstall</property> <property name="action-name">row.uninstall</property>
<property name="hexpand">True</property>
<property name="halign">end</property>
<property name="valign">end</property>
<style>
<class name="destructive-action"/>
</style>
<layout>
<property name="column">1</property>
<property name="row">4</property>
</layout>
</object> </object>
</child> </child>
</object> </object>
</child> </child>
<layout>
<property name="column">0</property>
<property name="row">1</property>
<property name="column-span">8</property>
</layout>
</object>
</child>
</object> </object>
</child> </child>
</template> </template>

View File

@ -349,13 +349,11 @@ var ExtensionRow = GObject.registerClass({
'nameLabel', 'nameLabel',
'descriptionLabel', 'descriptionLabel',
'versionLabel', 'versionLabel',
'authorLabel',
'errorLabel', 'errorLabel',
'errorIcon', 'errorIcon',
'updatesIcon', 'updatesIcon',
'switch', 'switch',
'revealButton', 'actionsBox',
'revealer',
], ],
}, class ExtensionRow extends Gtk.ListBoxRow { }, class ExtensionRow extends Gtk.ListBoxRow {
_init(extension) { _init(extension) {
@ -414,16 +412,6 @@ var ExtensionRow = GObject.registerClass({
this._descriptionLabel.label = desc; this._descriptionLabel.label = desc;
this._descriptionLabel.tooltip_text = desc; this._descriptionLabel.tooltip_text = 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.connect('destroy', this._onDestroy.bind(this));
this._extensionStateChangedId = this._app.shellProxy.connectSignal( this._extensionStateChangedId = this._app.shellProxy.connectSignal(
@ -503,14 +491,13 @@ var ExtensionRow = GObject.registerClass({
this._updatesIcon.visible = this.hasUpdate; this._updatesIcon.visible = this.hasUpdate;
this._errorIcon.visible = this.hasError; this._errorIcon.visible = this.hasError;
this._descriptionLabel.visible = !this.hasError;
this._errorLabel.label = this.error; this._errorLabel.label = this.error;
this._errorLabel.visible = this.error !== ''; this._errorLabel.visible = this.error !== '';
this._versionLabel.label = this.version.toString(); this._versionLabel.label = this.version.toString();
this._versionLabel.visible = this.version !== ''; this._versionLabel.visible = this.version !== '';
this._authorLabel.label = this.creator.toString();
this._authorLabel.visible = this.creator !== '';
} }
_onDestroy() { _onDestroy() {