From 5c09060f530148210ca9ee869226afea8d8d2883 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 22 Oct 2015 20:18:31 +0500 Subject: Multiple UI Improvements - Changing the UI for the active item in the nav - Updating the UI for drag and drop - Fixing z-index for date selector --- web/react/components/file_upload_overlay.jsx | 28 +++++++++++++----------- web/react/utils/constants.jsx | 12 +++++----- web/react/utils/utils.jsx | 8 ++----- web/sass-files/sass/partials/_post.scss | 15 ++++++++++++- web/sass-files/sass/partials/_responsive.scss | 21 ++++++++++++++++++ web/sass-files/sass/partials/_settings.scss | 16 ++++++++++++++ web/sass-files/sass/partials/_sidebar--left.scss | 15 +++++++++++-- 7 files changed, 87 insertions(+), 28 deletions(-) diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx index d991dd625..dbba00022 100644 --- a/web/react/components/file_upload_overlay.jsx +++ b/web/react/components/file_upload_overlay.jsx @@ -12,19 +12,21 @@ export default class FileUploadOverlay extends React.Component { return (
-
- Files - {'Drop a file to upload it.'} - Logo +
+
+ Files + {'Drop a file to upload it.'} + Logo +
); diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 1d856e067..e13f8228e 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -140,7 +140,7 @@ module.exports = { sidebarText: '#333333', sidebarUnreadText: '#333333', sidebarTextHoverBg: '#e6f2fa', - sidebarTextActiveBg: '#e1e1e1', + sidebarTextActiveBorder: '#378FD2', sidebarTextActiveColor: '#111111', sidebarHeaderBg: '#2389d7', sidebarHeaderTextColor: '#ffffff', @@ -162,7 +162,7 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#136197', - sidebarTextActiveBg: '#136197', + sidebarTextActiveBorder: '#7AB0D6', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#2f81b7', sidebarHeaderTextColor: '#FFFFFF', @@ -184,7 +184,7 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#4A5664', - sidebarTextActiveBg: '#39769C', + sidebarTextActiveBorder: '#39769C', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1B2C3E', sidebarHeaderTextColor: '#FFFFFF', @@ -206,7 +206,7 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#302e30', - sidebarTextActiveBg: '#484748', + sidebarTextActiveBorder: '#196CAF', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1f1f1f', sidebarHeaderTextColor: '#FFFFFF', @@ -249,8 +249,8 @@ module.exports = { uiName: 'Sidebar Text Hover BG' }, { - id: 'sidebarTextActiveBg', - uiName: 'Sidebar Text Active BG' + id: 'sidebarTextActiveBorder', + uiName: 'Sidebar Text Active Border' }, { id: 'sidebarTextActiveColor', diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index b9084b26e..8264e6bb6 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -425,18 +425,14 @@ export function applyTheme(theme) { changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } - if (theme.sidebarTextActiveBg) { - 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, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'background:' + theme.sidebarTextActiveBg, 1); + if (theme.sidebarTextActiveBorder) { + changeCss('.sidebar--left .nav li.active a:before, .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); } if (theme.sidebarTextActiveColor) { 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, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); } - if (theme.sidebarTextActiveBg === theme.onlineIndicator) { - changeCss('.sidebar--left .nav-pills__container li.active a .status .online--icon', 'fill:' + theme.sidebarTextActiveColor, 1); - } - if (theme.sidebarHeaderBg) { changeCss('.sidebar--left .team__header, .sidebar--menu .team__header', 'background:' + theme.sidebarHeaderBg, 1); changeCss('.modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1); diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 6ecc0d965..db58d0347 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -54,6 +54,7 @@ body.ios { height: 2em; margin: 0; position: relative; + z-index: 0; &:before, &:after { content: ""; height: 1em; @@ -116,13 +117,25 @@ body.ios { left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.6); text-align: center; color: #FFF; font-size: em(20px); font-weight: 600; z-index: 6; + .overlay__indent { + background-color: rgba(0, 0, 0, 0.6); + position: relative; + height: 100%; + @include clearfix; + } + + &.center-file-overlay { + .overlay__indent { + margin-left: 220px; + } + } + &.right-file-overlay { font-size: em(18px); .overlay__circle { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index c8bb24f3a..f4e57eec5 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -179,6 +179,22 @@ } @media screen and (max-width: 1140px) { + .inner__wrap { + &.move--left { + .file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + } + } .post { .post__content { width: 100%; @@ -277,6 +293,11 @@ } .file-overlay { font-size: em(18px); + &.center-file-overlay { + .overlay__indent { + margin-left: 0; + } + } .overlay__circle { width: 300px; height: 300px; diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index bc53dc0e4..9af045f98 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -211,6 +211,22 @@ a { color: #111; background-color: #E1E1E1; + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } + a, a:hover, a:focus { + padding-right: 10px; + background-color: rgba(black, 0.1); + border-radius: 0; + font-weight: 400; + position: relative; } } } diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index 585a51f08..ab13d1b42 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -128,12 +128,23 @@ } } &.active { + a { + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } a, a:hover, a:focus { - color: #111; padding-right: 10px; - background-color: #e1e1e1; + background-color: rgba(black, 0.1); border-radius: 0; font-weight: 400; + position: relative; } } } -- cgit v1.2.3-1-g7c22