[gnome-maps] layersPopover: Convert to composite template

[Jonas Danielsson <jonasdn src gnome org>]

commit 68fe080f94bf5e4e2e5316ae80036325fb67ef07
Author: Alaf Azam <alafazam gmail com>
Date:   Wed Jan 27 00:20:22 2016 +0530

    layersPopover: Convert to composite template
    
    https://bugzilla.gnome.org/show_bug.cgi?id=760656

 data/ui/layers-popover.ui |  134 +++++++++++++++++++++++----------------------
 src/layersPopover.js      |   29 ++++-----
 2 files changed, 82 insertions(+), 81 deletions(-)
---
diff --git a/data/ui/layers-popover.ui b/data/ui/layers-popover.ui
index 3ab634c..c8f4150 100644
--- a/data/ui/layers-popover.ui
+++ b/data/ui/layers-popover.ui
@@ -1,81 +1,85 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <!-- interface-requires gtk+ 3.10 -->
-  <object class="GtkGrid" id="grid">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="halign">center</property>
-    <property name="valign">center</property>
-    <property name="row_spacing">5</property>
+  <template class="Gjs_LayersPopover" parent="GtkPopover">
     <child>
-      <object class="GtkRadioButton" id="street-layer-button">
+      <object class="GtkGrid" id="grid">
         <property name="visible">True</property>
-        <property name="can-focus">True</property>
-        <property name="action-name">win.map-type</property>
-        <property name="action-target">"STREET"</property>
-        <property name="draw-indicator">False</property>
-        <style>
-          <class name="layer-radio-button"/>
-        </style>
+        <property name="can_focus">False</property>
+        <property name="halign">center</property>
+        <property name="valign">center</property>
+        <property name="row_spacing">5</property>
         <child>
-          <object class="GtkImage" id="street-layer-image">
+          <object class="GtkRadioButton" id="streetLayerButton">
             <property name="visible">True</property>
-            <property name="pixbuf">maptype-street.png</property>
+            <property name="can-focus">True</property>
+            <property name="action-name">win.map-type</property>
+            <property name="action-target">"STREET"</property>
+            <property name="draw-indicator">False</property>
+            <style>
+              <class name="layer-radio-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="streetLayerImage">
+                <property name="visible">True</property>
+                <property name="pixbuf">data/media/maptype-street.png</property>
+              </object>
+            </child>
           </object>
+          <packing>
+            <property name="left-attach">0</property>
+            <property name="top-attach">0</property>
+          </packing>
         </child>
-      </object>
-      <packing>
-        <property name="left-attach">0</property>
-        <property name="top-attach">0</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkRadioButton" id="aerial-layer-button">
-        <property name="visible">True</property>
-        <property name="can-focus">True</property>
-        <property name="action-name">win.map-type</property>
-        <property name="action-target">"AERIAL"</property>
-        <property name="draw-indicator">False</property>
-        <style>
-          <class name="layer-radio-button"/>
-        </style>
         <child>
-          <object class="GtkImage" id="aerial-layer-image">
+          <object class="GtkRadioButton" id="aerialLayerButton">
             <property name="visible">True</property>
-            <property name="pixbuf">maptype-aerial.png</property>
+            <property name="can-focus">True</property>
+            <property name="action-name">win.map-type</property>
+            <property name="action-target">"AERIAL"</property>
+            <property name="draw-indicator">False</property>
+            <style>
+              <class name="layer-radio-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="aerialLayerImage">
+                <property name="visible">True</property>
+                <property name="pixbuf">data/media/maptype-aerial.png</property>
+              </object>
+            </child>
           </object>
+          <packing>
+            <property name="left-attach">0</property>
+            <property name="top-attach">1</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkListBox" id="layersListBox">
+            <property name="name">layers-list-box</property>
+            <property name="visible">false</property>
+            <property name="can_focus">False</property>
+            <property name="selection-mode">none</property>
+            <style>
+              <class name="frame"/>
+            </style>
+          </object>
+          <packing>
+            <property name="left-attach">0</property>
+            <property name="top-attach">2</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkButton" id="loadLayerButton">
+            <property name="visible">True</property>
+            <property name="can-focus">True</property>
+            <property name="label" translatable="yes">Load Map Layer</property>
+          </object>
+          <packing>
+            <property name="left-attach">0</property>
+            <property name="top-attach">3</property>
+          </packing>
         </child>
       </object>
