From 4ebc85e05c3f45d2978c6fb8f9874b93658c3607 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 3 Apr 2017 22:38:15 +0500 Subject: Ui improvements (#5948) * PLT-5849 - Code block wrap on IOS * PLT-5972 - Comment has first line indented * PLT-6048 - Adjusting UI for link previews * PLT-5733 - Adding error text theme option --- .../components/user_settings/custom_theme_chooser.jsx | 4 ++++ webapp/sass/layout/_forms.scss | 6 ++++-- webapp/sass/layout/_webhooks.scss | 4 ++-- webapp/sass/responsive/_desktop.scss | 17 ----------------- webapp/sass/responsive/_mobile.scss | 4 ++++ webapp/sass/routes/_settings.scss | 4 ++++ webapp/utils/constants.jsx | 9 +++++++++ webapp/utils/utils.jsx | 4 ++++ 8 files changed, 31 insertions(+), 21 deletions(-) diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx index a39f9967b..8c5cf939e 100644 --- a/webapp/components/user_settings/custom_theme_chooser.jsx +++ b/webapp/components/user_settings/custom_theme_chooser.jsx @@ -83,6 +83,10 @@ const messages = defineMessages({ id: 'user.settings.custom_theme.buttonColor', defaultMessage: 'Button Text' }, + errorTextColor: { + id: 'user.settings.custom_theme.errorTextColor', + defaultMessage: 'Error Text Color' + }, mentionHighlightBg: { id: 'user.settings.custom_theme.mentionHighlightBg', defaultMessage: 'Mention Highlight BG' diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss index 64c74b0a5..c5f00c813 100644 --- a/webapp/sass/layout/_forms.scss +++ b/webapp/sass/layout/_forms.scss @@ -69,8 +69,10 @@ color: $red; } - .control-label { - color: inherit; + .form__label { + &.control-label { + color: inherit; + } } &.radio, diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss index 57b8beaee..9cfca2a3c 100644 --- a/webapp/sass/layout/_webhooks.scss +++ b/webapp/sass/layout/_webhooks.scss @@ -46,7 +46,7 @@ border-radius: 4px; border-style: solid; border-width: 1px; - margin: 0 0 5px 0; + margin-top: 5px; padding: 2px 5px; } @@ -140,7 +140,7 @@ &.attachment__image--openraph { margin-bottom: 0; max-height: 80px; - max-width: 200px; + max-width: 100%; &.loading { height: 80px; diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index f671104e1..891431f20 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -76,23 +76,6 @@ } } } - - &.move--left { - .post { - &.post--root, - &.other--root { - .post__header { - padding-right: 70px; - } - } - - &.post--comment { - .post__header { - padding-right: 70px; - } - } - } - } } } diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 88dcc17f5..e47ba26aa 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,10 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .post-code { + word-wrap: normal; + } + .table-responsive { border: none; } diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss index a150e8904..5b1fcdf9e 100644 --- a/webapp/sass/routes/_settings.scss +++ b/webapp/sass/routes/_settings.scss @@ -80,6 +80,10 @@ label { font-weight: 600; + + &.has-error { + font-weight: normal; + } } .no-padding--left { diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 61c418047..4f00a8559 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -449,6 +449,7 @@ export const Constants = { linkColor: '#2f81b7', buttonBg: '#1dacfc', buttonColor: '#FFFFFF', + errorTextColor: '#a94442', mentionHighlightBg: '#f3e197', mentionHighlightLink: '#2f81b7', codeTheme: 'github', @@ -474,6 +475,7 @@ export const Constants = { linkColor: '#2389d7', buttonBg: '#23A2FF', buttonColor: '#FFFFFF', + errorTextColor: '#a94442', mentionHighlightBg: '#f3e197', mentionHighlightLink: '#2f81b7', codeTheme: 'github', @@ -499,6 +501,7 @@ export const Constants = { linkColor: '#A4FFEB', buttonBg: '#4CBBA4', buttonColor: '#FFFFFF', + errorTextColor: '#ff6461', mentionHighlightBg: '#984063', mentionHighlightLink: '#A4FFEB', codeTheme: 'solarized-dark', @@ -524,6 +527,7 @@ export const Constants = { linkColor: '#0D93FF', buttonBg: '#0177e7', buttonColor: '#FFFFFF', + errorTextColor: '#ff6461', mentionHighlightBg: '#784098', mentionHighlightLink: '#A4FFEB', codeTheme: 'monokai', @@ -606,6 +610,11 @@ export const Constants = { id: 'newMessageSeparator', uiName: 'New Message Separator' }, + { + group: 'centerChannelElements', + id: 'errorTextColor', + uiName: 'Error Text Color' + }, { group: 'centerChannelElements', id: 'mentionHighlightBg', diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index d2cebafa7..55ea72e8d 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -707,6 +707,10 @@ export function applyTheme(theme) { changeCss('.app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor); } + if (theme.errorTextColor) { + changeCss('.app__body .has-error .help-block, .app__body .has-error .control-label, .app__body .has-error .radio, .app__body .has-error .checkbox, .app__body .has-error .radio-inline, .app__body .has-error .checkbox-inline, .app__body .has-error.radio label, .app__body .has-error.checkbox label, .app__body .has-error.radio-inline label, .app__body .has-error.checkbox-inline label', 'color:' + theme.errorTextColor); + } + if (theme.mentionHighlightBg) { changeCss('.app__body .mention--highlight, .app__body .search-highlight', 'background:' + theme.mentionHighlightBg); changeCss('.app__body .post.post--comment .post__body.mention-comment', 'border-color:' + theme.mentionHighlightBg); -- cgit v1.2.3-1-g7c22