[gnome-shell/wip/paging-release2: 8/9] Icons style changed

[Carlos Soriano <csoriano src gnome org>]

commit 82d422b16654c9b0beeca10a91fc2f1a53617277
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Wed Jul 17 11:03:49 2013 +0200

    Icons style changed
    
    https://bugzilla.gnome.org/show_bug.cgi?id=706081

 data/theme/gnome-shell.css |   58 +++++++++++++++++++++++++++++++++----------
 js/ui/iconGrid.js          |   11 +++++---
 2 files changed, 51 insertions(+), 18 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index d21f47b..c95e3ac 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -47,8 +47,11 @@ stage {
 .window-caption,
 .switcher-list, 
 .app-well-app > .overview-icon,
+.app-well-app > .overview-icon-with-label,
 .show-apps > .overview-icon,
-.grid-search-result .overview-icon {
+.show-apps > .overview-icon-with-label,
+.grid-search-result .overview-icon
+.grid-search-result .overview-icon-with-label {
     font-size: 9pt;
     font-weight: bold;
 }
@@ -871,11 +874,12 @@ StScrollBar StButton#vhandle:active {
 /* Application Launchers, Grid and List results */
 
 .icon-grid {
-    spacing: 36px;
-    -shell-grid-horizontal-item-size: 118px;
-    -shell-grid-vertical-item-size: 118px;
+    spacing: 30px;
+    -shell-grid-horizontal-item-size: 136px;
+    -shell-grid-vertical-item-size: 136px;
 }
 
+.icon-grid .overview-icon-with-label,
 .icon-grid .overview-icon {
     icon-size: 96px;
 }
@@ -948,13 +952,24 @@ StScrollBar StButton#vhandle:active {
     background-image: url("more-results.svg");
 }
 
-.app-well-app > .overview-icon,
-.show-apps > .overview-icon,
+.app-well-app > .overview-icon-with-label,
 .search-provider-icon,
 .list-search-result,
-.grid-search-result .overview-icon {
+.grid-search-result .overview-icon-with-label {
     border-radius: 4px;
-    padding: 3px;
+    /* visually, since the label control its own espacing inside, seems more visual consistent to have 
diferent padding for top and bottom */
+    padding: 10px 8px 5px 8px;
+    border: 1px rgba(0,0,0,0);
+    transition-duration: 100ms;
+    text-align: center;
+    spacing: 4px;
+}
+
+.app-well-app > .overview-icon,
+.show-apps > .overview-icon,
+.grid-search-result .overview-icon {
+       border-radius: 4px;
+    padding: 6px;
     border: 1px rgba(0,0,0,0);
     transition-duration: 100ms;
     text-align: center;
@@ -962,7 +977,7 @@ StScrollBar StButton#vhandle:active {
 
 .app-folder-popup {
     -arrow-border-radius: 8px;
-    -arrow-background-color: black;
+    -arrow-background-color: rgba(0,0,0,0.3);
     -arrow-base: 24px;
     -arrow-rise: 11px;
 }
@@ -971,29 +986,35 @@ StScrollBar StButton#vhandle:active {
     padding: 15px;
 }
 
+.app-well-app.running > .overview-icon-with-label,
 .app-well-app.running > .overview-icon {
     text-shadow: black 0px 2px 2px;
     background-image: url("running-indicator.svg");
     background-size: contain;
 }
 
+.app-well-app.app-folder > .overview-icon-with-label,
 .app-well-app.app-folder > .overview-icon {
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0,0,0,0.3);
 }
 
+.app-well-app:hover > .overview-icon-with-label,
 .app-well-app:hover > .overview-icon,
 .show-apps:hover > .overview-icon,
+.show-apps:hover > .overview-icon-with-label,
 .search-provider-icon:hover,
 .list-search-result:hover,
-.grid-search-result:hover .overview-icon {
+.grid-search-result:hover .overview-icon,
+.grid-search-result:hover .overview-icon-with-label {
     background-color: rgba(255,255,255,0.1);
     text-shadow: black 0px 2px 2px;
     transition-duration: 100ms;
     color:white;
 }
 
-.app-display .app-well-app > .overview-icon {
-    border-radius: 10px;
+.app-display .app-well-app > .overview-icon,
+.app-display .app-well-app > .overview-icon-with-label {
+    border-radius: 4px;
 }
 
 .list-search-result:hover .list-search-result-description {
@@ -1013,9 +1034,13 @@ StScrollBar StButton#vhandle:active {
 }
 
 .app-well-app:checked > .overview-icon,
+.app-well-app:checked > .overview-icon-with-label,
 .app-well-app:active > .overview-icon,
+.app-well-app:active > .overview-icon-with-label,
 .show-apps:checked > .overview-icon,
-.show-apps:active > .overview-icon {
+.show-apps:checked > .overview-icon-with-label,
+.show-apps:active > .overview-icon,
+.show-apps:active > .overview-icon-with-label {
     background-gradient-start: rgba(255, 255, 255, .05);
     background-gradient-end: rgba(255, 255, 255, .15);
     background-gradient-direction: vertical;
@@ -1031,12 +1056,17 @@ StScrollBar StButton#vhandle:active {
 }
 
 .app-well-app:focus > .overview-icon,
+.app-well-app:focus > .overview-icon-with-label,
 .grid-search-result:focus .overview-icon,
+.grid-search-result:focus .overview-icon-with-label,
 .show-apps:focus > .overview-icon,
+.show-apps:focus > .overview-icon-with-label,
 .search-provider-icon:focus,
 .list-search-result:focus,
 .app-well-app:selected > .overview-icon,
+.app-well-app:selected > .overview-icon-with-label,
 .grid-search-result:selected .overview-icon,
+.grid-search-result:selected .overview-icon-with-label,
 .search-provider-icon:selected,
 .list-search-result:selected {
     background-color: rgba(255,255,255,0.33);
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 6cf9669..ed63aad 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -18,9 +18,12 @@ const BaseIcon = new Lang.Class({
         params = Params.parse(params, { createIcon: null,
                                         setSizeManually: false,
                                         showLabel: true });
-        this.actor = new St.Bin({ style_class: 'overview-icon',
-                                  x_fill: true,
-                                  y_fill: true });
+        let binParams = { style_class: 'overview-icon',
+                          x_fill: true,
+                          y_fill: true };
+        if(params['showLabel'])
+            binParams['style_class'] = 'overview-icon-with-label';
+        this.actor = new St.Bin(binParams);
         this.actor._delegate = this;
         this.actor.connect('style-changed',
                            Lang.bind(this, this._onStyleChanged));
@@ -95,7 +98,7 @@ const BaseIcon = new Lang.Class({
     },
 
     _getPreferredWidth: function(actor, forHeight, alloc) {
-        this._getPreferredHeight(actor, -1, alloc);
+        this._getPreferredHeight(null, forHeight, alloc);
     },
 
     _getPreferredHeight: function(actor, forWidth, alloc) {