[polari/wip/fmuellner/connection-list: 6/8] joinDialog: Overhaul connection page
- From: Florian MĂźllner <fmuellner src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [polari/wip/fmuellner/connection-list: 6/8] joinDialog: Overhaul connection page
- Date: Thu, 11 Feb 2016 12:58:35 +0000 (UTC)
commit 226afe6ab6a9acb26b965ac2f999a865e9e4bf1e
Author: Florian MĂźllner <fmuellner gnome org>
Date: Wed Feb 3 19:34:19 2016 +0100
joinDialog: Overhaul connection page
Use the newly added ConnectionsList to allow users to create a new
connection with a single click on a predefined network. For cases
where the server is not included in the list or more control is
needed, the previous UI for creating a connection manually can
still be accessed through a "Custom Connection" toggle.
https://bugzilla.gnome.org/show_bug.cgi?id=761859
data/resources/join-room-dialog.ui | 72 ++++++++++++++++++++++++++++----
src/joinDialog.js | 81 ++++++++++++++++++++----------------
2 files changed, 109 insertions(+), 44 deletions(-)
---
diff --git a/data/resources/join-room-dialog.ui b/data/resources/join-room-dialog.ui
index ba6b82a..3be1286 100644
--- a/data/resources/join-room-dialog.ui
+++ b/data/resources/join-room-dialog.ui
@@ -22,6 +22,7 @@
<property name="modal">True</property>
<property name="destroy-with-parent">True</property>
<property name="default-width">500</property>
+ <property name="default-height">500</property>
<child type="action">
<object class="GtkButton" id="cancelButton">
<property name="label" translatable="yes">_Cancel</property>
@@ -31,7 +32,7 @@
</object>
</child>
<child type="action">
- <object class="GtkButton" id="confirmButton">
+ <object class="GtkButton" id="joinButton">
<property name="label" translatable="yes">_Join</property>
<property name="visible">True</property>
<property name="can-default">True</property>
@@ -45,7 +46,7 @@
<property name="orientation">vertical</property>
<property name="spacing">2</property>
<child>
- <object class="GtkStack" id="stack">
+ <object class="GtkStack" id="mainStack">
<property name="visible">True</property>
<property name="transition-type">slide-left-right</property>
<child>
@@ -61,7 +62,7 @@
</object>
</child>
<child>
- <object class="GtkLabel" id="connection_label">
+ <object class="GtkLabel">
<property name="visible">True</property>
<property name="halign">end</property>
<property name="label" translatable="yes">C_onnection</property>
@@ -103,7 +104,7 @@
</object>
</child>
<child>
- <object class="GtkLabel" id="name_label">
+ <object class="GtkLabel">
<property name="visible">True</property>
<property name="halign">end</property>
<property name="margin-top">24</property>
@@ -164,10 +165,65 @@
</packing>
</child>
<child>
- <object class="Gjs_ConnectionDetails" id="details">
+ <object class="GtkBox">
<property name="visible">True</property>
- <property name="hexpand">True</property>
- <property name="margin">24</property>
+ <property name="margin">30</property>
+ <property name="margin-bottom">24</property>
+ <property name="orientation">vertical</property>
+ <property name="spacing">18</property>
+ <child>
+ <object class="GtkStack" id="connectionStack">
+ <property name="visible">True</property>
+ <property name="vexpand">True</property>
+ <property name="transition-type">crossfade</property>
+ <child>
+ <object class="Gjs_ConnectionsList" id="connectionsList">
+ <property name="visible">True</property>
+ <property name="shadow-type">in</property>
+ </object>
+ <packing>
+ <property name="name">predefined</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="orientation">vertical</property>
+ <property name="spacing">24</property>
+ <child>
+ <object class="Gjs_ConnectionDetails" id="details">
+ <property name="visible">True</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton" id="addButton">
+ <property name="label" translatable="yes">_Add</property>
+ <property name="visible">True</property>
+ <property name="halign">end</property>
+ <property name="can-default">True</property>
+ <property name="receives-default">True</property>
+ <property name="use-underline">True</property>
+ <property name="sensitive" bind-source="details"
+ bind-property="can-confirm" bind-flags="sync-create"/>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="name">custom</property>
+ </packing>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkToggleButton" id="customToggle">
+ <property name="label" translatable="yes">_Custom Connection</property>
+ <property name="visible">True</property>
+ <property name="receives-default">True</property>
+ <property name="use-underline">True</property>
+ <property name="focus-on-click">False</property>
+ <property name="halign">start</property>
+ </object>
+ </child>
</object>
<packing>
<property name="name">connection</property>
@@ -179,7 +235,7 @@
</child>
<action-widgets>
<action-widget response="cancel">cancelButton</action-widget>
- <action-widget response="ok">confirmButton</action-widget>
+ <action-widget response="ok">joinButton</action-widget>
</action-widgets>
</template>
</interface>
diff --git a/src/joinDialog.js b/src/joinDialog.js
index c91eb55..8d45096 100644
--- a/src/joinDialog.js
+++ b/src/joinDialog.js
@@ -21,13 +21,17 @@ const JoinDialog = new Lang.Class({
Extends: Gtk.Dialog,
Template: 'resource:///org/gnome/Polari/ui/join-room-dialog.ui',
InternalChildren: ['cancelButton',
- 'confirmButton',
- 'stack',
+ 'joinButton',
+ 'mainStack',
'connectionCombo',
'connectionButton',
'nameEntry',
'nameCompletion',
- 'details'],
+ 'connectionStack',
+ 'connectionsList',
+ 'details',
+ 'addButton',
+ 'customToggle'],
_init: function(params) {
params['use-header-bar'] = 1;
@@ -80,9 +84,8 @@ const JoinDialog = new Lang.Class({
this.connect('response', Lang.bind(this,
function(w, response) {
if (response == Gtk.ResponseType.OK)
- this._onConfirmClicked();
- else
- this.destroy();
+ this._joinRoom();
+ this.destroy();
}));
this.connect('destroy', Lang.bind(this,
function() {
@@ -91,7 +94,7 @@ const JoinDialog = new Lang.Class({
}));
this._updateConnectionCombo();
- this._updateCanConfirm();
+ this._updateCanJoin();
},
_setupMainPage: function() {
@@ -105,7 +108,7 @@ const JoinDialog = new Lang.Class({
this._connectionCombo.sensitive = false;
this._nameEntry.connect('changed',
- Lang.bind(this, this._updateCanConfirm));
+ Lang.bind(this, this._updateCanJoin));
},
_setupConnectionPage: function() {
@@ -113,14 +116,31 @@ const JoinDialog = new Lang.Class({
function() {
this._setPage(DialogPage.MAIN);
}));
-
- this._details.connect('account-created', Lang.bind(this,
- function(details, account) {
- this._connectionCombo.set_active_id(account.display_name);
+ this._connectionsList.connect('account-selected', Lang.bind(this,
+ function() {
+ this._setPage(DialogPage.MAIN);
+ }));
+ this._addButton.connect('clicked', Lang.bind(this,
+ function() {
+ this._details.save();
+ this._setPage(DialogPage.MAIN);
}));
- this._details.connect('notify::can-confirm',
- Lang.bind(this, this._updateCanConfirm));
+ this._connectionsList.connect('account-created',
+ Lang.bind(this, this._onAccountCreated));
+ this._details.connect('account-created',
+ Lang.bind(this, this._onAccountCreated));
+
+ this._customToggle.connect('notify::active', Lang.bind(this,
+ function() {
+ let isCustom = this._customToggle.active;
+ this._connectionStack.visible_child_name = isCustom ? 'custom'
+ : 'predefined';
+ if (isCustom) {
+ this._addButton.grab_default();
+ this._details.reset();
+ }
+ }));
},
_onAccountChanged: function() {
@@ -153,14 +173,8 @@ const JoinDialog = new Lang.Class({
}));
},
- _onConfirmClicked: function() {
- if (this._page == DialogPage.MAIN) {
- this._joinRoom();
- this.destroy();
- } else {
- this._details.save();
- this._setPage(DialogPage.MAIN);
- }
+ _onAccountCreated: function(w, account) {
+ this._connectionCombo.set_active_id(account.display_name);
},
_joinRoom: function() {
@@ -200,23 +214,19 @@ const JoinDialog = new Lang.Class({
this._connectionCombo.set_active(activeIndex);
},
- _updateCanConfirm: function() {
- let sensitive;
-
- if (this._page == DialogPage.MAIN) {
+ _updateCanJoin: function() {
+ let sensitive = false;
+ if (this._page == DialogPage.MAIN)
sensitive = this._connectionCombo.get_active() > -1 &&
this._nameEntry.get_text_length() > 0;
- } else {
- sensitive = this._details.can_confirm;
- }
- this._confirmButton.sensitive = sensitive;
+ this._joinButton.sensitive = sensitive;
this.set_default_response(sensitive ? Gtk.ResponseType.OK
: Gtk.ResponseType.NONE);
},
get _page() {
- if (this._stack.visible_child_name == 'connection')
+ if (this._mainStack.visible_child_name == 'connection')
return DialogPage.CONNECTION;
else
return DialogPage.MAIN;
@@ -228,15 +238,14 @@ const JoinDialog = new Lang.Class({
if (isMain)
this._nameEntry.grab_focus();
else
- this._details.reset();
+ this._customToggle.active = false;
this._backButton.visible = !isMain;
+ this._joinButton.visible = isMain;
this._cancelButton.visible = isMain;
this.title = isMain ? _("Join Chat Room")
: _("Add Connection");
- this._confirmButton.label = isMain ? _("_Join")
- : _("_Save");
- this._stack.visible_child_name = isMain ? 'main' : 'connection';
- this._updateCanConfirm();
+ this._mainStack.visible_child_name = isMain ? 'main' : 'connection';
+ this._updateCanJoin();
}
});
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]