[gnome-maps/wip/routing2: 10/10] Add a sidebar for route interaction



commit 1b740dd186f6937b3bacd9d4bbcd6d530c398983
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Wed Jun 11 02:03:29 2014 +0200

    Add a sidebar for route interaction
    
    This is a total re-implementation of the sidebar for searching and
    interacting with routes.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=728695

 data/gnome-maps.css                      |   40 +++++-
 data/icons/route-bike-symbolic.svg       |   20 +++
 data/icons/route-button.svg              |   73 ++++++++++
 data/icons/route-car-symbolic.svg        |   67 ++++++++++
 data/icons/route-pedestrian-symbolic.svg |   78 +++++++++++
 data/icons/route-transit-symbolic.svg    |   68 ++++++++++
 data/media/direction-checkpoint.png      |  Bin 0 -> 466 bytes
 data/media/direction-continue.png        |  Bin 0 -> 488 bytes
 data/media/direction-left.png            |  Bin 0 -> 587 bytes
 data/media/direction-right.png           |  Bin 0 -> 564 bytes
 data/media/direction-sharpleft.png       |  Bin 0 -> 678 bytes
 data/media/direction-sharpright.png      |  Bin 0 -> 659 bytes
 data/media/direction-slightleft.png      |  Bin 0 -> 616 bytes
 data/media/direction-slightright.png     |  Bin 0 -> 611 bytes
 src/gnome-maps.data.gresource.xml        |   15 ++
 src/main-window.ui                       |   21 +++
 src/mainWindow.js                        |   32 +++++-
 src/mapView.js                           |    1 -
 src/route.js                             |   16 +++
 src/sidebar.js                           |  175 ++++++++++++++++---------
 src/sidebar.ui                           |  211 ++++++++++++++++++++++++++++++
 21 files changed, 745 insertions(+), 72 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index d63d2ac..4327c09 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 {
     padding: 5px;
 }
@@ -69,3 +62,36 @@
 #zoom-out-button:insensitive {
     background-image: url('zoom-out-insensitive.png');
 }
+
+#sidebar-form > GtkLabel {
+    padding-right: 6px;
+}
+
+#sidebar-form .transportation-mode-button > GtkImage {
+    padding-left:   7px;
+    padding-right:  7px;
+    padding-top:    4px;
+    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;
+}
+#instruction-box > GtkImage {
+    padding-right: 6px;
+    padding-left: 6px;
+}
+
+#instruction-list {
+    border-top: 1px solid gray;
+}
diff --git a/data/icons/route-bike-symbolic.svg b/data/icons/route-bike-symbolic.svg
new file mode 100644
index 0000000..0223d5f
--- /dev/null
+++ b/data/icons/route-bike-symbolic.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/"; xmlns:cc="http://creativecommons.org/ns#"; 
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"; xmlns:svg="http://www.w3.org/2000/svg"; 
xmlns="http://www.w3.org/2000/svg"; xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"; 
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"; width="16px" height="16px" id="svg6558" 
version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="route-cycling-symbolic.svg">
+  <defs id="defs6560"/>
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" 
inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="45.254834" inkscape:cx="13.7037" 
inkscape:cy="8.1151584" inkscape:current-layer="layer1" showgrid="false" inkscape:grid-bbox="true" 
inkscape:document-units="px" inkscape:snap-nodes="false" inkscape:snap-bbox="true" 
inkscape:window-width="1920" inkscape:window-height="1014" inkscape:window-x="0" inkscape:window-y="27" 
inkscape:window-maximized="1">
+    <inkscape:grid type="xygrid" id="grid6938"/>
+  </sodipodi:namedview>
+  <metadata id="metadata6563">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g id="layer1" inkscape:label="Layer 1" inkscape:groupmode="layer">
+    <path 
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#2e3436;fill-opacity:1;stroke:none;stroke-width:1.31249988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
 d="M 11 2 C 9.971479 2 9.1411313 2.780118 9.03125 3.78125 L 3.0625 8.53125 L 8 10.65625 L 8 14 L 9 14 L 9 10 
