GNOME.org
 

[gnome-boxes] Add ListViewRow widget

commit 2913edf258c3cebd5a4976f2027ce13702996968
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Mon Jul 20 14:15:45 2015 +0200

    Add ListViewRow widget
    
    In the following commit ListView will be added and it'll use this
    class/widget to show each machine as a row.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=733252

 data/gnome-boxes.gresource.xml |    1 +
 data/gtk-style.css             |   46 +++++++++++++
 data/ui/list-view-row.ui       |  129 +++++++++++++++++++++++++++++++++++
 src/Makefile.am                |    1 +
 src/list-view-row.vala         |  147 ++++++++++++++++++++++++++++++++++++++++
 5 files changed, 324 insertions(+), 0 deletions(-)
---
diff --git a/data/gnome-boxes.gresource.xml b/data/gnome-boxes.gresource.xml
index 3db3ddd..6385c4f 100644
--- a/data/gnome-boxes.gresource.xml
+++ b/data/gnome-boxes.gresource.xml
@@ -14,6 +14,7 @@
     <file preprocess="xml-stripblanks">ui/empty-boxes.ui</file>
     <file preprocess="xml-stripblanks">ui/editable-entry.ui</file>
     <file preprocess="xml-stripblanks">ui/resource-graph.ui</file>
+    <file preprocess="xml-stripblanks">ui/list-view-row.ui</file>
     <file preprocess="xml-stripblanks">ui/notification.ui</file>
     <file preprocess="xml-stripblanks">ui/properties-toolbar.ui</file>
     <file preprocess="xml-stripblanks">ui/properties-window.ui</file>
