[gnome-shell/wip/paging-release: 60/85] Adjusted the padding and spacing of icons and labels of dash, all view, frequent view, etc

[Carlos Soriano <csoriano src gnome org>]

commit d735137dcfa3a0bf21ed4bb690b460a8671d7d79
Author: Carlos Soriano <carlos soriano89 gmail com>
Date:   Fri Jul 19 22:07:28 2013 +0200

    Adjusted the padding and spacing of icons and labels of dash, all view,
    frequent view, etc

 data/theme/gnome-shell.css |   50 +++++++++++++++++++++++++++++++++++--------
 js/ui/iconGrid.js          |   26 +++++++++++++++-------
 2 files changed, 58 insertions(+), 18 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f695594..5dc763d 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;
 }
@@ -872,10 +875,11 @@ StScrollBar StButton#vhandle:active {
 
 .icon-grid {
     spacing: 36px;
-    -shell-grid-horizontal-item-size: 118px;
-    -shell-grid-vertical-item-size: 118px;
+    -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;
 }
@@ -937,13 +941,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: 12px 9px 6px 9px;
+    border: 1px rgba(0,0,0,0);
+    transition-duration: 100ms;
+    text-align: center;
+    spacing: 5px;
+}
+
+.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;
@@ -960,28 +975,34 @@ 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.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 {
+.app-display .app-well-app > .overview-icon,
+.app-display .app-well-app > .overview-icon-with-label {
     border-radius: 4px;
 }
 
@@ -1002,9 +1023,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;
@@ -1020,12 +1045,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 6fd7e37..867f47b 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -19,9 +19,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));
@@ -64,15 +67,12 @@ const BaseIcon = new Lang.Class({
     _allocate: function(actor, box, flags) {
         let availWidth = box.x2 - box.x1;
         let availHeight = box.y2 - box.y1;
-
         let iconSize = availHeight;
-
         let [iconMinHeight, iconNatHeight] = this._iconBin.get_preferred_height(-1);
         let [iconMinWidth, iconNatWidth] = this._iconBin.get_preferred_width(-1);
         let preferredHeight = iconNatHeight;
 
         let childBox = new Clutter.ActorBox();
-
         if (this.label) {
             let [labelMinHeight, labelNatHeight] = this.label.get_preferred_height(-1);
             preferredHeight += this._spacing + labelNatHeight;
@@ -80,7 +80,6 @@ const BaseIcon = new Lang.Class({
             let labelHeight = availHeight >= preferredHeight ? labelNatHeight
                                                              : labelMinHeight;
             iconSize -= this._spacing + labelHeight;
-
             childBox.x1 = 0;
             childBox.x2 = availWidth;
             childBox.y1 = iconSize + this._spacing;
@@ -96,7 +95,18 @@ const BaseIcon = new Lang.Class({
     },
 
     _getPreferredWidth: function(actor, forHeight, alloc) {
-        this._getPreferredHeight(actor, -1, alloc);
+        this._getPreferredHeight(null, forHeight, alloc);
+        /*let minLabelWidth = 0;
+        let natLabelWidth = 0;
+        if(this.label)
+            [minLabelWidth, natLabelWidth] = this.label.get_preferred_width(forHeight);
+
+        let [minIconWidth, natIconWidth] = this._iconBin.get_preferred_width(forHeight);
+        // We want square containers, so take the largest
+        let simAlloc = new Object();
+        this._getPreferredHeight(null, forHeight, simAlloc);
+        alloc.min_size = Math.max(simAlloc.min_size, Math.max(minLabelWidth, minIconWidth));
+        alloc.natural_size = Math.max(simAlloc.natural_size, Math.max(natLabelWidth, natIconWidth));*/
     },
 
     _getPreferredHeight: function(actor, forWidth, alloc) {