[gnome-maps/wip/osrm-routing] WIP! Sidebar: fill the instructions list

[Mattias Bengtsson <mattiasb src gnome org>]

commit 0f4e314b61c43a7e9a5dd531b6d5b4211a18c9f3
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Sat Jun 15 01:28:24 2013 +0200

    WIP! Sidebar: fill the instructions list
    
    larger comment goes here...

 src/gnome-maps.gresource.xml |    1 +
 src/mapView.js               |    2 +-
 src/sidebar-directions.ui    |  148 ++++++++++++++++++++++++++++++++++++++++++
 src/sidebar.js               |   25 +++----
 4 files changed, 160 insertions(+), 16 deletions(-)
---
diff --git a/src/gnome-maps.gresource.xml b/src/gnome-maps.gresource.xml
index 5916d8f..8239728 100644
--- a/src/gnome-maps.gresource.xml
+++ b/src/gnome-maps.gresource.xml
@@ -3,6 +3,7 @@
   <gresource prefix="/org/gnome/maps">
     <file preprocess="xml-stripblanks">app-menu.ui</file>
     <file preprocess="xml-stripblanks">main-window.ui</file>
+    <file preprocess="xml-stripblanks">sidebar-directions.ui</file>
     <file alias="application.css">../data/gnome-maps.css</file>
   </gresource>
 </gresources>
diff --git a/src/mapView.js b/src/mapView.js
index f78545e..0eff54c 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -138,7 +138,7 @@ const MapView = new Lang.Class({
                     longitude: instruction.point.lon,
                     size: 8.0
                 }));
-                log(" * " + instruction.toString());
+                this._sidebar.addInstruction(instruction);
             }, this);
 
             this._routeLayer.visible = true;
diff --git a/src/sidebar-directions.ui b/src/sidebar-directions.ui
new file mode 100644
index 0000000..5b55dd6
--- /dev/null
+++ b/src/sidebar-directions.ui
@@ -0,0 +1,148 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.6 -->
+  <object class="GtkFrame" id="container">
+    <property name="width_request">200</property>
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="label_xalign">0</property>
+    <property name="shadow_type">in</property>
+    <child>
+      <object class="GtkGrid" id="grid">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="margin_left">32</property>
+        <property name="margin_right">32</property>
+        <property name="margin_top">32</property>
+        <property name="hexpand">True</property>
+        <property name="vexpand">True</property>
+        <property name="orientation">vertical</property>
+        <property name="row_spacing">15</property>
+        <style>
+          <class name="maps-sidebar"/>
+        </style>
+        <child>
+          <object class="GtkButtonBox" id="mode">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="spacing">3</property>
+            <property name="homogeneous">True</property>
+            <property name="layout_style">center</property>
+            <child>
+              <object class="GtkToggleButton" id="walk">
+                <property name="label" translatable="yes">Walk</property>
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkToggleButton" id="car">
+                <property name="label" translatable="yes">Car</property>
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkToggleButton" id="transit">
+                <property name="label" translatable="yes">Transit</property>
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
+            </child>
+          </object>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">2</property>
+            <property name="width">2</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkListBox" id="instructions"/>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">3</property>
+            <property name="width">2</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkEntry" id="from">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="invisible_char">●</property>
+            <property name="width_chars">2</property>
+            <property name="invisible_char_set">True</property>
+          </object>
+          <packing>
+            <property name="left_attach">1</property>
+            <property name="top_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkEntry" id="to">
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="invisible_char">●</property>
+            <property name="invisible_char_set">True</property>
+          </object>
+          <packing>
+            <property name="left_attach">1</property>
+            <property name="top_attach">1</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="label1">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="label" translatable="yes">From</property>
+          </object>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">0</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="label2">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="label" translatable="yes">To</property>
+          </object>
+          <packing>
+            <property name="left_attach">0</property>
+            <property name="top_attach">1</property>
+            <property name="width">1</property>
+            <property name="height">1</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+    <child type="label_item">
+      <placeholder/>
+    </child>
+  </object>
+</interface>
diff --git a/src/sidebar.js b/src/sidebar.js
index 9caa61f..9b9f278 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -50,21 +50,11 @@ const Sidebar = new Lang.Class({
         this._revealButton.get_style_context().add_class('osd');
         this._revealButton.connect('clicked', this.toggle.bind(this));
 
-        // 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 builder = new Gtk.Builder();
+        builder.add_from_resource('/org/gnome/maps/sidebar-directions.ui');
+        let container = builder.get_object('container');
+        this._instructions = builder.get_object('instructions');
+        
         this._revealer = new Gd.Revealer({ child: container,
                                            orientation: Gtk.Orientation.VERTICAL });
         this._revealer.show_all();
@@ -82,6 +72,11 @@ const Sidebar = new Lang.Class({
         this.conceal();
     },
 
+    addInstruction: function(instruction) {
+        this._instructions.add(new Gtk.Entry({ }));
+        // log(" * " + instruction.toString());
+    },
+    
     reveal: function() {
         this._revealer.reveal_child = true;
         this._revealButton.symbolic_icon_name = 'go-next-symbolic';