diff --git a/data/gtk-style.css b/data/gtk-style.css
index 8a4e0ce..e3667b1 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -165,3 +165,49 @@ BoxesResourceGraph {
 .boxes-toplevel {
     background-color: @theme_bg_color;
 }
+
+.boxes-list-box > .list-row.button {
+    background-color: @theme_bg_color;
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    border-color: @boxes_bg_color;
+}
+
+.boxes-list-box > .list-row.button:hover {
+    background-color: shade (@theme_bg_color, 1.02);
+    color: @theme_fg_color;
+}
+
+.boxes-list-box > .list-row.button:insensitive {
+    background-color: @insensitive_bg_color;
+    color: @insensitive_fg_color;
+    border-color: @insensitive_bg_color;
+}
+
+.boxes-list-box > .list-row.button:active {
+    background-color: shade (@theme_bg_color, 0.915);
+}
+
+.boxes-list-box > .list-row.button:selected {
+    background-color: @theme_selected_bg_color;
+    color: @theme_selected_fg_color;
+}
+
+.boxes-list-box > .list-row.button:selected:hover {
+    background-color: shade (@theme_selected_bg_color, 1.02);
+    color: @theme_selected_fg_color;
+}
+
+.boxes-list-box > .list-row.button:selected:insensitive {
+    background-color: @insensitive_selected_bg_color;
+    color: @insensitive_fg_color;
+    border-color: @insensitive_bg_color;
+}
+
+.boxes-list-box > .list-row.button:selected:active {
+    background-color: shade (@theme_selected_bg_color, 0.915);
+}
+
+.slow-spinner {
+    animation-duration: 2s;
+}
diff --git a/data/ui/list-view-row.ui b/data/ui/list-view-row.ui
new file mode 100644
index 0000000..38fd108
--- /dev/null
+++ b/data/ui/list-view-row.ui
@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.9 -->
+  <template class="BoxesListViewRow" parent="GtkBox">
+    <property name="visible">True</property>
+        <property name="width-request">848</property>
+    <property name="margin-start">12</property>
+    <property name="margin-end">24</property>
+    <property name="margin-top">4</property>
+    <property name="margin-bottom">4</property>
+    <property name="orientation">horizontal</property>
+    <property name="spacing">16</property>
+
+    <child>
+      <object class="GtkCheckButton" id="selection_button">
+        <property name="visible">False</property>
+        <property name="can-focus">False</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+      </packing>
+    </child>
+
+    <child>
+      <object class="GtkStack" id="stack">
+        <property name="visible">True</property>
+        <child>
+          <object class="GtkImage" id="thumbnail">
+            <property name="visible">True</property>
+          </object>
+
+          <packing>
+            <property name="name">thumbnail</property>
+          </packing>
+        </child>
+
+        <child>
+          <object class="GtkSpinner" id="spinner">
+            <property name="visible">True</property>
+            <property name="height-request">8</property>
+            <property name="width-request">8</property>
+            <property name="halign">0.5</property>
+            <property name="valign">0.5</property>
+            <style>
+              <class name="slow-spinner"/>
+            </style>
+          </object>
+
+          <packing>
+            <property name="name">spinner</property>
+          </packing>
+        </child>
+      </object>
+
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+      </packing>
+    </child>
+
+    <child>
+      <object class="GtkImage" id="favorite">
+        <property name="visible">True</property>
+        <property name="width-request">16</property>
+        <property name="height-request">16</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+      </packing>
+    </child>
+
+    <child>
+      <object class="GtkLabel" id="machine_name">
+        <property name="visible">True</property>
+        <property name="width-request">192</property>
+        <property name="max-width-chars">0</property>
+        <property name="justify">left</property>
+        <property name="halign">start</property>
+        <property name="valign">center</property>
+        <property name="ellipsize">end</property>
+        <property name="xalign">0.0</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+      </packing>
+    </child>
+
+    <child>
+      <object class="GtkLabel" id="info_label">
+        <property name="visible">True</property>
+        <property name="max-width-chars">32</property>
+        <property name="justify">left</property>
+        <property name="hexpand">True</property>
+        <property name="vexpand">True</property>
+        <property name="halign">start</property>
+        <property name="valign">center</property>
+        <property name="ellipsize">end</property>
+        <property name="xalign">0.0</property>
+        <style>
+          <class name="dim-label"/>
+        </style>
+      </object>
+      <packing>
+        <property name="expand">True</property>
+        <property name="fill">True</property>
+      </packing>
+    </child>
+
+    <child>
+      <object class="GtkLabel" id="state_label">
+        <property name="visible">True</property>
+        <property name="width-request">192</property>
+        <property name="max-width-chars">0</property>
+        <property name="justify">right</property>
+        <property name="halign">end</property>
+        <property name="valign">center</property>
+        <property name="ellipsize">end</property>
+        <property name="xalign">1.0</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+      </packing>
+    </child>
+  </template>
+</interface>
diff --git a/src/Makefile.am b/src/Makefile.am
index 015d050..c86a64a 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -119,6 +119,7 @@ gnome_boxes_SOURCES =                               \
        libvirt-broker.vala                     \
        libvirt-machine.vala                    \
        libvirt-machine-properties.vala         \
+       list-view-row.vala                      \
        machine.vala                            \
        machine-thumbnailer.vala                \
        main.vala                               \
diff --git a/src/list-view-row.vala b/src/list-view-row.vala
new file mode 100644
index 0000000..29ec7bb
--- /dev/null
+++ b/src/list-view-row.vala
@@ -0,0 +1,147 @@
+// This file is part of GNOME Boxes. License: LGPLv2+
+using Gtk;
+
+[GtkTemplate (ui = "/org/gnome/Boxes/ui/list-view-row.ui")]
+private class Boxes.ListViewRow: Gtk.Box {
+    public const int SCREENSHOT_WIDTH = 60;
+    public const int SCREENSHOT_HEIGHT = 45;
+    public const int CENTERED_EMBLEM_SIZE = 16;
+    public const int EMBLEM_SIZE = 16;
+    public const Gdk.RGBA FRAME_BORDER_COLOR = { 0x81 / 255.0, 0x85 / 255.0, 0x84 / 255.0, 1.0 };
+    public const Gdk.RGBA FRAME_BACKGROUND_COLOR = { 0x4b / 255.0, 0x50 / 255.0, 0x50 / 255.0, 1.0 };
+
+    public bool _selection_mode;
+    public bool selection_mode {
+        get { return _selection_mode; }
+        set {
+            _selection_mode = value;
+
+            selection_button.visible = _selection_mode;
+
+            if (!_selection_mode)
+                selected = false;
+        }
+        default = false ;
+    }
+
+    public bool _selected;
+    public bool selected {
+        get { return _selected; }
+        set { _selected = selection_mode && value; }
+        default = false;
+    }
+
+    public CollectionItem item { get; private set; }
+    private Machine machine {
+        get { return item as Machine; }
+    }
+
+    [GtkChild]
+    private Gtk.CheckButton selection_button;
+    [GtkChild]
+    private Gtk.Stack stack;
+    [GtkChild]
+    private Gtk.Image thumbnail;
+    [GtkChild]
+    private Gtk.Spinner spinner;
+    [GtkChild]
+    private Gtk.Image favorite;
+    [GtkChild]
+    private Gtk.Label machine_name;
+    [GtkChild]
+    private Gtk.Label info_label;
+    [GtkChild]
+    private Gtk.Label state_label;
+
+    private Boxes.MachineThumbnailer thumbnailer;
+
+    private Binding selected_binding;
+
+    public ListViewRow (CollectionItem item) {
+        this.item = item;
+
+        thumbnailer = new Boxes.MachineThumbnailer (machine,
+                                                    SCREENSHOT_WIDTH, SCREENSHOT_HEIGHT,
+                                                    CENTERED_EMBLEM_SIZE, EMBLEM_SIZE,
+                                                    FRAME_BORDER_COLOR, FRAME_BACKGROUND_COLOR);
+        thumbnailer.favorite_emblem_enabled = false;
+        thumbnailer.notify["thumbnail"].connect (() => {
+            thumbnail.set_from_pixbuf (thumbnailer.thumbnail);
+        });
+        thumbnail.set_from_pixbuf (thumbnailer.thumbnail);
+
+        selected_binding = bind_property ("selected", selection_button, "active", 
BindingFlags.BIDIRECTIONAL);
+
+        machine.config.notify["categories"].connect (update_favorite);
+        machine.notify["under-construction"].connect (update_thumbnail);
+        machine.notify["name"].connect (update_name);
+        machine.notify["info"].connect (update_info);
+        machine.notify["state"].connect (update_state);
+
+        update_thumbnail ();
+        update_name ();
+        update_favorite ();
+        update_info ();
+        update_state ();
+    }
+
+    private void update_thumbnail () {
+        if (machine.under_construction) {
+            stack.visible_child = spinner;
+            spinner.start ();
+            spinner.visible = true;
+        }
+        else {
+            stack.visible_child = thumbnail;
+            spinner.stop ();
+        }
+    }
+
+    private void update_favorite () {
+        if ("favorite" in machine.config.categories)
+            favorite.set_from_icon_name ("starred-symbolic", Gtk.IconSize.MENU);
+        else
+            favorite.clear ();
+    }
+
+    private void update_name () {
+        machine_name.label = machine.name;
+    }
+
+    private void update_info () {
+        if (machine is RemoteMachine) {
+            var remote_machine = machine as RemoteMachine;
+            info_label.label = remote_machine.source.uri;
+
+            return;
+        }
+
+        info_label.label = machine.info;
+    }
+
+    private void update_state () {
+        if (machine is RemoteMachine) {
+            state_label.label = machine.is_connected ? _("connected"): _("disconnected");
+            state_label.sensitive = machine.is_connected;
+
+            return;
+        }
+
+        if (machine.is_running) {
+            state_label.label = _("running");
+            state_label.sensitive = true;
+
+            return;
+        }
+
+        if (machine.is_on) {
+            state_label.label = _("paused");
+            state_label.sensitive = false;
+
+            return;
+        }
+
+        state_label.label = _("powered off");
+        state_label.sensitive = false;
+    }
+}
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]