[gnome-maps/wip/routing2] Some sidebar styling

[Mattias Bengtsson <mattiasb src gnome org>]

commit 8ff6ecfa8bf064d9e39b7c54a9ebf4b8867a70b9
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Tue Jun 10 06:30:40 2014 +0200

    Some sidebar styling

 data/gnome-maps.css |   28 ++++----
 src/sidebar.js      |    5 +-
 src/sidebar.ui      |  212 +++++++++++++++++++++++++++-----------------------
 3 files changed, 131 insertions(+), 114 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index ef4ddea..bc45b25 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -1,14 +1,7 @@
-.maps-sidebar {
-    border-width: 0 0 0 1px;
-}
 .map-location > GtkLabel {
     color: #D0D0D0;
 }
 
-.maps-sidebar:dir(rtl) {
-    border-width: 0 1px 0 0;
-}
-
 .maps-popover {
     margin: 0px;
     padding: 5px;
@@ -74,13 +67,8 @@
     background-image: url('zoom-out-insensitive.png');
 }
 
-.maps-sidebar > * {
-    padding-bottom: 8px;
-    padding-top: 8px;
-}
-
 #sidebar-form > GtkLabel {
-    padding-right: 5px;
+    padding-right: 6px;
 }
 
 #sidebar-form .transportation-mode-button > GtkImage {
@@ -90,12 +78,24 @@
     padding-bottom: 4px;
 }
 
+#sidebar {
+   border-left: 1px solid gray;
+}
+
+#sidebar:dir(rtl) {
+   border-right: 1px solid gray;
+}
+
 #instruction-box {
     margin-left: 10px;
     margin-right: 10px;
-    border-bottom: 1px solid black;
+    border-bottom: 1px;
 }
 #instruction-box > GtkImage {
     padding-right: 6px;
     padding-left: 6px;
 }
+
+#instruction-list {
+    border-top: 1px solid gray;
+}
\ No newline at end of file
diff --git a/src/sidebar.js b/src/sidebar.js
index dc6b1ee..ef90d96 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -47,7 +47,8 @@ const Sidebar = new Lang.Class({
                     });
         this.get_style_context().add_class('maps-sidebar');
         
