mirror of
https://github.com/edu4rdshl/gnome-shell.git
synced 2026-07-17 23:24:51 +00:00
notifications: Rework notification layout to not rely on css hacks
- rework message bubbles to have elements laid out in a sensible way - remove some of the css hacks that assisted the layout - rework the media player widget to not be as constrained by the notification layout - clean up notifications css
This commit is contained in:
Sam Hewitt
Sam Hewitt
parent
3bd5319ec5
commit
aed6140d9e
4 changed files with 148 additions and 146 deletions
|
|
@ -1,41 +1,44 @@
|
|||
/* Message List */
|
||||
// a.k.a. notifications in the menu
|
||||
// a.k.a. notifications in the date menu
|
||||
|
||||
// main list
|
||||
.message-list {
|
||||
width: 29em;
|
||||
border: solid $borders_color;
|
||||
|
||||
// padding and margins to account for scrollbar
|
||||
&:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
|
||||
&:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
|
||||
// padding to account for scrollbar and border width for fake separator
|
||||
&:ltr {padding-right: $base_padding; border-right-width: 1px;}
|
||||
&:rtl {padding-left: $base_padding; border-left-width: 1px;}
|
||||
|
||||
.message-list-placeholder {
|
||||
// "No Notifications" label and icon
|
||||
.message-list-placeholder {
|
||||
@extend %title_2;
|
||||
color: transparentize($insensitive_fg_color, .5);
|
||||
spacing: $base_padding*3;
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $base_icon_size*3; // 48px
|
||||
margin-bottom: $base_margin*3;
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-sections {
|
||||
spacing: $base_padding;
|
||||
margin: 0;
|
||||
padding-bottom: $base_padding;
|
||||
// list of sections in the main list
|
||||
.message-list-sections {
|
||||
// to account for scrollbar
|
||||
&:ltr {margin-right: $base_margin * 3;}
|
||||
&:rtl {margin-left: $base_margin * 3;}
|
||||
|
||||
// to account for scrollbar
|
||||
&:ltr {margin-right: $base_margin * 3; }
|
||||
&:rtl {margin-left: $base_margin * 3;}
|
||||
}
|
||||
// section in the list of sections in the main list
|
||||
.message-list-section {
|
||||
|
||||
.message-list-section,
|
||||
.message-list-section-list {
|
||||
spacing: $base_padding;
|
||||
// list within the section in the list of sections in the main list :)
|
||||
.message-list-section-list {
|
||||
// spacing between list items (i.e. notification bubbles)
|
||||
spacing: $base_padding;
|
||||
padding-bottom: $base_padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// do-not-disturb + clear button
|
||||
|
|
@ -58,77 +61,79 @@
|
|||
border-color: transparentize($selected_bg_color, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-clear-button {
|
||||
border-radius: 16px; // round the clear button
|
||||
}
|
||||
}
|
||||
|
||||
// message bubbles
|
||||
.message {
|
||||
@include card;
|
||||
|
||||
// icon container
|
||||
.message-icon-bin {
|
||||
padding: ($base_padding * 3);
|
||||
// container of the message
|
||||
.message-box {
|
||||
padding:$base_padding*2;
|
||||
spacing: $base_padding*2;
|
||||
|
||||
&:ltr {padding-right:$base_padding;}
|
||||
&:rtl {padding-left:$base_padding;}
|
||||
// icon container
|
||||
.message-icon-bin {
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $large_icon_size; // 32px
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
|
||||
// icon size and color
|
||||
> StIcon {
|
||||
icon-size: $large_icon_size; // 32px
|
||||
-st-icon-style: symbolic;
|
||||
// fallback icon
|
||||
> .fallback-app-icon {
|
||||
width: $large_icon_size;
|
||||
height: $large_icon_size;
|
||||
}
|
||||
}
|
||||
|
||||
// fallback
|
||||
> .fallback-app-icon {
|
||||
width: $base_icon_size;
|
||||
height: $base_icon_size;
|
||||
// content
|
||||
.message-content {
|
||||
spacing: 2px;
|
||||
|
||||
// title container
|
||||
.message-titlebox {
|
||||
spacing: $base_padding;
|
||||
|
||||
// title
|
||||
.message-title {
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
// secondary container in title box
|
||||
.message-secondary-bin {
|
||||
color: $insensitive_fg_color;
|
||||
@include fontsize($base_font_size - 2);
|
||||
|
||||
// though it is aligned to the bottom
|
||||
// this is needed for visual alignment
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// body
|
||||
.message-body {
|
||||
color: transparentize($fg_color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// close button
|
||||
.message-close-button {
|
||||
color: $fg_color;
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
border-radius: 99px;
|
||||
padding: $base_padding - 1px;
|
||||
|
||||
&:hover { background-color: transparentize($fg_color, 0.8); }
|
||||
&:active { background-color: transparentize($fg_color, 0.9); }
|
||||
|
||||
> StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
}
|
||||
|
||||
// content
|
||||
.message-content {
|
||||
spacing: 4px;
|
||||
padding: ($base_padding*1.5);
|
||||
margin-bottom: $base_margin*2;
|
||||
}
|
||||
|
||||
// title
|
||||
.message-title {
|
||||
font-weight: bold;
|
||||
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||
padding-top: 0.57em;
|
||||
}
|
||||
|
||||
// secondary container in title box
|
||||
.message-secondary-bin {
|
||||
padding: 0 $base_margin * 2;
|
||||
|
||||
// notification time stamp
|
||||
> .event-time {
|
||||
color: transparentize($fg_color, 0.5);
|
||||
@include fontsize($base_font_size - 2);
|
||||
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
|
||||
padding-bottom: 0.13em;
|
||||
|
||||
&:ltr { text-align: right };
|
||||
&:rtl { text-align: left };
|
||||
}
|
||||
}
|
||||
|
||||
// close button
|
||||
.message-close-button {
|
||||
color: $fg_color;
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
border-radius: 99px;
|
||||
padding: $base_padding - 1px;
|
||||
margin: 1px;
|
||||
&:hover {background-color: transparentize($fg_color, 0.8);}
|
||||
&:active {background-color: transparentize($fg_color, 0.9);}
|
||||
|
||||
& StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
// body
|
||||
.message-body {color: darken($fg_color, 10%);}
|
||||
}
|
||||
|
||||
// URLs in messages
|
||||
|
|
@ -136,45 +141,44 @@
|
|||
link-color: $link_color;
|
||||
}
|
||||
|
||||
/* Media Controls */
|
||||
.message-media-control {
|
||||
padding: 0 $base_padding*3;
|
||||
margin: $base_padding*2 0;
|
||||
border-radius: $base_border_radius;
|
||||
color: $fg_color;
|
||||
/* Media Player */
|
||||
.media-message-player {
|
||||
|
||||
// colors are lightened since the media controls are in a card
|
||||
&:hover {
|
||||
background-color: lighten($hover_bg_color, 5%);
|
||||
color: $fg_color;
|
||||
// overrides
|
||||
.message-content {
|
||||
// this is needed to visually align it with the album art
|
||||
margin-top: $base_margin;
|
||||
padding-top: $base_padding;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: lighten($active_bg_color, 5%);
|
||||
color: $fg_color;
|
||||
// controls
|
||||
.message-media-controls {
|
||||
|
||||
.message-media-control {
|
||||
padding: $base_padding*3;
|
||||
border-radius: 999px;
|
||||
color: $fg_color;
|
||||
|
||||
// colors are lightened since the media controls are in a card
|
||||
&:hover { background-color: lighten($hover_bg_color, 10%);}
|
||||
&:active { background-color: lighten($active_bg_color, 10%);}
|
||||
&:insensitive { color: transparentize($insensitive_fg_color, 0.2);}
|
||||
|
||||
> StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
}
|
||||
|
||||
&:insensitive { color: lighten($insensitive_fg_color, 5%); }
|
||||
|
||||
// fix margin for last button
|
||||
&:last-child:ltr { margin-right: $base_margin*3; }
|
||||
&:last-child:rtl { margin-left: $base_margin*3; }
|
||||
|
||||
& StIcon { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
// album-art
|
||||
.media-message-cover-icon {
|
||||
icon-size: $base_icon_size*3 !important; // 48px
|
||||
border-radius: $base_border_radius;
|
||||
|
||||
// when there is no artwork
|
||||
&.fallback {
|
||||
color: darken($fg_color, 17%);
|
||||
background-color: $bg_color;
|
||||
border: 1px solid transparent;
|
||||
// album-art
|
||||
.media-message-cover-icon {
|
||||
icon-size: $base_icon_size*4 !important; // 64px
|
||||
border-radius: $base_border_radius;
|
||||
icon-size: $large_icon_size !important; // 32px
|
||||
padding: ($base_padding*2 + 2); // 16px
|
||||
background-color: transparentize($fg_color, 0.9);
|
||||
|
||||
// when there is no artwork
|
||||
&.fallback {
|
||||
color: transparentize($fg_color, 0.2);
|
||||
icon-size: $large_icon_size !important; // 32px
|
||||
padding: ($base_padding*2 + 2); // 16px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,23 @@
|
|||
/* Notifications & Message Tray */
|
||||
|
||||
$notification_banner_height: 64px;
|
||||
$notification_banner_width: 34em;
|
||||
$notification_banner_radius: $base_border_radius*1.5;
|
||||
// container for popup notifications
|
||||
#notification-container {
|
||||
width: 34em;
|
||||
padding: $base_margin;
|
||||
}
|
||||
|
||||
// Banner notifications
|
||||
.notification-banner {
|
||||
min-height: $notification_banner_height;
|
||||
width: $notification_banner_width;
|
||||
box-shadow: 0 2px 4px 2px $shadow_color;
|
||||
border-radius: $notification_banner_radius;
|
||||
margin: $base_margin;
|
||||
border-radius: $base_border_radius*1.5;
|
||||
|
||||
.notification-actions {
|
||||
spacing: 0;
|
||||
}
|
||||
.notification-actions {}
|
||||
|
||||
.notification-button {
|
||||
@extend %bubble_button;
|
||||
}
|
||||
}
|
||||
|
||||
// counter
|
||||
.summary-source-counter {
|
||||
font-size: $base_font_size - 1pt;
|
||||
font-weight: bold;
|
||||
height: 1.6em;
|
||||
width: 1.6em;
|
||||
-shell-counter-overlap-x: 3px;
|
||||
-shell-counter-overlap-y: 3px;
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
border: 2px solid $fg_color;
|
||||
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
|
||||
border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%;
|
||||
}
|
||||
|
||||
// chat bubbles
|
||||
.chat-body { spacing: 5px; }
|
||||
.chat-response { margin: 5px; }
|
||||
|
|
|
|||
|
|
@ -322,7 +322,9 @@ var Message = GObject.registerClass({
|
|||
});
|
||||
this.set_child(vbox);
|
||||
|
||||
let hbox = new St.BoxLayout();
|
||||
let hbox = new St.BoxLayout({
|
||||
style_class: 'message-box',
|
||||
});
|
||||
vbox.add_actor(hbox);
|
||||
|
||||
this._actionBin = new St.Widget({
|
||||
|
|
@ -333,42 +335,54 @@ var Message = GObject.registerClass({
|
|||
|
||||
this._iconBin = new St.Bin({
|
||||
style_class: 'message-icon-bin',
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
y_expand: true,
|
||||
y_align: Clutter.ActorAlign.START,
|
||||
visible: false,
|
||||
});
|
||||
hbox.add_actor(this._iconBin);
|
||||
|
||||
const contentBox = new St.BoxLayout({
|
||||
style_class: 'message-content',
|
||||
vertical: true,
|
||||
x_expand: true,
|
||||
vertical: true,
|
||||
});
|
||||
hbox.add_actor(contentBox);
|
||||
|
||||
this._mediaControls = new St.BoxLayout();
|
||||
this._mediaControls = new St.BoxLayout({
|
||||
style_class: 'message-media-controls',
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
x_align: Clutter.ActorAlign.CENTER,
|
||||
});
|
||||
hbox.add_actor(this._mediaControls);
|
||||
|
||||
let titleBox = new St.BoxLayout();
|
||||
let titleBox = new St.BoxLayout({
|
||||
style_class: 'message-titlebox',
|
||||
x_expand: true,
|
||||
});
|
||||
contentBox.add_actor(titleBox);
|
||||
|
||||
this.titleLabel = new St.Label({ style_class: 'message-title' });
|
||||
this.titleLabel = new St.Label({
|
||||
style_class: 'message-title',
|
||||
y_align: Clutter.ActorAlign.END,
|
||||
});
|
||||
this.setTitle(title);
|
||||
titleBox.add_actor(this.titleLabel);
|
||||
|
||||
this._secondaryBin = new St.Bin({
|
||||
style_class: 'message-secondary-bin',
|
||||
x_expand: true, y_expand: true,
|
||||
x_expand: true,
|
||||
y_align: Clutter.ActorAlign.END,
|
||||
});
|
||||
titleBox.add_actor(this._secondaryBin);
|
||||
|
||||
this._closeButton = new St.Button({
|
||||
style_class: 'message-close-button',
|
||||
icon_name: 'window-close-symbolic',
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
y_align: Clutter.ActorAlign.START,
|
||||
x_align: Clutter.ActorAlign.END,
|
||||
opacity: 0,
|
||||
});
|
||||
titleBox.add_actor(this._closeButton);
|
||||
hbox.add_actor(this._closeButton);
|
||||
|
||||
this._bodyStack = new St.Widget({ x_expand: true });
|
||||
this._bodyStack.layout_manager = new LabelExpanderLayout();
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ class MediaMessage extends MessageList.Message {
|
|||
_init(player) {
|
||||
super._init('', '');
|
||||
|
||||
this.add_style_class_name('media-message-player');
|
||||
|
||||
this._player = player;
|
||||
|
||||
this._icon = new St.Icon({ style_class: 'media-message-cover-icon' });
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue