[gnome-boxes] Move DisplayToolbar UI setup to UI file

[Zeeshan Ali Khattak <zeeshanak src gnome org>]

commit befa403ad6f98019657a390a7a1ef0421857e0b1
Author: Zeeshan Ali (Khattak) <zeeshanak gnome org>
Date:   Wed Jan 8 14:00:45 2014 +0000

    Move DisplayToolbar UI setup to UI file
    
    In this case, there is no real advantage (we actually add a few more
    LOC to the class than we remove) but this change will later allow us to
    create the toolbars in other UI files directly. Besides its good to be
    consistent.

 data/gnome-boxes.gresource.xml |    1 +
 data/ui/display-toolbar.ui     |   97 ++++++++++++++++++++++++++++++++++++++++
 src/display-page.vala          |   83 ++++++++++++++++++----------------
 3 files changed, 141 insertions(+), 40 deletions(-)
---
diff --git a/data/gnome-boxes.gresource.xml b/data/gnome-boxes.gresource.xml
index 8fc071f..f2fc8d6 100644
--- a/data/gnome-boxes.gresource.xml
+++ b/data/gnome-boxes.gresource.xml
@@ -6,6 +6,7 @@
     <file>icons/boxes-create.png</file>
     <file>icons/boxes-dark.png</file>
     <file>icons/boxes-gray.png</file>
+    <file preprocess="xml-stripblanks">ui/display-toolbar.ui</file>
     <file preprocess="xml-stripblanks">ui/topbar.ui</file>
     <file preprocess="xml-stripblanks">ui/unattended-setup-box.ui</file>
     <file preprocess="xml-stripblanks">ui/wizard.ui</file>
diff --git a/data/ui/display-toolbar.ui b/data/ui/display-toolbar.ui
new file mode 100644
index 0000000..d959c85
--- /dev/null
+++ b/data/ui/display-toolbar.ui
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.9 -->
+  <template class="BoxesDisplayToolbar" parent="GtkHeaderBar">
+    <property name="visible">True</property>
+    <property name="show-close-button">True</property>
+    <style>
+      <class name="titlebar"/>
+    </style>
+
+    <child>
+      <object class="GtkButton" id="back">
+        <property name="visible">True</property>
+        <property name="valign">center</property>
+        <property name="use-underline">True</property>
+        <signal name="clicked" handler="on_back_clicked"/>
+        <style>
+          <class name="image-button"/>
+        </style>
+
+        <child>
+          <object class="GtkImage" id="back_image">
+            <property name="visible">True</property>
+          </object>
+        </child>
+      </object>
+
+      <packing>
+        <property name="pack-type">start</property>
+      </packing>
+    </child>
+
+    <child>
+      <object class="GtkBox" id="hbox">
+        <property name="visible">True</property>
+        <property name="orientation">horizontal</property>
+        <property name="spacing">0</property>
+        <style>
+          <class name="linked"/>
+        </style>
+
+        <child>
+          <object class="GtkButton" id="fullscreen">
+            <property name="visible">True</property>
+            <property name="valign">center</property>
+            <property name="use-underline">True</property>
+            <signal name="clicked" handler="on_fullscreen_clicked"/>
+            <style>
+              <class name="image-button"/>
+            </style>
+
+            <child>
+              <object class="GtkImage" id="fullscreen_image">
+                <property name="visible">True</property>
+                <property name="icon-name">view-fullscreen-symbolic</property>
+                <property name="icon-size">1</property>
+              </object>
+            </child>
+          </object>
+
+          <packing>
+            <property name="pack-type">end</property>
+          </packing>
+        </child>
+
+        <child>
+          <object class="GtkButton" id="props">
+            <property name="visible">True</property>
+            <property name="valign">center</property>
+            <property name="use-underline">True</property>
+            <signal name="clicked" handler="on_props_clicked"/>
+            <style>
+              <class name="image-button"/>
+            </style>
+
+            <child>
+              <object class="GtkImage" id="props_image">
+                <property name="visible">True</property>
+                <property name="icon-name">preferences-system-symbolic</property>
+                <property name="icon-size">1</property>
+              </object>
+            </child>
+          </object>
+
+          <packing>
+            <property name="pack-type">end</property>
+          </packing>
+        </child>
+      </object>
+
+      <packing>
+        <property name="pack-type">end</property>
+      </packing>
+    </child>
+
+  </template>
+</interface>
diff --git a/src/display-page.vala b/src/display-page.vala
index 34f1521..3c117aa 100644
--- a/src/display-page.vala
+++ b/src/display-page.vala
@@ -2,19 +2,32 @@
 using Gtk;
 using Gdk;
 
