[gnome-maps/wip/mattiasb/templates: 1/2] InstructionRow: Use Templates

[Mattias Bengtsson <mattiasb src gnome org>]

commit c7ed77ccd574e142be7ec26237ec595a523d21b5
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Thu Mar 12 22:06:15 2015 +0100

    InstructionRow: Use Templates

 data/org.gnome.Maps.data.gresource.xml |    1 +
 data/ui/instruction-row.ui             |   71 ++++++++++++++++++++++++++++++++
 data/ui/sidebar.ui                     |   63 ----------------------------
 src/sidebar.js                         |   17 +++----
 4 files changed, 79 insertions(+), 73 deletions(-)
---
diff --git a/data/org.gnome.Maps.data.gresource.xml b/data/org.gnome.Maps.data.gresource.xml
index d775af4..6ba6040 100644
--- a/data/org.gnome.Maps.data.gresource.xml
+++ b/data/org.gnome.Maps.data.gresource.xml
@@ -7,6 +7,7 @@
     <file preprocess="xml-stripblanks">ui/check-in-dialog.ui</file>
     <file preprocess="xml-stripblanks">ui/context-menu.ui</file>
     <file preprocess="xml-stripblanks">ui/favorites-popover.ui</file>
+    <file preprocess="xml-stripblanks">ui/instruction-row.ui</file>
     <file preprocess="xml-stripblanks">ui/layers-popover.ui</file>
     <file preprocess="xml-stripblanks">ui/location-service-notification.ui</file>
     <file preprocess="xml-stripblanks">ui/main-window.ui</file>
diff --git a/data/ui/instruction-row.ui b/data/ui/instruction-row.ui
new file mode 100644
index 0000000..72ed4a1
--- /dev/null
+++ b/data/ui/instruction-row.ui
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<interface>
+  <requires lib="gtk+" version="3.14"/>
+  <template class="Gjs_InstructionRow" parent="GtkListBoxRow">
+    <property name="visible">True</property>
+    <child>
+      <object class="GtkBox" id="instructionBox">
+        <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="directionImage">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="margin-start">2</property>
+            <property name="margin-end">2</property>
+            <!-- width: 32 + spacing * 2 -->
+            <property name="width-request">44</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="instructionLabel">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">start</property>
+            <!-- Somehow we need this xalign, otherwise multi-line -->
+            <!-- labels does not get left-aligned. -->
+            <property name="xalign">0</property>
+            <property name="margin-top">3</property>
+            <property name="margin-bottom">3</property>
+            <property name="use_underline">True</property>
+            <property name="wrap">True</property>
+            <property name="ellipsize">end</property>
+            <property name="width_chars">20</property>
+            <property name="max_width_chars">20</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>
+        <child>
+          <object class="GtkLabel" id="distanceLabel">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="halign">end</property>
+            <property name="use_underline">True</property>
+            <property name="wrap">True</property>
+            <property name="lines">3</property>
+            <property name="margin_end">5</property>
+          </object>
+          <packing>
+            <property name="expand">True</property>
+            <property name="fill">True</property>
+            <property name="position">3</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/data/ui/sidebar.ui b/data/ui/sidebar.ui
index 7ce3c1f..3103a50 100644
--- a/data/ui/sidebar.ui
+++ b/data/ui/sidebar.ui
@@ -183,67 +183,4 @@
       </object>
     </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="margin-start">2</property>
-        <property name="margin-end">2</property>
-        <!-- width: 32 + spacing * 2 -->
-        <property name="width-request">44</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>
-        <!-- Somehow we need this xalign, otherwise multi-line -->
-        <!-- labels does not get left-aligned. -->
-        <property name="xalign">0</property>
-        <property name="margin-top">3</property>
-        <property name="margin-bottom">3</property>
-        <property name="use_underline">True</property>
-        <property name="wrap">True</property>
-        <property name="ellipsize">end</property>
-        <property name="width_chars">20</property>
-        <property name="max_width_chars">20</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>
-    <child>
-      <object class="GtkLabel" id="distance-label">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="halign">end</property>
-        <property name="use_underline">True</property>
-        <property name="wrap">True</property>
-        <property name="lines">3</property>
-        <property name="margin_end">5</property>
-      </object>
-      <packing>
-        <property name="expand">True</property>
-        <property name="fill">True</property>
-        <property name="position">3</property>
-      </packing>
-    </child>
-  </object>
 </interface>
diff --git a/src/sidebar.js b/src/sidebar.js
index 924e43a..3f8a285 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -35,6 +35,10 @@ const Utils = imports.utils;
 const InstructionRow = new Lang.Class({
     Name: "InstructionRow",
     Extends: Gtk.ListBoxRow,
+    Template: 'resource:///org/gnome/Maps/ui/instruction-row.ui',
+    InternalChildren: [ 'directionImage',
+                        'instructionLabel',
+                        'distanceLabel' ],
 
     _init: function(params) {
         this.turnPoint = params.turnPoint;
@@ -42,18 +46,11 @@ const InstructionRow = new Lang.Class({
 
         this.parent(params);
 
-        this.visible = true;
-        let ui = Utils.getUIObject('sidebar', ['instruction-box',
-                                               'direction-image',
-                                               'instruction-label',
-                                               'distance-label']);
-        ui.instructionLabel.label = this.turnPoint.instruction;
-        ui.directionImage.icon_name = this.turnPoint.iconName;
+        this._instructionLabel.label = this.turnPoint.instruction;
+        this._directionImage.icon_name = this.turnPoint.iconName;
 
         if (this.turnPoint.distance > 0)
-            ui.distanceLabel.label = Utils.prettyDistance(this.turnPoint.distance);
-
-        this.add(ui.instructionBox);
+            this._distanceLabel.label = Utils.prettyDistance(this.turnPoint.distance);
     }
 });