From d3c050b88d497e87eb54bb3787a122cd282a89f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Sun, 26 Feb 2017 01:54:45 +0100 Subject: [PATCH] Refine notification style Update the notification style according to the latest mockups: - make notification icons smaller and prefer symbolic variants - remove background box when not hovered/focused - increase spacing between elements - use normal text sizes https://bugzilla.gnome.org/show_bug.cgi?id=775763 --- data/theme/gnome-shell-high-contrast.css | 37 ++++++++++++------------ data/theme/gnome-shell-sass | 2 +- data/theme/gnome-shell.css | 37 ++++++++++++------------ js/ui/calendar.js | 5 ++-- js/ui/messageList.js | 1 + 5 files changed, 41 insertions(+), 41 deletions(-) diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css index 2714b9258..6a3f87594 100644 --- a/data/theme/gnome-shell-high-contrast.css +++ b/data/theme/gnome-shell-high-contrast.css @@ -868,54 +868,53 @@ StScrollBar { background-color: #0d0d0d; } .message-list-sections { - spacing: 1.5em; } + spacing: 1em; } .message-list-section, .message-list-section-list { - spacing: 0.7em; } + spacing: 0.4em; } .message { - background-color: #0d0d0d; border-radius: 3px; } .message:hover, .message:focus { - background-color: #262626; } + background-color: #0d0d0d; } .message-icon-bin { - padding: 8px 0px 8px 8px; } + padding: 10px 3px 10px 10px; } .message-icon-bin:rtl { - padding: 8px 8px 8px 0px; } + padding: 10px 10px 10px 3px; } .message-icon-bin > StIcon { - icon-size: 32px; } - -.message-secondary-bin:ltr { - padding-left: 8px; } -.message-secondary-bin:rtl { - padding-right: 8px; } + color: #cccccc; + icon-size: 16px; + -st-icon-style: symbolic; } .message-secondary-bin { - color: #999999; } + padding: 0 12px; } + +.message-secondary-bin > .event-time { + color: #999999; + font-size: 0.7em; } .message-secondary-bin > StIcon { icon-size: 16px; } .message-title { - font-weight: bold; - font-size: 1.1em; } + color: #f2f2f2; } .message-content { - padding: 8px; - font-size: .9em; } + color: #cccccc; + padding: 10px; } .message-media-control { - padding: 6px; } + padding: 12px; } .message-media-control:last-child:ltr { padding-right: 18px; } .message-media-control:last-child:rtl { padding-left: 18px; } .media-message-cover-icon { - icon-size: 32px; } + icon-size: 48px !important; } .media-message-cover-icon.fallback { color: #1a1a1a; background-color: #000; diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass index 7f6d89bfc..a17289478 160000 --- a/data/theme/gnome-shell-sass +++ b/data/theme/gnome-shell-sass @@ -1 +1 @@ -Subproject commit 7f6d89bfcd5fa1c4238eed83dcab75949df72a4d +Subproject commit a172894788ec73c82be9aa6d29243809fdb0111d diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index efac28f91..58a76566d 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -868,54 +868,53 @@ StScrollBar { background-color: #454c4c; } .message-list-sections { - spacing: 1.5em; } + spacing: 1em; } .message-list-section, .message-list-section-list { - spacing: 0.7em; } + spacing: 0.4em; } .message { - background-color: #454c4c; border-radius: 3px; } .message:hover, .message:focus { - background-color: #5d6767; } + background-color: #454c4c; } .message-icon-bin { - padding: 8px 0px 8px 8px; } + padding: 10px 3px 10px 10px; } .message-icon-bin:rtl { - padding: 8px 8px 8px 0px; } + padding: 10px 10px 10px 3px; } .message-icon-bin > StIcon { - icon-size: 32px; } - -.message-secondary-bin:ltr { - padding-left: 8px; } -.message-secondary-bin:rtl { - padding-right: 8px; } + color: #bebeb6; + icon-size: 16px; + -st-icon-style: symbolic; } .message-secondary-bin { - color: #8e8e80; } + padding: 0 12px; } + +.message-secondary-bin > .event-time { + color: #8e8e80; + font-size: 0.7em; } .message-secondary-bin > StIcon { icon-size: 16px; } .message-title { - font-weight: bold; - font-size: 1.1em; } + color: #e2e2df; } .message-content { - padding: 8px; - font-size: .9em; } + color: #bebeb6; + padding: 10px; } .message-media-control { - padding: 6px; } + padding: 12px; } .message-media-control:last-child:ltr { padding-right: 18px; } .message-media-control:last-child:rtl { padding-left: 18px; } .media-message-cover-icon { - icon-size: 32px; } + icon-size: 48px !important; } .media-message-cover-icon.fallback { color: #515a5a; background-color: #393f3f; diff --git a/js/ui/calendar.js b/js/ui/calendar.js index 721fc9f67..71708bfd4 100644 --- a/js/ui/calendar.js +++ b/js/ui/calendar.js @@ -20,7 +20,7 @@ const MSECS_IN_DAY = 24 * 60 * 60 * 1000; const SHOW_WEEKDATE_KEY = 'show-weekdate'; const ELLIPSIS_CHAR = '\u2026'; -const MESSAGE_ICON_SIZE = 32; +const MESSAGE_ICON_SIZE = 16; // alias to prevent xgettext from picking up strings translated in GTK+ const gtk30_ = Gettext_gtk30.gettext; @@ -958,7 +958,8 @@ const NotificationSection = new Lang.Class({ _createTimeLabel: function(datetime) { let label = new St.Label({ style_class: 'event-time', - x_align: Clutter.ActorAlign.START }); + x_align: Clutter.ActorAlign.START, + y_align: Clutter.ActorAlign.END }); label.connect('notify::mapped', () => { if (label.mapped) label.text = Util.formatTimeSpan(datetime); diff --git a/js/ui/messageList.js b/js/ui/messageList.js index 66d911dc5..8175711ba 100644 --- a/js/ui/messageList.js +++ b/js/ui/messageList.js @@ -318,6 +318,7 @@ const Message = new Lang.Class({ this._iconBin = new St.Bin({ style_class: 'message-icon-bin', y_expand: true, + y_align: St.Align.START, visible: false }); hbox.add_actor(this._iconBin);