Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

More work on the "add chatroom" modal. Working now.

Browse Source
This commit is contained in:
JC Brand 2018-02-22 15:51:44 +01:00
parent 224e1eee29
commit e143c88475
15 changed files with 119 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -132,7 +132,7 @@ dev: stamp-bundler stamp-npm
## Builds
.PHONY: css
css: sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
css: dev sass/*.scss css/converse.css css/converse.min.css css/mobile.min.css css/theme.min.css css/converse-muc-embedded.min.css css/inverse.css css/inverse.min.css css/fonts.css
css/inverse.css:: stamp-bundler sass sass/*.scss
$(SASS) -I $(BOURBON) -I $(BOOTSTRAP) sass/inverse/inverse.scss css/inverse.css

2
css/converse-muc-embedded.css
View File

@ -15,7 +15,7 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
#conversejs.converse-embedded form.pure-form.converse-centered-form {
#conversejs.converse-embedded form.converse-centered-form {
position: absolute;
top: 30%;
transform: translateY(-50%); }

46
css/converse.css
View File

@ -4773,7 +4773,7 @@ body.reset {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
@ -5016,8 +5016,6 @@ body.reset {
border-radius: 25%; }
#conversejs .activated {
display: block !important; }
#conversejs .pure-form-message {
padding: 0.5em 0; }
#conversejs .button-primary {
color: white;
background-color: #3AA569; }
@ -5032,46 +5030,44 @@ body.reset {
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs form.pure-form.converse-form {
#conversejs form.converse-form {
background: white;
padding: 1em; }
#conversejs form.pure-form.converse-form legend {
#conversejs form.converse-form legend {
color: #777;
font-size: 125%;
margin-bottom: 1.5em; }
#conversejs form.pure-form.converse-form input[type=checkbox] {
#conversejs form.converse-form input[type=checkbox] {
display: block; }
#conversejs form.pure-form.converse-form select,
#conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=text] {
#conversejs form.converse-form select,
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=text] {
min-width: 50%; }
#conversejs form.pure-form.converse-form label {
font-size: 16px; }
#conversejs form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
#conversejs form.converse-form input[type=text],
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding: 0.5em; }
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin: 0.5em 0;
border: none; }
#conversejs form.pure-form.converse-form input.error {
#conversejs form.converse-form input.error {
border: 1px solid #A53214;
color: #777; }
#conversejs form.pure-form.converse-form .form-help {
#conversejs form.converse-form .form-help {
color: gray;
font-size: 85%;
padding-top: 0.5em; }
#conversejs form.pure-form.converse-form .form-help:hover {
#conversejs form.converse-form .form-help:hover {
color: #777; }
#conversejs form.pure-form.converse-form .form-help.error {
#conversejs form.converse-form .form-help.error {
color: #A53214; }
#conversejs form.pure-form.converse-centered-form {
#conversejs form.converse-centered-form {
text-align: center;
width: 100%; }
#conversejs .chat-textarea-chatbox-selected {
@ -5589,7 +5585,7 @@ body.reset {
@media screen and (max-width: 767px) {
#conversejs > .row {
flex-direction: row-reverse; }
#conversejs #login-dialog .pure-form.converse-form {
#conversejs #login-dialog .converse-form {
padding: 3em 2em 3em; }
#conversejs .sidebar {
display: block; }

64
css/inverse.css
View File

@ -4773,7 +4773,7 @@ body.reset {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs fieldset, #conversejs form, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
@ -5016,8 +5016,6 @@ body.reset {
border-radius: 25%; }
#conversejs .activated {
display: block !important; }
#conversejs .pure-form-message {
padding: 0.5em 0; }
#conversejs .button-primary {
color: white;
background-color: #E7A151; }
@ -5032,46 +5030,44 @@ body.reset {
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs form.pure-form.converse-form {
#conversejs form.converse-form {
background: white;
padding: 1em; }
#conversejs form.pure-form.converse-form legend {
#conversejs form.converse-form legend {
color: #777;
font-size: 125%;
margin-bottom: 1.5em; }
#conversejs form.pure-form.converse-form input[type=checkbox] {
#conversejs form.converse-form input[type=checkbox] {
display: block; }
#conversejs form.pure-form.converse-form select,
#conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=text] {
#conversejs form.converse-form select,
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=text] {
min-width: 50%; }
#conversejs form.pure-form.converse-form label {
font-size: 18px; }
#conversejs form.pure-form.converse-form input[type=text],
#conversejs form.pure-form.converse-form input[type=password],
#conversejs form.pure-form.converse-form input[type=number],
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
#conversejs form.converse-form input[type=text],
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding: 0.5em; }
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin: 0.5em 0;
border: none; }
#conversejs form.pure-form.converse-form input.error {
#conversejs form.converse-form input.error {
border: 1px solid #A53214;
color: #777; }
#conversejs form.pure-form.converse-form .form-help {
#conversejs form.converse-form .form-help {
color: gray;
font-size: 85%;
padding-top: 0.5em; }
#conversejs form.pure-form.converse-form .form-help:hover {
#conversejs form.converse-form .form-help:hover {
color: #777; }
#conversejs form.pure-form.converse-form .form-help.error {
#conversejs form.converse-form .form-help.error {
color: #A53214; }
#conversejs form.pure-form.converse-centered-form {
#conversejs form.converse-centered-form {
text-align: center;
width: 100%; }
#conversejs .chat-textarea-chatbox-selected {
@ -5155,20 +5151,20 @@ body {
padding-right: 10%;
font-size: 120%; }
#conversejs.fullscreen form.pure-form.converse-form {
#conversejs.fullscreen form.converse-form {
margin: 1em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
#conversejs.fullscreen form.converse-form input[type=checkbox] {
margin-left: 1em;
display: inline;
margin-bottom: 2em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=text],
#conversejs.fullscreen form.pure-form.converse-form input[type=password],
#conversejs.fullscreen form.pure-form.converse-form input[type=number],
#conversejs.fullscreen form.pure-form.converse-form input[type=button],
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
#conversejs.fullscreen form.converse-form input[type=text],
#conversejs.fullscreen form.converse-form input[type=password],
#conversejs.fullscreen form.converse-form input[type=number],
#conversejs.fullscreen form.converse-form input[type=button],
#conversejs.fullscreen form.converse-form input[type=submit] {
height: 2.2em; }
#conversejs.fullscreen form.pure-form.converse-form input[type=button],
#conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
#conversejs.fullscreen form.converse-form input[type=button],
#conversejs.fullscreen form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin-right: 1em; }
@ -5645,7 +5641,7 @@ body {
@media screen and (max-width: 767px) {
#conversejs > .row {
flex-direction: row-reverse; }
#conversejs #login-dialog .pure-form.converse-form {
#conversejs #login-dialog .converse-form {
padding: 3em 2em 3em; }
#conversejs .sidebar {
display: block; }

10
mockup/modals.html
View File

@ -149,12 +149,16 @@
</button>
</div>
<div class="modal-body">
<form class="pure-form pure-form-stacked converse-form add-chatroom">
<form class="converse-form add-chatroom">
<div class="form-group">
<label for="chatroom">Room address</label>
<label for="chatroom">Room address:</label>
<input type="text" name="chatroom" class="form-control" placeholder="room@conference.example.org">
<input type="submit" class="btn btn-primary" name="join" value="Join">
</div>
<div class="form-group">
<label for="chatroom">Nickname:</label>
<input type="text" name="nickname" class="form-control">
</div>
<input type="submit" class="btn btn-primary" name="join" value="Join">
</form>
</div>
</div>

2
sass/_chatbox.scss
View File

@ -494,7 +494,7 @@
}
#login-dialog {
.pure-form.converse-form {
.converse-form {
padding: 3em 2em 3em;
}
}

13
sass/_core.scss
View File

@ -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%;
}

2
sass/_muc_embedded.scss
View File

@ -13,7 +13,7 @@
width: 100%;
form {
&.pure-form.converse-centered-form {
&.converse-centered-form {
position: absolute;
top: 30%;
transform: translateY(-50%);

2
sass/inverse/_core.scss
View File

@ -37,7 +37,7 @@ body {
#conversejs.fullscreen {
form {
&.pure-form.converse-form {
&.converse-form {
margin: 1em;
input[type=checkbox] {
margin-left: 1em;

104
src/converse-muc-views.js
View File

@ -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});
},

2
src/converse-profile.js
View File

@ -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();
},

10
src/templates/add_chatroom_modal.html
View File

@ -9,10 +9,14 @@
</button>
</div>
<div class="modal-body">
<form class="pure-form pure-form-stacked converse-form add-chatroom">
<form class="converse-form add-chatroom">
<div class="form-group">
<label for="chatroom">Room address</label>
<input type="text" name="chatroom" class="form-control" placeholder="name@conference.example.org">
<label for="chatroom">{{{o.label_room_address}}}:</label>
<input type="text" required="required" name="chatroom" class="form-control" placeholder="name@conference.example.org">
</div>
<div class="form-group">
<label for="chatroom">{{{o.label_nickname}}}:</label>
<input type="text" name="nickname" class="form-control">
</div>
<input type="submit" class="btn btn-primary" name="join" value="Join">
</form>

2
src/templates/chatboxes.html
View File

@ -1,2 +1,2 @@
<div class="row no-gutters"></div>
<div id="converse-modals"></div>
<div id="converse-modals" class="modals"></div>

16
src/templates/chatroom_join_form.html
View File

@ -1,16 +0,0 @@
<form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
<fieldset>
<label>{{{o.label_room_name}}}</label>
<input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{{o.label_room_name}}}"/>
{[ if (o.server_input_type != 'hidden') { ]}
<label{{{o.server_label_global_attr}}}>{{{o.label_server}}}</label>
{[ } ]}
<input type="{{{o.server_input_type}}}"
name="server"
class="new-chatroom-server"
placeholder="{{{o.label_server}}}"
value="{{{o.muc_domain}}}"/>
<input type="submit" class="pure-button button-primary" name="join" value="{{{o.label_join}}}"/>
<input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{{o.label_show_rooms}}}"/>
</fieldset>
</form>

1
src/templates/room_panel.html
View File

@ -1,5 +1,4 @@
<!-- <div id="chatrooms"> -->
<form class="add-chatroom"></form>
<div class="d-flex">
<span class="w-100">{{{o.heading_chatrooms}}}</span>
<a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>