L 5 8.28125 L 7.09375 6.59375 L 9.21875 8.96875 L 13 8.96875 L 13 7.96875 L 9.65625 7.96875 L 7.875 5.96875 L 
9.21875 4.90625 C 9.5484621 5.5568813 10.221826 6 11 6 C 12.103146 6 13 5.1052236 13 4 C 13 2.8947762 
12.103146 2 11 2 z M 3 9.96875 C 1.3490679 9.96875 -2.9605947e-16 11.317818 0 12.96875 C 0 14.619682 1.349
 0679 15.96875 3 15.96875 C 4.6509321 15.96875 6 14.619682 6 12.96875 C 6 11.317818 4.6509321 9.96875 3 
9.96875 z M 13 9.96875 C 11.349067 9.96875 10 11.317818 10 12.96875 C 10 14.619682 11.349067 15.96875 13 
15.96875 C 14.650932 15.96875 16 14.619682 16 12.96875 C 16 11.317818 14.650932 9.96875 13 9.96875 z M 3 
10.96875 C 4.1104919 10.96875 5 11.858258 5 12.96875 C 5 14.079242 4.1104919 14.96875 3 14.96875 C 1.8895081 
14.96875 1 14.079242 1 12.96875 C 1 11.858258 1.8895081 10.96875 3 10.96875 z M 13 10.96875 C 14.110491 
10.96875 15 11.858258 15 12.96875 C 15 14.079242 14.110491 14.96875 13 14.96875 C 11.889508 14.96875 11 
14.079242 11 12.96875 C 11 11.858258 11.889508 10.96875 13 10.96875 z " id="path6050-13"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/data/icons/route-button.svg b/data/icons/route-button.svg
new file mode 100644
index 0000000..d9547d6
--- /dev/null
+++ b/data/icons/route-button.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="16px"
+   height="16px"
+   id="svg6558"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="route-button.svg">
+  <defs
+     id="defs6560" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="1.3467868"
+     inkscape:cy="10.557173"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:snap-nodes="false"
+     inkscape:snap-bbox="true"
+     inkscape:window-width="3200"
+     inkscape:window-height="1687"
+     inkscape:window-x="0"
+     inkscape:window-y="55"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid11943" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6563">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+       d="M 3.2775895,4.035839 1.9206862,5.3844176 6.4091132,9.901661 7.7660166,8.5530826 
3.2775895,4.0358388 z"
+       id="path11774-5"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
+       d="M 9.0000001,3.0039062 10.4375,4.4414061 5.9999999,8.8789063 l 0,6.1210937 3.0000002,0 0,-4.871094 
L 12.5625,6.5664061 14,8.0039063 14,3.0039061 z"
+       id="path11004-4"
+       sodipodi:nodetypes="cccccccccc" />
+  </g>
+</svg>
diff --git a/data/icons/route-car-symbolic.svg b/data/icons/route-car-symbolic.svg
new file mode 100644
index 0000000..c511fe1
--- /dev/null
+++ b/data/icons/route-car-symbolic.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="16px"
+   height="16px"
+   id="svg6558"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="route-walking-symbolic.svg">
+  <defs
+     id="defs6560" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.197802"
+     inkscape:cx="9.2245257"
+     inkscape:cy="9.6312031"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:snap-nodes="false"
+     inkscape:snap-bbox="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="841"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7232" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6563">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       inkscape:connector-curvature="0"
+       
style="color:#000000;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 4,4 C 3.480625,4 3.19205,4.4345415 3.0625,4.9375 L 2.28125,8 1.9375,8 C 1.418125,8 1,8.418125 
1,8.9375 l 0,4.125 C 1,13.581875 1.480625,14 2,14 l 0,0.90625 C 2,15.512187 2.446,16 3,16 3.554,16 
4,15.512187 4,14.90625 L 4,14 l 8,0 0,0.90625 C 12,15.512187 12.446,16 13,16 c 0.554,0 1,-0.487813 1,-1.09375 
L 14,14 c 0.546725,0 1,-0.418125 1,-0.9375 l 0,-4.125 C 15,8.418125 14.581875,8 14.0625,8 L 13.71875,8 
12.9375,4.9375 C 12.80795,4.4345415 12.519375,4 12,4 L 4,4 z m 1.0625,1 5.875,0 C 11.543438,5 
11.816859,5.5161519 12,6.09375 L 12.625,8 c 0.183141,0.577598 -0.112812,1 -0.71875,1 L 4.09375,9 C 3.487812,9 
3.153528,8.606555 3.34375,8.03125 L 4,6.09375 C 4.190222,5.5184449 4.456562,5 5.0625,5 z M 4,10 c 0.552285,0 
1,0.447715 1,1 0,0.552285 -0.447715,1 -1,1 -0.552285,0 -1,-0.447715 -1,-1 0,-0.552285 0.447715,-1 1,-1 z m 
8,0 c 0.552285,0 1,0.447715 1,1 0,0.552285 -0.447715,1 -1,1 -0.552285,0 -1,-0.447715 -1,-1 0,-0.552285 
0.447715,-1 1,-1 z"
+       id="rect6086" />
+  </g>
+</svg>
diff --git a/data/icons/route-pedestrian-symbolic.svg b/data/icons/route-pedestrian-symbolic.svg
new file mode 100644
index 0000000..7317b86
--- /dev/null
+++ b/data/icons/route-pedestrian-symbolic.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="16px"
+   height="16px"
+   id="svg6558"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 18">
+  <defs
+     id="defs6560" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.197802"
+     inkscape:cx="9.2245257"
+     inkscape:cy="9.6312031"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:snap-nodes="false"
+     inkscape:snap-bbox="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="841"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7232" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6563">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       
style="color:#000000;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 5.7191343,5.0308108 3.96875,7.03125 3.0625,9.6875 c -0.2635754,0.511148 0.016909,1.224387 
0.5625,1.40625 0.545591,0.181864 1.2166716,-0.214187 1.3125,-0.78125 L 5.71875,8.0625 6,7.75 6,13.25 4.375,15 
5.875,16.375 8,14.03125 8,11.90625 10.09375,16 11.875,15.09375 9,9.40625 9,7.65625 11.34375,9.75 c 
0.383224,0.3968 1.108768,0.37896 1.472028,-0.03619 C 13.179038,9.298651 13.100409,8.5771604 12.65625,8.25 L 
9,5 z"
+       id="rect7046"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccscccccccccccccsccc" />
+    <path
+       sodipodi:type="arc"
+       
style="color:#000000;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="path6214"
+       sodipodi:cx="9.1592426"
+       sodipodi:cy="5.4265437"
+       sodipodi:rx="2.4638252"
+       sodipodi:ry="2.4638252"
+       d="m 11.623068,5.4265437 a 2.4638252,2.4638252 0 1 1 -4.9276506,0 2.4638252,2.4638252 0 1 1 
4.9276506,0 z"
+       transform="matrix(0.81174588,0,0,0.8117459,0.5650225,-2.4049746)" />
+  </g>
+</svg>
diff --git a/data/icons/route-transit-symbolic.svg b/data/icons/route-transit-symbolic.svg
new file mode 100644
index 0000000..05a49d5
--- /dev/null
+++ b/data/icons/route-transit-symbolic.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="16px"
+   height="16px"
+   id="svg6558"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="route-driving-symbolic.svg">
+  <defs
+     id="defs6560" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.696216"
+     inkscape:cx="5.7511062"
+     inkscape:cy="13.453719"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:snap-nodes="false"
+     inkscape:snap-bbox="true"
+     inkscape:window-width="1600"
+     inkscape:window-height="841"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7232" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6563">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       
style="color:#000000;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 1.9375,1 C 1.418125,1 1,1.418125 1,1.9375 L 1,14.90625 C 1,15.512187 1.487812,16 2.09375,16 l 
0.8125,0 C 3.512188,16 4,15.512187 4,14.90625 L 4,14 l 8,0 0,0.90625 C 12,15.512187 12.487812,16 13.09375,16 
l 0.8125,0 C 14.512188,16 15,15.512187 15,14.90625 L 15,1.9375 C 15,1.418125 14.581875,1 14.0625,1 z m 
1.15625,1 9.8125,0 C 13.512188,2 14,2.4878125 14,3.09375 l 0,4.8125 C 14,8.5121875 13.512188,9 12.90625,9 L 
3.09375,9 C 2.487812,9 2,8.5121875 2,7.90625 L 2,3.09375 C 2,2.4878125 2.487812,2 3.09375,2 z M 3.5,10 C 
4.328427,10 5,10.671573 5,11.5 5,12.328427 4.328427,13 3.5,13 2.671573,13 2,12.328427 2,11.5 2,10.671573 
2.671573,10 3.5,10 z m 9,0 C 13.328427,10 14,10.671573 14,11.5 14,12.328427 13.328427,13 12.5,13 11.671573,13 
11,12.328427 11,11.5 11,10.671573 11.671573,10 12.5,10 z"
+       id="rect6086-1"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sccsssccsssccsssssssssssssssssssss" />
+  </g>
+</svg>
diff --git a/data/media/direction-checkpoint.png b/data/media/direction-checkpoint.png
new file mode 100644
index 0000000..4dd1636
Binary files /dev/null and b/data/media/direction-checkpoint.png differ
diff --git a/data/media/direction-continue.png b/data/media/direction-continue.png
new file mode 100644
index 0000000..141690d
Binary files /dev/null and b/data/media/direction-continue.png differ
diff --git a/data/media/direction-left.png b/data/media/direction-left.png
new file mode 100644
index 0000000..022401e
Binary files /dev/null and b/data/media/direction-left.png differ
diff --git a/data/media/direction-right.png b/data/media/direction-right.png
new file mode 100644
index 0000000..1e718de
Binary files /dev/null and b/data/media/direction-right.png differ
diff --git a/data/media/direction-sharpleft.png b/data/media/direction-sharpleft.png
new file mode 100644
index 0000000..086c990
Binary files /dev/null and b/data/media/direction-sharpleft.png differ
diff --git a/data/media/direction-sharpright.png b/data/media/direction-sharpright.png
new file mode 100644
index 0000000..3012fdd
Binary files /dev/null and b/data/media/direction-sharpright.png differ
diff --git a/data/media/direction-slightleft.png b/data/media/direction-slightleft.png
new file mode 100644
index 0000000..b584db1
Binary files /dev/null and b/data/media/direction-slightleft.png differ
diff --git a/data/media/direction-slightright.png b/data/media/direction-slightright.png
new file mode 100644
index 0000000..ba3ecd8
Binary files /dev/null and b/data/media/direction-slightright.png differ
diff --git a/src/gnome-maps.data.gresource.xml b/src/gnome-maps.data.gresource.xml
index 6d4740d..4255fba 100644
--- a/src/gnome-maps.data.gresource.xml
+++ b/src/gnome-maps.data.gresource.xml
@@ -7,6 +7,7 @@
     <file preprocess="xml-stripblanks">map-location.ui</file>
     <file preprocess="xml-stripblanks">zoom-control.ui</file>
     <file preprocess="xml-stripblanks">search-popup.ui</file>
