[gnome-shell] workspaces-view: make sure to add spacing between view and controls

[Cosimo Cecchi <cosimoc src gnome org>]

commit a0e340f06ebc471dcee1b957b531338a329c557d
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Thu Dec 13 14:19:44 2012 -0500

    workspaces-view: make sure to add spacing between view and controls
    
    The thumbnail controls are not a separate actor in the overview group
    yet, so we need to ensure a spacing between them and the workspaces
    view.
    Instead of exporting the overview spacing, just add a temporary style
    class to the workspaces-view actor for it. It will be removed in the
    future when we change the layout of overview elements.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=690174

 data/theme/gnome-shell.css |    4 ++++
 js/ui/workspacesView.js    |   14 +++++++++++++-
 2 files changed, 17 insertions(+), 1 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c0764fc..388b48e 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -620,6 +620,10 @@ StScrollBar StButton#vhandle:active {
     spacing: 32px;
 }
 
+.workspaces-display {
+    spacing: 32px; /* needs to be the same value as #overview-group */
+}
+
 .window-caption {
     spacing: 25px;
 }
diff --git a/js/ui/workspacesView.js b/js/ui/workspacesView.js
index 00f627b..89eee30 100644
--- a/js/ui/workspacesView.js
+++ b/js/ui/workspacesView.js
@@ -437,13 +437,24 @@ const WorkspacesDisplay = new Lang.Class({
     Name: 'WorkspacesDisplay',
 
     _init: function() {
-        this.actor = new Shell.GenericContainer();
+        this.actor = new Shell.GenericContainer({ style_class: 'workspaces-display' });
         this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth));
         this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight));
         this.actor.connect('allocate', Lang.bind(this, this._allocate));
         this.actor.connect('parent-set', Lang.bind(this, this._parentSet));
         this.actor.set_clip_to_allocation(true);
 
+        this._spacing = 0;
+        this.actor.connect('style-changed', Lang.bind(this,
+            function() {
+                let node = this.actor.get_theme_node();
+                let spacing = node.get_length('spacing');
+                if (spacing != this._spacing) {
+                    this._spacing = spacing;
+                    this._updateWorkspacesGeometry();
+                }
+            }));
+
         let clickAction = new Clutter.ClickAction()
         clickAction.connect('clicked', Lang.bind(this, function(action) {
             // Only switch to the workspace when there's no application
@@ -854,6 +865,7 @@ const WorkspacesDisplay = new Lang.Class({
         let clipY = y + (fullHeight - clipHeight) / 2;
 
         let widthAdjust = this._zoomOut ? controlsNatural : controlsVisible;
+        widthAdjust += this._spacing;
         width -= widthAdjust;
         if (rtl)
             x += widthAdjust;