+[GtkTemplate (ui = "/org/gnome/Boxes/ui/display-toolbar.ui")]
 private class Boxes.DisplayToolbar: Gtk.HeaderBar {
-    private bool overlay;
-    private bool handle_drag; // Handle drag events to (un)fulscreen the main window
-
-    Gtk.Box end_button_box;
+    public bool overlay { get; construct; }
+    public bool handle_drag { get; construct; } // Handle drag events to (un)fulscreen the main window
+
+    [GtkChild]
+    private Gtk.Image back_image;
+    [GtkChild]
+    private Gtk.Image fullscreen_image;
+    [GtkChild]
+    private Gtk.Button back;
+    [GtkChild]
+    private Gtk.Button fullscreen;
+    [GtkChild]
+    private Gtk.Button props;
 
     public DisplayToolbar (bool overlay, bool handle_drag) {
+        Object (overlay: overlay,
+                handle_drag: handle_drag);
+    }
+
+    construct {
         add_events (Gdk.EventMask.POINTER_MOTION_MASK |
                     Gdk.EventMask.BUTTON_PRESS_MASK |
                     Gdk.EventMask.BUTTON_RELEASE_MASK);
 
-        this.overlay = overlay;
-        this.handle_drag = handle_drag;
         if (overlay) {
             get_style_context ().add_class ("toolbar");
             get_style_context ().add_class ("osd");
@@ -22,46 +35,21 @@ private class Boxes.DisplayToolbar: Gtk.HeaderBar {
             get_style_context ().add_class (Gtk.STYLE_CLASS_MENUBAR);
             show_close_button = true;
         }
-        get_style_context ().add_class ("titlebar");
-
-        end_button_box = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
-        pack_end (end_button_box);
-        end_button_box.get_style_context ().add_class ("linked");
 
-        var back_icon = (get_direction () == Gtk.TextDirection.RTL)? "go-previous-rtl-symbolic" :
-                                                                     "go-previous-symbolic";
-        var back = add_image_button (back_icon, true);
-        back.clicked.connect ((button) => { App.app.set_state (UIState.COLLECTION); });
+        back_image.icon_name = (get_direction () == Gtk.TextDirection.RTL)? "go-previous-rtl-symbolic" :
+                                                                            "go-previous-symbolic";
+        if (!overlay) {
+            back.get_style_context ().add_class ("raised");
+            fullscreen.get_style_context ().add_class ("raised");
+            props.get_style_context ().add_class ("raised");
+        }
 
-        var fullscreen = add_image_button ("view-fullscreen-symbolic", false);
         App.app.notify["fullscreen"].connect_after ( () => {
-            var image = fullscreen.get_image() as Gtk.Image;
             if (App.app.fullscreen)
-                image.icon_name = "view-restore-symbolic";
+                fullscreen_image.icon_name = "view-restore-symbolic";
             else
-                image.icon_name = "view-fullscreen-symbolic";
+                fullscreen_image.icon_name = "view-fullscreen-symbolic";
         });
-        fullscreen.clicked.connect ((button) => { App.app.fullscreen = !App.app.fullscreen; });
-
-        var props = add_image_button ("preferences-system-symbolic", false);
-        props.clicked.connect ((button) => { App.app.set_state (UIState.PROPERTIES); });
-    }
-
-    private Gtk.Button add_image_button (string icon_name, bool pack_start) {
-        var button = new Gtk.Button ();
-        var img = new Gtk.Image.from_icon_name (icon_name, Gtk.IconSize.MENU);
-        img.show ();
-        button.image = img;
-        button.valign = Gtk.Align.CENTER;
-        if (pack_start)
-            this.pack_start (button);
-        else
-            end_button_box.pack_end (button);
-
-        if (!overlay)
-            button.get_style_context ().add_class ("raised");
-        button.get_style_context ().add_class ("image-button");
-        return button;
     }
 
     private bool button_down;
@@ -128,6 +116,21 @@ private class Boxes.DisplayToolbar: Gtk.HeaderBar {
             return base.motion_notify_event (event);
         return false;
     }
+
+    [GtkCallback]
+    private void on_back_clicked () {
+        App.app.set_state (UIState.COLLECTION);
+    }
+
+    [GtkCallback]
+    private void on_fullscreen_clicked () {
+        App.app.fullscreen = !App.app.fullscreen;
+    }
+
+    [GtkCallback]
+    private void on_props_clicked () {
+        App.app.set_state (UIState.PROPERTIES);
+    }
 }
 
 private class Boxes.DisplayPage: GLib.Object {