[gnome-boxes] Start the selection bar

[Marc-Andre Lureau <malureau src gnome org>]

commit 065d7d20382acf80cd55022e91b6499c670bf3f4
Author: Marc-Andrà Lureau <marcandre lureau gmail com>
Date:   Fri Nov 4 19:11:48 2011 +0100

    Start the selection bar

 data/gtk-style.css    |   61 ++++++++++++++++++++++++++++++++++-
 src/Makefile.am       |    1 +
 src/app.vala          |   10 ++++++
 src/selectionbar.vala |   49 ++++++++++++++++++++++++++++
 src/topbar.vala       |   85 ++++++++++++++++++++++++++++++++++++++-----------
 5 files changed, 186 insertions(+), 20 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index cd10634..774d813 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -10,7 +10,6 @@
 #CollectionLabel {
     font-size: 11;
     font-weight: bold;
-    background-color: red;
 }
 
 .view {
@@ -53,3 +52,63 @@
 .boxes-continue:insensitive {
     background-image: none;
 }
+
+.osd {
+    background-image: none;
+    background-color: alpha(#000, 0.0);
+}
+
+.osd .toolbar {
+    padding: 6 6;
+    border-style: none;
+    border-radius: 5;
+    border-width: 0;
+
+    background-image: none;
+    background-color: alpha(#fff, 0.15);
+
+    text-shadow: 1 1 black;
+    icon-shadow: 1 1 black;
+}
+
+.osd .toolbar .favorite {
+    color: shade(@theme_selected_bg_color, 1.20);
+}
+
+.osd .toolbar .separator {
+    color: alpha(@theme_tooltip_fg_color, 0.30);
+}
+
+.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;
+}
+
+.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: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)));
+
+    border-style: none;
+    border-image: none;
+    border-radius: 2;
+    border-width: 0;
+}
diff --git a/src/Makefile.am b/src/Makefile.am
index b586636..21eee89 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -45,6 +45,7 @@ gnome_boxes_SOURCES =				\
 	os-database.vala 			\
 	properties.vala				\
 	remote-machine.vala			\
+	selectionbar.vala			\
 	sidebar.vala				\
 	spice-display.vala			\
 	topbar.vala				\
