[polari/wip/bastianilso/initial-setup: 4/4] roomStack: add visuals to chatPlaceholder

[Bastian Ilsø Hougaard <bastianilso src gnome org>]

commit 7198fd43b19cb60c0ca8a4304b5dd27067e5468c
Author: Bastian Ilsø <bastianilso src gnome org>
Date:   Thu Jun 4 16:55:01 2015 +0200

    roomStack: add visuals to chatPlaceholder
    
    Currently there is a lot of empty grey space when Polari's
    main window is started with no rooms in it. It might not be
    immediately obvious what purpose the window serves. This adds a
    recognizeable Polari logo to the background and a helping text
    that rooms can be joined using the '+' button.

 data/resources/application.css |    2 +-
 src/roomStack.js               |   16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index 3918a08..ba03021 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -120,6 +120,6 @@
     padding: 0px 4px;
 }
 
-.polari-welcome-message {
+.polari-welcome-message, .background-title {
     font-size: 300%;
 }
diff --git a/src/roomStack.js b/src/roomStack.js
index 976ca31..2cb40f5 100644
--- a/src/roomStack.js
+++ b/src/roomStack.js
@@ -83,7 +83,21 @@ const ChatPlaceholder = new Lang.Class({
     Name: 'ChatPlaceholder',
 
     _init: function() {
-        this.widget = new Gtk.Label({ vexpand: true });
+        this.widget = new Gtk.Grid({ column_homogeneous: true, can_focus: false,
+                                     row_spacing: 6, column_spacing: 18, vexpand: true,
+                                     valign: Gtk.Align.CENTER, opacity: 0.5});
+        let image = new Gtk.Image({ icon_name: 'polari-symbolic', pixel_size: 128,
+                                    halign: Gtk.Align.END, margin_end: 14});
+        let title = new Gtk.Label({ use_markup: true, halign: Gtk.Align.START,
+                                    margin_start: 14 });
+        title.label = '<span letter_spacing="4500">Polari</span>';
+        title.get_style_context().add_class('background-title');
+        let description = new Gtk.Label({ label: 'Join a room using the + button.',
+                                          halign: Gtk.Align.CENTER, margin_top: 6});
+        this.widget.attach(image, 0, 0, 1, 1);
+        this.widget.attach(title, 1, 0, 1, 1);
+        this.widget.attach(description, 0, 1, 2, 1);
+        this.widget.show_all();
     }
 });