-      <packing>
-        <property name="left-attach">0</property>
-        <property name="top-attach">1</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkListBox" id="layers-list-box">
-        <property name="name">layers-list-box</property>
-        <property name="visible">false</property>
-        <property name="can_focus">False</property>
-        <property name="selection-mode">none</property>
-        <style>
-          <class name="frame"/>
-        </style>
-      </object>
-      <packing>
-        <property name="left-attach">0</property>
-        <property name="top-attach">2</property>
-      </packing>
-    </child>
-    <child>
-      <object class="GtkButton" id="load-layer-button">
-        <property name="visible">True</property>
-        <property name="can-focus">True</property>
-        <property name="label" translatable="yes">Load Map Layer</property>
-      </object>
-      <packing>
-        <property name="left-attach">0</property>
-        <property name="top-attach">3</property>
-      </packing>
     </child>
-  </object>
+  </template>
 </interface>
diff --git a/src/layersPopover.js b/src/layersPopover.js
index 328e144..7612cb2 100644
--- a/src/layersPopover.js
+++ b/src/layersPopover.js
@@ -60,47 +60,44 @@ const ShapeLayerFileChooser = new Lang.Class({
 const LayersPopover = new Lang.Class({
     Name: 'LayersPopover',
     Extends: Gtk.Popover,
+    Template: 'resource:///org/gnome/Maps/ui/layers-popover.ui',
+    InternalChildren: [ 'streetLayerButton',
+                        'aerialLayerButton',
+                        'layersListBox',
+                        'loadLayerButton' ],
 
     _init: function(params) {
         this._mapView = params.mapView;
         delete params.mapView;
 
-        this.ui = Utils.getUIObject('layers-popover',
-                                    [ 'grid',
-                                      'street-layer-button',
-                                      'aerial-layer-button',
-                                      'layers-list-box',
-                                      'load-layer-button' ]);
-
         this.parent({ width_request: 200,
                       no_show_all: true,
                       transitions_enabled: false,
                       visible: false });
 
-        this.ui.aerialLayerButton.join_group(this.ui.streetLayerButton);
+        this._aerialLayerButton.join_group(this._streetLayerButton);
 
         this.get_style_context().add_class('maps-popover');
-        this.add(this.ui.grid);
 
-        this.ui.layersListBox.bind_model(this._mapView.shapeLayerStore,
+        this._layersListBox.bind_model(this._mapView.shapeLayerStore,
                                          this._listBoxCreateWidget.bind(this));
-        this.ui.layersListBox.connect('row-activated', (function(lb, row) {
+        this._layersListBox.connect('row-activated', (function(lb, row) {
             this._mapView.gotoBBox(row.shapeLayer.bbox);
         }).bind(this));
 
-        this.ui.layersListBox.set_header_func(function(row, before) {
+        this._layersListBox.set_header_func(function(row, before) {
             let header = before ? new Gtk.Separator() : null;
             row.set_header(header);
         });
 
-        this.ui.loadLayerButton.connect('clicked',
+        this._loadLayerButton.connect('clicked',
                                         this._onLoadLayerClicked.bind(this));
     },
 
     _onRemoveClicked: function(row, button) {
         this._mapView.removeShapeLayer(row.shapeLayer);
-        if (this.ui.layersListBox.get_children().length <= 0)
-            this.ui.layersListBox.hide();
+        if (this._layersListBox.get_children().length <= 0)
+            this._layersListBox.hide();
     },
 
     _onLoadLayerClicked: function(button) {
@@ -120,7 +117,7 @@ const LayersPopover = new Lang.Class({
         let row = new ShapeLayerRow({ shapeLayer: shapeLayer });
         row.closeButton.connect('clicked',
                                 this._onRemoveClicked.bind(this, row));
-        this.ui.layersListBox.show();
+        this._layersListBox.show();
         return row;
     }
 });