From 522ff67c638512ad92df74fd7faddf1da7c37d6a Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 15 Feb 2016 19:37:06 +0500 Subject: Multiple UI Improvements --- .../user_settings/custom_theme_chooser.jsx | 108 +++++++++++++++++++-- .../user_settings/user_settings_theme.jsx | 2 - web/react/utils/constants.jsx | 25 ++++- web/react/utils/utils.jsx | 4 +- web/sass-files/sass/partials/_responsive.scss | 8 +- web/sass-files/sass/partials/_settings.scss | 50 ++++++++++ 6 files changed, 183 insertions(+), 14 deletions(-) diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 2d88a3650..242615bc0 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -102,6 +102,7 @@ class CustomThemeChooser extends React.Component { this.onPickerChange = this.onPickerChange.bind(this); this.onInputChange = this.onInputChange.bind(this); this.pasteBoxChange = this.pasteBoxChange.bind(this); + this.toggleContent = this.toggleContent.bind(this); this.state = {}; } @@ -153,11 +154,18 @@ class CustomThemeChooser extends React.Component { this.props.updateTheme(theme); } + toggleContent(e) { + e.stopPropagation(); + $(e.target).next().slideToggle(); + $(e.target).toggleClass('open'); + } render() { const {formatMessage} = this.props.intl; const theme = this.props.theme; - const elements = []; + const sidebarElements = []; + const centerChannelElements = []; + const linkAndButtonElements = []; let colors = ''; Constants.THEME_ELEMENTS.forEach((element, index) => { if (element.id === 'codeTheme') { @@ -187,9 +195,9 @@ class CustomThemeChooser extends React.Component { ); - elements.push( + centerChannelElements.push(
@@ -219,10 +227,54 @@ class CustomThemeChooser extends React.Component {
); + } else if (element.group === 'centerChannelElements') { + centerChannelElements.push( +
+ +
+ + +
+
+ ); + } else if (element.group === 'sidebarElements') { + sidebarElements.push( +
+ +
+ + +
+
+ ); + + colors += theme[element.id] + ','; } else { - elements.push( + linkAndButtonElements.push(
@@ -265,9 +317,51 @@ class CustomThemeChooser extends React.Component { ); return ( -
+
+
+
+ {'Sidebar Styles'} +
+ + +
+
+
+ {sidebarElements} +
+
+
+
+ {'Center Channel Styles'} +
+ + +
+
+
+ {centerChannelElements} +
+
- {elements} +
+ {'Link and Button Styles'} +
+ + +
+
+
+ {linkAndButtonElements} +
{pasteBox} diff --git a/web/react/components/user_settings/user_settings_theme.jsx b/web/react/components/user_settings/user_settings_theme.jsx index 34c688db1..74975d115 100644 --- a/web/react/components/user_settings/user_settings_theme.jsx +++ b/web/react/components/user_settings/user_settings_theme.jsx @@ -182,7 +182,6 @@ export default class ThemeSetting extends React.Component { if (displayCustom) { custom = (
-
-
); diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 428549d57..766a86686 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -189,8 +189,8 @@ export default { sidebarHeaderTextColor: '#FFFFFF', onlineIndicator: '#7DBE00', awayIndicator: '#DCBD4E', - mentionBj: '#136197', - mentionColor: '#bfcde8', + mentionBj: '#FBFBFB', + mentionColor: '#2071A7', centerChannelBg: '#f2f4f8', centerChannelColor: '#333333', newMessageSeparator: '#FF8800', @@ -276,86 +276,107 @@ export default { }, THEME_ELEMENTS: [ { + group: 'sidebarElements', id: 'sidebarBg', uiName: 'Sidebar BG' }, { + group: 'sidebarElements', id: 'sidebarText', uiName: 'Sidebar Text' }, { + group: 'sidebarElements', id: 'sidebarHeaderBg', uiName: 'Sidebar Header BG' }, { + group: 'sidebarElements', id: 'sidebarHeaderTextColor', uiName: 'Sidebar Header Text' }, { + group: 'sidebarElements', id: 'sidebarUnreadText', uiName: 'Sidebar Unread Text' }, { + group: 'sidebarElements', id: 'sidebarTextHoverBg', uiName: 'Sidebar Text Hover BG' }, { + group: 'sidebarElements', id: 'sidebarTextActiveBorder', uiName: 'Sidebar Text Active Border' }, { + group: 'sidebarElements', id: 'sidebarTextActiveColor', uiName: 'Sidebar Text Active Color' }, { + group: 'sidebarElements', id: 'onlineIndicator', uiName: 'Online Indicator' }, { + group: 'sidebarElements', id: 'awayIndicator', uiName: 'Away Indicator' }, { + group: 'sidebarElements', id: 'mentionBj', uiName: 'Mention Jewel BG' }, { + group: 'sidebarElements', id: 'mentionColor', uiName: 'Mention Jewel Text' }, { + group: 'centerChannelElements', id: 'centerChannelBg', uiName: 'Center Channel BG' }, { + group: 'centerChannelElements', id: 'centerChannelColor', uiName: 'Center Channel Text' }, { + group: 'centerChannelElements', id: 'newMessageSeparator', uiName: 'New Message Separator' }, { + group: 'linkAndButtonElements', id: 'linkColor', uiName: 'Link Color' }, { + group: 'linkAndButtonElements', id: 'buttonBg', uiName: 'Button BG' }, { + group: 'linkAndButtonElements', id: 'buttonColor', uiName: 'Button Text' }, { + group: 'centerChannelElements', id: 'mentionHighlightBg', uiName: 'Mention Highlight BG' }, { + group: 'centerChannelElements', id: 'mentionHighlightLink', uiName: 'Mention Highlight Link' }, { + group: 'centerChannelElements', id: 'codeTheme', uiName: 'Code Theme', themes: [ diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 7f124149d..bdf68fc03 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -743,7 +743,7 @@ export function applyTheme(theme) { changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.search-item-container, .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); @@ -753,7 +753,7 @@ export function applyTheme(theme) { changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1); changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); - changeCss('.search-help-popover .search-autocomplete__item:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); + changeCss('.search-help-popover .search-autocomplete__item:hover, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 2374a9dbb..1a8e3f374 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -92,12 +92,14 @@ font-size: 1em; } - .date-separator.hovered--after:before, .new-separator.hovered--after:before { + .date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after { background: none !important; } .post { + background: none !important; + .post__dropdown { line-height: 9px; text-decoration: none; @@ -114,6 +116,10 @@ } + .comment-icon__container { + visibility: visible; + } + .post-list__content & { &:hover { diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index de7df403f..acec24231 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -145,6 +145,7 @@ padding-right: 25px; } &:before { + pointer-events: none; position: absolute; top: 11px; right: 50px; @@ -181,12 +182,61 @@ .theme-elements { padding-left:15px; + .element { margin-right:10px; + + &:nth-child(2n) { + margin-right: 0; + } + + } + } + + .theme-elements__header { + margin: 10px 20px 0px 0; + border-bottom: 1px solid #ccc; + padding: 5px 0 10px; + font-size: em(13.5px); + font-weight: 600; + cursor: pointer; + + div, span { + pointer-events: none; + } + + .fa-minus { + display: none; } + + &.open { + .fa-minus { + display: inline-block; + } + .fa-plus { + display: none; + } + } + + .header__icon { + float: right; + @include opacity(0.5); + } + + } + + .theme-elements__body { + padding-top: 5px; + display: none; + @include legacy-pie-clearfix; + background: rgba(255, 255, 255, 0.05); + padding: 20px 0 0 20px; + margin: 0 20px 0 0; + @include border-radius(0 0 3px 3px); } .custom-label { + white-space: nowrap; font-weight: normal; font-size: 12px; width: 100%; -- cgit v1.2.3-1-g7c22 From 22aa2c8c07075f603a1408b7185c01b49d92fc7f Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 15 Feb 2016 20:25:28 +0500 Subject: Fixing custom theme header click event --- web/react/components/user_settings/custom_theme_chooser.jsx | 9 +++++++-- web/sass-files/sass/partials/_settings.scss | 7 +++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 242615bc0..1e724bb6e 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -156,8 +156,13 @@ class CustomThemeChooser extends React.Component { } toggleContent(e) { e.stopPropagation(); - $(e.target).next().slideToggle(); - $(e.target).toggleClass('open'); + if ($(e.target).hasClass('theme-elements__header')) { + $(e.target).next().slideToggle(); + $(e.target).toggleClass('open'); + } else { + $(e.target).closest('.theme-elements__header').next().slideToggle(); + $(e.target).closest('.theme-elements__header').toggleClass('open'); + } } render() { const {formatMessage} = this.props.intl; diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index acec24231..c79b54922 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -144,6 +144,9 @@ select { padding-right: 25px; } + select::-ms-expand { + display: none; + } &:before { pointer-events: none; position: absolute; @@ -201,10 +204,6 @@ font-weight: 600; cursor: pointer; - div, span { - pointer-events: none; - } - .fa-minus { display: none; } -- cgit v1.2.3-1-g7c22 From 44fa72066bacb741c3303633b6a3a690f6fc0d01 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 15 Feb 2016 23:23:07 +0500 Subject: Other minor improvements --- web/react/components/post_info.jsx | 9 +++++++++ web/sass-files/sass/partials/_post.scss | 4 ++-- web/sass-files/sass/partials/_post_right.scss | 15 ++++++++++++++- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index c44223b1f..d1d516816 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -14,9 +14,17 @@ export default class PostInfo extends React.Component { constructor(props) { super(props); + this.dropdownPosition = this.dropdownPosition.bind(this); this.handlePermalink = this.handlePermalink.bind(this); this.removePost = this.removePost.bind(this); } + dropdownPosition(e) { + var position = $('#post-list').height() - $(e.target).offset().top; + var dropdown = $(e.target).next('.dropdown-menu'); + if (position < dropdown.height()) { + dropdown.addClass('bottom'); + } + } createDropdown() { var post = this.props.post; var isOwner = UserStore.getCurrentId() === post.user_id; @@ -133,6 +141,7 @@ export default class PostInfo extends React.Component { type='button' data-toggle='dropdown' aria-expanded='false' + onClick={this.dropdownPosition} />
    div:last-child { - .dropdown-menu { + .dropdown-menu { + &.bottom { top: auto; bottom: 25px; } diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index bd3d60622..01be9e288 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -11,7 +11,15 @@ .post-right-comments-container { position: relative; - padding: 0.7em 0 0; + + .post { + + &:first-child { + padding-top: 15px; + } + + } + } .post { @@ -19,6 +27,11 @@ &.post--root { padding-bottom: 1.2em; border-bottom: 1px solid #ddd; + + .post__body { + background: transparent !important; + } + } .post__header { -- cgit v1.2.3-1-g7c22