[gnome-maps/wip/routing: 45/45] WIP Add sidebar support

[Mattias Bengtsson <mattiasb src gnome org>]

commit 296662ae4451f2bcff91c4377e105e333c4d012b
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Sat Sep 7 11:40:11 2013 +0200

    WIP Add sidebar support

 data/icons/Makefile.am       |    3 +
 src/gnome-maps.gresource.xml |    7 ++
 src/mapView.js               |    5 +-
 src/sidebar.js               |  158 +++++++++++++++++++++++++++---------------
 4 files changed, 117 insertions(+), 56 deletions(-)
---
diff --git a/data/icons/Makefile.am b/data/icons/Makefile.am
index 717fd4a..89fdd0b 100644
--- a/data/icons/Makefile.am
+++ b/data/icons/Makefile.am
@@ -20,6 +20,9 @@ imagesdir = $(datadir)/gnome-maps/pixmaps
 images_DATA =                              \
     bubble.svg                             \
     pin.svg                                \
+    route-car-symbolic.svg                 \
+    route-transit-symbolic.svg             \
+    route-pedestrian-symbolic.svg          \
     $(NULL)
 
 noinst_DATA =                              \
diff --git a/src/gnome-maps.gresource.xml b/src/gnome-maps.gresource.xml
index d30b5eb..04f62f2 100644
--- a/src/gnome-maps.gresource.xml
+++ b/src/gnome-maps.gresource.xml
@@ -7,6 +7,13 @@
     <file preprocess="xml-stripblanks">search-popup.ui</file>
     <file preprocess="xml-stripblanks">context-menu.ui</file>
     <file preprocess="xml-stripblanks">map-location.ui</file>
+    <file preprocess="xml-stripblanks">sidebar.ui</file>
+    <file preprocess="xml-stripblanks"
+          alias="route-car-symbolic">../data/icons/route-car-symbolic.svg</file>
+    <file preprocess="xml-stripblanks"
+          alias="route-pedestrian-symbolic">../data/icons/route-pedestrian-symbolic.svg</file>
+    <file preprocess="xml-stripblanks"
+          alias="route-transit-symbolic">../data/icons/route-transit-symbolic.svg</file>
     <file alias="application.css">../data/gnome-maps.css</file>
     <file alias="zoom-in.png">../data/media/zoom-in.png</file>
     <file alias="zoom-out.png">../data/media/zoom-out.png</file>
