From 83ead5cac7bb0d274c84d20d443c125ea0391f37 Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Mon, 30 Jan 2017 19:38:06 +0500 Subject: PLT-5122 - Switching to circular status icons (#5049) * PLT-5122 - Switching to circular status icons * Adding profile pic crop for status indicators * Updating status indicators in LHS * Updating else statements --- webapp/components/profile_picture.jsx | 11 +++++----- webapp/components/sidebar.jsx | 6 +++++- webapp/components/status_icon.jsx | 14 +++++++++++-- webapp/sass/components/_emoticons.scss | 6 +++--- webapp/sass/components/_modal.scss | 36 -------------------------------- webapp/sass/components/_status-icon.scss | 32 +++++++++++++++++++++++++++- webapp/sass/layout/_post.scss | 8 ++++--- webapp/utils/constants.jsx | 17 ++++++++------- webapp/utils/utils.jsx | 4 +--- 9 files changed, 72 insertions(+), 62 deletions(-) (limited to 'webapp') diff --git a/webapp/components/profile_picture.jsx b/webapp/components/profile_picture.jsx index 26e9f30d9..7a5f892db 100644 --- a/webapp/components/profile_picture.jsx +++ b/webapp/components/profile_picture.jsx @@ -4,6 +4,7 @@ import ProfilePopover from './profile_popover.jsx'; import * as Utils from 'utils/utils.jsx'; import React from 'react'; +import StatusIcon from './status_icon.jsx'; import {OverlayTrigger} from 'react-bootstrap'; export default class ProfilePicture extends React.Component { @@ -45,10 +46,6 @@ export default class ProfilePicture extends React.Component { } render() { - let statusClass = ''; - if (this.props.status) { - statusClass = 'status-' + this.props.status; - } if (this.props.user) { return ( } > - + + ); } return ( - + + ); } diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx index 1b802b1b0..9adc463be 100644 --- a/webapp/components/sidebar.jsx +++ b/webapp/components/sidebar.jsx @@ -507,7 +507,11 @@ export default class Sidebar extends React.Component { icon =
; } else { // set up status icon for direct message channels (status is null for other channel types) - icon = ; + icon = ( + ); } let closeButton = null; diff --git a/webapp/components/status_icon.jsx b/webapp/components/status_icon.jsx index 18cfce16c..3e71344d9 100644 --- a/webapp/components/status_icon.jsx +++ b/webapp/components/status_icon.jsx @@ -8,13 +8,22 @@ import React from 'react'; export default class StatusIcon extends React.Component { render() { const status = this.props.status; + const type = this.props.type; if (!status) { return null; } let statusIcon = ''; - if (status === 'online') { + if (type === 'avatar') { + if (status === 'online') { + statusIcon = Constants.ONLINE_AVATAR_SVG; + } else if (status === 'away') { + statusIcon = Constants.AWAY_AVATAR_SVG; + } else { + statusIcon = Constants.OFFLINE_AVATAR_SVG; + } + } else if (status === 'online') { statusIcon = Constants.ONLINE_ICON_SVG; } else if (status === 'away') { statusIcon = Constants.AWAY_ICON_SVG; @@ -33,5 +42,6 @@ export default class StatusIcon extends React.Component { } StatusIcon.propTypes = { - status: React.PropTypes.string + status: React.PropTypes.string, + type: React.PropTypes.string }; diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss index 82555cfb6..4ae27aed4 100644 --- a/webapp/sass/components/_emoticons.scss +++ b/webapp/sass/components/_emoticons.scss @@ -1,13 +1,13 @@ @charset 'UTF-8'; .emoticon { - background-repeat: no-repeat; background-position: 50% 50%; + background-repeat: no-repeat; background-size: contain; display: inline-block; - height: 1.3em; + height: 20px; vertical-align: text-top; - width: 1.3em; + width: 20px; } .emoticon-suggestion { diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss index 83f2ef907..0078ddec4 100644 --- a/webapp/sass/components/_modal.scss +++ b/webapp/sass/components/_modal.scss @@ -514,30 +514,6 @@ } - -.status-wrapper { - display: inline-block; - height: 32px; - position: relative; - - &:after { - border-radius: 100%; - bottom: -2px; - content: ''; - display: block; - height: 8px; - position: absolute; - right: 0; - width: 8px; - } - - &.status-offline { - &:after { - background: #D3D3D3; - } - } -} - .more-modal__list { display: flex; flex-direction: column; @@ -556,12 +532,6 @@ .more-modal__row { padding: 5px 10px; - - .status-wrapper { - &:after { - bottom: 0; - } - } } .more-modal__name { @@ -575,12 +545,6 @@ flex-shrink: 0; margin-top: 2px; max-width: none; - - .status-wrapper { - &:after { - bottom: 3px; - } - } } .more-modal__details { diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss index 32ce07164..5bd68f362 100644 --- a/webapp/sass/components/_status-icon.scss +++ b/webapp/sass/components/_status-icon.scss @@ -1,5 +1,34 @@ @charset 'UTF-8'; +.status-wrapper { + display: inline-block; + height: 32px; + position: relative; + + .status { + border-radius: 100px; + bottom: -4px; + height: 15px; + line-height: 0; + margin: 0; + position: absolute; + right: -3px; + top: auto; + width: 15px; + + .modal & { + bottom: -6px; + } + + + svg { + max-height: 11px; + position: relative; + top: 2px; + } + } +} + .status { display: inline-block; margin-right: 6px; @@ -30,4 +59,5 @@ position: relative; top: -1px; } -} \ No newline at end of file +} + diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index baecd9d63..0428a20ae 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -926,9 +926,11 @@ text-align: right; width: 53px; - svg { - height: 32px; - width: 32px; + .icon { + svg { + height: 32px; + width: 32px; + } } path { diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 86147ee8c..646adbd15 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -385,9 +385,12 @@ export const Constants = { FLAG_ICON_SVG: " ", ATTACHMENT_ICON_SVG: "", MATTERMOST_ICON_SVG: " ", - ONLINE_ICON_SVG: " ", - AWAY_ICON_SVG: " ", - OFFLINE_ICON_SVG: " ", + ONLINE_AVATAR_SVG: " ", + AWAY_AVATAR_SVG: " ", + OFFLINE_AVATAR_SVG: " ", + ONLINE_ICON_SVG: "", + AWAY_ICON_SVG: "", + OFFLINE_ICON_SVG: "", MENU_ICON: " ", COMMENT_ICON: " ", REPLY_ICON: " ", @@ -455,8 +458,8 @@ export const Constants = { sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1B2C3E', sidebarHeaderTextColor: '#FFFFFF', - onlineIndicator: '#55C5B2', - awayIndicator: '#A9A14C', + onlineIndicator: '#65dcc8', + awayIndicator: '#c1b966', mentionBj: '#B74A4A', mentionColor: '#FFFFFF', centerChannelBg: '#2F3E4E', @@ -480,8 +483,8 @@ export const Constants = { sidebarTextActiveColor: '#FFFFFF', sidebarHeaderBg: '#1f1f1f', sidebarHeaderTextColor: '#FFFFFF', - onlineIndicator: '#0177e7', - awayIndicator: '#A9A14C', + onlineIndicator: '#399fff', + awayIndicator: '#c1b966', mentionBj: '#0177e7', mentionColor: '#FFFFFF', centerChannelBg: '#1F1F1F', diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index a0aecbdb3..b70c98b11 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -533,14 +533,12 @@ export function applyTheme(theme) { changeCss('.app__body .status .online--icon', 'fill:' + theme.onlineIndicator); changeCss('.app__body .channel-header__info .status .online--icon', 'fill:' + theme.onlineIndicator); changeCss('.app__body .navbar .status .online--icon', 'fill:' + theme.onlineIndicator); - changeCss('.status-wrapper.status-online:after', 'background:' + theme.onlineIndicator); } if (theme.awayIndicator) { changeCss('.app__body .status .away--icon', 'fill:' + theme.awayIndicator); changeCss('.app__body .channel-header__info .status .away--icon', 'fill:' + theme.awayIndicator); changeCss('.app__body .navbar .status .away--icon', 'fill:' + theme.awayIndicator); - changeCss('.status-wrapper.status-away:after', 'background:' + theme.awayIndicator); } if (theme.mentionBj) { @@ -557,7 +555,7 @@ export function applyTheme(theme) { if (theme.centerChannelBg) { changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg); - changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .modal-footer, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span', 'background:' + theme.centerChannelBg); + changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .modal-footer, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span, .app__body .status-wrapper .status', 'background:' + theme.centerChannelBg); changeCss('#post-list .post-list-holder-by-time, .app__body .post .dropdown-menu a', 'background:' + theme.centerChannelBg); changeCss('#post-create', 'background:' + theme.centerChannelBg); changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg); -- cgit v1.2.3-1-g7c22