[gnome-shell/T29763: 93/249] Adjust app grid icons to Endless

[Matthew Leeds <mwleeds src gnome org>]

commit 6c5e5f832278aa13165f262615333c42516b0def
Author: Mario Sanchez Prada <mario endlessm com>
Date:   Wed Feb 7 15:45:53 2018 +0000

    Adjust app grid icons to Endless
    
    This commit adjusts the icons to match the target style of Endless OS.
    It emcompasses the following changes:
    
     * Increases the icons width (b0821794a)
     * Support 2-line labels (36d607fc3)
     * Make folders look closer to apps (89a09b7bb)
    
    https://phabricator.endlessm.com/T14350
    https://phabricator.endlessm.com/T17785
    https://phabricator.endlessm.com/T18044
    https://phabricator.endlessm.com/T17824

 data/theme/gnome-shell-sass/_endless.scss | 50 +++++++++++++++++++++++++++++++
 js/ui/appDisplay.js                       |  9 +++++-
 js/ui/iconGrid.js                         |  9 ++++--
 3 files changed, 65 insertions(+), 3 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_endless.scss b/data/theme/gnome-shell-sass/_endless.scss
index 73254c7c71..bb4be54852 100644
--- a/data/theme/gnome-shell-sass/_endless.scss
+++ b/data/theme/gnome-shell-sass/_endless.scss
@@ -390,6 +390,56 @@ popup-separator-menu-item {
 
 // Icon Grid
 
+%app-well-icon {
+    width: 118px;
+    height: 118px;
+    padding: 6px 0 6px 0;
+    spacing: 4px;
+}
+
+.app-well-app {
+    .overview-icon { @extend %app-well-icon; }
+    & > .overview-icon.overview-icon-with-label {
+        /* Use defaults here to "remove" the values set in _common.scss */
+        padding: 0px;
+        spacing: 6px;
+    }
+}
+
+/* Need to declare this one outside of .app-folder for DnD */
+.app-folder-icon {
+    border-radius: 12px;
+    background: rgba(23, 25, 26, 0.3);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
+}
+
+.app-folder,
+.app-well-app.app-folder {
+    background-color: transparent;
+
+    & .overview-icon,
+    &:active .overview-icon,
+    &:checked .overview-icon {
+        box-shadow: none;
+        border-radius: 15px;
+        font-weight: bold;
+    }
+
+    &:checked .app-folder-icon,
+    &:selected .app-folder-icon {
+        background: rgba(23, 25, 26, 0.6);
+        transition-duration: 250ms;
+        box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.7);
+    }
+}
+
+.overview-icon-label {
+    height: 46px;
+    text-shadow: black 0px 2px 2px;
+    border: none;
+    background-color: transparent;
+}
+
 %overview-icon {
     width: 118px;
     height: 118px;
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index d3a8346847..562bcefd44 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1179,7 +1179,14 @@ var FolderIcon = GObject.registerClass({
             createIcon: this._createIcon.bind(this),
             setSizeManually: false,
         });
-        this.set_child(this.icon);
+        this._iconContainer = new St.Widget({
+            layout_manager: new Clutter.BinLayout(),
+            x_expand: true,
+            y_expand: true,
+        });
+        this._iconContainer.add_child(this.icon);
+
+        this.set_child(this._iconContainer);
         this.label_actor = this.icon.label;
 
         this.view = new FolderView(this._dirInfo, parentView);
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index c331227d40..e166f44777 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -1,7 +1,7 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported BaseIcon, IconGrid, PaginatedIconGrid, ANIMATION_MAX_DELAY_OUT_FOR_ITEM */
 
-const { Clutter, GObject, Graphene, Meta, St } = imports.gi;
+const { Clutter, GObject, Graphene, Meta, Pango, St } = imports.gi;
 
 const Params = imports.misc.params;
 const Main = imports.ui.main;
@@ -54,10 +54,15 @@ class BaseIcon extends St.Bin {
         this._box.add_actor(this._iconBin);
 
         if (params.showLabel) {
-            this.label = new St.Label({ text: label });
+            this.label = new St.Label({
+                text: label,
+                style_class: 'overview-icon-label',
+            });
             this.label.clutter_text.set({
                 x_align: Clutter.ActorAlign.CENTER,
                 y_align: Clutter.ActorAlign.CENTER,
+                line_wrap: true,
+                ellipsize: Pango.EllipsizeMode.END,
             });
             this._box.add_actor(this.label);
         } else {