From d452523b07a66e6d71b2beb5150244165d9c30cc Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 6 Oct 2015 21:34:16 +0500 Subject: PLT-451 - Adding visual effect for logout active sessions button --- web/react/components/activity_log_modal.jsx | 6 ++++++ web/react/utils/utils.jsx | 2 +- web/sass-files/sass/partials/_access-history.scss | 2 +- web/sass-files/sass/partials/_activity-log.scss | 19 ++++++++++++++++++- web/sass-files/sass/partials/_post.scss | 2 +- web/sass-files/sass/partials/_post_right.scss | 2 +- 6 files changed, 28 insertions(+), 5 deletions(-) (limited to 'web') diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index aee2541b5..15bcb2b22 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -31,6 +31,12 @@ export default class ActivityLogModal extends React.Component { } submitRevoke(altId, e) { e.preventDefault(); + var modalContent = $(e.target).closest('.modal-content'); + modalContent.addClass('animation--highlight'); + setTimeout(() => { + modalContent.removeClass('animation--highlight'); + console.log(that); + }, 1500); Client.revokeSession(altId, function handleRevokeSuccess() { AsyncClient.getSessions(); diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 3a04f3623..64becbfc7 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -503,7 +503,7 @@ export function applyTheme(theme) { 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('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); - changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-channel-table tbody>tr td, .member-div:first-child, .member-div', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); + changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-channel-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: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/partials/_access-history.scss index 412a2a1d0..a3289ecc0 100644 --- a/web/sass-files/sass/partials/_access-history.scss +++ b/web/sass-files/sass/partials/_access-history.scss @@ -24,6 +24,6 @@ font-size: 15px; } .report__info { - color: #999; + @include opacity(0.8); } } \ No newline at end of file diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/partials/_activity-log.scss index 3f0c3090d..2fb37a3bb 100644 --- a/web/sass-files/sass/partials/_activity-log.scss +++ b/web/sass-files/sass/partials/_activity-log.scss @@ -1,3 +1,20 @@ +@keyframes highlight { + from { background: rgba(yellow, 0.5);} + to { background: none;} +} + +.animation--highlight { + &:before { + content: ''; + animation: highlight 1.5s ease; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + .activity-log__table { display: table; width: 100%; @@ -26,7 +43,7 @@ } } .report__info { - color: #999; + @include opacity(0.8); } } .session-help-text { diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 8bf4b0534..19cfdc050 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -257,7 +257,7 @@ body.ios { line-height: 18px; display: inline-block; font-size: 13px; - @include opacity(0.6); + @include opacity(0.7); } } } diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index da5bcbad2..e4860b286 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -29,7 +29,7 @@ min-height: 100px; } .msg-typing { - color: #555; + @include opacity(0.7); float: left; padding-top: 17px; } -- cgit v1.2.3-1-g7c22 From cdb09be6d0db90f899b9b851bc850fe5f2b668da Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 6 Oct 2015 21:43:13 +0500 Subject: Removing console.log --- web/react/components/activity_log_modal.jsx | 1 - 1 file changed, 1 deletion(-) (limited to 'web') diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index 15bcb2b22..ff370c32e 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -35,7 +35,6 @@ export default class ActivityLogModal extends React.Component { modalContent.addClass('animation--highlight'); setTimeout(() => { modalContent.removeClass('animation--highlight'); - console.log(that); }, 1500); Client.revokeSession(altId, function handleRevokeSuccess() { -- cgit v1.2.3-1-g7c22 From a0a32bb608eae69126194ae1aedb204d21930728 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 6 Oct 2015 22:25:22 +0500 Subject: Updating link color opacity in LHS --- web/react/utils/constants.jsx | 16 ++++++++-------- web/react/utils/utils.jsx | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) (limited to 'web') diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index aba63b91c..4a67c413f 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -122,10 +122,10 @@ module.exports = { default: { type: 'Mattermost', sidebarBg: '#fafafa', - sidebarText: '#999999', + sidebarText: '#333333', sidebarUnreadText: '#333333', sidebarTextHoverBg: '#e6f2fa', - sidebarTextHoverColor: '#999999', + sidebarTextHoverColor: '#333333', sidebarTextActiveBg: '#e1e1e1', sidebarTextActiveColor: '#111111', sidebarHeaderBg: '#2389d7', @@ -144,10 +144,10 @@ module.exports = { organization: { type: 'Organization', sidebarBg: '#2071a7', - sidebarText: '#bfcde8', + sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#136197', - sidebarTextHoverColor: '#bfcde8', + sidebarTextHoverColor: '#fff', sidebarTextActiveBg: '#136197', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#2f81b7', @@ -166,10 +166,10 @@ module.exports = { mattermostDark: { type: 'Mattermost Dark', sidebarBg: '#1B2C3E', - sidebarText: '#bbbbbb', + sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#4A5664', - sidebarTextHoverColor: '#bbbbbb', + sidebarTextHoverColor: '#fff', sidebarTextActiveBg: '#39769C', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1B2C3E', @@ -188,10 +188,10 @@ module.exports = { windows10: { type: 'Windows Dark', sidebarBg: '#171717', - sidebarText: '#999', + sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#302e30', - sidebarTextHoverColor: '#999', + sidebarTextHoverColor: '#fff', sidebarTextActiveBg: '#484748', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1f1f1f', diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 64becbfc7..5fcc33120 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -399,9 +399,9 @@ export function applyTheme(theme) { } if (theme.sidebarText) { - changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + theme.sidebarText, 1); + changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.7), 1); changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); - changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8), 1); + changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.7), 1); changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); changeCss('.sidebar--left, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 1); changeCss('.sidebar--left .status path', 'fill:' + changeOpacity(theme.sidebarText, 0.5), 1); @@ -418,7 +418,7 @@ export function applyTheme(theme) { } if (theme.sidebarTextHoverColor) { - changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'color:' + theme.sidebarTextHoverColor, 2); + changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'color:' + changeOpacity(theme.sidebarTextHoverColor, 0.7), 2); changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'color:' + theme.sidebarTextHoverColor, 2); } -- cgit v1.2.3-1-g7c22 From 15269c539a3f372b2c41d2c629b73653c0f1db97 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 6 Oct 2015 22:27:05 +0500 Subject: Changing link colour opacity LHS --- web/react/utils/utils.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'web') diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 5fcc33120..f90293c45 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -399,9 +399,9 @@ export function applyTheme(theme) { } if (theme.sidebarText) { - changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.7), 1); + changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); - changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.7), 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, .sidebar--right .sidebar--right__header', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 1); changeCss('.sidebar--left .status path', 'fill:' + changeOpacity(theme.sidebarText, 0.5), 1); @@ -418,7 +418,7 @@ export function applyTheme(theme) { } if (theme.sidebarTextHoverColor) { - changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'color:' + changeOpacity(theme.sidebarTextHoverColor, 0.7), 2); + changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'color:' + changeOpacity(theme.sidebarTextHoverColor, 0.6), 2); changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'color:' + theme.sidebarTextHoverColor, 2); } -- cgit v1.2.3-1-g7c22 From d99aea15023b7a6ae7dbebffd0eb4d2ae0f9765d Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 6 Oct 2015 22:33:30 +0500 Subject: Removing sidebar text hover color --- web/react/components/user_settings/import_theme_modal.jsx | 1 - web/react/utils/constants.jsx | 8 -------- web/react/utils/utils.jsx | 7 +------ web/sass-files/sass/partials/_base.scss | 4 ++++ 4 files changed, 5 insertions(+), 15 deletions(-) (limited to 'web') diff --git a/web/react/components/user_settings/import_theme_modal.jsx b/web/react/components/user_settings/import_theme_modal.jsx index 4e8ee03fa..3301c6596 100644 --- a/web/react/components/user_settings/import_theme_modal.jsx +++ b/web/react/components/user_settings/import_theme_modal.jsx @@ -49,7 +49,6 @@ export default class ImportThemeModal extends React.Component { theme.sidebarText = colors[5]; theme.sidebarUnreadText = colors[5]; theme.sidebarTextHoverBg = colors[4]; - theme.sidebarTextHoverColor = colors[5]; theme.sidebarTextActiveBg = colors[2]; theme.sidebarTextActiveColor = colors[3]; theme.sidebarHeaderBg = colors[1]; diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 4a67c413f..8fe1a5884 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -125,7 +125,6 @@ module.exports = { sidebarText: '#333333', sidebarUnreadText: '#333333', sidebarTextHoverBg: '#e6f2fa', - sidebarTextHoverColor: '#333333', sidebarTextActiveBg: '#e1e1e1', sidebarTextActiveColor: '#111111', sidebarHeaderBg: '#2389d7', @@ -147,7 +146,6 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#136197', - sidebarTextHoverColor: '#fff', sidebarTextActiveBg: '#136197', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#2f81b7', @@ -169,7 +167,6 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#4A5664', - sidebarTextHoverColor: '#fff', sidebarTextActiveBg: '#39769C', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1B2C3E', @@ -191,7 +188,6 @@ module.exports = { sidebarText: '#fff', sidebarUnreadText: '#fff', sidebarTextHoverBg: '#302e30', - sidebarTextHoverColor: '#fff', sidebarTextActiveBg: '#484748', sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1f1f1f', @@ -233,10 +229,6 @@ module.exports = { id: 'sidebarTextHoverBg', uiName: 'Sidebar Text Hover BG' }, - { - id: 'sidebarTextHoverColor', - uiName: 'Sidebar Text Hover Color' - }, { id: 'sidebarTextActiveBg', uiName: 'Sidebar Text Active BG' diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index f90293c45..8431e56bc 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -417,11 +417,6 @@ export function applyTheme(theme) { changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } - if (theme.sidebarTextHoverColor) { - changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'color:' + changeOpacity(theme.sidebarTextHoverColor, 0.6), 2); - changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'color:' + theme.sidebarTextHoverColor, 2); - } - 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); } @@ -495,7 +490,7 @@ export function applyTheme(theme) { changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1); changeCss('.search-bar__container .search__form .search-bar, .form-control', 'color:' + theme.centerChannelColor, 2); changeCss('@media(max-width: 768px){.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: inherit;', 1); - changeCss('.search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.input-group-addon, .search-bar__container .search__form, .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); changeCss('.channel-intro .channel-intro__content', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2); diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index 4237ee1fa..18462d92a 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -34,6 +34,10 @@ body { } } +.input-group-addon { + background: transparent; +} + .popover { color: #333; &.bottom { -- cgit v1.2.3-1-g7c22