[gnome-boxes] Make properties sidebar look like mockup

[Alexander Larsson <alexl src gnome org>]

commit 8820fc5499f6efd09b56b091956037d1aa275a9b
Author: Alexander Larsson <alexl redhat com>
Date:   Fri Jun 8 15:33:46 2012 +0200

    Make properties sidebar look like mockup
    
    https://bugzilla.gnome.org/show_bug.cgi?id=677713

 data/gtk-style.css         |   22 +++++++++++++++++++++-
 data/icons/Makefile.am     |    1 +
 data/icons/boxes-arrow.svg |    6 ++++++
 src/sidebar.vala           |    1 +
 4 files changed, 29 insertions(+), 1 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index 3b6e7eb..4b85579 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -1,6 +1,6 @@
 @define-color boxes_bg_color shade (@theme_bg_color, 0.5);
 @define-color boxes_bg2_color mix (@theme_bg_color, @boxes_bg_color, 0.5);
- define-color boxes_selected_color #5f8dd3;
+ define-color boxes_selected_color #3465a4;
 
 #TopbarLabel {
     font-size: 14;
@@ -17,6 +17,26 @@
     -GtkWidget-separator-height: 1;
 }
 
+.sidebar GtkTreeView:selected {
+    background-color: @boxes_selected_color;
+    border-width: 2px 8px 2px 0;
+    border-color: transparent;
+    border-image-source: url("assets/boxes-arrow.svg");
+    border-image-slice: 0 8 0 0;
+    border-image-width: 2px 8px 2px 0;
+    border-image-repeat: stretch;
+    border-style: solid;
+}
+
+.sidebar GtkTreeView {
+    -GtkTreeView-vertical-separator: 8;
+}
+
+.sidebar .cell {
+    font-size: 14;
+    font-weight: bold;
+}
+
 .view,
 GtkClutterOffscreen,
 .boxes-bg {
diff --git a/data/icons/Makefile.am b/data/icons/Makefile.am
index 0ad2aae..b9b89f4 100644
--- a/data/icons/Makefile.am
+++ b/data/icons/Makefile.am
@@ -19,6 +19,7 @@ noinst_DATA =					\
 
 assetsdir = $(datadir)/gnome-boxes/style/assets
 assets_DATA =					\
+	boxes-arrow.svg				\
 	boxes-dark.png				\
 	boxes-gray.png				\
 	$(NULL)
diff --git a/data/icons/boxes-arrow.svg b/data/icons/boxes-arrow.svg
new file mode 100644
index 0000000..483f89a
--- /dev/null
+++ b/data/icons/boxes-arrow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg width="7px" height="30px">
+    <path style="stroke:none;fill:#3465a4" d="m 0 0 l 7 15 l -7 15 z"/>
+</svg>
diff --git a/src/sidebar.vala b/src/sidebar.vala
index 3289e1a..00a3ae9 100644
--- a/src/sidebar.vala
+++ b/src/sidebar.vala
@@ -169,6 +169,7 @@ private class Boxes.Sidebar: Boxes.UI {
         gtk_actor = new GtkClutter.Actor.with_contents (notebook);
         gtk_actor.name = "sidebar";
         bin_actor.add_child (gtk_actor);
+        notebook.get_style_context ().add_class (Gtk.STYLE_CLASS_SIDEBAR);
         notebook.get_style_context ().add_class ("boxes-bg");
         notebook.set_size_request ((int) width, 100);
         notebook.show_tabs = false;