From f79f607a47e4b833b9eadec44b9c94b5f21b66ef Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 4 Nov 2016 00:29:10 +0500 Subject: Updating UI fixes (#4437) --- webapp/sass/components/_dropdown.scss | 4 +++ webapp/sass/responsive/_desktop.scss | 12 +++++++ webapp/sass/responsive/_mobile.scss | 61 ++++++++--------------------------- webapp/sass/responsive/_tablet.scss | 51 +++++++++++++++++++++++++++++ webapp/utils/utils.jsx | 42 ++++++++++++------------ 5 files changed, 102 insertions(+), 68 deletions(-) (limited to 'webapp') diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss index be68713ff..bc128d6ef 100644 --- a/webapp/sass/components/_dropdown.scss +++ b/webapp/sass/components/_dropdown.scss @@ -16,6 +16,10 @@ .divider { @include opacity(.15); + & + .divider { + display: none; + } + &:last-child { display: none; } diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index 50df5ba02..f5deff302 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -75,6 +75,18 @@ } } +@media (max-width: 1024px) { + .inner-wrap { + &.move--left { + .channel-header { + .heading { + width: 100px; + } + } + } + } +} + @media (min-width: 992px) { .modal-lg { width: 700px; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index cb25639c9..7c13de1ba 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -486,6 +486,20 @@ } .modal { + .nav-pills { + > li { + &.active { + a { + background: transparent; + + &:before { + display: none; + } + } + } + } + } + .info__label { padding-bottom: 5px; text-align: left; @@ -665,53 +679,6 @@ } } - .post-create__container { - form { - padding: .5em 0; - } - - .post-create-footer { - padding: 0 1em; - - .msg-typing { - display: none; - } - - .control-label { - top: 0; - } - } - - .post-create-body { - display: table; - width: 100%; - - .post-body__cell { - display: table-cell; - padding-left: 45px; - - .sidebar--right & { - padding-left: 0; - } - } - - .app__content & { - .btn-file { - bottom: -2px; - left: 0; - line-height: 36px; - padding: 0; - top: auto; - width: 45px; - } - } - - .send-button { - display: table-cell; - } - } - } - .file-preview__container { margin: 5px 0 0; } diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 75cdf8ea9..52d7a6a77 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -7,6 +7,57 @@ width: 150px; } } + + .heading { + width: 130px; + } + } + + .post-create__container { + form { + padding: .5em 0; + } + + .post-create-footer { + padding: 0 1em; + + .msg-typing { + display: none; + } + + .control-label { + top: 0; + } + } + + .post-create-body { + display: table; + width: 100%; + + .post-body__cell { + display: table-cell; + padding-left: 45px; + + .sidebar--right & { + padding-left: 0; + } + } + + .app__content & { + .btn-file { + bottom: -2px; + left: 0; + line-height: 36px; + padding: 0; + top: auto; + width: 45px; + } + } + + .send-button { + display: table-cell; + } + } } .signup-team__container { diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 888414784..81f304fa3 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -463,7 +463,7 @@ export function isHexColor(value) { export function applyTheme(theme) { if (theme.sidebarBg) { - changeCss('.app__body .sidebar--left, .app__body .sidebar--left .sidebar__divider .sidebar__divider__text, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .sidebar--menu', 'background:' + theme.sidebarBg, 1); + changeCss('.sidebar--left, .sidebar--left .sidebar__divider .sidebar__divider__text, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .sidebar--menu', 'background:' + theme.sidebarBg, 1); changeCss('body.app__body', 'scrollbar-face-color:' + theme.sidebarBg, 3); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal:not(.display--content) .modal-content', 'background:' + theme.sidebarBg, 1); } @@ -471,36 +471,36 @@ export function applyTheme(theme) { if (theme.sidebarText) { changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText, 1); changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15), 1); - changeCss('.app__body .sidebar--left .nav-pills__container li>a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); + changeCss('.sidebar--left .nav-pills__container li>a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); - changeCss('.app__body .sidebar--left .nav-pills__container li>h4, .app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); - changeCss('.app__body .sidebar--left .add-channel-btn:hover, .app__body .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); - changeCss('.app__body .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1); + changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); + changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); + changeCss('.sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1); 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), 2); } if (theme.sidebarUnreadText) { - changeCss('.app__body .sidebar--left .nav-pills__container li>a.unread-title', 'color:' + theme.sidebarUnreadText + '!important;', 2); + changeCss('.sidebar--left .nav-pills__container li>a.unread-title', 'color:' + theme.sidebarUnreadText + '!important;', 2); } if (theme.sidebarTextHoverBg) { - changeCss('.app__body .sidebar--left .nav-pills__container li>a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('.sidebar--left .nav-pills__container li>a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } if (theme.sidebarTextActiveBorder) { - changeCss('.app__body .sidebar--left .nav li.active a:before, .app__body .modal .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); - changeCss('.app__body .sidebar--left .sidebar__divider:before', 'background:' + changeOpacity(theme.sidebarTextActiveBorder, 0.5), 1); - changeCss('.app__body .sidebar--left .sidebar__divider', 'color:' + theme.sidebarTextActiveBorder, 1); + changeCss('.sidebar--left .nav li.active a:before, .app__body .modal .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); + changeCss('.sidebar--left .sidebar__divider:before', 'background:' + changeOpacity(theme.sidebarTextActiveBorder, 0.5), 1); + changeCss('.sidebar--left .sidebar__divider', 'color:' + theme.sidebarTextActiveBorder, 1); } if (theme.sidebarTextActiveColor) { - changeCss('.app__body .sidebar--left .nav-pills__container li.active a, .app__body .sidebar--left .nav-pills__container li.active a:hover, .app__body .sidebar--left .nav-pills__container li.active a:focus, .app__body .modal .settings-modal .nav-pills>li.active a, .app__body .modal .settings-modal .nav-pills>li.active a:hover, .app__body .modal .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); - changeCss('.app__body .sidebar--left .nav li.active a, .app__body .sidebar--left .nav li.active a:hover, .app__body .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1), 1); + changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .app__body .modal .settings-modal .nav-pills>li.active a, .app__body .modal .settings-modal .nav-pills>li.active a:hover, .app__body .modal .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); + changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1), 1); } if (theme.sidebarHeaderBg) { - changeCss('.app__body .sidebar--left .team__header, .app__body .sidebar--menu .team__header, .app__body .post-list__timestamp > div', 'background:' + theme.sidebarHeaderBg, 1); + changeCss('.sidebar--left .team__header, .app__body .sidebar--menu .team__header, .app__body .post-list__timestamp > div', 'background:' + theme.sidebarHeaderBg, 1); changeCss('.app__body .modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1); changeCss('.app__body #navbar .navbar-default', 'background:' + theme.sidebarHeaderBg, 1); changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'background:' + theme.sidebarHeaderBg, 1); @@ -508,10 +508,10 @@ export function applyTheme(theme) { } if (theme.sidebarHeaderTextColor) { - changeCss('.app__body .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor, 1); + changeCss('.sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor, 1); changeCss('.app__body .sidebar-header-dropdown__icon', 'fill:' + theme.sidebarHeaderTextColor, 1); - changeCss('.app__body .sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1); - changeCss('.app__body .sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1); + changeCss('.sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1); + changeCss('.sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1); changeCss('.app__body .modal .modal-header .modal-title, .app__body .modal .modal-header .modal-title .name, .app__body .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor, 1); changeCss('.app__body #navbar .navbar-default .navbar-brand .heading', 'color:' + theme.sidebarHeaderTextColor, 1); changeCss('.app__body #navbar .navbar-default .navbar-toggle .icon-bar, ', 'background:' + theme.sidebarHeaderTextColor, 1); @@ -533,13 +533,13 @@ export function applyTheme(theme) { } if (theme.mentionBj) { - changeCss('.app__body .sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj, 1); - changeCss('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj + '!important;', 1); + changeCss('.sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj, 1); + changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj + '!important;', 1); } if (theme.mentionColor) { - changeCss('.app__body .sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor, 2); - changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor + '!important;', 2); + changeCss('.sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor, 2); + changeCss('.sidebar--left .badge', 'color:' + theme.mentionColor + '!important;', 2); } if (theme.centerChannelBg) { @@ -566,7 +566,7 @@ export function applyTheme(theme) { changeCss('.app__body .post-list__arrows, .app__body .post .flag-icon__container', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon', 'fill:' + theme.centerChannelColor, 1); changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2); - changeCss('.app__body .post .dropdown-menu a, .app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.app__body .post .dropdown-menu a, .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1); changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor, 1); changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1); -- cgit v1.2.3-1-g7c22