[polari/wip/dmoelgaard/initial-setup: 9/12] initialSetup:

[Florian Müllner <fmuellner src gnome org>]

commit 651193b805526febffcf26a5b6f82e59a0577340
Author: Danny Mølgaard <moelgaard dmp gmail com>
Date:   Wed Dec 14 21:58:11 2016 +0100

    initialSetup:

 data/org.gnome.Polari.data.gresource.xml |    1 +
 data/resources/application.css           |    8 ++
 data/resources/initial-setup-window.ui   |  139 ++++++++++++++++++++++++++++++
 src/initialSetup.js                      |  123 ++++++++++++++++++++++++++
 src/org.gnome.Polari.src.gresource.xml   |    1 +
 5 files changed, 272 insertions(+), 0 deletions(-)
---
diff --git a/data/org.gnome.Polari.data.gresource.xml b/data/org.gnome.Polari.data.gresource.xml
index f06c123..a836bc1 100644
--- a/data/org.gnome.Polari.data.gresource.xml
+++ b/data/org.gnome.Polari.data.gresource.xml
@@ -16,5 +16,6 @@
     <file alias="ui/server-room-list.ui" preprocess="xml-stripblanks">resources/server-room-list.ui</file>
     <file alias="ui/user-details.ui" preprocess="xml-stripblanks">resources/user-details.ui</file>
     <file alias="ui/user-popover.ui" preprocess="xml-stripblanks">resources/user-popover.ui</file>
+    <file alias="ui/initial-setup-window.ui" 
preprocess="xml-stripblanks">resources/initial-setup-window.ui</file>
   </gresource>
 </gresources>
diff --git a/data/resources/application.css b/data/resources/application.css
index c75a2ea..44741a0 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -128,6 +128,14 @@ treeview.polari-server-room-list {
     font-size: larger;
 }
 
