From 6c2975716234afeb055bbbdf6924e4e3d997a77d Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Thu, 16 Dec 2021 19:17:49 +0800 Subject: [PATCH 1/5] fix: entry icon size & hover style --- .../src/components/InjectedComponents/PostDialogHint.tsx | 5 ++++- packages/mask/src/resources/MaskIcon.tsx | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index dadd0c8e08e0..c94555575cec 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -1,5 +1,5 @@ import { memo } from 'react' -import { IconButton } from '@mui/material' +import { alpha, IconButton } from '@mui/material' import { useStylesExtends, makeStyles } from '@masknet/theme' import { useI18N } from '../../utils' import type { BannerProps } from '../Welcomes/Banner' @@ -18,6 +18,9 @@ const useStyles = makeStyles()((theme) => ({ button: { // TODO: is it correct? (what about twitter?) padding: isMobileFacebook ? 0 : '8px', + '&:hover': { + background: alpha(theme.palette.primary.main, 0.1), + }, }, text: { fontSize: 14, diff --git a/packages/mask/src/resources/MaskIcon.tsx b/packages/mask/src/resources/MaskIcon.tsx index b9d9bededc13..cdfe68060d7f 100644 --- a/packages/mask/src/resources/MaskIcon.tsx +++ b/packages/mask/src/resources/MaskIcon.tsx @@ -13,7 +13,7 @@ const MaskSmileFaceSVG = ({ size = 24 }: { size?: number }) => ( ) -const MaskSmileFaceSharpSVG = ({ size = 20 }: { size?: number }) => ( +const MaskSmileFaceSharpSVG = ({ size = 19 }: { size?: number }) => ( + ) From 7d6946e2854ad38b70ef726b90a3d49dbfc6c8f8 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Fri, 17 Dec 2021 16:49:17 +0800 Subject: [PATCH 2/5] feat: add tooltip for entry icon --- .../InjectedComponents/PostDialogHint.tsx | 23 +++++++++++++++---- packages/theme/src/constants.ts | 2 ++ 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index c94555575cec..0869313fad05 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -1,6 +1,6 @@ import { memo } from 'react' -import { alpha, IconButton } from '@mui/material' -import { useStylesExtends, makeStyles } from '@masknet/theme' +import { alpha, IconButton, Tooltip } from '@mui/material' +import { useStylesExtends, makeStyles, MaskColorVar } from '@masknet/theme' import { useI18N } from '../../utils' import type { BannerProps } from '../Welcomes/Banner' import { useValueRef } from '@masknet/shared' @@ -34,15 +34,28 @@ const useStyles = makeStyles()((theme) => ({ padding: '8px 10px', borderBottom: '1px solid #dadde1', }, + tooltip: { + marginTop: '2px !important', + borderRadius: 2, + padding: 4, + background: MaskColorVar.twitterTooltipBg, + }, })) const EntryIconButton = memo((props: PostDialogHintUIProps) => { const classes = useStylesExtends(useStyles(), props) return ( - - - + + + + + ) }) diff --git a/packages/theme/src/constants.ts b/packages/theme/src/constants.ts index 1fe2daf4c6c5..afc869842d65 100644 --- a/packages/theme/src/constants.ts +++ b/packages/theme/src/constants.ts @@ -28,6 +28,7 @@ export const LightColor = { twitterInfoBackground: '#AFC3E1', twitterInfo: '#8CA3C7', twitterBg: '#F6F8F8', + twitterTooltipBg: 'rgba(0,0,0,.6)', twitterInput: '#EDF1F2', twitterLine: '#EBEEF0', redMain: '#ff5f5f', @@ -99,6 +100,7 @@ export const DarkColor: typeof LightColor = { twitterInfo: '#8CA3C7', twitterLine: '#2F3336', twitterBg: '#15171A', + twitterTooltipBg: 'rgba(91,112,131,.6)', redMain: '#ff5f5f', redLight: '#46304a', redContrastText: '#ffffff', From 4297d7205dd1207a93cf0a4be6b5a5a2969d1ade Mon Sep 17 00:00:00 2001 From: guanbinrui Date: Sat, 18 Dec 2021 21:12:20 +0800 Subject: [PATCH 3/5] fix(ui): adjust size --- packages/mask/src/resources/MaskIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mask/src/resources/MaskIcon.tsx b/packages/mask/src/resources/MaskIcon.tsx index cdfe68060d7f..c763e852ca50 100644 --- a/packages/mask/src/resources/MaskIcon.tsx +++ b/packages/mask/src/resources/MaskIcon.tsx @@ -97,7 +97,7 @@ export function MaskIconOutlined(props: SvgIconProps) { export function MaskSharpIcon(props: SvgIconProps) { return ( - + ) From 55d92b27d6980fefd8e2f24d6fc4a3795db19887 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Mon, 20 Dec 2021 15:29:58 +0800 Subject: [PATCH 4/5] fix: only apply to twitter network --- .../InjectedComponents/PostDialogHint.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index 0869313fad05..1f44d51b710f 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -9,6 +9,8 @@ import { MaskSharpIcon } from '../../resources/MaskIcon' import { useMyIdentities } from '../DataSource/useActivatedUI' import { currentSetupGuideStatus } from '../../settings/settings' import { activatedSocialNetworkUI } from '../../social-network' +import { isTwitter } from '../../social-network-adaptor/twitter.com/base' +import classNames from 'classnames' export interface PostDialogHintUIProps extends withClasses<'buttonTransform'> { onHintButtonClicked: () => void @@ -18,6 +20,11 @@ const useStyles = makeStyles()((theme) => ({ button: { // TODO: is it correct? (what about twitter?) padding: isMobileFacebook ? 0 : '8px', + '&:hover': { + background: 'none', + }, + }, + buttonBg: { '&:hover': { background: alpha(theme.palette.primary.main, 0.1), }, @@ -44,15 +51,20 @@ const useStyles = makeStyles()((theme) => ({ const EntryIconButton = memo((props: PostDialogHintUIProps) => { const classes = useStylesExtends(useStyles(), props) + const isTwitterNetwork = isTwitter(activatedSocialNetworkUI) return ( - + From d4ca0d1de49aeeb3d6eb72611ca85e946210f6c1 Mon Sep 17 00:00:00 2001 From: Hom Yan Date: Tue, 28 Dec 2021 16:06:32 +0800 Subject: [PATCH 5/5] feat: add tooltip config & custom classes --- .../InjectedComponents/PostDialogHint.tsx | 44 ++++++++----------- packages/mask/src/resources/MaskIcon.tsx | 11 +++-- .../facebook.com/injection/Composition.tsx | 21 ++++++++- .../minds.com/injection/PostDialogHint.tsx | 8 ++++ .../twitter.com/injection/PostDialogHint.tsx | 26 ++++++++++- 5 files changed, 80 insertions(+), 30 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index 1f44d51b710f..42ddf8a67478 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -1,6 +1,6 @@ import { memo } from 'react' -import { alpha, IconButton, Tooltip } from '@mui/material' -import { useStylesExtends, makeStyles, MaskColorVar } from '@masknet/theme' +import { IconButton, Tooltip } from '@mui/material' +import { useStylesExtends, makeStyles } from '@masknet/theme' import { useI18N } from '../../utils' import type { BannerProps } from '../Welcomes/Banner' import { useValueRef } from '@masknet/shared' @@ -9,10 +9,16 @@ import { MaskSharpIcon } from '../../resources/MaskIcon' import { useMyIdentities } from '../DataSource/useActivatedUI' import { currentSetupGuideStatus } from '../../settings/settings' import { activatedSocialNetworkUI } from '../../social-network' -import { isTwitter } from '../../social-network-adaptor/twitter.com/base' import classNames from 'classnames' -export interface PostDialogHintUIProps extends withClasses<'buttonTransform'> { +interface TooltipConfigProps { + placement?: 'bottom' | 'top' + disabled?: boolean +} + +export interface PostDialogHintUIProps extends withClasses<'buttonTransform' | 'iconButton' | 'tooltip'> { + size?: number + tooltip?: TooltipConfigProps onHintButtonClicked: () => void } @@ -20,14 +26,6 @@ const useStyles = makeStyles()((theme) => ({ button: { // TODO: is it correct? (what about twitter?) padding: isMobileFacebook ? 0 : '8px', - '&:hover': { - background: 'none', - }, - }, - buttonBg: { - '&:hover': { - background: alpha(theme.palette.primary.main, 0.1), - }, }, text: { fontSize: 14, @@ -41,55 +39,51 @@ const useStyles = makeStyles()((theme) => ({ padding: '8px 10px', borderBottom: '1px solid #dadde1', }, - tooltip: { - marginTop: '2px !important', - borderRadius: 2, - padding: 4, - background: MaskColorVar.twitterTooltipBg, - }, })) const EntryIconButton = memo((props: PostDialogHintUIProps) => { + const { size, tooltip } = props const classes = useStylesExtends(useStyles(), props) - const isTwitterNetwork = isTwitter(activatedSocialNetworkUI) return ( - + ) }) export const PostDialogHintUI = memo(function PostDialogHintUI(props: PostDialogHintUIProps) { - const { onHintButtonClicked } = props + const { onHintButtonClicked, size, ...others } = props const classes = useStylesExtends(useStyles(), props) const { t } = useI18N() return isMobileFacebook ? (
- undefined} /> + undefined} /> {t('post_modal_hint__button')}
) : (
- +
) }) export interface PostDialogHintProps extends Partial { NotSetupYetPromptProps?: Partial + size?: number } export function PostDialogHint(props: PostDialogHintProps) { const identities = useMyIdentities() diff --git a/packages/mask/src/resources/MaskIcon.tsx b/packages/mask/src/resources/MaskIcon.tsx index c763e852ca50..be165814cd5d 100644 --- a/packages/mask/src/resources/MaskIcon.tsx +++ b/packages/mask/src/resources/MaskIcon.tsx @@ -95,10 +95,15 @@ export function MaskIconOutlined(props: SvgIconProps) { return {MaskSmileFaceOutlinedSVG} } -export function MaskSharpIcon(props: SvgIconProps) { +export function MaskSharpIcon(props: SvgIconPropsWithSize) { + const { size = 20, color } = props return ( - - + + ) } diff --git a/packages/mask/src/social-network-adaptor/facebook.com/injection/Composition.tsx b/packages/mask/src/social-network-adaptor/facebook.com/injection/Composition.tsx index ce8dab953b34..e3c84e8f8d0a 100644 --- a/packages/mask/src/social-network-adaptor/facebook.com/injection/Composition.tsx +++ b/packages/mask/src/social-network-adaptor/facebook.com/injection/Composition.tsx @@ -7,9 +7,22 @@ import { PostDialogHint } from '../../../components/InjectedComponents/PostDialo import { MaskMessages } from '../../../utils/messages' import { startWatch } from '../../../utils/watcher' import { taskOpenComposeBoxFacebook } from '../automation/openComposeBox' +import { makeStyles } from '@masknet/theme' let composeBox: LiveSelector +const useStyles = makeStyles()(() => ({ + tooltip: { + borderRadius: 8, + padding: 8, + marginBottom: '0 !important', + fontSize: 12, + background: 'rgba(0,0,0,.75)', + boxShadow: '0 4px 10px 0 rgba(0,0,0,.5)', + color: '#ddd', + }, +})) + function isGroup() { const matched = location.href.match(/\/groups/) if (!matched) return false @@ -51,13 +64,19 @@ export function injectCompositionFacebook(signal: AbortSignal) { ) } function UI() { + const { classes } = useStyles() const onHintButtonClicked = useCallback( () => MaskMessages.events.requestComposition.sendToLocal({ reason: 'popup', open: true }), [], ) return ( - + ) diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/PostDialogHint.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/PostDialogHint.tsx index 7c15d1e0591e..78bc4a0e4338 100644 --- a/packages/mask/src/social-network-adaptor/minds.com/injection/PostDialogHint.tsx +++ b/packages/mask/src/social-network-adaptor/minds.com/injection/PostDialogHint.tsx @@ -34,6 +34,11 @@ const useStyles = makeStyles()((theme, { reason }) => ({ buttonTransform: { ...(reason === 'timeline' ? { width: '40px', transform: 'translateX(160px) translateY(-70px)' } : {}), }, + iconButton: { + '&:hover': { + background: 'none', + }, + }, })) function PostDialogHintAtMinds({ reason }: { reason: 'timeline' | 'popup' }) { @@ -45,9 +50,12 @@ function PostDialogHintAtMinds({ reason }: { reason: 'timeline' | 'popup' }) { ) return ( ({ + iconButton: { + '&:hover': { + background: alpha(theme.palette.primary.main, 0.1), + }, + }, + tooltip: { + marginTop: '2px !important', + borderRadius: 2, + padding: 4, + background: MaskColorVar.twitterTooltipBg, + }, +})) export function injectPostDialogHintAtTwitter(signal: AbortSignal) { const emptyNode = document.createElement('div') @@ -27,9 +43,17 @@ function renderPostDialogHintTo(reason: 'timeline' | 'popup', ls: LiveSelecto } function PostDialogHintAtTwitter({ reason }: { reason: 'timeline' | 'popup' }) { + const { classes } = useStyles() const onHintButtonClicked = useCallback( () => MaskMessages.events.requestComposition.sendToLocal({ reason, open: true }), [reason], ) - return + return ( + + ) }