workspace: Only reveal title captions on hover

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 3b59ade4c0
commit 152fc448b7
3 changed files with 22 additions and 40 deletions

View File

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

View File

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

View File

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