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

workspace: Only reveal title captions on hover

Browse Source 
While the new title position gives the previews more space, they now
overlay the content which may hide valuable information. Address this
by only revealing the title as additional information on hover, like
we do for other auxiliary elements.

https://bugzilla.gnome.org/show_bug.cgi?id=783953
This commit is contained in:
Florian Müllner 2017-06-01 16:11:56 +02:00
parent 64bbad1bac
commit 4fd5eee2c6
4 changed files with 23 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
data/theme/gnome-shell-high-contrast.css
View File

@ -1107,13 +1107,10 @@ StScrollBar {
.window-caption { .window-caption {
spacing: 25px; spacing: 25px;
color: #eeeeec; color: #ffffff;
background-color: rgba(46, 52, 54, 0.7); background-color: #215d9c;
border-radius: 8px; border-radius: 8px;
padding: 4px 12px; } padding: 4px 12px; }
.window-caption:hover {
background-color: #215d9c;
color: #ffffff; }
.search-entry { .search-entry {
width: 320px; width: 320px;

2
data/theme/gnome-shell-sass

@ -1 +1 @@
Subproject commit b178ba1d9d090e269b898952fd5a79c54ddc6f75 Subproject commit 3ce23ca9648c131a33b79f37b3e19001ff45450d

7
data/theme/gnome-shell.css
View File

@ -1107,13 +1107,10 @@ StScrollBar {
.window-caption { .window-caption {
spacing: 25px; spacing: 25px;
color: #eeeeec; color: #ffffff;
background-color: rgba(46, 52, 54, 0.7); background-color: #215d9c;
border-radius: 8px; border-radius: 8px;
padding: 4px 12px; } padding: 4px 12px; }
.window-caption:hover {
background-color: #215d9c;
color: #ffffff; }
.search-entry { .search-entry {
width: 320px; width: 320px;

48
js/ui/workspace.js
View File

@ -466,6 +466,7 @@ var WindowOverlay = new Lang.Class({
this._windowAddedId = 0; this._windowAddedId = 0;
button.hide(); button.hide();
title.hide();
this.title = title; this.title = title;
this.closeButton = button; this.closeButton = button;
@ -490,7 +491,6 @@ var WindowOverlay = new Lang.Class({
hide: function() { hide: function() {
this._hidden = true; this._hidden = true;
this.title.hide();
this.hideCloseButton(); this.hideCloseButton();
}, },
@ -498,7 +498,6 @@ var WindowOverlay = new Lang.Class({
show: function() { show: function() {
this._hidden = false; this._hidden = false;
this.title.show();
if (this._windowClone.actor['has-pointer']) if (this._windowClone.actor['has-pointer'])
this._animateVisible(); this._animateVisible();
}, },
@ -639,39 +638,28 @@ var WindowOverlay = new Lang.Class({
_animateVisible: function() { _animateVisible: function() {
this._parentActor.raise_top(); this._parentActor.raise_top();
if (this._windowCanClose()) { let toAnimate = [this.border, this.title];
this.closeButton.show(); if (this._windowCanClose())
this.closeButton.opacity = 0; toAnimate.push(this.closeButton);
Tweener.addTween(this.closeButton,
toAnimate.forEach(a => {
a.show();
a.opacity = 0;
Tweener.addTween(a,
{ opacity: 255, { opacity: 255,
time: CLOSE_BUTTON_FADE_TIME, time: CLOSE_BUTTON_FADE_TIME,
transition: 'easeOutQuad' }); transition: 'easeOutQuad' });
} });
this.border.show();
this.border.opacity = 0;
Tweener.addTween(this.border,
{ opacity: 255,
time: CLOSE_BUTTON_FADE_TIME,
transition: 'easeOutQuad' });
this.title.add_style_pseudo_class('hover');
}, },
_animateInvisible: function() { _animateInvisible: function() {
this.closeButton.opacity = 255; [this.closeButton, this.border, this.title].forEach(a => {
Tweener.addTween(this.closeButton, a.opacity = 255;
{ opacity: 0, Tweener.addTween(a,
time: CLOSE_BUTTON_FADE_TIME, { opacity: 0,
transition: 'easeInQuad' }); time: CLOSE_BUTTON_FADE_TIME,
transition: 'easeInQuad' });
this.border.opacity = 255; });
Tweener.addTween(this.border,
{ opacity: 0,
time: CLOSE_BUTTON_FADE_TIME,
transition: 'easeInQuad' });
this.title.remove_style_pseudo_class('hover');
}, },
_onEnter: function() { _onEnter: function() {
@ -712,7 +700,7 @@ var WindowOverlay = new Lang.Class({
} }
this.closeButton.hide(); this.closeButton.hide();
this.border.hide(); this.border.hide();
this.title.remove_style_pseudo_class('hover'); this.title.hide();
}, },
_onStyleChanged: function() { _onStyleChanged: function() {