From e9c2fd7cbb0fd35531096af89345d400125809f0 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 11 Jan 2016 20:32:31 +0500 Subject: Adding away icon and changing online and offline icons --- web/react/components/sidebar.jsx | 2 +- web/react/components/user_settings/import_theme_modal.jsx | 1 + web/react/utils/constants.jsx | 13 +++++++++++-- web/react/utils/utils.jsx | 6 +++++- web/sass-files/sass/partials/_sidebar--left.scss | 4 ++-- 5 files changed, 20 insertions(+), 6 deletions(-) diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 18c360cb8..eaeb7bb91 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -372,7 +372,7 @@ export default class Sidebar extends React.Component { if (channel.status === 'online') { statusIcon = Constants.ONLINE_ICON_SVG; } else if (channel.status === 'away') { - statusIcon = Constants.ONLINE_ICON_SVG; + statusIcon = Constants.AWAY_ICON_SVG; } else { statusIcon = Constants.OFFLINE_ICON_SVG; } diff --git a/web/react/components/user_settings/import_theme_modal.jsx b/web/react/components/user_settings/import_theme_modal.jsx index 3df9dfedf..45b05f19b 100644 --- a/web/react/components/user_settings/import_theme_modal.jsx +++ b/web/react/components/user_settings/import_theme_modal.jsx @@ -55,6 +55,7 @@ export default class ImportThemeModal extends React.Component { theme.sidebarHeaderBg = colors[1]; theme.sidebarHeaderTextColor = colors[5]; theme.onlineIndicator = colors[6]; + theme.awayIndicator = '#E0B333'; theme.mentionBj = colors[7]; theme.mentionColor = '#ffffff'; theme.centerChannelBg = '#ffffff'; diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 0298ce533..d6ccb9edd 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -163,8 +163,9 @@ export default { OPEN_TEAM: 'O', MAX_POST_LEN: 4000, EMOJI_SIZE: 16, - ONLINE_ICON_SVG: "", - OFFLINE_ICON_SVG: "", + ONLINE_ICON_SVG: " ", + AWAY_ICON_SVG: " ", + OFFLINE_ICON_SVG: " ", MENU_ICON: " ", COMMENT_ICON: " ", UPDATE_TYPING_MS: 5000, @@ -180,6 +181,7 @@ export default { sidebarHeaderBg: '#2f81b7', sidebarHeaderTextColor: '#FFFFFF', onlineIndicator: '#7DBE00', + awayIndicator: '#DCBD4E', mentionBj: '#136197', mentionColor: '#bfcde8', centerChannelBg: '#f2f4f8', @@ -203,6 +205,7 @@ export default { sidebarHeaderBg: '#2389d7', sidebarHeaderTextColor: '#ffffff', onlineIndicator: '#7DBE00', + awayIndicator: '#DCBD4E', mentionBj: '#2389d7', mentionColor: '#ffffff', centerChannelBg: '#ffffff', @@ -226,6 +229,7 @@ export default { sidebarHeaderBg: '#1B2C3E', sidebarHeaderTextColor: '#FFFFFF', onlineIndicator: '#55C5B2', + awayIndicator: '#A9A14C', mentionBj: '#B74A4A', mentionColor: '#FFFFFF', centerChannelBg: '#2F3E4E', @@ -249,6 +253,7 @@ export default { sidebarHeaderBg: '#1f1f1f', sidebarHeaderTextColor: '#FFFFFF', onlineIndicator: '#0177e7', + awayIndicator: '#A9A14C', mentionBj: '#0177e7', mentionColor: '#FFFFFF', centerChannelBg: '#1F1F1F', @@ -299,6 +304,10 @@ export default { id: 'onlineIndicator', uiName: 'Online Indicator' }, + { + id: 'awayIndicator', + uiName: 'Away Indicator' + }, { id: 'mentionBj', uiName: 'Mention Jewel BG' diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 95eca7c3a..c0da0e2c6 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -557,7 +557,7 @@ export function applyTheme(theme) { 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.6), 1); changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); - changeCss('.sidebar--left .status path', 'fill:' + theme.sidebarText, 1); + changeCss('.sidebar--left .status .offline--icon, .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1); changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); } @@ -602,6 +602,10 @@ export function applyTheme(theme) { changeCss('.sidebar--left .status .online--icon', 'fill:' + theme.onlineIndicator, 1); } + if (theme.awayIndicator) { + changeCss('.sidebar--left .status .away--icon', 'fill:' + theme.awayIndicator, 1); + } + if (theme.mentionBj) { changeCss('.sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj, 1); changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj, 1); diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss index e99e21257..6f969ed47 100644 --- a/web/sass-files/sass/partials/_sidebar--left.scss +++ b/web/sass-files/sass/partials/_sidebar--left.scss @@ -42,9 +42,9 @@ margin-right: 6px; width: 12px; display: inline-block; - i, path { + i, path, ellipse { @include opacity(0.5); - &.online--icon { + &.online--icon, &.away--icon { @include opacity(1); } } -- cgit v1.2.3-1-g7c22