diff --git a/src/app.vala b/src/app.vala
index a8de2f1..a6d4620 100644
--- a/src/app.vala
+++ b/src/app.vala
@@ -21,6 +21,7 @@ private class Boxes.App: Boxes.UI {
     public CollectionItem current_item; // current object/vm manipulated
     public Topbar topbar;
     public Sidebar sidebar;
+    public Selectionbar selectionbar;
     public static const uint duration = 555;  // default to 1/2 for all transitions
     public static GLib.Settings settings;
     public Wizard wizard;
@@ -229,6 +230,15 @@ private class Boxes.App: Boxes.UI {
         sidebar = new Sidebar (this);
         view = new CollectionView (this, sidebar.category);
 
+        selectionbar = new Selectionbar (this);
+        selectionbar.actor.add_constraint (new Clutter.AlignConstraint (view.actor, AlignAxis.X_AXIS, 0.5f));
+        var yconstraint = new Clutter.BindConstraint (view.actor, BindCoordinate.Y,
+                                                      view.actor.height - selectionbar.spacing);
+        selectionbar.actor.add_constraint (yconstraint);
+        view.actor.notify["height"].connect (() => {
+            yconstraint.set_offset (view.actor.height - selectionbar.spacing);
+        });
+
         window.show_all ();
 
         wizard = new Wizard (this);
diff --git a/src/selectionbar.vala b/src/selectionbar.vala
new file mode 100644
index 0000000..fdc61ba
--- /dev/null
+++ b/src/selectionbar.vala
@@ -0,0 +1,49 @@
+// This file is part of GNOME Boxes. License: LGPLv2+
+using Clutter;
+using Gtk;
+
+private class Boxes.Selectionbar: GLib.Object {
+    public Clutter.Actor actor { get { return gtk_actor; } }
+    public static const float spacing = 60.0f;
+
+    private App app;
+    private GtkClutter.Actor gtk_actor;
+    private Gtk.Toolbar toolbar;
+    private Gtk.ToggleToolButton favorite_btn;
+    private Gtk.ToggleToolButton remove_btn;
+
+    public Selectionbar (App app) {
+        this.app = app;
+
+        toolbar = new Gtk.Toolbar ();
+        toolbar.show_arrow = false;
+        toolbar.icon_size = Gtk.IconSize.LARGE_TOOLBAR;
+
+        gtk_actor = new GtkClutter.Actor.with_contents (toolbar);
+        gtk_actor.opacity = 0;
+        gtk_actor.get_widget ().get_style_context ().add_class ("osd");
+
+        favorite_btn = new Gtk.ToggleToolButton ();
+        toolbar.insert (favorite_btn, 0);
+        favorite_btn.icon_name = "emblem-favorite-symbolic";
+        favorite_btn.clicked.connect (() => {
+            message ("fixme");
+        });
+
+        var separator = new Gtk.SeparatorToolItem();
+        toolbar.insert(separator, 1);
+
+        remove_btn = new Gtk.ToggleToolButton ();
+        toolbar.insert (remove_btn, 2);
+        remove_btn.icon_name = "edit-delete-symbolic";
+        remove_btn.clicked.connect (() => {
+            message ("fixme");
+        });
+        toolbar.show_all ();
+
+        actor.reactive = true;
+        actor.hide ();
+
+        app.stage.add (actor);
+    }
+}
diff --git a/src/topbar.vala b/src/topbar.vala
index 11e6e33..be6b809 100644
--- a/src/topbar.vala
+++ b/src/topbar.vala
@@ -4,6 +4,7 @@ using Gtk;
 
 public enum Boxes.TopbarPage {
     COLLECTION,
+    SELECTION,
     WIZARD,
     PROPERTIES
 }
@@ -18,9 +19,11 @@ private class Boxes.Topbar: Boxes.UI {
     private GtkClutter.Actor gtk_actor; // the topbar box
     public Notebook notebook;
 
-    private Toolbar toolbar_start;
-    private Toolbar toolbar_end;
     private Gtk.Spinner spinner;
+    private Gtk.ToggleToolButton select_btn;
+    private Gtk.ToolButton cancel_btn;
+    private Gtk.ToolButton spinner_btn;
+    private Gtk.ToolButton back_btn;
 
     public Topbar (App app) {
         this.app = app;
@@ -38,35 +41,77 @@ private class Boxes.Topbar: Boxes.UI {
         notebook.append_page (hbox, null);
         hbox.get_style_context ().add_class (Gtk.STYLE_CLASS_SIDEBAR);
 
-        toolbar_start = new Gtk.Toolbar ();
+        var toolbar_start = new Gtk.Toolbar ();
         toolbar_start.icon_size = Gtk.IconSize.MENU;
         toolbar_start.get_style_context ().add_class (Gtk.STYLE_CLASS_MENUBAR);
-
-        var back = new Gtk.ToolButton (null, null);
-        back.icon_name =  "go-previous-symbolic";
-        back.get_style_context ().add_class ("raised");
-        back.clicked.connect ((button) => { app.ui_state = UIState.COLLECTION; });
-        toolbar_start.insert (back, 0);
         toolbar_start.set_show_arrow (false);
-        hbox.pack_start (toolbar_start, false, false, 0);
+        hbox.pack_start (toolbar_start, true, true, 0);
+
+        back_btn = new Gtk.ToolButton (null, null);
+        back_btn.icon_name =  "go-previous-symbolic";
+        back_btn.get_style_context ().add_class ("raised");
+        back_btn.clicked.connect ((button) => { app.ui_state = UIState.COLLECTION; });
+        toolbar_start.insert (back_btn, 0);
 
         label = new Gtk.Label (_("New and Recent"));
         label.name = "TopbarLabel";
         label.set_halign (Gtk.Align.START);
-        hbox.pack_start (label, true, true, 20);
+        var tool_item = new Gtk.ToolItem ();
+        tool_item.set_expand (true);
+        tool_item.child = label;
+        toolbar_start.insert (tool_item, 1);
 
-        toolbar_end = new Gtk.Toolbar ();
+        var toolbar_end = new Gtk.Toolbar ();
         toolbar_end.icon_size = Gtk.IconSize.MENU;
         toolbar_end.get_style_context ().add_class (Gtk.STYLE_CLASS_MENUBAR);
 
         spinner = new Gtk.Spinner ();
         spinner.start ();
-        var btn = new Gtk.ToolButton (spinner, null);
-        btn.get_style_context ().add_class ("raised");
-        toolbar_end.insert (btn, 0);
+        spinner_btn = new Gtk.ToolButton (spinner, null);
+        spinner_btn.valign = Gtk.Align.CENTER;
+        spinner_btn.get_style_context ().add_class ("raised");
+        toolbar_end.insert (spinner_btn, 0);
+
+        select_btn = new Gtk.ToggleToolButton ();
+        select_btn.icon_name = "emblem-default-symbolic";
+        select_btn.get_style_context ().add_class ("raised");
+        select_btn.valign = Gtk.Align.CENTER;
+        select_btn.clicked.connect (() => {
+            notebook.page = TopbarPage.SELECTION;
+        });
+        toolbar_end.insert (select_btn, 1);
+
         toolbar_end.set_show_arrow (false);
         hbox.pack_start (toolbar_end, false, false, 0);
 
+        /* TopbarPage.SELECTION */
+        hbox = new Gtk.HBox (false, 0);
+        notebook.append_page (hbox, null);
+        hbox.get_style_context ().add_class (Gtk.STYLE_CLASS_SIDEBAR);
+
+        var toolbar_selection = new Gtk.Toolbar ();
+        toolbar_selection.set_style (Gtk.ToolbarStyle.TEXT);
+        toolbar_selection.get_style_context ().add_class (Gtk.STYLE_CLASS_MENUBAR);
+        toolbar_selection.icon_size = Gtk.IconSize.MENU;
+        toolbar_selection.set_show_arrow (false);
+        hbox.pack_start (toolbar_selection, true, true, 0);
+
+        var selection_label = new Gtk.Label ("<i>" + _("Click on items to select them") + "</i>");
+        selection_label.use_markup = true;
+        tool_item = new Gtk.ToolItem ();
+        tool_item.set_expand (true);
+        tool_item.child = selection_label;
+        toolbar_selection.insert (tool_item, 0);
+
+        cancel_btn = new Gtk.ToolButton.from_stock ("gtk-cancel");
+        cancel_btn.get_style_context ().add_class ("raised");
+        cancel_btn.valign = Gtk.Align.CENTER;
+        toolbar_selection.insert (cancel_btn, 1);
+        cancel_btn.clicked.connect (() => {
+            select_btn.active = false;
+            notebook.page = TopbarPage.COLLECTION;
+        });
+
         /* TopbarPage.WIZARD */
         hbox = new Gtk.HBox (false, 0);
         hbox.margin = 5;
@@ -88,16 +133,18 @@ private class Boxes.Topbar: Boxes.UI {
     public override void ui_state_changed () {
         switch (ui_state) {
         case UIState.COLLECTION:
+            back_btn.hide ();
             actor_remove (gtk_actor);
             app.box.pack (gtk_actor, "row", 0, "column", 1, "x-expand", true, "y-expand", false);
             notebook.page = TopbarPage.COLLECTION;
-            toolbar_start.hide ();
-            toolbar_end.hide ();
+            spinner_btn.hide ();
+            select_btn.show ();
             break;
 
         case UIState.CREDS:
-            toolbar_start.show ();
-            toolbar_end.show ();
+            back_btn.show ();
+            spinner_btn.show ();
+            select_btn.hide ();
             break;
 
         case UIState.DISPLAY: