InstructionRow: Use Templates

https://bugzilla.gnome.org/show_bug.cgi?id=740647

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>

data/ui/instruction-row.ui

+<?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>

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>

src/sidebar.js

@@ -34,6 +34,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;
@@ -41,18 +45,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);
     }
 });