[polari/wip/bastianilso/initial-setup: 3/4] initialSetupWindow: update user experience
- From: Bastian Ilsø Hougaard <bastianilso src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [polari/wip/bastianilso/initial-setup: 3/4] initialSetupWindow: update user experience
- Date: Mon, 8 Jun 2015 14:39:15 +0000 (UTC)
commit 9b59235e29d3e6bda24d3738c3a5f235f1664cd0
Author: Bastian Ilsø <bastianilso src gnome org>
Date: Thu Jun 4 12:56:55 2015 +0200
initialSetupWindow: update user experience
The initial design was almost 2 years old.
This updates initialSetupWindow to use a new design inspired
by Calendar. MainWindow is hidden if no accounts are available
and instead the initialSetupWindow is shown, to guide the user
in setting up the first account.
data/resources/application.css | 4 ++
data/resources/initial-setup.ui | 68 +++++++++++++++++++++++------
src/application.js | 6 +++
src/initialSetupWindow.js | 92 ++++++++++++++++++++++++++++++++++-----
src/mainWindow.js | 14 ++++--
5 files changed, 155 insertions(+), 29 deletions(-)
---
diff --git a/data/resources/application.css b/data/resources/application.css
index a34a6de..3918a08 100644
--- a/data/resources/application.css
+++ b/data/resources/application.css
@@ -119,3 +119,7 @@
.polari-user-list-button {
padding: 0px 4px;
}
+
+.polari-welcome-message {
+ font-size: 300%;
+}
diff --git a/data/resources/initial-setup.ui b/data/resources/initial-setup.ui
index 8b4697d..2d1342a 100644
--- a/data/resources/initial-setup.ui
+++ b/data/resources/initial-setup.ui
@@ -3,15 +3,54 @@
<interface>
<!-- interface-requires gtk+ 3.10 -->
<object class="GtkWindow" id="initial_setup">
- <property name="width_request">600</property>
- <property name="height_request">320</property>
+ <property name="width_request">945</property>
+ <property name="height_request">632</property>
<property name="can_focus">False</property>
<property name="modal">True</property>
<property name="window_position">center</property>
- <property name="default_width">440</property>
- <property name="default_height">250</property>
+ <property name="default_width">587</property>
+ <property name="default_height">390</property>
<property name="destroy_with_parent">True</property>
<property name="type_hint">dialog</property>
+ <child type="titlebar">
+ <object class="GtkHeaderBar" id="setup_bar">
+ <property name="title" translatable="yes">Polari Setup</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hexpand">False</property>
+ <property name="show_close_button">False</property>
+ <child>
+ <object class="GtkButton" id="cancel_button">
+ <property name="label" translatable="yes">_Quit</property>
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <property name="use_underline">True</property>
+ </object>
+ <packing>
+ <property name="pack_type">start</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton" id="confirm_button">
+ <property name="label" translatable="yes">_Done</property>
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="can_default">True</property>
+ <property name="has_default">True</property>
+ <property name="receives_default">True</property>
+ <property name="use_underline">True</property>
+ <style>
+ <class name="confirm-button"/>
+ <class name="suggested-action"/>
+ </style>
+ </object>
+ <packing>
+ <property name="pack_type">end</property>
+ </packing>
+ </child>
+ </object>
+ </child>
<child>
<object class="GtkBox" id="content">
<property name="visible">True</property>
@@ -21,18 +60,19 @@
<property name="margin_top">40</property>
<property name="margin_bottom">40</property>
<property name="orientation">vertical</property>
+ <property name="halign">center</property>
+ <property name="valign">center</property>
<child>
<object class="GtkLabel" id="welcome">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="margin_start">10</property>
<property name="margin_end">10</property>
- <property name="xalign">0</property>
- <property name="label" translatable="yes">Welcome to Polari. An Internet Relay Chat client for
Gnome</property>
- <property name="wrap">True</property>
- <attributes>
- <attribute name="weight" value="bold"/>
- </attributes>
+ <property name="halign">center</property>
+ <property name="label" translatable="yes">Welcome</property>
+ <style>
+ <class name="polari-welcome-message"/>
+ </style>
</object>
<packing>
<property name="expand">False</property>
@@ -46,9 +86,10 @@
<property name="can_focus">False</property>
<property name="margin_start">10</property>
<property name="margin_end">10</property>
- <property name="margin_top">40</property>
+ <property name="margin_top">20</property>
+ <property name="margin_bottom">20</property>
<property name="xalign">0</property>
- <property name="label" translatable="yes">Get started by adding a server connection</property>
+ <property name="label" translatable="yes">Connect to a server to begin chatting on
IRC.</property>
<property name="wrap">True</property>
</object>
<packing>
@@ -61,6 +102,7 @@
<object class="GtkListBox" id="connectionList">
<property name="visible">True</property>
<property name="can_focus">False</property>
+ <property name="selection_mode">none</property>
<child>
<object class="GtkListBoxRow" id="addConnectionRow">
<property name="width_request">100</property>
@@ -68,7 +110,7 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
- <object class="GtkBox" id="addConectionContainer">
+ <object class="GtkBox" id="addConnectionContainer">
<property name="height_request">30</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
diff --git a/src/application.js b/src/application.js
index 7262bfd..d832734 100644
--- a/src/application.js
+++ b/src/application.js
@@ -64,6 +64,8 @@ const Application = new Lang.Class({
activate: Lang.bind(this, this._onShowMessageUserDialog),
create_hook: Lang.bind(this, this._accountActionsCreateHook),
accels: ['<Primary>m'] },
+ { name: 'show-main-window',
+ activate: Lang.bind(this, this._onShowMainWindow) },
{ name: 'join-room',
activate: Lang.bind(this, this._onJoinRoom),
parameter_type: GLib.VariantType.new('(ssu)') },
@@ -143,6 +145,10 @@ const Application = new Lang.Class({
this._window.window.present();
},
+ _onShowMainWindow: function() {
+ this._window.window.show_all();
+ },
+
_updateAccountAction: function(action) {
action.enabled = this._accountsMonitor.dupAccounts().filter(
function(a) {
diff --git a/src/initialSetupWindow.js b/src/initialSetupWindow.js
index 288b695..2f3429c 100644
--- a/src/initialSetupWindow.js
+++ b/src/initialSetupWindow.js
@@ -1,5 +1,6 @@
const Gio = imports.gi.Gio;
const GLib = imports.gi.GLib;
+const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;
const Tp = imports.gi.TelepathyGLib;
const Tpl = imports.gi.TelepathyLogger;
@@ -15,21 +16,90 @@ const InitialSetupWindow = new Lang.Class({
let builder = new Gtk.Builder();
builder.add_from_resource('/org/gnome/Polari/initial-setup.ui');
- this.window = builder.get_object('initial_setup');
+ this._window = builder.get_object('initial_setup');
- let connectionList = builder.get_object('connectionList');
- let addConnectionRow = builder.get_object('addConnectionRow');
- connectionList.connect('row-activated', Lang.bind(this, this._addConnection));
- this.window.show_all();
+ this._app = Gio.Application.get_default();
+
+ this._confirmButton = builder.get_object('confirm_button');
+ this._confirmButton.sensitive = false;
+ this._confirmButton.connect('clicked', Lang.bind(this,
+ function() {
+ let action = this._app.lookup_action('show-main-window');
+ action.activate(null);
+ this._confirmed = true;
+ this._window.destroy();
+ }));
+
+ this._cancelButton = builder.get_object('cancel_button');
+ this._cancelButton.connect('clicked', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+
+ this._window.connect('destroy', Lang.bind(this,
+ function() {
+ if (this._confirmed)
+ return;
+
+ let action = this._app.lookup_action('quit');
+ action.activate(null);
+ }));
+
+ this._connectionList = builder.get_object('connectionList');
+ let addConnectionRow = builder.get_object('addConnectionRow');
+ this._connectionList.connect('row-activated', Lang.bind(this, this._showConnectionDetailsDialog));
+
+ this._accountsMonitor = AccountsMonitor.getDefault();
+ this._accountsMonitor.connect('account-added', Lang.bind(this,
+ function(am, account) {
+ this._onAccountAdded(account);
+ }));
+
+ this._window.show_all();
},
- _addConnection: function() {
- log("connection activated");
- let dialog = new Connections.ConnectionsDialog();
+ _onRowActivated: function(row) {
+ if (row._account) {
+
+ } else {
+ this._showConnectionDetailsDialog(account)
+ }
+ },
+
+ _onAccountAdded: function(account) {
+ let row = new Gtk.ListBoxRow();
+ row._account = account;
+
+ let box = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
+ margin_start: 20, height_request: 30,
+ can_focus: false });
+ row.add(box);
+
+ let icon = new Gtk.Image({ icon_name: 'polari-symbolic' });
+ box.add(icon);
+
+ let label = new Gtk.Label({ hexpand: true, halign: Gtk.Align.START,
+ margin_start: 10 });
+ box.add(label);
+
+ this._connectionList.add(row);
+ row.show_all();
+
+ account.bind_property('display-name', label, 'label',
+ GObject.BindingFlags.SYNC_CREATE);
+
+
+ this._confirmButton.sensitive = true;
+ },
+
+ _showConnectionDetailsDialog: function(box, row) {
+ let dialog = new Connections.ConnectionDetailsDialog(row._account);
+ dialog.widget.transient_for = this._window;
dialog.widget.show();
dialog.widget.connect('response',
- function(widget) {
- widget.destroy();
+ function(w, response) {
+ dialog.widget.destroy();
});
- }
+ },
+
});
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 35d6281..ea079ca 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -60,7 +60,8 @@ const MainWindow = new Lang.Class({
Lang.bind(this, this._onAccountChanged));
this._accountsMonitor.connect('account-added',
Lang.bind(this, this._onAccountChanged));
-
+ this._accountsMonitor.connect('account-manager-prepared',
+ Lang.bind(this, this._onAccountManagerPrepared));
this._roomManager = ChatroomManager.getDefault();
this._roomManager.connect('active-changed',
Lang.bind(this, this._activeRoomChanged));
@@ -98,12 +99,15 @@ const MainWindow = new Lang.Class({
if (this._settings.get_boolean('window-maximized'))
this.window.maximize();
+ },
- this.window.show_all();
-
- //if(this._accountsMonitor.dupAccounts().length == 0) {
+ _onAccountManagerPrepared: function() {
+ if (this._accountsMonitor.dupAccounts().length == 0) {
let initialSetupWindow = new InitialSetupWindow.InitialSetupWindow();
- //}
+ this.window.hide();
+ } else {
+ this.window.show_all();
+ }
},
_onWindowStateEvent: function(widget, event) {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
