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

Update the JS to better render the chatroom config form.

Browse Source 
Other small tweaks as well.
This commit is contained in:
JC Brand 2015-10-31 16:18:31 +00:00
parent 4a8b5da197
commit 35a4f9bd7e
6 changed files with 89 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
converse.js
View File

@ -3186,22 +3186,25 @@
renderConfigurationForm: function (stanza) { renderConfigurationForm: function (stanza) {
var $form = this.$el.find('form.chatroom-form'), var $form = this.$el.find('form.chatroom-form'),
$fieldset = $form.children('fieldset:first'),
$stanza = $(stanza), $stanza = $(stanza),
$fields = $stanza.find('field'), $fields = $stanza.find('field'),
title = $stanza.find('title').text(), title = $stanza.find('title').text(),
instructions = $stanza.find('instructions').text(); instructions = $stanza.find('instructions').text();
$form.find('span.spinner').remove(); $fieldset.find('span.spinner').remove();
$form.append($('<legend>').text(title)); $fieldset.append($('<legend>').text(title));
if (instructions && instructions !== title) { if (instructions && instructions !== title) {
$form.append($('<p class="instructions">').text(instructions)); $fieldset.append($('<p class="instructions">').text(instructions));
} }
_.each($fields, function (field) { _.each($fields, function (field) {
$form.append(utils.xForm2webForm($(field), $stanza)); $fieldset.append(utils.xForm2webForm($(field), $stanza));
}); });
$form.append('<input type="submit" class="pure-button button-primary" value="'+__('Save')+'"/>'); $form.append('<fieldset></fieldset>');
$form.append('<input type="button" class="pure-button button-cancel" value="'+__('Cancel')+'"/>'); $fieldset = $form.children('fieldset:last');
$fieldset.append('<input type="submit" class="pure-button button-primary" value="'+__('Save')+'"/>');
$fieldset.append('<input type="button" class="pure-button button-cancel" value="'+__('Cancel')+'"/>');
$fieldset.find('input[type=button]').on('click', this.cancelConfiguration.bind(this));
$form.on('submit', this.saveConfiguration.bind(this)); $form.on('submit', this.saveConfiguration.bind(this));
$form.find('input[type=button]').on('click', this.cancelConfiguration.bind(this));
}, },
sendConfiguration: function(config, onSuccess, onError) { sendConfiguration: function(config, onSuccess, onError) {

45
css/converse.css
View File

@ -1183,14 +1183,15 @@
#conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] { #conversejs form.pure-form.converse-form input[type=submit] {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; } padding-right: 1em;
margin-right: 1em; }
#conversejs form.pure-form.converse-form input.error { #conversejs form.pure-form.converse-form input.error {
border: 1px solid red; border: 1px solid red;
color: #818479; } color: #818479; }
#conversejs form.pure-form.converse-form .form-help { #conversejs form.pure-form.converse-form .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
padding-top: 5px; } padding-top: 0.5em; }
#conversejs form.pure-form.converse-form .form-help:hover { #conversejs form.pure-form.converse-form .form-help:hover {
color: #818479; } color: #818479; }
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
@ -1922,37 +1923,37 @@
position: absolute; } position: absolute; }
#conversejs .chatroom .chat-textarea { #conversejs .chatroom .chat-textarea {
border-bottom-right-radius: 0; } border-bottom-right-radius: 0; }
#conversejs .chatroom .invited-contact { #conversejs .chatroom .room-invite {
margin: 0.3em; }
#conversejs .chatroom .room-invite .invited-contact {
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
width: 100px; width: 100px;
border: 1px solid #999; } border: 1px solid #999; }
#conversejs .chatroom .invited-contact.tt-input { #conversejs .chatroom .room-invite .invited-contact.tt-input {
margin: 1px; width: 100%;
width: 97px;
width: calc(100% - 2px);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; } background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
#conversejs .chatroom .invited-contact.tt-input:focus { #conversejs .chatroom .room-invite .invited-contact.tt-input:focus {
border-color: #E76F51; } border-color: #E76F51; }
#conversejs .chatroom .invited-contact.tt-hint { #conversejs .chatroom .room-invite .invited-contact.tt-hint {
color: transparent; } color: transparent;
#conversejs .chatroom .tt-dropdown-menu { background-color: white; }
margin: 0 1px 0 1px; #conversejs .chatroom .room-invite .tt-dropdown-menu {
width: 96px; width: 96%;
max-height: 250px; max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: #E76F51; background: #E76F51;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; } border-bottom-left-radius: 4px;
#conversejs .chatroom .tt-dropdown-menu .tt-suggestion p { overflow-y: auto; }
#conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p {
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 11px; } font-size: 11px;
#conversejs .chatroom .tt-dropdown-menu .tt-suggestion .tt-highlight { text-overflow: ellipsis;
background-color: #D24E2B; } overflow-x: hidden; }
#conversejs .chatroom .tt-dropdown-menu .tt-suggestion p:hover { #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p:hover {
background-color: #FF977C; } background-color: #FF977C; }
#conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion .tt-highlight {
background-color: #D24E2B; }
#conversejs #minimized-chats { #conversejs #minimized-chats {
border-top-left-radius: 4px; border-top-left-radius: 4px;