-        let ui = Utils.getUIObject('sidebar', [ 'sidebar-form',
+        let ui = Utils.getUIObject('sidebar', [ 'sidebar',
+                                                'sidebar-form',
                                                 'instruction-list-scrolled',
                                                 'instruction-list',
                                                 'from-completion',
@@ -66,7 +67,7 @@ const Sidebar = new Lang.Class({
                               1, 0, 1, 1);
         ui.sidebarForm.attach(this._createEntry("to",   ui.toCompletion),
                               1, 1, 1, 1);
-        this.add(ui.sidebarForm);
+        this.add(ui.sidebar);
     },
 
     _initTransportationToggles: function(pedestrian, bike, car) {
diff --git a/src/sidebar.ui b/src/sidebar.ui
index b2f4916..535fcfa 100644
--- a/src/sidebar.ui
+++ b/src/sidebar.ui
@@ -40,146 +40,161 @@
       </attributes>
     </child>
   </object>
-  <object class="GtkGrid" id="sidebar-form">
-    <property name="name">sidebar-form</property>
+
+  <object class="GtkGrid" id="sidebar">
+    <property name="name">sidebar</property>
     <property name="visible">True</property>
     <property name="can_focus">False</property>
-    <property name="margin_left">7</property>
-    <property name="margin_right">7</property>
-    <property name="margin_top">10</property>
-    <property name="margin_bottom">10</property>
     <property name="vexpand">True</property>
     <property name="valign">fill</property>
     <property name="orientation">vertical</property>
-    <property name="row_spacing">10</property>
     <property name="width_request">250</property>
+    <property name="row_spacing">12</property>
     <child>
-      <object class="GtkBox" id="mode-chooser">
+      <object class="GtkGrid" id="sidebar-form">
+        <property name="name">sidebar-form</property>
         <property name="visible">True</property>
         <property name="can_focus">False</property>
-        <property name="halign">center</property>
-        <property name="homogeneous">True</property>
+        <property name="vexpand">False</property>
+        <property name="valign">top</property>
+        <property name="orientation">vertical</property>
+        <property name="row_spacing">12</property>
+        <property name="margin_left">12</property>
+        <property name="margin_right">12</property>
+        <property name="margin_top">12</property>
+        <property name="margin_bottom">0</property>
         <child>
-          <object class="GtkRadioButton" id="mode-pedestrian-toggle">
-            <property name="name">mode-pedestrian-toggle</property>
+          <object class="GtkBox" id="mode-chooser">
             <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="xalign">0.5</property>
-            <property name="draw_indicator">False</property>
+            <property name="can_focus">False</property>
+            <property name="halign">center</property>
+            <property name="homogeneous">True</property>
+            <child>
+              <object class="GtkRadioButton" id="mode-pedestrian-toggle">
+                <property name="name">mode-pedestrian-toggle</property>
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="xalign">0.5</property>
+                <property name="draw_indicator">False</property>
+                <child>
+                  <object class="GtkImage" id="mode-pedestrian-image">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="pixbuf">route-pedestrian-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="transportation-mode-button"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">0</property>
+              </packing>
+            </child>
             <child>
-              <object class="GtkImage" id="mode-pedestrian-image">
+              <object class="GtkRadioButton" id="mode-bike-toggle">
+                <property name="name">mode-bike-toggle</property>
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="pixbuf">route-pedestrian-symbolic</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="xalign">0.5</property>
+                <property name="draw_indicator">False</property>
+                <property name="group">mode-pedestrian-toggle</property>
+                <child>
+                  <object class="GtkImage" id="mode-bike-image">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="pixbuf">route-bike-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="transportation-mode-button"/>
+                </style>
               </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkRadioButton" id="mode-car-toggle">
+                <property name="name">mode-car-toggle</property>
+                <property name="visible">True</property>
+                <property name="can_focus">True</property>
+                <property name="receives_default">True</property>
+                <property name="xalign">0.5</property>
+                <property name="active">True</property>
+                <property name="draw_indicator">False</property>
+                <property name="group">mode-bike-toggle</property>
+                <child>
+                  <object class="GtkImage" id="mode-car-image">
+                    <property name="visible">True</property>
+                    <property name="can_focus">False</property>
+                    <property name="pixbuf">route-car-symbolic</property>
+                  </object>
+                </child>
+                <style>
+                  <class name="transportation-mode-button"/>
+                </style>
+              </object>
+              <packing>
+                <property name="expand">False</property>
+                <property name="fill">True</property>
+                <property name="position">2</property>
+              </packing>
             </child>
             <style>
-              <class name="transportation-mode-button"/>
+              <class name="linked"/>
             </style>
           </object>
           <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
+            <property name="left_attach">0</property>
+            <property name="top_attach">2</property>
+            <property name="width">2</property>
           </packing>
         </child>
         <child>
-          <object class="GtkRadioButton" id="mode-bike-toggle">
-            <property name="name">mode-bike-toggle</property>
+          <object class="GtkLabel" id="to-label">
             <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="xalign">0.5</property>
-            <property name="draw_indicator">False</property>
-            <property name="group">mode-pedestrian-toggle</property>
-            <child>
-              <object class="GtkImage" id="mode-bike-image">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="pixbuf">route-bike-symbolic</property>
-              </object>
-            </child>
-            <style>
-              <class name="transportation-mode-button"/>
-            </style>
+            <property name="can_focus">False</property>
+            <property name="halign">end</property>
+            <property name="label" translatable="yes">To</property>
           </object>
           <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">1</property>
+            <property name="left_attach">0</property>
+            <property name="top_attach">1</property>
           </packing>
         </child>
         <child>
-          <object class="GtkRadioButton" id="mode-car-toggle">
-            <property name="name">mode-car-toggle</property>
+          <object class="GtkLabel" id="from-label">
             <property name="visible">True</property>
-            <property name="can_focus">True</property>
-            <property name="receives_default">True</property>
-            <property name="xalign">0.5</property>
-            <property name="active">True</property>
-            <property name="draw_indicator">False</property>
-            <property name="group">mode-bike-toggle</property>
-            <child>
-              <object class="GtkImage" id="mode-car-image">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="pixbuf">route-car-symbolic</property>
-              </object>
-            </child>
-            <style>
-              <class name="transportation-mode-button"/>
-            </style>
+            <property name="can_focus">False</property>
+            <property name="halign">end</property>
+            <property name="label" translatable="yes">From</property>
+            <property name="ellipsize">end</property>
           </object>
           <packing>
-            <property name="expand">False</property>
-            <property name="fill">True</property>
-            <property name="position">2</property>
+            <property name="left_attach">0</property>
+            <property name="top_attach">0</property>
           </packing>
         </child>
-        <style>
-          <class name="linked"/>
-        </style>
       </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">2</property>
-        <property name="width">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="to-label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">To</property>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkLabel" id="from-label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="halign">end</property>
-        <property name="label" translatable="yes">From</property>
-        <property name="ellipsize">end</property>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">0</property>
-      </packing>
     </child>
     <child>
       <object class="GtkScrolledWindow" id="instruction-list-scrolled">
+        <property name="name">instruction-list-scrolled</property>
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="valign">fill</property>
         <property name="vexpand">True</property>
+        <property name="margin">1</property>
         <child>
           <object class="GtkListBox" id="instruction-list">
+            <property name="name">instruction-list</property>
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="valign">fill</property>
@@ -193,8 +208,9 @@
       </packing>
     </child>
   </object>
-
+    
   <object class="GtkBox" id="instruction-box">
+    <property name="name">instruction-box</property>
     <property name="height_request">48</property>
     <property name="visible">True</property>
     <property name="can_focus">False</property>