+    <file preprocess="xml-stripblanks">sidebar.ui</file>
     <file preprocess="xml-stripblanks">context-menu.ui</file>
     <file preprocess="xml-stripblanks">layers-popover.ui</file>
     <file preprocess="xml-stripblanks">notification.ui</file>
@@ -17,6 +18,20 @@
     <file alias="zoom-out-insensitive.png">../data/media/zoom-out-insensitive.png</file>
     <file alias="maptype-aerial.png">../data/media/maptype-aerial.png</file>
     <file alias="maptype-street.png">../data/media/maptype-street.png</file>
+    <file alias="route-car-symbolic">../data/icons/route-car-symbolic.svg</file>
+    <file alias="route-pedestrian-symbolic">../data/icons/route-pedestrian-symbolic.svg</file>
+    <file alias="route-transit-symbolic">../data/icons/route-transit-symbolic.svg</file>
+    <file alias="route-bike-symbolic">../data/icons/route-bike-symbolic.svg</file>
     <file alias="layers-button.svg">../data/icons/layers-button.svg</file>
+    <file alias="route-button">../data/icons/route-button.svg</file>
+    <file alias="direction-sharpleft">../data/media/direction-sharpleft.png</file>
+    <file alias="direction-left">../data/media/direction-left.png</file>
+    <file alias="direction-slightleft">../data/media/direction-slightleft.png</file>
+    <file alias="direction-continue">../data/media/direction-continue.png</file>
+    <file alias="direction-sharpright">../data/media/direction-sharpright.png</file>
+    <file alias="direction-right">../data/media/direction-right.png</file>
+    <file alias="direction-slightright">../data/media/direction-slightright.png</file>
+    <file alias="direction-start">../data/media/direction-checkpoint.png</file>
+    <file alias="direction-end">../data/media/direction-checkpoint.png</file>
   </gresource>
 </gresources>
