From e45e8a2a14dbb4f26275504011550135f5f84ed0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Tue, 24 Jul 2018 12:01:35 +0200 Subject: [PATCH 1/2] panel: Notify when solid style changes In order to improve the transparent top bar's legibility with lighter wallpapers, we want the background to adapt to the top bar style. To allow for that in a clean way, export that information in a property and notify when it changes. https://bugzilla.gnome.org/show_bug.cgi?id=783913 --- js/ui/panel.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/js/ui/panel.js b/js/ui/panel.js index 49759af4c3..1bca06b10b 100644 --- a/js/ui/panel.js +++ b/js/ui/panel.js @@ -1039,6 +1039,10 @@ var Panel = new Lang.Class({ return this._leftBox.opacity; }, + get solidStyle() { + return this.actor.has_style_class_name('solid'); + }, + _updatePanel() { let panel = Main.sessionMode.panel; this._hideIndicators(); @@ -1073,8 +1077,12 @@ var Panel = new Lang.Class({ }, _updateSolidStyle() { + let hadSolidStyle = this.solidStyle; + if (this.has_style_pseudo_class('overview') || !Main.sessionMode.hasWindows) { this._removeStyleClassName('solid'); + if (hadSolidStyle) + this.emit('solid-style-changed'); return; } @@ -1104,6 +1112,8 @@ var Panel = new Lang.Class({ else this._removeStyleClassName('solid'); + if (isNearEnough != hadSolidStyle) + this.emit('solid-style-changed'); }, _hideIndicators() { @@ -1213,3 +1223,4 @@ var Panel = new Lang.Class({ }); } }); +Signals.addSignalMethods(Panel.prototype); -- GitLab From d0d0350a8c5290485085d132fbd3f9a3aa8cd0ec Mon Sep 17 00:00:00 2001 From: Alessandro Bono Date: Sat, 19 Aug 2017 17:17:40 +0200 Subject: [PATCH 2/2] layout: Use background gradient when top bar is transparent Make sure the legibility of top bar elements doesn't depend on the wallpaper by adding a light gradient at the top when the top bar is transparent, similar to what Android does. https://bugzilla.gnome.org/show_bug.cgi?id=783913 --- data/theme/gnome-shell-sass/_common.scss | 17 +++++++++------ js/ui/layout.js | 27 ++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 37ac36231b..d1f793ab73 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -729,7 +729,9 @@ StScrollBar { /* TOP BAR */ #panel { - background-color: rgba(0, 0, 0, 0.35); + background-gradient-start: rgba(0,0,0,0.3); + background-gradient-end: rgba(0,0,0,0); + background-gradient-direction: vertical; /* transition from solid to transparent */ transition-duration: 500ms; font-weight: bold; @@ -748,7 +750,7 @@ StScrollBar { .panel-corner { -panel-corner-radius: $panel-corner-radius; - -panel-corner-background-color: rgba(0, 0, 0, 0.35); + -panel-corner-background-color: rgba(0, 0, 0, 0); -panel-corner-border-width: 2px; -panel-corner-border-color: transparent; @@ -768,7 +770,7 @@ StScrollBar { -minimum-hpadding: 6px; font-weight: bold; color: #eee; - text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); + text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8); transition-duration: 100ms; .app-menu-icon { @@ -781,17 +783,17 @@ StScrollBar { .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { - icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9); + icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8); } &:hover { color: lighten($fg_color, 10%); - text-shadow: 0px 1px 6px rgba(0, 0, 0, 1); + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); .system-status-icon, .app-menu-icon > StIcon, .popup-menu-arrow { - icon-shadow: 0px 1px 6px rgba(0, 0, 0, 1); + icon-shadow: 0px 1px 3px rgba(0, 0, 0, 1); } } @@ -830,6 +832,9 @@ StScrollBar { &.solid { background-color: black; + background-gradient-start: none; + background-gradient-end: none; + background-gradient-direction: none; /* transition from transparent to solid */ transition-duration: 300ms; diff --git a/js/ui/layout.js b/js/ui/layout.js index 6c7e934db9..862af9d720 100644 --- a/js/ui/layout.js +++ b/js/ui/layout.js @@ -21,6 +21,8 @@ const Tweener = imports.ui.tweener; var STARTUP_ANIMATION_TIME = 0.5; var KEYBOARD_ANIMATION_TIME = 0.15; var BACKGROUND_FADE_ANIMATION_TIME = 1.0; +var GRADIENT_FADE_IN_ANIMATION_TIME = 1.0; +var GRADIENT_FADE_OUT_ANIMATION_TIME = 0.3; var HOT_CORNER_PRESSURE_THRESHOLD = 100; // pixels var HOT_CORNER_PRESSURE_TIMEOUT = 1000; // ms @@ -301,8 +303,10 @@ var LayoutManager = new Lang.Class({ // This is called by Main after everything else is constructed init() { Main.sessionMode.connect('updated', this._sessionUpdated.bind(this)); + Main.panel.connect('solid-style-changed', this._updatePrimaryBackground.bind(this)); this._loadBackground(); + this._updatePrimaryBackground(); }, showOverview() { @@ -324,6 +328,29 @@ var LayoutManager = new Lang.Class({ this._queueUpdateRegions(); }, + _updatePrimaryBackground() { + let metaBackgroundActor = this._bgManagers[this.primaryIndex].backgroundActor; + metaBackgroundActor.gradient = true; + metaBackgroundActor.gradient_height = 3 * Main.panel.actor.get_height(); + if (Main.panel.solidStyle) { + Tweener.addTween(metaBackgroundActor, + { gradient_max_darkness: 0, + time: GRADIENT_FADE_OUT_ANIMATION_TIME, + transition: 'easeOutQuad', + onComplete: function() { + metaBackgroundActor.gradient = false; + } + }); + } else { + Tweener.removeTweens(metaBackgroundActor); + Tweener.addTween(metaBackgroundActor, + { gradient_max_darkness: 0.4, + time: GRADIENT_FADE_IN_ANIMATION_TIME, + transition: 'easeOutQuad' + }); + } + }, + _updateMonitors() { let display = global.display; -- GitLab