From f3a266ee5d25bfff322acd3cc5eef91a6dce8954 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Wed, 8 Mar 2017 14:13:50 +0500 Subject: Ui improvements and bug fixes (#5677) * PLT-5565 - Fixing theme colors not updating * PLT-4721 - Removing status ind for system messages * PLT-5735 - Fixing ellipsis in firefox * PLT-5010 - Removing extra space in channel modal * PLT-5584 - Inline image overrning edit textarea * PLT-5475 - Fixing tutorials on mobile * PLT-5142 - Disabling poitner events for status * PLT-5728 - Fixing emoji highlight on hover --- webapp/sass/components/_modal.scss | 2 +- webapp/sass/components/_multi-select.scss | 1 - webapp/sass/layout/_post.scss | 9 ++++++++- webapp/sass/responsive/_mobile.scss | 3 +++ webapp/utils/constants.jsx | 4 ++-- webapp/utils/utils.jsx | 14 +++++++------- 6 files changed, 21 insertions(+), 12 deletions(-) (limited to 'webapp') diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 03a8ad1e8..93bd9fda4 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -566,7 +566,7 @@ .more-modal__actions { flex-grow: 0; flex-shrink: 0; - margin: 5px 0 10px; + margin: 5px 0; padding-left: 20px; } diff --git a/webapp/sass/components/_multi-select.scss b/webapp/sass/components/_multi-select.scss index a33116aa4..beceb7b9c 100644 --- a/webapp/sass/components/_multi-select.scss +++ b/webapp/sass/components/_multi-select.scss @@ -29,7 +29,6 @@ .Select-value-label { overflow: hidden; - text-overflow: ellipsis; } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index de45eedd5..69cbbd712 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -3,7 +3,7 @@ .custom-textarea { background: transparent; border: 1px solid #cccccc; - height: auto; + height: 100%; line-height: 20px; min-height: 36px; overflow-x: hidden; @@ -576,6 +576,12 @@ } } + &.post--system { + .status { + visibility: hidden; + } + } + .post__img { padding-top: 0; } @@ -583,6 +589,7 @@ .status-wrapper { cursor: auto; height: 14px; + pointer-events: none; .status { bottom: auto; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 37c91846e..f31b325f6 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -9,6 +9,7 @@ .Select-value-label { max-width: 190px; + text-overflow: ellipsis; } } @@ -1622,6 +1623,7 @@ } } } + .attachment { .attachment__image { &.attachment__image--openraph { @@ -1635,6 +1637,7 @@ left: 0; position: fixed; top: 0; + z-index: 9999; .tutorial__content { .tutorial__steps { diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index cb55da9b8..541fb48ec 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -440,7 +440,7 @@ export const Constants = { linkColor: '#2f81b7', buttonBg: '#1dacfc', buttonColor: '#FFFFFF', - mentionHighlightBg: '#fff2bb', + mentionHighlightBg: '#f3e197', mentionHighlightLink: '#2f81b7', codeTheme: 'github', image: defaultThemeImage @@ -465,7 +465,7 @@ export const Constants = { linkColor: '#2389d7', buttonBg: '#23A2FF', buttonColor: '#FFFFFF', - mentionHighlightBg: '#fff2bb', + mentionHighlightBg: '#f3e197', mentionHighlightLink: '#2f81b7', codeTheme: 'github', image: mattermostThemeImage diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 384cea752..c860987af 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -538,14 +538,14 @@ export function applyTheme(theme) { if (theme.mentionBj) { changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'background:' + theme.mentionBj); - changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj + '!important;'); - changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj + '!important;'); + changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj); + changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'background:' + theme.mentionBj); } if (theme.mentionColor) { - changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor); - changeCss('.sidebar--left .badge', 'color:' + theme.mentionColor + '!important;'); - changeCss('.multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor + '!important;'); + changeCss('.app__body .sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor); + changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor); + changeCss('.app__body .multi-teams .team-sidebar .team-wrapper .team-container .team-btn .badge', 'color:' + theme.mentionColor); } if (theme.centerChannelBg) { @@ -622,7 +622,7 @@ export function applyTheme(theme) { changeCss('@media(min-width: 768px){.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.08)); changeCss('.app__body .more-modal__row.more-modal__row--selected, .app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07)); changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.15)); - changeCss('.app__body .suggestion--selected, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('.app__body .suggestion--selected, .app__body .emoticon-suggestion:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1)); changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;'); changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor); @@ -669,7 +669,7 @@ export function applyTheme(theme) { if (theme.mentionHighlightBg) { changeCss('.app__body .mention--highlight, .app__body .search-highlight', 'background:' + theme.mentionHighlightBg); - changeCss('.mention-comment', 'border-color:' + theme.mentionHighlightBg + ' !important'); + changeCss('.app__body .post.post--comment .post__body.mention-comment', 'border-color:' + theme.mentionHighlightBg); changeCss('.app__body .post.post--highlight', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5)); } -- cgit v1.2.3-1-g7c22