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 From aac64633f90b8e4358eb3939940f0ffbff6e4811 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 22 Oct 2015 20:27:10 +0500 Subject: Updating disabled form control --- web/sass-files/sass/partials/_base.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index cb5ff67b5..3618fb07e 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -118,6 +118,7 @@ a:focus, a:hover { .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { cursor: auto; + background: rgba(#fff, 0.1); } .form-group { -- cgit v1.2.3-1-g7c22 From 24ed1e293284f7abf2b27019371dc1dec02dab80 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 22 Oct 2015 21:58:11 +0500 Subject: Updating mattermost logo --- web/react/utils/utils.jsx | 2 +- web/static/config/manifest.json | 2 +- web/static/images/favicon.ico | Bin 1379 -> 14806 bytes web/static/images/icon50x50.gif | Bin 2135 -> 0 bytes web/static/images/icon50x50.png | Bin 0 -> 11507 bytes web/static/images/logo.png | Bin 15407 -> 23393 bytes web/static/images/redfavicon.ico | Bin 1502 -> 15323 bytes 7 files changed, 2 insertions(+), 2 deletions(-) delete mode 100644 web/static/images/icon50x50.gif create mode 100644 web/static/images/icon50x50.png diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 8264e6bb6..9fc98e3d5 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -118,7 +118,7 @@ export function notifyMe(title, body, channel) { } if (permission === 'granted') { - var notification = new Notification(title, {body: body, tag: body, icon: '/static/images/icon50x50.gif'}); + var notification = new Notification(title, {body: body, tag: body, icon: '/static/images/icon50x50.png'}); notification.onclick = function onClick() { window.focus(); if (channel) { diff --git a/web/static/config/manifest.json b/web/static/config/manifest.json index 6110122c2..8f29460b3 100644 --- a/web/static/config/manifest.json +++ b/web/static/config/manifest.json @@ -2,7 +2,7 @@ "name": "Mattermost", "icons": [ { - "src": "../static/iamges/icon50x50.gif", + "src": "../static/iamges/icon50x50.png", "sizes": "50x50", "type": "image/png" } diff --git a/web/static/images/favicon.ico b/web/static/images/favicon.ico index 0e7d36616..27cbbc639 100644 Binary files a/web/static/images/favicon.ico and b/web/static/images/favicon.ico differ diff --git a/web/static/images/icon50x50.gif b/web/static/images/icon50x50.gif deleted file mode 100644 index d79991a0f..000000000 Binary files a/web/static/images/icon50x50.gif and /dev/null differ diff --git a/web/static/images/icon50x50.png b/web/static/images/icon50x50.png new file mode 100644 index 000000000..217af899d Binary files /dev/null and b/web/static/images/icon50x50.png differ diff --git a/web/static/images/logo.png b/web/static/images/logo.png index 36c43b94b..423d4d270 100644 Binary files a/web/static/images/logo.png and b/web/static/images/logo.png differ diff --git a/web/static/images/redfavicon.ico b/web/static/images/redfavicon.ico index 7f404d1ef..baef9b65a 100644 Binary files a/web/static/images/redfavicon.ico and b/web/static/images/redfavicon.ico differ -- cgit v1.2.3-1-g7c22 From 79ce0dd914713aac9d2f1332202a48e7e0d338a3 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 22 Oct 2015 22:21:59 +0500 Subject: Updating lattermost icon size --- web/static/images/favicon.ico | Bin 14806 -> 15292 bytes web/static/images/icon50x50.png | Bin 11507 -> 15502 bytes web/static/images/redfavicon.ico | Bin 15323 -> 15762 bytes 3 files changed, 0 insertions(+), 0 deletions(-) diff --git a/web/static/images/favicon.ico b/web/static/images/favicon.ico index 27cbbc639..51653c9ba 100644 Binary files a/web/static/images/favicon.ico and b/web/static/images/favicon.ico differ diff --git a/web/static/images/icon50x50.png b/web/static/images/icon50x50.png index 217af899d..7ac6ce1c9 100644 Binary files a/web/static/images/icon50x50.png and b/web/static/images/icon50x50.png differ diff --git a/web/static/images/redfavicon.ico b/web/static/images/redfavicon.ico index baef9b65a..8936d6c78 100644 Binary files a/web/static/images/redfavicon.ico and b/web/static/images/redfavicon.ico differ -- cgit v1.2.3-1-g7c22 From 691d66f5a35d0e0828db62e59603692369acf305 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 23 Oct 2015 10:54:08 +0500 Subject: Updating logo image url in authorise --- web/templates/authorize.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/templates/authorize.html b/web/templates/authorize.html index b0fa3e475..430291676 100644 --- a/web/templates/authorize.html +++ b/web/templates/authorize.html @@ -6,7 +6,7 @@
- +
An application would like to connect to your {{.Props.TeamName}} account.
-- cgit v1.2.3-1-g7c22 From 210e2a062d8015e778369a6c7d75a4e976baa5fd Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 23 Oct 2015 11:34:56 +0500 Subject: Improving UI for the search popover --- web/react/components/search_bar.jsx | 6 ++--- web/sass-files/sass/partials/_base.scss | 1 + web/sass-files/sass/partials/_popover.scss | 38 +++++++++++++++++++++++------- 3 files changed, 34 insertions(+), 11 deletions(-) diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx index bf12ca160..7540b41a4 100644 --- a/web/react/components/search_bar.jsx +++ b/web/react/components/search_bar.jsx @@ -8,7 +8,7 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; -var Tooltip = ReactBootstrap.Tooltip; +var Popover = ReactBootstrap.Popover; export default class SearchBar extends React.Component { constructor() { @@ -163,7 +163,7 @@ export default class SearchBar extends React.Component { onMouseUp={this.handleMouseInput} /> {isSearching} - @@ -176,7 +176,7 @@ export default class SearchBar extends React.Component { {'Use '}{'from:'}{' to find posts from specific users and '}{'in:'}{' to find posts in specific channels'} - +
); diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 3618fb07e..6b2e79933 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -40,6 +40,7 @@ img { } .popover { + @include border-radius(3px); color: #333; &.bottom, &.right, &.top, &.left { >.arrow:after { diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index c389ddf7d..72cb43481 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -21,21 +21,43 @@ } .search-help-popover { - transition: opacity 0.3s; + visibility: hidden; + max-width: none; + width: 100%; + top: 36px; + @include single-transition(opacity, 0.3s, ease-in); + font-size: em(13px); + + &.bottom > .arrow { + top: -18px; + border-width: 9px; + left: 30px; + } + + .popover-content { + padding: 3px 13px; + } h4 { - text-align: left; + font-size: 1em; } + ul { - padding-left: 2em; - text-align: left; + padding-left: 17px; + span { + @include opacity(0.7); + } + strong, b { + @include opacity(1); + } } + .tooltip-inner { max-width: 100%; } -} -.search-help-popover.visible { - opacity: 100; - transition: opacity 0.3s; + &.visible { + visibility: visible; + @include opacity(1); + } } -- cgit v1.2.3-1-g7c22 From 81c2a89774ae78e8fc876eb04b8c76e5180fc3f7 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 23 Oct 2015 11:35:25 +0500 Subject: Changing popover help opacity --- web/sass-files/sass/partials/_popover.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss index 72cb43481..484e63c7c 100644 --- a/web/sass-files/sass/partials/_popover.scss +++ b/web/sass-files/sass/partials/_popover.scss @@ -45,7 +45,7 @@ ul { padding-left: 17px; span { - @include opacity(0.7); + @include opacity(0.8); } strong, b { @include opacity(1); -- cgit v1.2.3-1-g7c22 From 251f6d7b35280fb58d3f8fb91842890060af3426 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 23 Oct 2015 12:07:38 +0500 Subject: Improving the favicon image --- web/static/images/favicon.ico | Bin 15292 -> 15708 bytes web/static/images/redfavicon.ico | Bin 15762 -> 15753 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/web/static/images/favicon.ico b/web/static/images/favicon.ico index 51653c9ba..af5505331 100644 Binary files a/web/static/images/favicon.ico and b/web/static/images/favicon.ico differ diff --git a/web/static/images/redfavicon.ico b/web/static/images/redfavicon.ico index 8936d6c78..eefefc620 100644 Binary files a/web/static/images/redfavicon.ico and b/web/static/images/redfavicon.ico differ -- cgit v1.2.3-1-g7c22