Skip to content

C
converse.js
Commit 35a4f9bd authored by JC Brand's avatar JC Brand
Browse files
Options

Update the JS to better render the chatroom config form. 

Other small tweaks as well.
parent 4a8b5da1
Show whitespace changes
Inline Side-by-side
Showing with 89 additions and 81 deletions
converse.js
View file @ 35a4f9bd
...@@ -3186,22 +3186,25 @@ ...@@ -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) {
......
css/converse.css
View file @ 35a4f9bd
...@@ -1183,14 +1183,15 @@ ...@@ -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 @@ ...@@ -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;
......
mockup/chatroom.html
View file @ 35a4f9bd
...@@ -84,8 +84,9 @@ ...@@ -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>
......
sass/_chatrooms.scss
View file @ 35a4f9bd
...@@ -96,14 +96,14 @@ ...@@ -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 @@ ...@@ -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;
} }
} }
} }
......
sass/_core.scss
View file @ 35a4f9bd
...@@ -164,6 +164,7 @@ ...@@ -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 @@ ...@@ -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;
} }
......
src/templates/chatroom_form.html
View file @ 35a4f9bd
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7