notification: Allow expanding notification in calendar drawer

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

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');
}