diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2016-12-06 20:51:31 +0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-12-06 10:51:31 -0500 |
commit | 08c2d289420746992b99bfe992144ef9b06b025a (patch) | |
tree | f05f475b5c81b0b89f687192e780f0efceaf24a8 | |
parent | 42f28886cca4ddf0f2814ce27d6dfbce95aa1625 (diff) | |
download | chat-08c2d289420746992b99bfe992144ef9b06b025a.tar.gz chat-08c2d289420746992b99bfe992144ef9b06b025a.tar.bz2 chat-08c2d289420746992b99bfe992144ef9b06b025a.zip |
Multiple UI Improvements (#4712)
* Multiple UI Improvements
* Reverting modal animation
-rw-r--r-- | webapp/components/suggestion/switch_channel_provider.jsx | 2 | ||||
-rw-r--r-- | webapp/components/user_settings/import_theme_modal.jsx | 2 | ||||
-rw-r--r-- | webapp/sass/components/_mentions.scss | 5 | ||||
-rw-r--r-- | webapp/sass/components/_popover.scss | 1 | ||||
-rw-r--r-- | webapp/sass/layout/_forms.scss | 20 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 1 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 49 | ||||
-rw-r--r-- | webapp/sass/utils/_variables.scss | 2 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 2 |
9 files changed, 52 insertions, 32 deletions
diff --git a/webapp/components/suggestion/switch_channel_provider.jsx b/webapp/components/suggestion/switch_channel_provider.jsx index 534a7e30f..cb907862a 100644 --- a/webapp/components/suggestion/switch_channel_provider.jsx +++ b/webapp/components/suggestion/switch_channel_provider.jsx @@ -35,6 +35,8 @@ class SwitchChannelSuggestion extends Suggestion { icon = <div className='status'><i className='fa fa-globe'/></div>; } else if (item.type === Constants.PRIVATE_CHANNEL) { icon = <div className='status'><i className='fa fa-lock'/></div>; + } else { + icon = <div className='status'><i className='fa fa-user'/></div>; } return ( diff --git a/webapp/components/user_settings/import_theme_modal.jsx b/webapp/components/user_settings/import_theme_modal.jsx index 32c6837e8..7ae057cc4 100644 --- a/webapp/components/user_settings/import_theme_modal.jsx +++ b/webapp/components/user_settings/import_theme_modal.jsx @@ -171,7 +171,7 @@ export default class ImportThemeModal extends React.Component { /> </p> <div className='form-group less'> - <div className='col-sm-9'> + <div className='col-sm-12'> <input type='text' className='form-control' diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss index 4ddb861ca..e1e35ea29 100644 --- a/webapp/sass/components/_mentions.scss +++ b/webapp/sass/components/_mentions.scss @@ -21,6 +21,11 @@ width: 100%; z-index: 101; + .fa-user { + position: relative; + top: -1px; + } + .mention--align { @include clearfix; text-overflow: ellipsis; diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss index 408f0ffd0..1bd1f2c3b 100644 --- a/webapp/sass/components/_popover.scss +++ b/webapp/sass/components/_popover.scss @@ -17,6 +17,7 @@ } .popover-title { + @include border-radius(0); background: alpha-color($black, .05); max-width: 100%; overflow: hidden; diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 7b4e03ad9..100b618e8 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -60,6 +60,26 @@ } } +.has-error { + .help-block, + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline { + color: $red; + } + + &.radio, + &.checkbox, + &.radio-inline, + &.checkbox-inline { + label { + color: $red; + } + } +} + .padding-top { padding-top: 7px; diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index fd1c42135..db3bda627 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -210,7 +210,6 @@ .channel-intro-text { margin-top: 35px; - word-break: break-all; } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index dc55d2d54..68ba20537 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -5,23 +5,6 @@ max-height: 145px; } - .modal { - .modal-dialog { - &.new-channel__modal { - position: fixed; - @include translate3d(0, 100%, 0); - } - } - - &.in { - .modal-dialog { - &.new-channel__modal { - @include translate3d(0, 0, 0); - } - } - } - } - .webrtc__notification--rhs { left: auto; right: 0; @@ -43,7 +26,7 @@ @include box-shadow(none); background: alpha-color($black, .8); border: none; - height: calc(100% - 45px); + height: calc(100% - 40px); max-width: 100%; position: fixed; top: 47px; @@ -598,6 +581,16 @@ min-height: 100%; } + .nav-pills { + > li { + &:hover { + a { + background: transparent !important; + } + } + } + } + &.display--content { .modal-header { display: none; @@ -802,7 +795,7 @@ @include translate3d(0, 100%, 0); background: alpha-color($black, .9); display: block; - height: calc(100% - 45px); + height: calc(100% - 40px); left: 0; overflow: auto; padding: 1.4em 0 0; @@ -1011,11 +1004,11 @@ padding-bottom: 25px; ul { - clear: both; - background: #ffffff; + background: $white; border-radius: 3px; - top: 5px; + clear: both; position: relative; + top: 5px; li { a { @@ -1031,21 +1024,21 @@ > a { font-size: 15px; - margin: 0; line-height: 2.5; + margin: 0; &:hover, &:focus { - background: transparent; + background: transparent !important; } &.has-close { .btn-close { - width: 40px; - text-align: center; - right: 0; - display: block; @include opacity(.5); + display: block; + right: 0; + text-align: center; + width: 40px; } } } diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss index ffbcc847e..85bdd28a3 100644 --- a/webapp/sass/utils/_variables.scss +++ b/webapp/sass/utils/_variables.scss @@ -6,7 +6,7 @@ $primary-color--hover: darken($primary-color, 10%); $bg--gray: rgb(245, 245, 245); $white: rgb(255, 255, 255); $black: rgb(0, 0, 0); -$red: rgb(229, 101, 101); +$red: rgb(214, 73, 70); $yellow: rgb(255, 255, 0); $light-gray: rgba(0, 0, 0, .15); $gray: rgba(0, 0, 0, .3); diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index f37ddd73c..00b7f53f8 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -476,6 +476,7 @@ export function applyTheme(theme) { changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText); changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2)); + changeCss('@media(max-width: 768px){.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + changeOpacity(theme.sidebarText, 0.6)); } if (theme.sidebarUnreadText) { @@ -484,7 +485,6 @@ export function applyTheme(theme) { if (theme.sidebarTextHoverBg) { changeCss('.sidebar--left .nav-pills__container li>a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg); - changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg); } if (theme.sidebarTextActiveBorder) { |