[gnome-documents] selections: rewrite style for the OSD selection mode toolbar

[Cosimo Cecchi <cosimoc src gnome org>]

commit 3193b654499614589e5bfe5c60a9652ab67e2176
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Sat Nov 19 23:02:22 2011 -0500

    selections: rewrite style for the OSD selection mode toolbar

 data/gtk-style.css |   85 +++++++++++++++++++++++++++++++++-------------------
 src/mainWindow.js  |   34 +++++++++++++-------
 src/selections.js  |   45 +++++++++++++++++++--------
 3 files changed, 108 insertions(+), 56 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index ab9e32d..f8ae4b4 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -46,21 +46,54 @@
 }
 
 .osd .toolbar {
-    padding: 6 6;
+    padding: 16;
     border-style: none;
     border-radius: 5;
     border-width: 0;
 
-    background-image: none;
-    background-color: alpha(@theme_tooltip_bg_color, 0.90);
-    color: @theme_tooltip_fg_color;
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(alpha(#242424, 0.80)),
+                                    color-stop(0.63, alpha(#101010, 0.80)),
+                                    to(alpha(#262626, 0.80)));
+    color: #bebebe;
 
-    text-shadow: 1 1 black;
-    icon-shadow: 1 1 black;
+    -GtkToolbar-button-relief: normal;
 }
 
-.osd .toolbar .favorite {
-    color: shade(@theme_selected_bg_color, 1.20);
+.osd .toolbar .button {
+    padding: 4;
+
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(alpha(#ffffff, 0.16)),
+                                    color-stop(0.68, alpha(#525252, 0.05)),
+                                    to(alpha(#ffffff, 0.12)));
+    border-width: 1 0;
+    border-style: solid;
+    border-image: none;
+    border-color: alpha(#ffffff, 0.50);
+    border-radius: 0;
+
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: -1 0 inset #9f9f9f;
+}
+
+.osd .toolbar .button:nth-child(first) {
+    border-radius: 4 0 0 4;
+    border-left-width: 1;
+    box-shadow: -1 0 inset #9f9f9f;
+}
+
+.osd .toolbar .button:nth-child(last) {
+    box-shadow: none;
+    border-radius: 0 4 4 0;
+    border-right-width: 1;
+}
+
+.osd .toolbar .button:only-child {
+    border-width: 1;
+    border-radius: 4;
+    border-style: solid;
 }
 
 .osd .toolbar .separator {
@@ -69,34 +102,24 @@
 
 .osd .toolbar .button:hover {
     background-image: -gtk-gradient(linear, left top, left bottom,
-                                    from(alpha(@theme_tooltip_fg_color, 0.00)),
-                                    color-stop(0.50, alpha(@theme_tooltip_fg_color, 0.15)),
-                                    to(alpha(@theme_tooltip_fg_color, 0.00)));
-
-    border-image: none;
-    border-style: none;
-    border-radius: 2;
-    border-width: 0;
+                                    from(alpha(#ffffff, 0.28)),
+                                    color-stop(0.68, alpha(#525252, 0.14)),
+                                    to(alpha(#ffffff, 0.14)));
 }
 
-.osd .toolbar .button:active {
-    background-image: none;
-    background-color: alpha(@theme_tooltip_fg_color, 0.15);
-
-    border-image: none;
-    border-style: none;
-    border-radius: 2;
-    border-width: 0;    
+.osd .toolbar .button *:hover {
+    color: shade(#bebebe, 1.20);
 }
 
+.osd .toolbar .button:active,
 .osd .toolbar .button:active:hover {
     background-image: -gtk-gradient(linear, left top, left bottom,
-                                    from(alpha(@theme_tooltip_fg_color, 0.15)),
-                                    color-stop(0.50, alpha(@theme_tooltip_fg_color, 0.30)),
-                                    to(alpha(@theme_tooltip_fg_color, 0.15)));
+                                    from(alpha(#525252, 0.18)),
+                                    color-stop(0.68, alpha(#ffffff, 0.23)),
+                                    to(alpha(#525252, 0.17)));
+}
 
-    border-style: none;
-    border-image: none;
-    border-radius: 2;
-    border-width: 0;    
+.osd .toolbar .button.favorite,
+.osd .toolbar .button.favorite *:hover {
+    color: shade(@theme_selected_bg_color, 1.20);
 }
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 2a4eaa4..29d5dc4 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -38,7 +38,6 @@ const WindowMode = imports.windowMode;
 const _ = imports.gettext.gettext;
 
 const _CONFIGURE_ID_TIMEOUT = 100; // msecs
-const _OSD_TOOLBAR_SPACING = 60;
 
 function MainWindow() {
     this._init();
@@ -125,21 +124,32 @@ MainWindow.prototype = {
 
         // create the OSD toolbar for selected items, it's hidden by default
         this._selectionToolbar = new Selections.SelectionToolbar();
+        let widthConstraint =
+            new Clutter.BindConstraint({ source: this._embed.actor,
+                                         coordinate: Clutter.BindCoordinate.WIDTH,
+                                         offset: - 300 });
+        this._selectionToolbar.actor.add_constraint(widthConstraint);
+        this._selectionToolbar.actor.connect('notify::width', Lang.bind(this,
+            function() {
+                let width = this._embed.actor.width;
+                let offset = 300;
+
+                if (width > 1000)
+                    offset += (width - 1000);
+                else if (width < 600)
+                    offset -= (600 - width);
+
+                widthConstraint.offset = - offset;
+            }));
+
         this._selectionToolbar.actor.add_constraint(
             new Clutter.AlignConstraint({ align_axis: Clutter.AlignAxis.X_AXIS,
                                           source: this._embed.actor,
                                           factor: 0.50 }));
-        let yConstraint =
-            new Clutter.BindConstraint({ source: this._embed.actor,
-                                         coordinate: Clutter.BindCoordinate.Y,
-                                         offset: this._embed.actor.height - _OSD_TOOLBAR_SPACING });
-        this._selectionToolbar.actor.add_constraint(yConstraint);
-
-        // refresh the constraint offset when the height of the embed actor changes
-        this._embed.actor.connect("notify::height", Lang.bind(this,
-            function() {
-                yConstraint.set_offset(this._embed.actor.height - _OSD_TOOLBAR_SPACING);
-            }));
+        this._selectionToolbar.actor.add_constraint(
+            new Clutter.AlignConstraint({ align_axis: Clutter.AlignAxis.Y_AXIS,
+                                          source: this._embed.actor,
+                                          factor: 0.95 }));
 
         Global.stage.add_actor(this._selectionToolbar.actor);
     },
diff --git a/src/selections.js b/src/selections.js
index 6cae128..50495b5 100644
--- a/src/selections.js
+++ b/src/selections.js
@@ -632,27 +632,43 @@ SelectionToolbar.prototype = {
                                             opacity: 0 });
         let actorWidget = this.actor.get_widget();
         actorWidget.get_style_context().add_class('osd');
+        actorWidget.reset_style();
 
-        this._toolbarFavorite = new Gtk.ToggleToolButton({ icon_name: 'emblem-favorite-symbolic' });
-        this.widget.insert(this._toolbarFavorite, -1);
+        this._leftBox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL });
+        this._leftGroup = new Gtk.ToolItem({ child: this._leftBox });
+        this.widget.insert(this._leftGroup, -1);
+        this._leftGroup.show_all();
+
+        this._toolbarFavorite = new Gtk.ToggleButton({ child: new Gtk.Image ({ icon_name: 'emblem-favorite-symbolic',
+                                                                               pixel_size: 32 })});
+        this._leftBox.add(this._toolbarFavorite);
         this._toolbarFavorite.connect('clicked', Lang.bind(this, this._onToolbarFavorite));
 
-        this._separator = new Gtk.SeparatorToolItem();
+        this._separator = new Gtk.SeparatorToolItem({ draw: false });
+        this._separator.set_expand(true);
         this.widget.insert(this._separator, -1);
 
-        this._toolbarCollection = new Gtk.ToolButton({ icon_name: 'list-add-symbolic' });
+        this._rightBox = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL });
+        this._rightGroup = new Gtk.ToolItem({ child: this._rightBox });
+        this.widget.insert(this._rightGroup, -1);
+        this._rightGroup.show_all();
+
+        this._toolbarCollection = new Gtk.Button({ child: new Gtk.Image ({ icon_name: 'list-add-symbolic',
+                                                                           pixel_size: 32 })});
         this._toolbarCollection.set_tooltip_text(_("Organize"));
-        this.widget.insert(this._toolbarCollection, -1);
+        this._rightBox.add(this._toolbarCollection);
         this._toolbarCollection.connect('clicked', Lang.bind(this, this._onToolbarCollection));
-        this._toolbarCollection.show();
+        this._toolbarCollection.show_all();
 
-        this._toolbarTrash = new Gtk.ToolButton({ icon_name: 'user-trash-symbolic' });
+        this._toolbarTrash = new Gtk.Button({ child: new Gtk.Image ({ icon_name: 'user-trash-symbolic',
+                                                                      pixel_size: 32 })});
         this._toolbarTrash.set_tooltip_text(_("Delete"));
-        this.widget.insert(this._toolbarTrash, -1);
+        this._rightBox.add(this._toolbarTrash);
         this._toolbarTrash.connect('clicked', Lang.bind(this, this._onToolbarTrash));
 
-        this._toolbarOpen = new Gtk.ToolButton({ icon_name: 'document-open-symbolic' });
-        this.widget.insert(this._toolbarOpen, -1);
+        this._toolbarOpen = new Gtk.Button({ child: new Gtk.Image ({ icon_name: 'document-open-symbolic',
+                                                                     pixel_size: 32 })});
+        this._rightBox.add(this._toolbarOpen);
         this._toolbarOpen.connect('clicked', Lang.bind(this, this._onToolbarOpen));
 
         this.widget.show();
@@ -729,7 +745,10 @@ SelectionToolbar.prototype = {
         // if we're showing the favorite icon, also show the separator
         this._separator.set_visible(showFavorite);
 
-        this._toolbarTrash.set_visible(canTrash);
+        if (canTrash)
+            this._toolbarTrash.show_all();
+        else
+            this._toolbarTrash.hide();
 
         let openLabel = null;
         if (apps.length == 1) {
@@ -742,7 +761,7 @@ SelectionToolbar.prototype = {
 
         if (apps.length > 0) {
             this._toolbarOpen.set_tooltip_text(openLabel);
-            this._toolbarOpen.show();
+            this._toolbarOpen.show_all();
         }
 
         if (showFavorite) {
@@ -761,7 +780,7 @@ SelectionToolbar.prototype = {
 
             this._toolbarFavorite.reset_style();
             this._toolbarFavorite.set_tooltip_text(favoriteLabel);
-            this._toolbarFavorite.show();
+            this._toolbarFavorite.show_all();
         } else {
             this._toolbarFavorite.hide();
         }