3
mockup/chatroom.html
View File

@ -84,8 +84,9 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
<input type="submit" class="pure-button button-primary" value="Save"> <input type="submit" class="pure-button button-primary" value="Save">
<input type="button" class="pure-button button-cancel" value="Cancel"></form> <input type="button" class="pure-button button-cancel" value="Cancel">
</fieldset> </fieldset>
</form>
</div> </div>
</div> </div>
</div> </div>

22
sass/_chatrooms.scss
View File

@ -96,14 +96,14 @@
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.room-invite {
margin: 0.3em;
.invited-contact { .invited-contact {
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
width: 100px; width: 100px;
border: 1px solid #999; border: 1px solid #999;
&.tt-input { &.tt-input {
margin: 1px; width: 100%;
width: 97px;
width: calc(100% - 2px);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
&:focus { &:focus {
border-color: $chatroom-head-color; border-color: $chatroom-head-color;
@ -111,30 +111,30 @@
} }
&.tt-hint { &.tt-hint {
color: transparent; color: transparent;
background-color: white;
} }
} }
.tt-dropdown-menu { .tt-dropdown-menu {
margin: 0 1px 0 1px; width: 96%;
width: 96px;
max-height: 250px; max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: $chatroom-head-color; background: $chatroom-head-color;
border-bottom-right-radius: $chatbox-border-radius; border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius; border-bottom-left-radius: $chatbox-border-radius;
overflow-y: auto;
.tt-suggestion { .tt-suggestion {
p { p {
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 11px; font-size: 11px;
text-overflow: ellipsis;
overflow-x: hidden;
&:hover {
background-color: #FF977C;
}
} }
.tt-highlight { .tt-highlight {
background-color: #D24E2B; background-color: #D24E2B;
} }
p:hover {
background-color: #FF977C;
} }
} }
} }

3
sass/_core.scss
View File

@ -164,6 +164,7 @@
input[type=submit] { input[type=submit] {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
margin-right: 1em;
} }
input.error { input.error {
border: 1px solid red; border: 1px solid red;
@ -172,7 +173,7 @@
.form-help { .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
padding-top: 5px; padding-top: 0.5em;
&:hover { &:hover {
color: $text-color; color: $text-color;
} }

4
src/templates/chatroom_form.html
View File

@ -1,5 +1,7 @@
<div class="chatroom-form-container"> <div class="chatroom-form-container">
<form class="pure-form converse-form chatroom-form"> <form class="pure-form pure-form-stacked converse-form chatroom-form">
<fieldset>
<span class="spinner centered"/> <span class="spinner centered"/>
</fieldset>
</form> </form>
</div> </div>