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

appDisplay: Show a dot when application is running

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
data/theme/_common.scss
View File

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

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

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

19
js/ui/appDisplay.js
View File

@ -1547,6 +1547,19 @@ const AppIcon = new Lang.Class({
can_focus: true, can_focus: true,
x_fill: true, x_fill: true,
y_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; this.actor._delegate = this;
if (!iconParams) if (!iconParams)
@ -1560,7 +1573,7 @@ const AppIcon = new Lang.Class({
iconParams['createIcon'] = Lang.bind(this, this._createIcon); iconParams['createIcon'] = Lang.bind(this, this._createIcon);
iconParams['setSizeManually'] = true; iconParams['setSizeManually'] = true;
this.icon = new IconGrid.BaseIcon(app.get_name(), iconParams); 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; this.actor.label_actor = this.icon.label;
@ -1620,9 +1633,9 @@ const AppIcon = new Lang.Class({
_updateRunningStyle: function() { _updateRunningStyle: function() {
if (this.app.state != Shell.AppState.STOPPED) if (this.app.state != Shell.AppState.STOPPED)
this.actor.add_style_class_name('running'); this._dot.show();
else else
this.actor.remove_style_class_name('running'); this._dot.hide();
}, },
_setPopupTimeout: function() { _setPopupTimeout: function() {