[gnome-boxes] spice-display: Put USB devices in a framed listbox

[Zeeshan Ali Khattak <zeeshanak src gnome org>]

commit 81e7c3432924f69d6bcb76af3d4c9f2d60b1ae69
Author: Zeeshan Ali (Khattak) <zeeshanak gnome org>
Date:   Fri Feb 20 19:13:20 2015 +0000

    spice-display: Put USB devices in a framed listbox
    
    Instead of adding each usb device as separate property, lets add them
    all as one property as a Gtk.ListBox in a Gtk.Frame. This is to make the
    look pretier and resemble the UI mockup more:
    
    https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/boxes/wires/properties-modal.png

 src/spice-display.vala |   20 +++++++++++++++++---
 1 files changed, 17 insertions(+), 3 deletions(-)
---
diff --git a/src/spice-display.vala b/src/spice-display.vala
index 001516a..19f63ba 100644
--- a/src/spice-display.vala
+++ b/src/spice-display.vala
@@ -301,15 +301,27 @@ private class Boxes.SpiceDisplay: Boxes.Display {
                     return strcmp (str_a, str_b);
                 });
 
-                var usb_property = add_property (ref list, _("USB devices"), new Gtk.Label (""));
+                var frame = new Gtk.Frame (null);
+                var listbox = new Gtk.ListBox ();
+                listbox.hexpand = true;
+                frame.add (listbox);
 
                 for (int i = 0; i < devs.length; i++) {
                     var dev = devs[i];
 
+                    var hbox = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
+                    hbox.margin_start = 12;
+                    hbox.margin_end = 12;
+                    hbox.margin_top = 6;
+                    hbox.margin_bottom = 6;
+                    var label = new Gtk.Label (dev.get_description ("%1$s %2$s"));
+                    label.halign = Gtk.Align.START;
+                    hbox.pack_start (label, true, true, 0);
                     var dev_toggle = new Gtk.Switch ();
-                    dev_toggle.halign =  Gtk.Align.START;
+                    dev_toggle.halign = Gtk.Align.END;
+                    hbox.pack_start (dev_toggle, true, true, 0);
+                    listbox.prepend (hbox);
 
-                    usb_property = add_property (ref list, dev.get_description ("    %1$s %2$s"), 
dev_toggle);
                     dev_toggle.active = manager.is_device_connected (dev);
 
                     dev_toggle.notify["active"].connect ( () => {
@@ -334,6 +346,8 @@ private class Boxes.SpiceDisplay: Boxes.Display {
                     });
                 }
 
+                var usb_property = add_property (ref list, _("USB devices"), new Gtk.Label (""), frame);
+
                 manager.device_added.connect ((manager, dev) => {
                     usb_property.refresh_properties ();
                 });