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

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

commit 7447584d7922c62e799ee5d5927b460616af51b9
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. The patch adds a
    recognizeable Polari logo to the background and a helping text
    for adding connections, enabling accounts or joining a chatroom.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=711832

 data/resources/application.css |   12 +++++++
 src/roomStack.js               |   71 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 82 insertions(+), 1 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index a34a6de..96eddcf 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -119,3 +119,15 @@
 .polari-user-list-button {
     padding: 0px 4px;
 }
+
+.polari-background {
+    opacity: 0.5;
+}
+
+.polari-background-title {
+    font-size: 250%;
+}
+
+.polari-background-description {
+    font-size: larger;
+}
diff --git a/src/roomStack.js b/src/roomStack.js
index 976ca31..465567f 100644
--- a/src/roomStack.js
+++ b/src/roomStack.js
@@ -1,6 +1,7 @@
 const Gio = imports.gi.Gio;
 const Gtk = imports.gi.Gtk;
 
+const AccountsMonitor = imports.accountsMonitor;
 const ChatroomManager = imports.chatroomManager;
 const ChatView = imports.chatView;
 const EntryArea = imports.entryArea;
@@ -83,7 +84,75 @@ const ChatPlaceholder = new Lang.Class({
     Name: 'ChatPlaceholder',
 
     _init: function() {
-        this.widget = new Gtk.Label({ vexpand: true });
+        this._accountsMonitor = AccountsMonitor.getDefault();
+        this._accountsMonitor.connect('accounts-changed', Lang.bind(this, this._checkAccounts));
+
+        this._image = new Gtk.Image({ icon_name: 'polari-symbolic',
+                                      pixel_size: 96, halign: Gtk.Align.END,
+                                      margin_end: 14 });
+
+        this._title = new Gtk.Label({ use_markup: true, halign: Gtk.Align.START,
+                                      margin_start: 14 });
+        this._title.label = '<span letter_spacing="4500">Polari</span>';
+        this._title.get_style_context().add_class('polari-background-title');
+
+        this._description = new Gtk.Label({ halign: Gtk.Align.CENTER, wrap: true,
+                                            margin_top: 24, use_markup: true });
+        this._description.get_style_context().add_class('polari-background-description');
+
+        this._instruction = new Gtk.Label({ halign: Gtk.Align.CENTER,
+                                            use_markup: true, wrap: true });
+
+        this.widget = new Gtk.Grid({ column_homogeneous: true, can_focus: false,
+                                     column_spacing: 18, vexpand: true,
+                                     valign: Gtk.Align.CENTER });
+        this.widget.get_style_context().add_class('polari-background');
+        this.widget.attach(this._image, 0, 0, 1, 1);
+        this.widget.attach(this._title, 1, 0, 1, 1);
+        this.widget.attach(this._description, 0, 1, 2, 1);
+        this.widget.attach(this._instruction, 0, 2, 2, 1);
+        this.widget.show_all();
+
+        this._checkAccounts();
+    },
+
+    _checkAccounts: function() {
+        let accounts = this._accountsMonitor.dupAccounts();
+        if (accounts.length != 0) {
+            let enabledAccount = false;
+            accounts.forEach(function(account) {
+                if (account.enabled) {
+                    enabledAccount = account.enabled;
+                    return;
+                }
+            });
+            if (enabledAccount) {
+                this._addRoomText();
+                return;
+            } else {
+                this._enableAccountText();
+                return;
+            }
+        }
+        this._addAccountText();
+    },
+
+    _addAccountText: function() {
+        this._description.label = "Begin chatting by adding a new connection.";
+        this._instruction.label = "Open " + '<b>' + "Connections" + '</b>'
+                                + " in the application menu.";
+    },
+
+    _enableAccountText: function() {
+        this._description.label = "Your connections are disabled.";
+        this._instruction.label = "Enable them by opening " + '<b>' + "Connections" + '</b>'
+                                + " in the application menu.";
+    },
+
+    _addRoomText: function(am, account) {
+        this._description.label = "Join a room using the "
+                                 + '<b>' + "+" + '</b>' + " button.";
+        this._instruction.label = '';
     }
 });