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

layout: Use background gradient when top bar is transparent

Browse Source 
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
This commit is contained in:
Alessandro Bono 2017-08-19 17:17:40 +02:00 committed by Florian Müllner
parent e45e8a2a14
commit d0d0350a8c
2 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
data/theme/gnome-shell-sass/_common.scss
View File

@ -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;

27
js/ui/layout.js
View File

@ -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;