[gnome-shell/wip/sass: 25/88] appDisplay: Show a dot when application is running

[Carlos Soriano Sánchez <csoriano src gnome org>]

commit c58259dddfa31cea0539ad38fc4541ed43ac4a12
Author: Carlos Soriano <csoriano gnome org>
Date:   Tue Feb 17 18:33:37 2015 +0100

    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

 data/theme/_common.scss    |   28 +++++++++++++++----------
 data/theme/gnome-shell.css |   47 +++++++++++++++++++++++--------------------
 js/ui/appDisplay.js        |   19 +++++++++++++++--
 3 files changed, 58 insertions(+), 36 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 6775ca7..aec2f94 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -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;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ffda837..8995d90 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -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;
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 3549f9a..440266c 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -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() {