+.polari-setup-page {
+    padding: 48px 156px;
+}
+
+.polari-setup-title {
+    font-size: 175%;
+}
+
 .polari-error-information {
     background-color: @polari_dark_bg_color;
     border-style: solid;
diff --git a/data/resources/initial-setup-window.ui b/data/resources/initial-setup-window.ui
new file mode 100644
index 0000000..b18ca5b
--- /dev/null
+++ b/data/resources/initial-setup-window.ui
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="Gjs_InitialSetupWindow">
+    <property name="icon-name">org.gnome.Polari</property>
+    <property name="default-width">800</property>
+    <property name="default-height">600</property>
+    <child type="titlebar">
+      <object class="GtkHeaderBar">
+        <property name="visible">True</property>
+        <!--property name="show-close-button">False</property-->
+        <property name="title">Polari Setup</property>
+        <child>
+          <object class="GtkButton" id="prevButton">
+            <property name="visible">True</property>
+            <property name="use-underline">True</property>
+            <property name="valign">center</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="nextButton">
+            <property name="visible">True</property>
+            <property name="use-underline">True</property>
+            <property name="can-default">True</property>
+            <property name="valign">center</property>
+          </object>
+          <packing>
+            <property name="pack-type">end</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkStack" id="contentStack">
+        <property name="visible">True</property>
+        <property name="transition-type">slide-left-right</property>
+        <property name="vexpand">True</property>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="visible">True</property>
+            <property name="vexpand">True</property>
+            <property name="spacing">24</property>
+            <style>
+              <class name="polari-setup-page"/>
+            </style>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="orientation">vertical</property>
+                <property name="spacing">24</property>
+                <property name="halign">center</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="label">Welcome to Polari</property>
+                    <style>
+                      <class name="polari-setup-title"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="max-width-chars">42</property>
+                    <property name="wrap">True</property>
+                    <property name="justify">center</property>
+                    <property name="label">Polari is an easy way to chat using IRC. Select a connection to 
get started.</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="Gjs_ConnectionsList" id="connectionsList">
+                <property name="visible">True</property>
+                <property name="vscrollbar-policy">never</property>
+                <property name="shadow-type">in</property>
+                <property name="favorites-only">True</property>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="name">connections</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="visible">True</property>
+            <property name="spacing">24</property>
+            <style>
+              <class name="polari-setup-page"/>
+            </style>
+            <child>
+              <object class="GtkBox">
+                <property name="visible">True</property>
+                <property name="orientation">vertical</property>
+                <property name="halign">center</property>
+                <property name="spacing">24</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="label">Welcome to Polari</property>
+                    <style>
+                      <class name="polari-setup-title"/>
+                    </style>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="visible">True</property>
+                    <property name="max-width-chars">60</property>
+                    <property name="wrap">True</property>
+                    <property name="justify">center</property>
+                    <property name="label">Select rooms you want to connect to. You can add more connections 
and rooms later, by clicking the + button.</property>
+                    <style>
+                      <class name="dim-label"/>
+                    </style>
+                  </object>
+                </child>
+                </object>
+            </child>
+            <child>
+              <object class="Gjs_ServerRoomList" id="serverRoomList">
+                <property name="visible">True</property>
+                <property name="vexpand">True</property>
+              </object>
+            </child>
+          </object>
+          <packing>
+            <property name="name">rooms</property>
+          </packing>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/src/initialSetup.js b/src/initialSetup.js
new file mode 100644
index 0000000..e677015
--- /dev/null
+++ b/src/initialSetup.js
@@ -0,0 +1,123 @@
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+
+const Lang = imports.lang;
+const Utils = imports.utils;
+
+const SetupPage = {
+    CONNECTION: 0,
+    ROOM: 1
+};
+
+var InitialSetupWindow = new Lang.Class({
+    Name: 'InitialSetupWindow',
+    Extends: Gtk.Window,
+    Template: 'resource:///org/gnome/Polari/ui/initial-setup-window.ui',
+    InternalChildren: ['contentStack',
+                       'connectionsList',
+                       'nextButton',
+                       'prevButton',
+                       'serverRoomList'],
+
+    _init: function(params) {
+
+        this.parent(params);
+
+        this._currentAccount = null;
+
+        this._connectionsList.connect('account-created', (w, account) => {
+            this._setPage(SetupPage.ROOM);
+            this._currentAccount = account;
+            this._serverRoomList.setAccount(account);
+        });
+
+        this.connect('destroy', () => { this._unsetAccount(); });
+
+        this._serverRoomList.connect('notify::can-join',
+                                     Lang.bind(this, this._updateNextSensitivity));
+
+        this._nextButton.connect('clicked', () => {
+            if (this._page == SetupPage.CONNECTION) {
+                this._connectionsList.activateSelected();
+            } else {
+                this._joinRooms();
+                this._currentAccount = null;
+                this.destroy();
+            }
+        });
+
+        this._prevButton.connect('clicked', () => {
+            if (this._page == SetupPage.ROOM) {
+                this._setPage(SetupPage.CONNECTION);
+                this._unsetAccount();
+            } else {
+                this.destroy();
+            }
+        });
+
+        this._setPage(SetupPage.CONNECTION);
+    },
+
+    _setPage: function(page) {
+        let isLastPage = page == SetupPage.ROOM;
+
+        this._contentStack.visible_child_name = isLastPage ? 'rooms'
+                                                           : 'connections';
+
+        this._prevButton.label = isLastPage ? _("_Back") : _("_Cancel");
+        this._nextButton.label = isLastPage ? _("_Done") : _("_Next");
+
+        let context = this._nextButton.get_style_context();
+        if (isLastPage)
+            context.add_class(Gtk.STYLE_CLASS_SUGGESTED_ACTION);
+        else
+            context.remove_class(Gtk.STYLE_CLASS_SUGGESTED_ACTION);
+
+        this._nextButton.grab_default();
+        this._updateNextSensitivity();
+    },
+
+    _unsetAccount: function() {
+        if (!this._currentAccount)
+            return;
+
+        this._currentAccount.remove_async((a, res) => {
+            a.remove_finish(res);
+        });
+        this._currentAccount = null;
+    },
+
+    get _page() {
+        if (this._contentStack.visible_child_name == 'rooms')
+            return SetupPage.ROOM;
+        else
+            return SetupPage.CONNECTION;
+    },
+
+    _updateNextSensitivity: function() {
+        let sensitive = true;
+
+        if (this._page == SetupPage.ROOM)
+            sensitive = this._serverRoomList.can_join;
+
+        this._nextButton.sensitive = sensitive;
+    },
+
+    _joinRooms: function() {
+        this.hide();
+
+        let toJoinRooms = this._serverRoomList.selectedRooms;
+
+        let accountPath = this._currentAccount.get_object_path();
+        let time = Utils.getTpEventTime();
+        toJoinRooms.forEach(room => {
+            if (room[0] != '#')
+                room = '#' + room;
+
+            let app = Gio.Application.get_default();
+            let action = app.lookup_action('join-room');
+            action.activate(GLib.Variant.new('(ssu)', [accountPath, room, time]));
+        });
+    }
+});
diff --git a/src/org.gnome.Polari.src.gresource.xml b/src/org.gnome.Polari.src.gresource.xml
index a526f25..a383a03 100644
--- a/src/org.gnome.Polari.src.gresource.xml
+++ b/src/org.gnome.Polari.src.gresource.xml
@@ -22,5 +22,6 @@
     <file>userList.js</file>
     <file>utils.js</file>
     <file>userTracker.js</file>
+    <file>initialSetup.js</file>
   </gresource>
 </gresources>