[polari] roomStack: add visuals to chatPlaceholder

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

commit c824ad3ec37d482ea52a03ba0e59956b70e38a58
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               |   62 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 2 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..dae4c6d 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,8 +84,65 @@ 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));
+
+        let image = new Gtk.Image({ icon_name: 'polari-symbolic',
+                                      pixel_size: 96, 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('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._instruction.connect('activate-link', Lang.bind(this,
+            function(label, actionName) {
+                let app = Gio.Application.get_default();
+                let action = app.lookup_action(actionName);
+                if (action)
+                    action.activate(null);
+                return action != null;
+            }));
+
+        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(image, 0, 0, 1, 1);
+        this.widget.attach(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) {
+            this._description.label = "Begin chatting by adding a new connection.";
+            /* translators: This will be used in the phrase: "Open Connections in the application menu" */
+            let href = '<a href="connections">%s</a>'.format(_("Connections"));
+            this._instruction.label = _("Open %s in the application menu.").format(href);
+
+        } else if (accounts.some(function(a) { return a.enabled; })) {
+            this._description.label = _("Join a room using the + button.");
+            this._instruction.label = '';
+
+        } else {
+            this._description.label = "Your connections are disabled.";
+            /* translators: This will be used in the phrase: "Enable them by opening Connections in the 
application menu" */
+            let href = '<a href="connections">%s</a>'.format(_("Connections"));
+            this._instruction.label = _("Enable them by opening %s in the application menu.").format(href);
+        }
+    },
 });
 
 const RoomView = new Lang.Class({