appDisplay: Show a dot when application is running

Show a dot in the icon of running applications.
Design request.

https://bugzilla.gnome.org/show_bug.cgi?id=744680
This commit is contained in:
Carlos Soriano 2015-02-17 18:33:37 +01:00 committed by Florian Müllner
parent 95e141e47e
commit 6cf53a8d1c
3 changed files with 58 additions and 36 deletions

View File

@ -492,7 +492,11 @@ StScrollBar {
}
}
.dash-item-container > StWidget {
padding: 4px 8px;
}
.dash-label { //osd tooltip
border-radius: 7px;
padding: 4px 12px;
@ -539,21 +543,17 @@ StScrollBar {
.app-well-app,
.show-apps,
.grid-search-result {
& > .overview-icon {
& .overview-icon {
@extend %icon_tile;
}
&.running > .overview-icon {
text-shadow: black 0px 2px 2px;
}
&:active > .overview-icon,
&:checked > .overview-icon {
&:active .overview-icon,
&:checked .overview-icon {
background-color: transparentize(darken($osd_bg_color,10%),.1); //FIXME not working?
box-shadow: inset 0 1px 2px $osd_borders_color;
}
&:hover > .overview-icon,
&.running:hover > .overview-icon,
&:focus > .overview-icon,
&:selected > .overview-icon {
&:hover .overview-icon,
&:focus .overview-icon,
&:selected .overview-icon {
background-color: transparentize($fg_color,.9);
transition-duration: 200ms;
border-image: none;
@ -561,6 +561,12 @@ StScrollBar {
}
}
.app-well-app-running-dot { //running apps indicator
width: 10px; height: 3px;
background-color: $selected_bg_color;
margin-bottom: 2px; //FIXME will happen :)
}
%icon_tile {
border-radius: 4px;

View File

@ -1026,7 +1026,7 @@ StEntry {
border-color: #1c1f1f;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
selection-background-color: #215d9c;
selected-color: white; }
selected-color: #ffffff; }
StEntry:focus {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
border-color: rgba(154, 154, 142, 0.5); }
@ -1399,6 +1399,9 @@ StScrollBar {
width: 24px;
height: 24px; }
.dash-item-container > StWidget {
padding: 4px 8px; }
.dash-label {
border-radius: 7px;
padding: 4px 12px;
@ -1443,35 +1446,35 @@ StScrollBar {
background-color: rgba(238, 238, 236, 0.1);
transition-duration: 200ms; }
.app-well-app.running > .overview-icon,
.show-apps.running > .overview-icon,
.grid-search-result.running > .overview-icon {
text-shadow: black 0px 2px 2px; }
.app-well-app:active > .overview-icon, .app-well-app:checked > .overview-icon,
.show-apps:active > .overview-icon,
.show-apps:checked > .overview-icon,
.grid-search-result:active > .overview-icon,
.grid-search-result:checked > .overview-icon {
.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
.show-apps:active .overview-icon,
.show-apps:checked .overview-icon,
.grid-search-result:active .overview-icon,
.grid-search-result:checked .overview-icon {
background-color: rgba(23, 25, 26, 0.9);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); }
.app-well-app:hover > .overview-icon, .app-well-app.running:hover > .overview-icon, .app-well-app:focus > .overview-icon, .app-well-app:selected > .overview-icon,
.show-apps:hover > .overview-icon,
.show-apps.running:hover > .overview-icon,
.show-apps:focus > .overview-icon,
.show-apps:selected > .overview-icon,
.grid-search-result:hover > .overview-icon,
.grid-search-result.running:hover > .overview-icon,
.grid-search-result:focus > .overview-icon,
.grid-search-result:selected > .overview-icon {
.app-well-app:hover .overview-icon, .app-well-app:focus .overview-icon, .app-well-app:selected .overview-icon,
.show-apps:hover .overview-icon,
.show-apps:focus .overview-icon,
.show-apps:selected .overview-icon,
.grid-search-result:hover .overview-icon,
.grid-search-result:focus .overview-icon,
.grid-search-result:selected .overview-icon {
background-color: rgba(238, 238, 236, 0.1);
transition-duration: 200ms;
border-image: none;
background-image: none; }
.app-well-app-running-dot {
width: 10px;
height: 3px;
background-color: #215d9c;
margin-bottom: 2px; }
.search-provider-icon,
.list-search-result, .app-well-app > .overview-icon,
.show-apps > .overview-icon,
.grid-search-result > .overview-icon {
.list-search-result, .app-well-app .overview-icon,
.show-apps .overview-icon,
.grid-search-result .overview-icon {
border-radius: 4px;
padding: 6px;
border: 1px solid transparent;

View File

@ -1547,6 +1547,19 @@ const AppIcon = new Lang.Class({
can_focus: true,
x_fill: true,
y_fill: true });
this._dot = new St.Widget({ style_class: 'app-well-app-running-dot',
layout_manager: new Clutter.BinLayout(),
x_expand: true, y_expand: true,
x_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.END });
this._iconContainer = new St.Widget({ layout_manager: new Clutter.BinLayout(),
x_expand: true, y_expand: true });
this.actor.set_child(this._iconContainer);
this._iconContainer.add_child(this._dot);
this.actor._delegate = this;
if (!iconParams)
@ -1560,7 +1573,7 @@ const AppIcon = new Lang.Class({
iconParams['createIcon'] = Lang.bind(this, this._createIcon);
iconParams['setSizeManually'] = true;
this.icon = new IconGrid.BaseIcon(app.get_name(), iconParams);
this.actor.set_child(this.icon.actor);
this._iconContainer.add_child(this.icon.actor);
this.actor.label_actor = this.icon.label;
@ -1620,9 +1633,9 @@ const AppIcon = new Lang.Class({
_updateRunningStyle: function() {
if (this.app.state != Shell.AppState.STOPPED)
this.actor.add_style_class_name('running');
this._dot.show();
else
this.actor.remove_style_class_name('running');
this._dot.hide();
},
_setPopupTimeout: function() {