diff --git a/src/main-window.ui b/src/main-window.ui
index aad0507..b46933c 100644
--- a/src/main-window.ui
+++ b/src/main-window.ui
@@ -52,6 +52,27 @@
             </child>
           </object>
         </child>
+        <child>
+          <object class="GtkToggleButton" id="toggle-sidebar-button">
+            <property name="visible">True</property>
+            <property name="can-focus">True</property>
+            <property name="valign">center</property>
+            <property name="action-name">win.toggle-sidebar</property>
+            <style>
+              <class name="image-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="toggle-sidebar-button-image">
+                <property name="visible">True</property>
+                <property name="icon-size">1</property>
+                <property name="pixbuf">route-button</property>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="pack-type">end</property>
+          </packing>
+        </child>
       </object>
     </child>
   </object>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index f0cd777..3d5bf30 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -19,6 +19,7 @@
  *
  * Author: Cosimo Cecchi <cosimoc redhat com>
  *         Zeeshan Ali (Khattak) <zeeshanak gnome org>
+ *         Mattias Bengtsson <mattias jc bengtsson gmail com>
  */
 
 const Gdk = imports.gi.Gdk;
@@ -36,6 +37,7 @@ const LayersPopover = imports.layersPopover;
 const ContextMenu = imports.contextMenu;
 const PlaceEntry = imports.placeEntry;
 const PlaceStore = imports.placeStore;