diff --git a/src/mapView.js b/src/mapView.js
index 4e915ee..4d43fea 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -69,8 +69,11 @@ const MapView = new Lang.Class({
         this.view.connect('notify::longitude', this._onViewMoved.bind(this));
 
         this._sidebar = new Sidebar.Sidebar(this);
+        this._sidebar.actor.show();
+        this._sidebar.reveal();
         // Don't show sidebar until it has something in it
-        //this.view.add_child(this._sidebar.actor);
+        this.view.add_child(this._sidebar.actor);
+        
 
         this._routeLayer = new Champlain.PathLayer();
         this._routeLayer.set_stroke_width(2.0);
diff --git a/src/sidebar.js b/src/sidebar.js
index b9d873e..edfac1e 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -30,71 +30,119 @@ const MapView = imports.mapView;
 
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
+const Signals = imports.signals;
 
 const Utils = imports.utils;
 const _ = imports.gettext.gettext;
 
+const isRTL = Gtk.Widget.get_default_direction() === Gtk.TextDirection.RTL;
+
+const Icon = {
+    prev: isRTL ? 'go-previous-rtl-symbolic' : 'go-previous-symbolic',
+    next: isRTL ? 'go-next-rtl-symbolic'     : 'go-next-symbolic'
+};
+
 const Sidebar = new Lang.Class({
     Name: 'Sidebar',
 
-    _init: function(mapView) {
-        this._mapView = mapView;
-        this.actor = new Clutter.Actor({ layout_manager: new Clutter.BoxLayout({ spacing: 12 }),
-                                         y_expand: true,
-                                         x_align: Clutter.ActorAlign.END });
-
-        let isRtl = (Gtk.Widget.get_default_direction() == Gtk.TextDirection.RTL);
-        let prevIconName = isRtl ? 'go-previous-rtl-symbolic' : 'go-previous-symbolic';
-        let nextIconName = isRtl ? 'go-next-rtl-symbolic' : 'go-next-symbolic';
-
-        // create the button
-        let revealImage = new Gtk.Image ({ icon_name: prevIconName,
-                                           icon_size: Gtk.IconSize.MENU });
-        let revealButton = new Gtk.Button({ child: revealImage,
-                                            valign: Gtk.Align.CENTER });
-        revealButton.get_style_context().add_class('osd');
-        revealButton.show();
-
-        // then the sidebar itself, packed into the revealer
-        let grid = new Gtk.Grid({ vexpand: true,
-                                  hexpand: true,
-                                  margin_top: 32,
-                                  margin_left: 32,
-                                  margin_right: 32,
-                                  row_spacing: 15,
-                                  orientation: Gtk.Orientation.VERTICAL,
-                                  valign: Gtk.Align.FILL });
-
-        let container = new Gtk.Frame({ child: grid,
-                                        shadow_type: Gtk.ShadowType.IN,
-                                        width_request: 200 });
-        container.get_style_context().add_class('maps-sidebar');
-
-        let revealer = new Gtk.Revealer({ child: container,
-                                         reveal_child: false,
-                                         transition_type: Gtk.RevealerTransitionType.CROSSFADE });
-        revealer.show_all();
-
-        revealButton.connect('clicked', (function() {
-            if (revealer.reveal_child) {
-                revealer.reveal_child = false;
-                revealButton.symbolic_icon_name = prevIconName;
-            } else {
-                revealer.reveal_child = true;
-                revealButton.symbolic_icon_name = nextIconName;
-            }
+    _init: function() {
+        this._ui = Utils.getUIObject('sidebar', ['sidebar',
+                                                 'instructions-list',
+                                                 'revealer',
+                                                 'reveal-button',
+                                                 'reveal-image']);
+        this._ui.revealButton.connect('clicked', this.toggle.bind(this));
+        this._ui.revealer.show_all();
+        this._ui.instructionsList.connect('row-activated', (function(box, row) {
+            this.emit('instruction-clicked', row.instruction);
         }).bind(this));
 
-        // now create actors
-        let buttonActor = new GtkClutter.Actor({ contents: revealButton,
-                                                 x_align: Clutter.ActorAlign.END });
+        this.actor = this._createActor();
+        this.actor.hide();
+        this.conceal();
+    },
+
+    _createActor: function() {
+        let actor = new Clutter.Actor({
+            layout_manager: new Clutter.BoxLayout({ spacing: 12 }),
+            y_expand: true,
+            x_align: Clutter.ActorAlign.END
+        });
+
+        let buttonActor = new GtkClutter.Actor({
+            contents: this._ui.revealButton,
+            x_align: Clutter.ActorAlign.END
+        });
         Utils.clearGtkClutterActorBg(buttonActor);
-        this.actor.add_child(buttonActor);
 
-        let revealerActor = new GtkClutter.Actor({ contents: revealer,
-                                                   x_align: Clutter.ActorAlign.END,
-                                                   x_expand: true,
-                                                   y_expand: true });
-        this.actor.add_child(revealerActor);
+        let revealerActor = new GtkClutter.Actor({
+            contents: this._ui.revealer,
+            x_align: Clutter.ActorAlign.END,
+            x_expand: true,
+            y_expand: true
+        });
+
+        actor.add_child(buttonActor);
+        actor.add_child(revealerActor);
+
+        return actor;
+    },
+
+    addInstruction: function(instruction) {
+        this._ui.instructionsList.add(new InstructionRow(instruction, {
+            visible: true
+        }));
+    },
+
+    reveal: function() {
+        this._ui.revealer.reveal_child = true;
+        this._ui.revealImage.icon_name = Icon.next;
+    },
+
+    conceal: function() {
+        this._ui.revealer.reveal_child = false;
+        this._ui.revealImage.icon_name = Icon.prev;
+    },
+
+    toggle: function() {
+        if(this.isRevealed())
+            this.conceal();
+        else
+            this.reveal();
+    },
+
+    isRevealed: function() {
+        return this._ui.revealer.reveal_child;
     }
 });
+Signals.addSignalMethods(Sidebar.prototype);
+
+const InstructionRow = new Lang.Class({
+    Name: "InstructionRow",
+    Extends: Gtk.ListBoxRow,
+
+    _init: function(instruction, props) {
+        this.parent();
+
+        this.instruction = instruction;
+
+        Lang.copyPropertiesNoOverwrite(props, this);
+
+        let box = new Gtk.Box({
+            visible: true,
+            can_focus: false
+        });
+        box.add(new Gtk.Image({
+            stock: "gtk-cdrom",
+            visible: true,
+            can_focus: false
+        }));
+        box.add(new Gtk.Label({
+            visible: true,
+            can_focus: false,
+            label: instruction.toString()
+        }));
+        this.add(box);
+    }
+});
+