From 635e395e3b842f9bc379fe6f4ee149d7e2aedee5 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 6 Feb 2021 14:32:15 +0800 Subject: [PATCH 1/2] style(avatar): add inner shadow, closes #996 --- src/components/ImgFallback/Avatar.js | 4 ++ src/components/ImgFallback/styles/avatar.js | 5 ++- .../ImgFallback/styles/metric/avatar.js | 2 +- src/components/TheAvatar/PostItemAvatar.js | 13 ++++-- .../TheAvatar/styles/post_item_avatar.js | 23 +++++++--- src/components/UserBrief/Avatar.js | 42 +++++++++++++++---- src/components/UserBrief/styles/avatar.js | 30 ++++++++++--- 7 files changed, 97 insertions(+), 22 deletions(-) diff --git a/src/components/ImgFallback/Avatar.js b/src/components/ImgFallback/Avatar.js index 1edb9c33e..57353d46f 100644 --- a/src/components/ImgFallback/Avatar.js +++ b/src/components/ImgFallback/Avatar.js @@ -23,6 +23,7 @@ const Avatar = ({ right, top, bottom, + quote, }) => { const name = user?.nickname const sliceCount = size > 32 ? 2 : 1 @@ -36,6 +37,7 @@ const Avatar = ({ right={right} top={top} bottom={bottom} + quote={quote} > {name.slice(0, sliceCount)} @@ -53,6 +55,7 @@ Avatar.propTypes = { right: T.number, top: T.number, bottom: T.number, + quote: T.bool, } Avatar.defaultProps = { @@ -66,6 +69,7 @@ Avatar.defaultProps = { right: 0, top: 0, bottom: 0, + quote: false, } export default React.memo(Avatar) diff --git a/src/components/ImgFallback/styles/avatar.js b/src/components/ImgFallback/styles/avatar.js index bf7c6222d..cc6f82061 100644 --- a/src/components/ImgFallback/styles/avatar.js +++ b/src/components/ImgFallback/styles/avatar.js @@ -11,13 +11,16 @@ export const Wrapper = styled.div.attrs((props) => ({ color: ${theme('thread.articleTitle')}; width: ${({ size }) => `${size}px`}; height: ${({ size }) => `${size}px`}; - background: #074857; + background: ${theme('avatar.fallbackBg')}; border-radius: 100%; margin-top: ${({ top }) => `${top}px`}; margin-bottom: ${({ bottom }) => `${bottom}px`}; margin-left: ${({ left }) => `${left}px`}; margin-right: ${({ right }) => `${right}px`}; + + border: ${({ quote }) => (quote ? '2px solid' : 'none')}; + border-color: ${({ quote }) => (quote ? theme('avatar.quote') : 'none')}; ` export const Name = styled.div` font-family: 'Audiowide', cursive; diff --git a/src/components/ImgFallback/styles/metric/avatar.js b/src/components/ImgFallback/styles/metric/avatar.js index ff3304fa2..81a1c75c6 100644 --- a/src/components/ImgFallback/styles/metric/avatar.js +++ b/src/components/ImgFallback/styles/metric/avatar.js @@ -6,7 +6,7 @@ export const getFontSize = (size) => { return '14px' } - if (size >= 38 && size < 50) { + if (size >= 36 && size < 50) { return '14px' // two letters } diff --git a/src/components/TheAvatar/PostItemAvatar.js b/src/components/TheAvatar/PostItemAvatar.js index 266073d94..f90fc94fc 100644 --- a/src/components/TheAvatar/PostItemAvatar.js +++ b/src/components/TheAvatar/PostItemAvatar.js @@ -2,7 +2,13 @@ import React from 'react' // import { ICON } from '@/config' import ImgFallback from '@/components/ImgFallback' -import { Wrapper, Avatar, QuoteAvatar } from './styles/post_item_avatar' +import { + Wrapper, + InnerShadow, + QuoteShadow, + Avatar, + QuoteAvatar, +} from './styles/post_item_avatar' const PostItemAvatar = ({ user, onSelect }) => { return ( @@ -10,14 +16,15 @@ const PostItemAvatar = ({ user, onSelect }) => { {user.login === 'mydearxym' ? ( } + fallback={} /> ) : ( } + fallback={} /> )} + {user.login === 'mydearxym' ? : } {/* */} ) diff --git a/src/components/TheAvatar/styles/post_item_avatar.js b/src/components/TheAvatar/styles/post_item_avatar.js index 4ecfd0534..1dd57d534 100644 --- a/src/components/TheAvatar/styles/post_item_avatar.js +++ b/src/components/TheAvatar/styles/post_item_avatar.js @@ -9,20 +9,33 @@ export const Wrapper = styled.div.attrs((props) => ({ 'data-test-id': props.testId, }))` cursor: pointer; - /* border: 1px solid tomato; */ - ${css.size(36)}; + ${css.circle(38)}; position: relative; + margin-top: 2px; +` +export const InnerShadow = styled.div` + position: absolute; + ${css.circle(38)}; + top: -1px; + left: -1px; + box-shadow: ${theme('avatar.shadow')}; + z-index: 2; +` +export const QuoteShadow = styled(InnerShadow)` + ${css.circle(34)}; + top: 2px; + left: 2px; + box-shadow: ${theme('avatar.quoteShadow')}; ` export const Avatar = styled(Img)` ${css.circle(36)}; fill: ${theme('thread.articleTitle')}; - opacity: ${theme('avatarOpacity')}; - margin-top: 2px; + opacity: ${theme('avatar.opacity')}; ` export const QuoteAvatar = styled(Avatar)` ${css.circle(38)}; border: 2px solid; - border-color: #217470; + border-color: ${theme('avatar.quote')}; ` export const Tail = styled(TailBase)` ${Wrapper}:hover & { diff --git a/src/components/UserBrief/Avatar.js b/src/components/UserBrief/Avatar.js index 3ae5c5689..3c3d39af4 100644 --- a/src/components/UserBrief/Avatar.js +++ b/src/components/UserBrief/Avatar.js @@ -6,20 +6,48 @@ import { DEFAULT_USER_AVATAR } from '@/config' import ImgFallback from '@/components/ImgFallback' import BadgeInfo from './BadgeInfo' -import { Wrapper, Avatar } from './styles/avatar' +import { + Wrapper, + Avatar, + InnerShadow, + QuoteAvatar, + QuoteShadow, +} from './styles/avatar' const AvatarComp = ({ user, view }) => { + const isQuote = user.login === 'mydearxym' + + if (isQuote) { + return ( + + + } + /> + + + + + {view === VIEW.DRAWER && } + + ) + } return ( -
- } - /> -
+ } + /> + + {view === VIEW.DRAWER && } ) diff --git a/src/components/UserBrief/styles/avatar.js b/src/components/UserBrief/styles/avatar.js index 58dd08a5d..87e7324b5 100644 --- a/src/components/UserBrief/styles/avatar.js +++ b/src/components/UserBrief/styles/avatar.js @@ -1,23 +1,43 @@ import styled from 'styled-components' // import { VIEW } from '@/constant' -import { css } from '@/utils' +import { css, theme } from '@/utils' import Img from '@/Img' export const Wrapper = styled.div` ${css.flexColumn()}; margin-right: 12px; + position: relative; ` -export const Avatar = styled(Img)` +export const InnerShadow = styled.div` + position: absolute; + top: 0; + left: -4px; width: 200px; height: 200px; - border-radius: 67px; - border: 5px solid; - border-color: #217470; + display: block; + border-radius: 100%; + box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 50%) inset; + z-index: 2; +` +export const Avatar = styled(Img)` + ${css.circle(200)}; display: block; margin-left: -5px; ` +export const QuoteAvatar = styled(Avatar)` + ${css.size(200)}; + border-radius: 68px; + border: 5px solid; + border-color: ${theme('avatar.quote')}; +` +export const QuoteShadow = styled(InnerShadow)` + top: 5px; + left: 0; + ${css.size(190)}; + border-radius: 63px; +` // export const Avatar = styled(Img)` // border-radius: 4px; // width: ${({ view }) => (view === VIEW.DESKTOP ? '120px' : '80px')}; From e7f86a8bedaa6107927c7fe46e9f8c8a80e95922 Mon Sep 17 00:00:00 2001 From: mydearxym Date: Sat, 6 Feb 2021 14:32:49 +0800 Subject: [PATCH 2/2] refactor(theme): re-org avatar scope --- src/components/JobItem/styles/list_view.js | 2 +- src/components/PostItem/styles/digest_view/index.js | 2 +- src/components/PostItem/styles/list_view.js | 2 +- src/components/PostItem/styles/mobile_view/header.js | 2 +- src/components/TheAvatar/styles/article_author_avatar.js | 2 +- src/components/VideoItem/styles/index.js | 2 +- src/containers/unit/Comments/styles/comment/header.js | 2 +- .../unit/Comments/styles/comment/mobile_view/header.js | 2 +- src/containers/unit/Comments/styles/comment_header.js | 2 +- src/containers/unit/Comments/styles/editor_header.js | 2 +- .../unit/Comments/styles/reply_editor_header.js | 2 +- src/containers/unit/Header/styles/user_account.js | 2 +- utils/themes/skins/cyan.js | 8 +++++++- utils/themes/skins/github.js | 8 +++++++- utils/themes/skins/green.js | 8 +++++++- utils/themes/skins/iron_green.js | 8 +++++++- utils/themes/skins/monokai.js | 8 +++++++- utils/themes/skins/purple.js | 8 +++++++- utils/themes/skins/solarized_dark.js | 8 +++++++- utils/themes/skins/yellow.js | 8 +++++++- 20 files changed, 68 insertions(+), 20 deletions(-) diff --git a/src/components/JobItem/styles/list_view.js b/src/components/JobItem/styles/list_view.js index abd67118b..10d524f5c 100755 --- a/src/components/JobItem/styles/list_view.js +++ b/src/components/JobItem/styles/list_view.js @@ -27,7 +27,7 @@ export const TagsWrapper = styled.div` export const CompanyLogo = styled(Img)` ${css.size(45)}; border-radius: 5px; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; ` export const Brief = styled.div` ${css.flex('align-center')}; diff --git a/src/components/PostItem/styles/digest_view/index.js b/src/components/PostItem/styles/digest_view/index.js index fb91e7afb..a44f48d6b 100644 --- a/src/components/PostItem/styles/digest_view/index.js +++ b/src/components/PostItem/styles/digest_view/index.js @@ -13,7 +13,7 @@ export const AvatarWrapper = styled.div` export const Avatar = styled(Img)` ${css.circle(36)}; fill: ${theme('thread.articleTitle')}; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; margin-top: 2px; ` export const SmallAvatar = styled(Avatar)` diff --git a/src/components/PostItem/styles/list_view.js b/src/components/PostItem/styles/list_view.js index 7c11a053f..79e83181f 100644 --- a/src/components/PostItem/styles/list_view.js +++ b/src/components/PostItem/styles/list_view.js @@ -21,7 +21,7 @@ export const AvatarWrapper = styled.div` export const Avatar = styled(Img)` ${css.circle(36)}; fill: ${theme('thread.articleTitle')}; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; margin-top: 2px; ${css.media.mobile`${css.circle(34)}`}; diff --git a/src/components/PostItem/styles/mobile_view/header.js b/src/components/PostItem/styles/mobile_view/header.js index bf69c80ab..89192f387 100644 --- a/src/components/PostItem/styles/mobile_view/header.js +++ b/src/components/PostItem/styles/mobile_view/header.js @@ -17,7 +17,7 @@ export const AvatarWrapper = styled.div` export const Avatar = styled(Img)` ${css.circle(16)}; fill: ${theme('thread.articleTitle')}; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; margin-right: 8px; ` export const AuthorInfo = styled.div` diff --git a/src/components/TheAvatar/styles/article_author_avatar.js b/src/components/TheAvatar/styles/article_author_avatar.js index 7ec2a502d..376a50f62 100644 --- a/src/components/TheAvatar/styles/article_author_avatar.js +++ b/src/components/TheAvatar/styles/article_author_avatar.js @@ -15,7 +15,7 @@ export const Wrapper = styled.div.attrs((props) => ({ export const Avatar = styled(Img)` ${css.circle(36)}; fill: ${theme('thread.articleTitle')}; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; ` export const Tail = styled(TailBase)` ${Wrapper}:hover & { diff --git a/src/components/VideoItem/styles/index.js b/src/components/VideoItem/styles/index.js index 741d33fe4..5369ae152 100755 --- a/src/components/VideoItem/styles/index.js +++ b/src/components/VideoItem/styles/index.js @@ -30,7 +30,7 @@ export const Poster = styled.img` height: 100%; width: 100%; min-width: 246px; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; ${css.media.mobile` min-width: 146px; diff --git a/src/containers/unit/Comments/styles/comment/header.js b/src/containers/unit/Comments/styles/comment/header.js index eb5706e7c..671bbee0f 100755 --- a/src/containers/unit/Comments/styles/comment/header.js +++ b/src/containers/unit/Comments/styles/comment/header.js @@ -28,7 +28,7 @@ export const CommentHeaderFirst = styled.div` ` export const Avatar = styled(Img)` ${css.circle(22)}; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; margin-right: 10px; ` export const HeaderBaseInfo = styled.div` diff --git a/src/containers/unit/Comments/styles/comment/mobile_view/header.js b/src/containers/unit/Comments/styles/comment/mobile_view/header.js index 2287f6397..ea23b8ccc 100644 --- a/src/containers/unit/Comments/styles/comment/mobile_view/header.js +++ b/src/containers/unit/Comments/styles/comment/mobile_view/header.js @@ -26,7 +26,7 @@ export const CommentHeaderFirst = styled.div` ` export const Avatar = styled(Img)` ${css.circle(24)}; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; margin-right: 14px; margin-top: 10px; ` diff --git a/src/containers/unit/Comments/styles/comment_header.js b/src/containers/unit/Comments/styles/comment_header.js index 35fe01e17..47b9d89db 100755 --- a/src/containers/unit/Comments/styles/comment_header.js +++ b/src/containers/unit/Comments/styles/comment_header.js @@ -32,7 +32,7 @@ export const CommentHeaderFirst = styled.div` export const CommentAvatar = styled(Img)` ${css.circle(38)}; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; ` export const HeaderBaseInfo = styled.div` diff --git a/src/containers/unit/Comments/styles/editor_header.js b/src/containers/unit/Comments/styles/editor_header.js index 13127343f..885be6c33 100755 --- a/src/containers/unit/Comments/styles/editor_header.js +++ b/src/containers/unit/Comments/styles/editor_header.js @@ -12,7 +12,7 @@ export const UserAvatar = styled(Img)` ${css.circle(20)}; fill: ${theme('thread.articleTitle')}; margin-left: 4%; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; ` export const LeaveResponseText = styled.div` font-size: 14px; diff --git a/src/containers/unit/Comments/styles/reply_editor_header.js b/src/containers/unit/Comments/styles/reply_editor_header.js index 37a33918d..77f356698 100755 --- a/src/containers/unit/Comments/styles/reply_editor_header.js +++ b/src/containers/unit/Comments/styles/reply_editor_header.js @@ -11,7 +11,7 @@ export const Wrapper = styled.div` export const UserAvatar = styled.img` ${css.circle(25)}; margin-left: 3%; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; ` export const LeaveResponseText = styled.div` font-size: 1.3rem; diff --git a/src/containers/unit/Header/styles/user_account.js b/src/containers/unit/Header/styles/user_account.js index 90033e4ea..79935fb07 100755 --- a/src/containers/unit/Header/styles/user_account.js +++ b/src/containers/unit/Header/styles/user_account.js @@ -65,7 +65,7 @@ export const AvatarIcon = styled.img` ${css.size(20)}; cursor: pointer; border-radius: 3px; - opacity: ${theme('avatarOpacity')}; + opacity: ${theme('avatar.opacity')}; ` export const DefaultUserIcon = styled(Img)` fill: ${theme('header.fg')}; diff --git a/utils/themes/skins/cyan.js b/utils/themes/skins/cyan.js index d54d645c9..197d3fe3c 100755 --- a/utils/themes/skins/cyan.js +++ b/utils/themes/skins/cyan.js @@ -43,7 +43,6 @@ const cyan = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: '#f8f7dc', - avatarOpacity: 1, baseColor: { red: '#fd7f68 !important', green: 'yellowgreen !important', @@ -335,6 +334,13 @@ const cyan = { text: '#F8FBFC', bg: '#54A1AA', }, + avatar: { + opacity: 1, + quote: '#217470', + fallbackBg: '#074857', + shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset', + quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset', + }, } export default cyan diff --git a/utils/themes/skins/github.js b/utils/themes/skins/github.js index f11288128..964ce2a8e 100755 --- a/utils/themes/skins/github.js +++ b/utils/themes/skins/github.js @@ -43,7 +43,6 @@ const github = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: 'tomato', - avatarOpacity: 1, baseColor: { red: 'tomato !important', green: 'yellowgreen !important', @@ -336,6 +335,13 @@ const github = { text: '#F0F6FA', bg: '#2B2B2B', }, + avatar: { + opacity: 1, + quote: '#217470', + fallbackBg: '#074857', + shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset', + quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset', + }, } export default github diff --git a/utils/themes/skins/green.js b/utils/themes/skins/green.js index f5c7258c3..b02b76aae 100755 --- a/utils/themes/skins/green.js +++ b/utils/themes/skins/green.js @@ -45,7 +45,6 @@ const green = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: '#839496', - avatarOpacity: 0.8, baseColor: { red: 'tomato !important', green: 'yellowgreen !important', @@ -326,6 +325,13 @@ const green = { text: '#F0F6FA', bg: '#2B2B2B', }, + avatar: { + opacity: 0.8, + quote: '#217470', + fallbackBg: '#074857', + shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset', + quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset', + }, } export default green diff --git a/utils/themes/skins/iron_green.js b/utils/themes/skins/iron_green.js index 4ae86cde5..fbca18682 100755 --- a/utils/themes/skins/iron_green.js +++ b/utils/themes/skins/iron_green.js @@ -43,7 +43,6 @@ const iconGreen = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: 'tomato', - avatarOpacity: 0.8, baseColor: { red: '#ff9d8b !important', green: 'yellowgreen !important', @@ -329,6 +328,13 @@ const iconGreen = { text: '#F0F6FA', bg: '#2B2B2B', }, + avatar: { + opacity: 0.8, + quote: '#217470', + fallbackBg: '#074857', + shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset', + quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset', + }, } export default iconGreen diff --git a/utils/themes/skins/monokai.js b/utils/themes/skins/monokai.js index 589e64b5e..feee9839f 100755 --- a/utils/themes/skins/monokai.js +++ b/utils/themes/skins/monokai.js @@ -45,7 +45,6 @@ const monokai = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: '#839496', - avatarOpacity: 0.8, baseColor: { red: '#a24e3f !important', green: '#699411 !important', @@ -330,6 +329,13 @@ const monokai = { text: '#B0AFB0', bg: '#676464', }, + avatar: { + opacity: 0.8, + quote: '#217470', + fallbackBg: '#074857', + shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset', + quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset', + }, } export default monokai diff --git a/utils/themes/skins/purple.js b/utils/themes/skins/purple.js index 88633409b..baad7e9a6 100755 --- a/utils/themes/skins/purple.js +++ b/utils/themes/skins/purple.js @@ -44,7 +44,6 @@ const purple = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: '#839496', - avatarOpacity: 0.8, baseColor: { red: '#a24e3f !important', green: '#699411 !important', @@ -334,6 +333,13 @@ const purple = { text: '#B7B1C1', bg: '#56526E', }, + avatar: { + opacity: 0.8, + quote: '#217470', + fallbackBg: '#074857', + shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset', + quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset', + }, } export default purple diff --git a/utils/themes/skins/solarized_dark.js b/utils/themes/skins/solarized_dark.js index 93681b412..36114d780 100755 --- a/utils/themes/skins/solarized_dark.js +++ b/utils/themes/skins/solarized_dark.js @@ -45,7 +45,6 @@ const solarizedDark = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: '#839496', - avatarOpacity: 0.8, baseColor: { red: '#a24e3f !important', green: '#699411 !important', @@ -347,6 +346,13 @@ const solarizedDark = { divider: '#27424c', dropdownBg: '#0a4d61', }, + avatar: { + opacity: 0.8, + quote: '#217470', + fallbackBg: '#074857', + shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset', + quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset', + }, } export default solarizedDark diff --git a/utils/themes/skins/yellow.js b/utils/themes/skins/yellow.js index 42c258a7d..56e9ee36f 100755 --- a/utils/themes/skins/yellow.js +++ b/utils/themes/skins/yellow.js @@ -44,7 +44,6 @@ const yellow = { main: '#7DC0C5', bodyBg: contentBg, selectionBg: '#839496', - avatarOpacity: 0.8, baseColor: { red: 'tomato !important', green: 'yellowgreen !important', @@ -333,6 +332,13 @@ const yellow = { text: '#F0F6FA', bg: '#2B2B2B', }, + avatar: { + opacity: 0.8, + quote: '#217470', + fallbackBg: '#074857', + shadow: '0px 0px 4px 0px rgb(0 0 0 / 50%) inset', + quoteShadow: '0px 0px 3px 0px rgb(0 0 0 / 30%) inset', + }, } export default yellow