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

extensions-app: Make error/update icon interactive

Browse Source 
Both icons are not immediately obvious, and the context provided
by the tooltip can be hard to discover.

Address this by making the icons interactive, and provide further
information in a popover.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3051>
This commit is contained in:
Florian Müllner 2023-12-10 23:59:04 +01:00 committed by Marge Bot
parent b2040b20c7
commit ed3394a953
3 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
subprojects/extensions-app/data/css/style.css
View File

@ -16,6 +16,3 @@ row.extension box.information,
row.extension box.status {
border-spacing: 3px;
}
image.error { color: @error_color; }
image.warning { color: @warning_color; }

73
subprojects/extensions-app/data/ui/extension-row.ui
View File

@ -46,23 +46,68 @@
<class name="status"/>
</style>
<child>
<object class="GtkImage" id="errorIcon">
<object class="GtkMenuButton" id="errorButton">
<property name="visible">false</property>
<property name="valign">center</property>
<property name="has-frame">false</property>
<property name="icon-name">dialog-error-symbolic</property>
<property name="tooltip-text" translatable="yes">The extension had an error</property>
<style>
<class name="error"/>
</style>
<accessibility>
<property name="label" translatable="yes">Error Details</property>
</accessibility>
<property name="popover">
<object class="GtkPopover" id="errorPopover">
<property name="child">
<object class="AdwClamp">
<property name="maximum-size">300</property>
<property name="tightening-threshold">300</property>
<property name="child">
<object class="GtkLabel" id="errorLabel">
<!-- Hack to make the screen reader read the label -->
<property name="selectable"
bind-source="errorPopover"
bind-property="visible"
bind-flags="invert-boolean|sync-create"/>
<property name="wrap">true</property>
</object>
</property>
</object>
</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkImage" id="updatesIcon">
<object class="GtkMenuButton" id="updatesButton">
<property name="visible">false</property>
<property name="valign">center</property>
<property name="has-frame">false</property>
<property name="icon-name">software-update-available-symbolic</property>
<property name="tooltip-text" translatable="yes">The extension can be updated</property>
<style>
<class name="warning"/>
</style>
<accessibility>
<property name="label" translatable="yes">Updates Details</property>
</accessibility>
<property name="popover">
<object class="GtkPopover" id="updatesPopover">
<property name="child">
<object class="AdwClamp">
<property name="maximum-size">200</property>
<property name="tightening-threshold">200</property>
<property name="child">
<object class="GtkLabel">
<property name="label" translatable="yes">A new version of this extension is ready and will be loaded on next login.</property>
<!-- Hack to make the screen reader read the label -->
<property name="selectable"
bind-source="updatesPopover"
bind-property="visible"
bind-flags="invert-boolean|sync-create"/>
<property name="wrap">true</property>
</object>
</property>
</object>
</property>
</object>
</property>
</object>
</child>
</object>
@ -78,18 +123,6 @@
</style>
</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>
<style>
<class name="caption"/>
<class name="error"/>
</style>
</object>
</child>
</object>
</child>
<child>

12
subprojects/extensions-app/js/main.js
View File

@ -361,8 +361,8 @@ var ExtensionRow = GObject.registerClass({
'descriptionLabel',
'versionLabel',
'errorLabel',
'errorIcon',
'updatesIcon',
'errorButton',
'updatesButton',
'switch',
'actionsBox',
],
@ -503,13 +503,9 @@ var ExtensionRow = GObject.registerClass({
if (!action.enabled)
this._switch.active = state;
this._updatesIcon.visible = this.hasUpdate;
this._errorIcon.visible = this.hasError;
this._descriptionLabel.visible = !this.hasError;
this._updatesButton.visible = this.hasUpdate;
this._errorButton.visible = this.hasError;
this._errorLabel.label = this.error;
this._errorLabel.visible = this.error !== '';
this._versionLabel.label = this.version.toString();
this._versionLabel.visible = this.version !== '';