diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 9c225b1c6..6e9c0826b 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -494,7 +494,7 @@
}
#login-dialog {
- .pure-form.converse-form {
+ .converse-form {
padding: 3em 2em 3em;
}
}
diff --git a/sass/_core.scss b/sass/_core.scss
index 71b5f7cdc..14a5aba66 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -80,7 +80,7 @@ body.reset {
ul li { height: auto; }
div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend, table, caption, tbody,
+ fieldset, form, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu,
nav, output, ruby, section, summary, time, mark, audio, video {
@@ -338,10 +338,6 @@ body.reset {
display: block !important;
}
- .pure-form-message {
- padding: 0.5em 0;
- }
-
.button-primary {
color: white;
background-color: $primary-color;
@@ -363,7 +359,7 @@ body.reset {
font-size: 0.75rem;
}
- &.pure-form.converse-form {
+ &.converse-form {
background: white;
padding: 1em;
legend {
@@ -380,9 +376,6 @@ body.reset {
input[type=text] {
min-width: 50%;
}
- label {
- font-size: $font-size-large;
- }
input[type=text],
input[type=password],
input[type=number],
@@ -413,7 +406,7 @@ body.reset {
}
}
}
- &.pure-form.converse-centered-form {
+ &.converse-centered-form {
text-align: center;
width: 100%;
}
diff --git a/sass/_muc_embedded.scss b/sass/_muc_embedded.scss
index 9023c99f0..4920fc133 100644
--- a/sass/_muc_embedded.scss
+++ b/sass/_muc_embedded.scss
@@ -13,7 +13,7 @@
width: 100%;
form {
- &.pure-form.converse-centered-form {
+ &.converse-centered-form {
position: absolute;
top: 30%;
transform: translateY(-50%);
diff --git a/sass/inverse/_core.scss b/sass/inverse/_core.scss
index f9671a290..7ab1b9a7e 100644
--- a/sass/inverse/_core.scss
+++ b/sass/inverse/_core.scss
@@ -37,7 +37,7 @@ body {
#conversejs.fullscreen {
form {
- &.pure-form.converse-form {
+ &.converse-form {
margin: 1em;
input[type=checkbox] {
margin-left: 1em;
diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js
index c99b56971..2e865ff0e 100644
--- a/src/converse-muc-views.js
+++ b/src/converse-muc-views.js
@@ -21,7 +21,6 @@
"tpl!chatroom_form",
"tpl!chatroom_head",
"tpl!chatroom_invite",
- "tpl!chatroom_join_form",
"tpl!chatroom_nickname_form",
"tpl!chatroom_password_form",
"tpl!chatroom_sidebar",
@@ -46,7 +45,6 @@
tpl_chatroom_form,
tpl_chatroom_head,
tpl_chatroom_invite,
- tpl_chatroom_join_form,
tpl_chatroom_nickname_form,
tpl_chatroom_password_form,
tpl_chatroom_sidebar,
@@ -154,6 +152,7 @@
_converse.AddChatRoomModal = Backbone.VDOMView.extend({
events: {
+ 'submit form.add-chatroom': 'openChatRoom'
},
initialize () {
@@ -162,13 +161,44 @@
backdrop: 'static',
keyboard: true
});
+ this.model.on('change:muc_domain', this.render, this);
},
toHTML () {
return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
'heading_new_chatroom': __('Enter a new Chatroom'),
- 'label_room_name': __('Room'),
+ 'label_room_address': __('Room address'),
+ 'label_nickname': __('Optional nickname')
}));
+ },
+
+ insertIntoDOM () {
+ const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
+ container_el.insertAdjacentElement('beforeEnd', this.el);
+ },
+
+ show () {
+ this.render();
+ this.modal.show();
+ },
+
+ parseRoomDataFromEvent (form) {
+ const data = new FormData(form);
+ const jid = data.get('chatroom');
+ const server = Strophe.getDomainFromJid(jid);
+ this.model.save('muc_domain', server);
+ return {
+ 'jid': jid,
+ 'nick': data.get('nickname')
+ }
+ },
+
+ openChatRoom (ev) {
+ ev.preventDefault();
+ const data = this.parseRoomDataFromEvent(ev.target);
+ _converse.api.rooms.open(data.jid, data);
+ this.modal.hide();
+ ev.target.reset();
}
});
@@ -1962,25 +1992,6 @@
});
- _converse.MUCJoinForm = Backbone.VDOMView.extend({
- initialize () {
- this.model.on('change:muc_domain', this.render, this);
- },
-
- toHTML () {
- return tpl_chatroom_join_form(_.assign(this.model.toJSON(), {
- 'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
- 'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
- 'label_room_name': __('Room name'),
- 'label_nickname': __('Nickname'),
- 'label_server': __('Server'),
- 'label_join': __('Join Room'),
- 'label_show_rooms': __('Show rooms')
- }));
- }
- });
-
-
_converse.RoomsPanel = Backbone.NativeView.extend({
/* Backbone.NativeView which renders MUC section of the control box.
*
@@ -1990,15 +2001,15 @@
className: 'controlbox-pane',
id: 'chatrooms',
events: {
- 'submit form.add-chatroom': 'openChatRoom',
- 'click input#show-rooms': 'showRooms',
- 'click a.room-info': 'toggleRoomInfo',
+ 'click a.chatbox-btn.fa-users': 'showAddRoomModal',
+ 'change input[name=nick]': 'setNick',
'change input[name=server]': 'setDomain',
- 'change input[name=nick]': 'setNick'
+ 'click a.room-info': 'toggleRoomInfo',
+ 'click input#show-rooms': 'showRooms',
},
initialize (cfg) {
- this.join_form = new _converse.MUCJoinForm({'model': this.model});
+ this.add_room_modal = new _converse.AddChatRoomModal({'model': this.model});
this.model.on('change:muc_domain', this.onDomainChange, this);
this.model.on('change:nick', this.onNickChange, this);
},
@@ -2008,11 +2019,15 @@
'heading_chatrooms': __('Chatrooms'),
'title_new_room': __('Click to add a new room')
});
- this.join_form.setElement(this.el.querySelector('.add-chatroom'));
- this.join_form.render();
return this;
},
+ showAddRoomModal (ev) {
+ ev.preventDefault();
+ this.add_room_modal.show();
+ },
+
+
onDomainChange (model) {
if (_converse.auto_list_rooms) {
this.updateRoomsList();
@@ -2182,37 +2197,6 @@
}
},
- parseRoomDataFromEvent (ev) {
- let jid;
- const name_el = this.el.querySelector('input.new-chatroom-name');
- const server_el= this.el.querySelector('input.new-chatroom-server');
- const server = server_el.value;
- const name = name_el.value.trim();
- name_el.value = ''; // Clear the input
- if (name && server) {
- jid = Strophe.escapeNode(name.toLowerCase()) + '@' + server.toLowerCase();
- name_el.classList.remove('error');
- server_el.classList.remove('error');
- this.model.save({muc_domain: server});
- } else {
- if (!name) { name_el.classList.add('error'); }
- if (!server) { server_el.classList.add('error'); }
- return;
- }
- return {
- 'jid': jid,
- 'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
- }
- },
-
- openChatRoom (ev) {
- ev.preventDefault();
- const data = this.parseRoomDataFromEvent(ev);
- if (!_.isUndefined(data)) {
- _converse.api.rooms.open(data.jid, data);
- }
- },
-
setDomain (ev) {
this.model.save({muc_domain: ev.target.value});
},
diff --git a/src/converse-profile.js b/src/converse-profile.js
index a01824584..63c55d95e 100644
--- a/src/converse-profile.js
+++ b/src/converse-profile.js
@@ -38,7 +38,6 @@
_converse.ChatStatusModal = Backbone.VDOMView.extend({
- id: "modal-status-change",
events: {
"submit form#set-xmpp-status": "onFormSubmitted",
"click .clear-input": "clearStatusMessage"
@@ -126,6 +125,7 @@
},
showStatusChangeModal (ev) {
+ ev.preventDefault();
this.status_modal.show();
},
diff --git a/src/templates/add_chatroom_modal.html b/src/templates/add_chatroom_modal.html
index 2452205bb..b7ce79a86 100644
--- a/src/templates/add_chatroom_modal.html
+++ b/src/templates/add_chatroom_modal.html
@@ -9,10 +9,14 @@
-
diff --git a/src/templates/chatboxes.html b/src/templates/chatboxes.html
index ed1e5d74b..9cff267c1 100644
--- a/src/templates/chatboxes.html
+++ b/src/templates/chatboxes.html
@@ -1,2 +1,2 @@
-
+
diff --git a/src/templates/chatroom_join_form.html b/src/templates/chatroom_join_form.html
deleted file mode 100644
index d35a50cc5..000000000
--- a/src/templates/chatroom_join_form.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
diff --git a/src/templates/room_panel.html b/src/templates/room_panel.html
index 0f7c677b8..f824fd033 100644
--- a/src/templates/room_panel.html
+++ b/src/templates/room_panel.html
@@ -1,5 +1,4 @@
-
{{{o.heading_chatrooms}}}