+const Sidebar = imports.sidebar;
 const Utils = imports.utils;
 const Config = imports.config;
 const ZoomControl = imports.zoomControl;
@@ -62,9 +64,13 @@ const MainWindow = new Lang.Class({
 
         this.mapView = new MapView.MapView();
         overlay.add(this.mapView);
-
         this.mapView.gotoUserLocation(false);
 
+        this._sidebar = new Sidebar.Sidebar(this.mapView);
+        overlay.add_overlay(this._sidebar);
+        Application.routeService.route.connect('update',
+                                               this._setRevealSidebar.bind(this, true));
+
         this._contextMenu = new ContextMenu.ContextMenu(this.mapView);
 
         ui.layersButton.popover = new LayersPopover.LayersPopover();
@@ -127,6 +133,14 @@ const MainWindow = new Lang.Class({
             }, {
                 properties: { name: 'goto-user-location' },
                 signalHandlers: { activate: this._onGotoUserLocationActivate }
+            }, {
+                properties: {
+                    name: 'toggle-sidebar',
+                    state: GLib.Variant.new_boolean(false)
+                },
+                signalHandlers: {
+                    'change-state': this._onToggleSidebarChangeState
+                }
             }
         ], this);
 
@@ -259,6 +273,22 @@ const MainWindow = new Lang.Class({
         this.mapView.setMapType(MapView.MapType[mapType]);
     },
 
+    _onToggleSidebarChangeState: function(action, variant) {
+        action.set_state(variant);
+
+        let reveal = variant.get_boolean();
+        if (!reveal) {
+            Application.routeService.route.reset();
+            Application.routeService.query.reset();
+        }
+        this._sidebar.set_reveal_child(reveal);
+    },
+
+    _setRevealSidebar: function(value) {
+        let action = this.window.lookup_action('toggle-sidebar');
+        action.change_state(GLib.Variant.new_boolean(value));
+    },
+
     _onAboutActivate: function() {
         let aboutDialog = new Gtk.AboutDialog({
             artists: [ 'Jakub Steiner <jimmac gmail com>',
diff --git a/src/mapView.js b/src/mapView.js
index 157799b..9bf725b 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -34,7 +34,6 @@ const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 
 const Application = imports.application;
-const Sidebar = imports.sidebar;
 const Utils = imports.utils;
 const Path = imports.path;
 const MapLocation = imports.mapLocation;
diff --git a/src/route.js b/src/route.js
index ac18f0f..8775443 100644
--- a/src/route.js
+++ b/src/route.js
@@ -85,11 +85,27 @@ const TurnPoint = new Lang.Class({
         this._type = type;
         this.distance = distance;
         this.instruction = instruction;
+        this.iconResource = this._getIconResource();
     },
 
     isDestination: function() {
         return this._type === TurnPointType.START
             || this._type === TurnPointType.VIA
             || this._type === TurnPointType.STOP;
+    },
+
+    _getIconResource: function() {
+        switch(this._type) {
+        case TurnPointType.SHARP_LEFT:   return '/org/gnome/maps/direction-sharpleft';
+        case TurnPointType.LEFT:         return '/org/gnome/maps/direction-left';
+        case TurnPointType.SLIGHT_LEFT:  return '/org/gnome/maps/direction-slightleft';
+        case TurnPointType.CONTINUE:     return '/org/gnome/maps/direction-continue';
+        case TurnPointType.SLIGHT_RIGHT: return '/org/gnome/maps/direction-slightright';
+        case TurnPointType.RIGHT:        return '/org/gnome/maps/direction-right';
+        case TurnPointType.SHARP_RIGHT:  return '/org/gnome/maps/direction-sharpright';
+        case TurnPointType.END:          return '/org/gnome/maps/direction-end';
+        case TurnPointType.START:        return '/org/gnome/maps/direction-start';
+        default:                         return '';
+        }
     }
 });
diff --git a/src/sidebar.js b/src/sidebar.js
index b9d873e..f4f4a52 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -18,83 +18,132 @@
  * Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
  *
  * Author: Zeeshan Ali (Khattak) <zeeshanak gnome org>
+ *         Mattias Bengtsson <mattias jc bengtsson gmail com>
  */
 
-const Clutter = imports.gi.Clutter;
-const Gdk = imports.gi.Gdk;
+const Geocode = imports.gi.GeocodeGlib;
 const GLib = imports.gi.GLib;
+const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
-const Champlain = imports.gi.Champlain;
-const GtkClutter = imports.gi.GtkClutter;
-const MapView = imports.mapView;
-
 const Lang = imports.lang;
-const Mainloop = imports.mainloop;
 
+const Application = imports.application;
+const PlaceStore = imports.placeStore;
+const PlaceEntry = imports.placeEntry;
+const Route = imports.route;
+const RouteQuery = imports.routeQuery;
+const SearchPopup = imports.searchPopup;
 const Utils = imports.utils;
-const _ = imports.gettext.gettext;
 
 const Sidebar = new Lang.Class({
     Name: 'Sidebar',
+    Extends: Gtk.Revealer,
 
     _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;
+        this.parent({ visible:             true,
+                      transition_type:     Gtk.RevealerTransitionType.SLIDE_LEFT,
+                      transition_duration: 400, // ms
+                      halign:              Gtk.Align.END,
+                      valign:              Gtk.Align.FILL
+                    });
+        this.get_style_context().add_class('maps-sidebar');
+
+        let ui = Utils.getUIObject('sidebar', [ 'sidebar',
+                                                'sidebar-form',
+                                                'instruction-list-scrolled',
+                                                'instruction-list',
+                                                'mode-pedestrian-toggle',
+                                                'mode-bike-toggle',
+                                                'mode-car-toggle']);
+        this._instructionList = ui.instructionList;
+        this._initInstructionList();
+
+        this._initTransportationToggles(ui.modePedestrianToggle,
+                                        ui.modeBikeToggle,
+                                        ui.modeCarToggle);
+
+        ui.sidebarForm.attach(this._createEntry("from", mapView),
+                              1, 0, 1, 1);
+        ui.sidebarForm.attach(this._createEntry("to", mapView),
+                              1, 1, 1, 1);
+        this.add(ui.sidebar);
+    },
+
+    _initTransportationToggles: function(pedestrian, bike, car) {
+        let query = Application.routeService.query;
+        let transport = RouteQuery.Transportation;
+
+        let onToggle = function(mode, button) {
+            if (button.active && query.transportation !== mode)
+                query.transportation = mode;
+        };
+        pedestrian.connect('toggled', onToggle.bind(this, transport.PEDESTRIAN));
+        car.connect('toggled', onToggle.bind(this, transport.CAR));
+        bike.connect('toggled', onToggle.bind(this, transport.BIKE));
+
+        query.connect('updated', function() {
+            switch(query.transportation) {
+            case transport.PEDESTRIAN:
+                pedestrian.active = true;
+                break;
+            case transport.CAR:
+                car.active = true;
+                break;
+            case transport.BIKE:
+                bike.active = true;
+                break;
             }
+        });
+    },
+
+    _createEntry: function(propName, mapView) {
+        let entry = new PlaceEntry.PlaceEntry({ visible: true,
+                                                hexpand: true,
+                                                mapView: mapView });
+        entry.bind_property("place",
+                            Application.routeService.query, propName,
+                            GObject.BindingFlags.BIDIRECTIONAL);
+        return entry;
+    },
+
+    _initInstructionList: function() {
+        let route = Application.routeService.route;
+
+        route.connect('reset', this._clearInstructions.bind(this));
+        route.connect('update', (function() {
+            this._clearInstructions();
+
+            route.turnPoints.forEach((function(turnPoint) {
+                let row = new InstructionRow({ visible:true,
+                                               turnPoint: turnPoint });
+                this._instructionList.add(row);
+            }).bind(this));
         }).bind(this));
+    },
+
+    _clearInstructions: function() {
+        let listBox = this._instructionList;
+        listBox.forall(listBox.remove.bind(listBox));
+    }
+});
+
+const InstructionRow = new Lang.Class({
+    Name: "InstructionRow",
+    Extends: Gtk.ListBoxRow,
+
+    _init: function(params) {
+        this.turnPoint = params.turnPoint;
+        delete params.turnPoint;
+
+        this.parent(params);
+
+        this.visible = true;
+        let ui = Utils.getUIObject('sidebar', ['instruction-box',
+                                               'direction-image',
+                                               'instruction-label']);
+        ui.instructionLabel.label  = this.turnPoint.instruction;
+        ui.directionImage.resource = this.turnPoint.iconResource;
 
-        // now create actors
-        let buttonActor = new GtkClutter.Actor({ contents: 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);
+        this.add(ui.instructionBox);
     }
 });
diff --git a/src/sidebar.ui b/src/sidebar.ui
new file mode 100644
index 0000000..5416e01
--- /dev/null
+++ b/src/sidebar.ui
@@ -0,0 +1,211 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.18.3 -->
+<interface>
+  <requires lib="gtk+" version="3.10"/>
+  <object class="GtkGrid" id="sidebar">
+    <property name="name">sidebar</property>
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="vexpand">True</property>
+    <property name="valign">fill</property>
+    <property name="orientation">vertical</property>
+    <property name="width_request">250</property>
+    <property name="row_spacing">12</property>
+    <child>
+      <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="vexpand">False</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="GtkBox" id="mode-chooser">
+            <property name="visible">True</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="GtkRadioButton" id="mode-bike-toggle">
+                <property name="name">mode-bike-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>
+                <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="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>
+      </object>
+    </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>
+          </object>
+        </child>
+      </object>
+      <packing>
+        <property name="left_attach">0</property>
+        <property name="top_attach">3</property>
+        <property name="width">2</property>
+      </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>
+    <property name="spacing">6</property>
+    <property name="baseline_position">top</property>
+    <child>
+      <object class="GtkImage" id="direction-image">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="xpad">2</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">0</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="instruction-label">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="halign">start</property>
+        <property name="xalign">0</property>
+        <property name="ypad">3</property>
+        <property name="use_underline">True</property>
+        <property name="wrap">True</property>
+        <property name="ellipsize">end</property>
+        <property name="max_width_chars">28</property>
+        <property name="lines">3</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">1</property>
+      </packing>
+    </child>
+  </object>
+</interface>



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]