diff options
author | Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com> | 2016-07-15 00:56:38 +0500 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2016-07-14 11:56:38 -0800 |
commit | 70283c20f69576d52b4f35ed9c138749523c6ca7 (patch) | |
tree | 6841d14c6a38e830fe120524168fafbf82a1a0a6 /webapp | |
parent | c67729d7b6757758e7f7c9ebf70e85257e32dcd9 (diff) | |
download | chat-70283c20f69576d52b4f35ed9c138749523c6ca7.tar.gz chat-70283c20f69576d52b4f35ed9c138749523c6ca7.tar.bz2 chat-70283c20f69576d52b4f35ed9c138749523c6ca7.zip |
PLT-3508/PLT-3516/PLT-3558/PLT-3570/PLT-3497 Multiple UI Improvements (#3553)
* PLT-3627 - Fixing spacing in RHS
* PLT-3516 - Fixing errors in backstage
* PLT-3558 - Fixing system console menu on small screens
* PLT-3570 - Fixing account settings sidebar truncating issue
* PLT-3497 - Moving see other themes link
* Removing formatted message import from premade theme chooser
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/emoji/components/add_emoji.jsx | 5 | ||||
-rw-r--r-- | webapp/components/form_error.jsx | 11 | ||||
-rw-r--r-- | webapp/components/integrations/components/add_command.jsx | 5 | ||||
-rw-r--r-- | webapp/components/integrations/components/add_incoming_webhook.jsx | 5 | ||||
-rw-r--r-- | webapp/components/integrations/components/add_outgoing_webhook.jsx | 5 | ||||
-rw-r--r-- | webapp/components/user_settings/premade_theme_chooser.jsx | 16 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings_theme.jsx | 20 | ||||
-rw-r--r-- | webapp/sass/layout/_post-right.scss | 234 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 54 | ||||
-rw-r--r-- | webapp/sass/routes/_settings.scss | 11 |
10 files changed, 211 insertions, 155 deletions
diff --git a/webapp/components/emoji/components/add_emoji.jsx b/webapp/components/emoji/components/add_emoji.jsx index 46f345476..c3d61d32c 100644 --- a/webapp/components/emoji/components/add_emoji.jsx +++ b/webapp/components/emoji/components/add_emoji.jsx @@ -277,7 +277,10 @@ export default class AddEmoji extends React.Component { </div> {preview} <div className='backstage-form__footer'> - <FormError error={this.state.error}/> + <FormError + type='backstage' + error={this.state.error} + /> <Link className='btn btn-sm' to={'/' + this.props.team.name + '/emoji'} diff --git a/webapp/components/form_error.jsx b/webapp/components/form_error.jsx index 047595ef2..df6fa3ab0 100644 --- a/webapp/components/form_error.jsx +++ b/webapp/components/form_error.jsx @@ -7,6 +7,7 @@ export default class FormError extends React.Component { static get propTypes() { // accepts either a single error or an array of errors return { + type: React.PropTypes.node, error: React.PropTypes.node, margin: React.PropTypes.node, errors: React.PropTypes.arrayOf(React.PropTypes.node) @@ -40,6 +41,16 @@ export default class FormError extends React.Component { return null; } + if (this.props.type === 'backstage') { + return ( + <div className='pull-left has-error'> + <label className='control-label'> + {message} + </label> + </div> + ); + } + if (this.props.margin) { return ( <div className='form-group has-error'> diff --git a/webapp/components/integrations/components/add_command.jsx b/webapp/components/integrations/components/add_command.jsx index cf563875b..d24acd70d 100644 --- a/webapp/components/integrations/components/add_command.jsx +++ b/webapp/components/integrations/components/add_command.jsx @@ -537,7 +537,10 @@ export default class AddCommand extends React.Component { </div> {autocompleteFields} <div className='backstage-form__footer'> - <FormError errors={[this.state.serverError, this.state.clientError]}/> + <FormError + type='backstage' + errors={[this.state.serverError, this.state.clientError]} + /> <Link className='btn btn-sm' to={'/' + this.props.team.name + '/integrations/commands'} diff --git a/webapp/components/integrations/components/add_incoming_webhook.jsx b/webapp/components/integrations/components/add_incoming_webhook.jsx index 122600c90..a213a805f 100644 --- a/webapp/components/integrations/components/add_incoming_webhook.jsx +++ b/webapp/components/integrations/components/add_incoming_webhook.jsx @@ -186,7 +186,10 @@ export default class AddIncomingWebhook extends React.Component { </div> </div> <div className='backstage-form__footer'> - <FormError errors={[this.state.serverError, this.state.clientError]}/> + <FormError + type='backstage' + errors={[this.state.serverError, this.state.clientError]} + /> <Link className='btn btn-sm' to={'/' + this.props.team.name + '/integrations/incoming_webhooks'} diff --git a/webapp/components/integrations/components/add_outgoing_webhook.jsx b/webapp/components/integrations/components/add_outgoing_webhook.jsx index bd49fedc9..d6c0242a5 100644 --- a/webapp/components/integrations/components/add_outgoing_webhook.jsx +++ b/webapp/components/integrations/components/add_outgoing_webhook.jsx @@ -319,7 +319,10 @@ export default class AddOutgoingWebhook extends React.Component { </div> </div> <div className='backstage-form__footer'> - <FormError errors={[this.state.serverError, this.state.clientError]}/> + <FormError + type='backstage' + errors={[this.state.serverError, this.state.clientError]} + /> <Link className='btn btn-sm' to={'/' + this.props.team.name + '/integrations/outgoing_webhooks'} diff --git a/webapp/components/user_settings/premade_theme_chooser.jsx b/webapp/components/user_settings/premade_theme_chooser.jsx index 9552c686d..03ea56449 100644 --- a/webapp/components/user_settings/premade_theme_chooser.jsx +++ b/webapp/components/user_settings/premade_theme_chooser.jsx @@ -7,8 +7,6 @@ import Constants from 'utils/constants.jsx'; import React from 'react'; -import {FormattedMessage} from 'react-intl'; - export default class PremadeThemeChooser extends React.Component { constructor(props) { super(props); @@ -54,20 +52,6 @@ export default class PremadeThemeChooser extends React.Component { <div className='clearfix'> {premadeThemes} </div> - <div className='clearfix'> - <div className='col-sm-12 padding-bottom x2'> - <a - href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples' - target='_blank' - rel='noopener noreferrer' - > - <FormattedMessage - id='user.settings.display.theme.otherThemes' - defaultMessage='See other themes' - /> - </a> - </div> - </div> </div> ); } diff --git a/webapp/components/user_settings/user_settings_theme.jsx b/webapp/components/user_settings/user_settings_theme.jsx index 4ff08402a..d12a7689a 100644 --- a/webapp/components/user_settings/user_settings_theme.jsx +++ b/webapp/components/user_settings/user_settings_theme.jsx @@ -257,9 +257,27 @@ export default class ThemeSetting extends React.Component { inputs.push(custom); inputs.push( - <div key='importSlackThemeButton'> + <div> <br/> <a + href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples' + target='_blank' + rel='noopener noreferrer' + > + <FormattedMessage + id='user.settings.display.theme.otherThemes' + defaultMessage='See other themes' + /> + </a> + </div> + ); + + inputs.push( + <div + key='importSlackThemeButton' + className='padding-top' + > + <a className='theme' onClick={this.handleImportModal} > diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss index f1fe0cac3..3ee4fe025 100644 --- a/webapp/sass/layout/_post-right.scss +++ b/webapp/sass/layout/_post-right.scss @@ -1,156 +1,154 @@ @charset 'UTF-8'; -.app__body { - .post-right__container { - @include display-flex; - @include flex-direction(column); - height: 100%; - - .post-right-root-message { - padding: 1em 1em 0; - } - - .post-right-comments-container { - position: relative; +.post-right__container { + @include display-flex; + @include flex-direction(column); + height: 100%; - .post { - &:first-child { - padding-top: 15px; - } - } - } + .post-right-root-message { + padding: 1em 1em 0; + } + .post-right-comments-container { + position: relative; - .help_format_text { - bottom: -63px; - right: auto; + .post { + &:first-child { + padding-top: 15px; + } } + } - .post { - &.post--root { - border-bottom: 1px solid #ddd; - padding-bottom: 1em; - .post__body { - background: transparent !important; - } - } + .help_format_text { + bottom: -63px; + right: auto; + } - .post__header { - .col__reply { - background: transparent !important; - border: none !important; - text-align: right; - top: 0; - } - } + .post { + &.post--root { + border-bottom: 1px solid #ddd; + padding-bottom: 1em; .post__body { - width: 100%; + background: transparent !important; } } - hr { - border: none; - margin-bottom: 0; + .post__header { + .col__reply { + background: transparent !important; + border: none !important; + text-align: right; + top: 0; + } } - .post-create__container { + .post__body { width: 100%; + } + } - .textarea-wrapper { - min-height: 100px; - } - - .btn { - margin-bottom: 10px; - } + hr { + border: none; + margin-bottom: 0; + } - .custom-textarea { - min-height: 100px; - } + .post-create__container { + width: 100%; - .msg-typing { - @include opacity(.7); - display: block; - float: left; - font-size: 13px; - height: 20px; - line-height: 20px; - margin-top: 3px; - max-width: 230px; - min-width: 1px; - } + .textarea-wrapper { + min-height: 100px; + } - .post-create-footer { - padding: 5px 0 10px; - width: 100%; - } + .btn { + margin-bottom: 10px; + } - .post-right-comments-upload-in-progress { - color: #a8adb7; - margin-right: 10px; - padding: 6px 0; - } + .custom-textarea { + min-height: 100px; } - } - .post-right-header { - border-bottom: $border-gray; - color: #999; - font-size: 1em; - font-weight: 400; - height: 39px; - padding: 10px 10px 0 15px; - text-transform: uppercase; - } + .msg-typing { + @include opacity(.7); + display: block; + float: left; + font-size: 13px; + height: 20px; + line-height: 20px; + margin-top: 3px; + max-width: 230px; + min-width: 1px; + } - .post-right-root-container { - border-bottom: $border-gray; - padding: 5px 10px; + .post-create-footer { + padding: 5px 0 10px; + width: 100%; + } - ul { - margin-bottom: 2px; - padding-left: 0; + .post-right-comments-upload-in-progress { + color: #a8adb7; + margin-right: 10px; + padding: 6px 0; } } +} - .post-right-channel__name { - font-weight: 600; - margin: 0 0 15px; - } +.post-right-header { + border-bottom: $border-gray; + color: #999; + font-size: 1em; + font-weight: 400; + height: 39px; + padding: 10px 10px 0 15px; + text-transform: uppercase; +} - .post-right-root-container li { - display: inline; - list-style-type: none; - padding-right: 3px; - } +.post-right-root-container { + border-bottom: $border-gray; + padding: 5px 10px; - .post-right-root-time { - color: #a8adb7; + ul { + margin-bottom: 2px; + padding-left: 0; } +} - .post-right-create-comment-container { - bottom: 0; - left: 0; - margin-bottom: 18px; - padding: 5px; - position: absolute; - width: 100%; - } +.post-right-channel__name { + font-weight: 600; + margin: 0 0 15px; +} - .post-right__scroll { - @include flex(1 1 auto); - -webkit-overflow-scrolling: touch; - overflow: auto; - position: relative; +.post-right-root-container li { + display: inline; + list-style-type: none; + padding-right: 3px; +} - .file-preview__container { - margin-top: 5px; - } - } +.post-right-root-time { + color: #a8adb7; +} + +.post-right-create-comment-container { + bottom: 0; + left: 0; + margin-bottom: 18px; + padding: 5px; + position: absolute; + width: 100%; +} - .post-right-comment-time { - color: #a8adb7; +.post-right__scroll { + -webkit-overflow-scrolling: touch; + @include flex(1 1 auto); + overflow: auto; + position: relative; + + .file-preview__container { + margin-top: 5px; } } + +.post-right-comment-time { + color: #a8adb7; +} diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 9db962ec1..fcbf23b1c 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -493,14 +493,6 @@ } .post-create__container { - .post-right__container & { - padding: 0 1em; - - .msg-typing { - display: none; - } - } - form { padding: .5em 0; } @@ -524,6 +516,7 @@ .post-body__cell { display: table-cell; padding-left: 45px; + .sidebar--right & { padding-left: 0; } @@ -531,12 +524,12 @@ .app__content & { .btn-file { - width: 45px; - padding: 0; - line-height: 36px; bottom: -2px; left: 0; + line-height: 36px; + padding: 0; top: auto; + width: 45px; } } @@ -576,6 +569,24 @@ } } + // Since system console is not responsive we're overriding bootstrap styles for it + .admin-sidebar { + .navbar-nav { + margin-top: 0; + + > li { + float: left; + } + + .dropdown-menu { + background: $white; + left: auto; + position: absolute; + right: 0; + } + } + } + #navbar { .navbar-default { .navbar-header { @@ -802,6 +813,25 @@ right: 0; width: 100%; + .post-create__container { + form { + padding: .5em 1em; + } + + .msg-typing:empty { + display: none; + } + + .post-create-footer { + padding: 1em 0; + + .control-label { + margin: .5em 0; + top: 0; + } + } + } + .sidebar__collapse, .sidebar__search-icon { display: block; @@ -871,8 +901,8 @@ } .app__content { - padding-top: 45px; margin: 0; + padding-top: 45px; .channel__wrap & { padding-top: 45px; diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index 501c20e20..36a1acf76 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -171,6 +171,9 @@ .theme-label { font-weight: 400; margin-top: 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } img { @@ -343,7 +346,10 @@ a { border-radius: 0; color: $gray; - padding: 8px 5px 8px 15px; + overflow: hidden; + padding: 8px 15px; + text-overflow: ellipsis; + white-space: nowrap; } .icon { @@ -382,10 +388,7 @@ @include alpha-property(background-color, $black, .1); border-radius: 0; font-weight: 400; - overflow: hidden; position: relative; - text-overflow: ellipsis; - white-space: nowrap; } } } |