diff options
author | Asaad Mahmood <asaadmahmood@users.noreply.github.com> | 2017-03-30 06:07:39 +0500 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-03-29 21:07:39 -0400 |
commit | 6d6b8134462d9e718f21e76f9c47f73604574c9b (patch) | |
tree | e27994e586d238ca72f8a8b7b932ae264e65832d /webapp | |
parent | 8b868828bfe769e65bdda49091be2161b19d5ceb (diff) | |
download | chat-6d6b8134462d9e718f21e76f9c47f73604574c9b.tar.gz chat-6d6b8134462d9e718f21e76f9c47f73604574c9b.tar.bz2 chat-6d6b8134462d9e718f21e76f9c47f73604574c9b.zip |
Ui ifxes (#5890)
* PLT-5975 - Back arrow in flag list cutting off
* PLT-6049 - Fixing pin icon color, and hover state
* PLT-5989 - Channel member and pin icon issue
* PLT-6067 - Pinned icon misaligned in firefox
* PLT-5885 - Adjusting icon spacing in modal
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/integrations/components/delete_integration.jsx | 2 | ||||
-rw-r--r-- | webapp/sass/base/_typography.scss | 4 | ||||
-rw-r--r-- | webapp/sass/components/_webrtc.scss | 3 | ||||
-rw-r--r-- | webapp/sass/layout/_content.scss | 18 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 1 | ||||
-rw-r--r-- | webapp/sass/layout/_sidebar-right.scss | 4 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 3 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 8 |
8 files changed, 25 insertions, 18 deletions
diff --git a/webapp/components/integrations/components/delete_integration.jsx b/webapp/components/integrations/components/delete_integration.jsx index 8e2e27596..06ef7802a 100644 --- a/webapp/components/integrations/components/delete_integration.jsx +++ b/webapp/components/integrations/components/delete_integration.jsx @@ -25,7 +25,7 @@ export default class DeleteIntegration extends DeleteModalTrigger { get modalMessage() { return ( <div className='alert alert-warning'> - <i className='fa fa-warning'/> + <i className='fa fa-warning fa-margin--right'/> <FormattedMessage id={this.props.messageId} defaultMessage='This action permanently deletes the integration and breaks any integrations using it. Are you sure you want to delete it?' diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss index a9bc183c4..c2ec3a859 100644 --- a/webapp/sass/base/_typography.scss +++ b/webapp/sass/base/_typography.scss @@ -37,11 +37,11 @@ body { .fa { &.fa-margin--left { - margin-left: 2px; + margin-left: 3px; } &.fa-margin--right { - margin-right: 2px; + margin-right: 3px; } } diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss index 3cb405303..a36fb1c95 100644 --- a/webapp/sass/components/_webrtc.scss +++ b/webapp/sass/components/_webrtc.scss @@ -348,6 +348,7 @@ } .search__form { - width: calc(100% - 92px); + margin-left: 5px; + width: calc(100% - 80px); } } diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss index b6fe98eb4..b42818930 100644 --- a/webapp/sass/layout/_content.scss +++ b/webapp/sass/layout/_content.scss @@ -6,9 +6,11 @@ .search-bar__container { display: none; } + .search-btns { display: none; } + .header-list__right { // the negative margin-right is used // to prevent the icons in the header from @@ -17,12 +19,11 @@ // the below z-index is used to ensure the icons // stays on the top and don't get hidden by the // search's input block - position: relative; - z-index: 6; - + float: right; margin-right: -18px; padding-right: 0px !important; - float: right; + position: relative; + z-index: 6; } } @@ -30,9 +31,11 @@ .search-bar__container { display: none; } + .search-btns { display: none; } + .header-list__right { // the negative margin-right is used // to prevent the icons in the header from @@ -41,12 +44,11 @@ // the below z-index is used to ensure the icons // stays on the top and don't get hidden by the // search's input block - position: relative; - z-index: 6; - + float: right; margin-right: -18px; padding-right: 0px !important; - float: right + position: relative; + z-index: 6; } } } diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index f8211d433..4368fc397 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -44,6 +44,7 @@ font-weight: normal !important; &.header-list__right { + white-space: nowrap; padding-right: 4px; } } diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss index 8d5a1d044..8d801a0c2 100644 --- a/webapp/sass/layout/_sidebar-right.scss +++ b/webapp/sass/layout/_sidebar-right.scss @@ -14,6 +14,10 @@ z-index: 5; } + &.sidebar--right--expanded { + z-index: 10; + } + .sidebar--right__bg { @include single-transition(background-color, .5s, ease); background-color: alpha-color($black, 0); diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 54fff87e8..e97eb3b59 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -220,9 +220,8 @@ .sidebar--right__title { display: inline-block; max-width: 300px; - white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 3bf877781..7a16a3be8 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -608,8 +608,8 @@ export function applyTheme(theme) { changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor); changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07)); changeCss('.app__body .channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8)); - changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8)); - changeCss('.app__body .channel-header #pinned-posts-button', 'fill:' + changeOpacity(theme.centerChannelColor, 0.8)); + changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.6)); + changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6)); changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header, .app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2)); changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25)); changeCss('.app__body .search-help-popover .search-autocomplete__divider span, .app__body .suggestion-list__divider > span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7)); @@ -685,9 +685,9 @@ export function applyTheme(theme) { } if (theme.linkColor) { - changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor); + changeCss('.app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover, .app__body .channel-header #member_popover:hover', 'color:' + theme.linkColor); changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5)); - changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor); + changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply, .app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + theme.linkColor); changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1)); changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4)); changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor); |