diff --git a/converse.js b/converse.js index e59094c6a..292a480e3 100644 --- a/converse.js +++ b/converse.js @@ -3186,22 +3186,25 @@ renderConfigurationForm: function (stanza) { var $form = this.$el.find('form.chatroom-form'), + $fieldset = $form.children('fieldset:first'), $stanza = $(stanza), $fields = $stanza.find('field'), title = $stanza.find('title').text(), instructions = $stanza.find('instructions').text(); - $form.find('span.spinner').remove(); - $form.append($('').text(title)); + $fieldset.find('span.spinner').remove(); + $fieldset.append($('').text(title)); if (instructions && instructions !== title) { - $form.append($('

').text(instructions)); + $fieldset.append($('

').text(instructions)); } _.each($fields, function (field) { - $form.append(utils.xForm2webForm($(field), $stanza)); + $fieldset.append(utils.xForm2webForm($(field), $stanza)); }); - $form.append(''); - $form.append(''); + $form.append('

'); + $fieldset = $form.children('fieldset:last'); + $fieldset.append(''); + $fieldset.append(''); + $fieldset.find('input[type=button]').on('click', this.cancelConfiguration.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) { diff --git a/css/converse.css b/css/converse.css index ce88f186d..3627ac501 100644 --- a/css/converse.css +++ b/css/converse.css @@ -1183,14 +1183,15 @@ #conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=submit] { padding-left: 1em; - padding-right: 1em; } + padding-right: 1em; + margin-right: 1em; } #conversejs form.pure-form.converse-form input.error { border: 1px solid red; color: #818479; } #conversejs form.pure-form.converse-form .form-help { color: gray; font-size: 85%; - padding-top: 5px; } + padding-top: 0.5em; } #conversejs form.pure-form.converse-form .form-help:hover { color: #818479; } #conversejs .chat-textarea-chatbox-selected { @@ -1922,37 +1923,37 @@ position: absolute; } #conversejs .chatroom .chat-textarea { border-bottom-right-radius: 0; } - #conversejs .chatroom .invited-contact { - margin: -1px 0 0 -1px; - width: 100px; - border: 1px solid #999; } - #conversejs .chatroom .invited-contact.tt-input { - margin: 1px; - 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; } - #conversejs .chatroom .invited-contact.tt-input:focus { - border-color: #E76F51; } - #conversejs .chatroom .invited-contact.tt-hint { - color: transparent; } - #conversejs .chatroom .tt-dropdown-menu { - margin: 0 1px 0 1px; - width: 96px; - max-height: 250px; - overflow-x: hidden; - overflow-y: auto; - text-overflow: ellipsis; - background: #E76F51; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; } - #conversejs .chatroom .tt-dropdown-menu .tt-suggestion p { - color: white; - cursor: pointer; - font-size: 11px; } - #conversejs .chatroom .tt-dropdown-menu .tt-suggestion .tt-highlight { - background-color: #D24E2B; } - #conversejs .chatroom .tt-dropdown-menu .tt-suggestion p:hover { - background-color: #FF977C; } + #conversejs .chatroom .room-invite { + margin: 0.3em; } + #conversejs .chatroom .room-invite .invited-contact { + margin: -1px 0 0 -1px; + width: 100px; + border: 1px solid #999; } + #conversejs .chatroom .room-invite .invited-contact.tt-input { + width: 100%; + 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 .room-invite .invited-contact.tt-input:focus { + border-color: #E76F51; } + #conversejs .chatroom .room-invite .invited-contact.tt-hint { + color: transparent; + background-color: white; } + #conversejs .chatroom .room-invite .tt-dropdown-menu { + width: 96%; + max-height: 250px; + background: #E76F51; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + overflow-y: auto; } + #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p { + color: white; + cursor: pointer; + font-size: 11px; + text-overflow: ellipsis; + overflow-x: hidden; } + #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p:hover { + background-color: #FF977C; } + #conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion .tt-highlight { + background-color: #D24E2B; } #conversejs #minimized-chats { border-top-left-radius: 4px; diff --git a/mockup/chatroom.html b/mockup/chatroom.html index f3552ef35..160e983b4 100644 --- a/mockup/chatroom.html +++ b/mockup/chatroom.html @@ -84,8 +84,9 @@
- +
+ diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index ab7da43de..672eb13d1 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -96,45 +96,45 @@ border-bottom-right-radius: 0; } - .invited-contact { - margin: -1px 0 0 -1px; - width: 100px; - border: 1px solid #999; - &.tt-input { - margin: 1px; - 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; - &:focus { - border-color: $chatroom-head-color; + .room-invite { + margin: 0.3em; + .invited-contact { + margin: -1px 0 0 -1px; + width: 100px; + border: 1px solid #999; + &.tt-input { + width: 100%; + 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 { + border-color: $chatroom-head-color; + } + } + &.tt-hint { + color: transparent; + background-color: white; } } - &.tt-hint { - color: transparent; - } - } - .tt-dropdown-menu { - margin: 0 1px 0 1px; - width: 96px; - max-height: 250px; - overflow-x: hidden; - overflow-y: auto; - text-overflow: ellipsis; - background: $chatroom-head-color; - border-bottom-right-radius: $chatbox-border-radius; - border-bottom-left-radius: $chatbox-border-radius; - - .tt-suggestion { - p { - color: white; - cursor: pointer; - font-size: 11px; - } - .tt-highlight { - background-color: #D24E2B; - } - p:hover { - background-color: #FF977C; + .tt-dropdown-menu { + width: 96%; + max-height: 250px; + background: $chatroom-head-color; + border-bottom-right-radius: $chatbox-border-radius; + border-bottom-left-radius: $chatbox-border-radius; + overflow-y: auto; + .tt-suggestion { + p { + color: white; + cursor: pointer; + font-size: 11px; + text-overflow: ellipsis; + overflow-x: hidden; + &:hover { + background-color: #FF977C; + } + } + .tt-highlight { + background-color: #D24E2B; + } } } } diff --git a/sass/_core.scss b/sass/_core.scss index 661e5c22e..7a8ef05a3 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -164,6 +164,7 @@ input[type=submit] { padding-left: 1em; padding-right: 1em; + margin-right: 1em; } input.error { border: 1px solid red; @@ -172,7 +173,7 @@ .form-help { color: gray; font-size: 85%; - padding-top: 5px; + padding-top: 0.5em; &:hover { color: $text-color; } diff --git a/src/templates/chatroom_form.html b/src/templates/chatroom_form.html index 38ca3a56d..e3e59afcb 100644 --- a/src/templates/chatroom_form.html +++ b/src/templates/chatroom_form.html @@ -1,5 +1,7 @@
-
- + +
+ +