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

notification: Allow expanding notification in calendar drawer

Browse Source 
This adds a button to expand a notification. This makes most of
the body readable (limited to 6 lines) and the action buttons available
to the user.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3173>
This commit is contained in:
Julian Sparber 2024-02-13 11:42:11 +01:00 committed by Florian Müllner
parent dc4e2e8114
commit 262fb191b1
5 changed files with 52 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
data/gnome-shell-icons.gresource.xml
View File

@ -5,6 +5,7 @@
<file preprocess="xml-stripblanks">scalable/actions/carousel-arrow-next-symbolic.svg</file>
<file preprocess="xml-stripblanks">scalable/actions/carousel-arrow-previous-symbolic.svg</file>
<file preprocess="xml-stripblanks">scalable/actions/dark-mode-symbolic.svg</file>
<file preprocess="xml-stripblanks">scalable/actions/notification-expand-symbolic.svg</file>
<file preprocess="xml-stripblanks">scalable/actions/ornament-check-symbolic.svg</file>
<file preprocess="xml-stripblanks">scalable/actions/ornament-dot-checked-symbolic.svg</file>
<file preprocess="xml-stripblanks">scalable/actions/ornament-dot-unchecked-symbolic.svg</file>

1
data/icons/scalable/actions/notification-expand-symbolic.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#222" fill-rule="evenodd" d="m3.293 7.707 4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414L8 9.586 4.707 6.293a1 1 0 1 0-1.414 1.414"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 215 B

13
data/theme/gnome-shell-sass/widgets/_message-list.scss
View File

@ -109,7 +109,8 @@
}
}
// close button
// buttons in the message header
.message-expand-button,
.message-close-button {
@extend .icon-button;
color: $fg_color;
@ -119,6 +120,16 @@
&:insensitive { background-color: transparentize($fg_color, 0.9);}
&:active { background-color: transparentize($fg_color, 0.8);}
}
.message-expand-button {
padding: 6px;
background-color: transparentize($fg_color, 0.9);
&:ltr { margin-right: $base_padding; }
&:rtl { margin-left: $base_padding; }
&:hover { background-color: transparentize($fg_color, 0.8);}
}
}
// container for message contents

1
js/ui/calendar.js
View File

@ -1014,7 +1014,6 @@ class CalendarMessageList extends St.Widget {
vertical: true,
x_expand: true,
y_expand: true,
y_align: Clutter.ActorAlign.START,
});
this._sectionList.connectObject(
'child-added', this._sync.bind(this),

39
js/ui/messageList.js
View File

@ -370,6 +370,14 @@ class MessageHeader extends St.BoxLayout {
});
this.add_child(headerContent);
this.expandButton = new St.Button({
style_class: 'message-expand-button',
icon_name: 'notification-expand-symbolic',
y_align: Clutter.ActorAlign.CENTER,
pivot_point: new Graphene.Point({x: 0.5, y: 0.5}),
});
this.add_child(this.expandButton);
this.closeButton = new St.Button({
style_class: 'message-close-button',
icon_name: 'window-close-symbolic',
@ -436,7 +444,7 @@ export const Message = GObject.registerClass({
accessible_role: Atk.Role.NOTIFICATION,
can_focus: true,
x_expand: true,
y_expand: true,
y_expand: false,
});
this.expanded = false;
@ -499,6 +507,24 @@ export const Message = GObject.registerClass({
this._header.closeButton.connect('clicked', this.close.bind(this));
this._header.closeButton.visible = this.canClose();
this._header.expandButton.connect('clicked', () => {
if (this.expanded)
this.unexpand(true);
else
this.expand(true);
});
this._bodyLabel.connect('notify::allocation', this._updateExpandButton.bind(this));
this._updateExpandButton();
}
_updateExpandButton() {
if (!this._bodyLabel.has_allocation())
return;
const layout = this._bodyLabel.clutter_text.get_layout();
const canExpand = layout.is_ellipsized() || this.expanded || !!this._actionBin.child;
// Use opacity to not trigger a relayout
this._header.expandButton.opacity = canExpand ? 255 : 0;
}
close() {
@ -567,6 +593,7 @@ export const Message = GObject.registerClass({
setActionArea(actor) {
this._actionBin.child = actor;
this._actionBin.visible = actor && this.expanded;
this._updateExpandButton();
}
addMediaControl(iconName, callback) {
@ -597,6 +624,11 @@ export const Message = GObject.registerClass({
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
this._header.expandButton.ease({
rotation_angle_z: 180,
duration,
});
this.emit('expanded');
}
@ -617,6 +649,11 @@ export const Message = GObject.registerClass({
},
});
this._header.expandButton.ease({
rotation_angle_z: 0,
duration,
});
this.emit('unexpanded');
}