From d6ef8c20df0d490d28ae2e3ae1ede20e98d7bb78 Mon Sep 17 00:00:00 2001 From: Randolph Chen Date: Mon, 14 Mar 2022 17:32:54 +0800 Subject: [PATCH 1/5] fix: mask icon position erro in message post area --- .../minds.com/injection/SetupPrompt.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/SetupPrompt.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/SetupPrompt.tsx index abb01998d38b..ad1cf17a4a08 100644 --- a/packages/mask/src/social-network-adaptor/minds.com/injection/SetupPrompt.tsx +++ b/packages/mask/src/social-network-adaptor/minds.com/injection/SetupPrompt.tsx @@ -15,11 +15,11 @@ function injectSetupPrompt(ls: LiveSelector, signal: AbortSignal) { startWatch(watcher, signal) watcher.useForeach((node, key, meta) => { - const tagsAnchor = - watcher.firstDOMProxy.current?.parentElement?.querySelector('a:nth-child(4)') - if (tagsAnchor) { - tagsAnchor.style.marginRight = '10px' - } + // const tagsAnchor = + // watcher.firstDOMProxy.current?.parentElement?.querySelector('a:nth-child(5)') + // if (tagsAnchor) { + // tagsAnchor.style.marginRight = '10px' + // } createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal, }).render() @@ -29,7 +29,7 @@ function injectSetupPrompt(ls: LiveSelector, signal: AbortSignal) { const useStyles = makeStyles()({ buttonText: { margin: '-2px 0 !important', - transform: 'translateX(160px) translateY(-70px)', + transform: 'translateX(200px) translateY(-78px)', }, content: { marginRight: 5, From 931380b12350199cc716cb1634631653cd36c815 Mon Sep 17 00:00:00 2001 From: Randolph <840094513@qq.com> Date: Thu, 17 Mar 2022 17:34:47 +0800 Subject: [PATCH 2/5] fix: icon position in post dialog --- .../mask/src/components/Welcomes/Banner.tsx | 13 +++++++-- packages/mask/src/resources/MaskIcon.tsx | 17 +++++++++++ .../minds.com/injection/SetupPrompt.tsx | 28 +++++++++++-------- .../minds.com/utils/selector.ts | 3 ++ 4 files changed, 47 insertions(+), 14 deletions(-) diff --git a/packages/mask/src/components/Welcomes/Banner.tsx b/packages/mask/src/components/Welcomes/Banner.tsx index f12b227f2939..d3fc3e37778f 100644 --- a/packages/mask/src/components/Welcomes/Banner.tsx +++ b/packages/mask/src/components/Welcomes/Banner.tsx @@ -5,7 +5,7 @@ import { useLastRecognizedIdentity, useMyIdentities } from '../DataSource/useAct import Services from '../../extension/service' import { activatedSocialNetworkUI } from '../../social-network' import { DashboardRoutes } from '@masknet/shared-base' -import { MaskSharpIcon } from '../../resources/MaskIcon' +import { MaskIconInMinds, MaskSharpIcon } from '../../resources/MaskIcon' import { useMount } from 'react-use' import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus' import { hasNativeAPI, nativeAPI } from '../../../shared/native-rpc' @@ -21,6 +21,11 @@ interface BannerUIProps extends withClasses, } const useStyles = makeStyles()({ buttonText: { @@ -38,7 +43,11 @@ export function BannerUI(props: BannerUIProps) { return props.nextStep === 'hidden' ? null : ( - + {props?.iconType && ICON_MAP?.[props.iconType] ? ( + ICON_MAP[props.iconType] + ) : ( + + )} ) } diff --git a/packages/mask/src/resources/MaskIcon.tsx b/packages/mask/src/resources/MaskIcon.tsx index da0ccf3affd0..cba3abb6753b 100644 --- a/packages/mask/src/resources/MaskIcon.tsx +++ b/packages/mask/src/resources/MaskIcon.tsx @@ -108,6 +108,23 @@ export function MaskSharpIcon(props: SvgIconPropsWithSize) { ) } +export function MaskIconInMinds(props: SvgIconPropsWithSize) { + const { size = 18, color } = props + return ( + + + + + + + ) +} + export function MaskSharpIconOfSize(props: SvgIconPropsWithSize) { return ( diff --git a/packages/mask/src/social-network-adaptor/minds.com/injection/SetupPrompt.tsx b/packages/mask/src/social-network-adaptor/minds.com/injection/SetupPrompt.tsx index ad1cf17a4a08..9cad4f69527e 100644 --- a/packages/mask/src/social-network-adaptor/minds.com/injection/SetupPrompt.tsx +++ b/packages/mask/src/social-network-adaptor/minds.com/injection/SetupPrompt.tsx @@ -3,26 +3,21 @@ import { makeStyles } from '@masknet/theme' import { NotSetupYetPrompt } from '../../../components/shared/NotSetupYetPrompt' import { createReactRootShadowed } from '../../../utils/shadow-root/renderInShadowRoot' import { startWatch } from '../../../utils/watcher' -import { postEditorInPopupSelector, postEditorInTimelineSelector } from '../utils/selector' +import { postEditorInTimelineSelector, postEditorInDialogSelector } from '../utils/selector' export function injectSetupPromptAtMinds(signal: AbortSignal) { - injectSetupPrompt(postEditorInPopupSelector(), signal) - injectSetupPrompt(postEditorInTimelineSelector(), signal) + injectSetupPrompt(postEditorInTimelineSelector(), signal, ) + injectSetupPrompt(postEditorInDialogSelector(), signal, ) } -function injectSetupPrompt(ls: LiveSelector, signal: AbortSignal) { - const watcher = new MutationObserverWatcher(ls, document.querySelector('m-app')!) +function injectSetupPrompt(ls: LiveSelector, signal: AbortSignal, element: JSX.Element) { + const watcher = new MutationObserverWatcher(ls) startWatch(watcher, signal) watcher.useForeach((node, key, meta) => { - // const tagsAnchor = - // watcher.firstDOMProxy.current?.parentElement?.querySelector('a:nth-child(5)') - // if (tagsAnchor) { - // tagsAnchor.style.marginRight = '10px' - // } createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal, - }).render() + }).render(element) }) } @@ -34,12 +29,16 @@ const useStyles = makeStyles()({ content: { marginRight: 5, }, + buttonNoMargin: { + margin: '0 !important', + }, }) -const MindsNotSetupYet = () => { +const MindsNotSetupYet_Timeline = () => { const { classes } = useStyles() return ( { /> ) } + +const MindsNotSetupYet_Popup = () => { + const { classes } = useStyles() + return +} diff --git a/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts b/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts index ed0d973592b9..47fd391b1f1b 100644 --- a/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts +++ b/packages/mask/src/social-network-adaptor/minds.com/utils/selector.ts @@ -19,6 +19,9 @@ export const composerModalSelector: () => LiveSelector = () => querySel export const postEditorInPopupSelector: () => LiveSelector = () => querySelector('m-composer__modal m-composer__toolbar > div > *:nth-child(4)', true) +export const postEditorInDialogSelector: () => LiveSelector = () => + querySelector('m-composer__modal m-composer__titlebar m-composertitlebar__dropdown', true) + export const postEditorInTimelineSelector: () => LiveSelector = () => querySelector('m-newsfeed m-composer', true) From 68e9320afc96fb46b2f2b49acbc1d58c8cbbbd13 Mon Sep 17 00:00:00 2001 From: Randolph <840094513@qq.com> Date: Thu, 17 Mar 2022 22:44:48 +0800 Subject: [PATCH 3/5] fix: code specification --- packages/mask/src/components/Welcomes/Banner.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/mask/src/components/Welcomes/Banner.tsx b/packages/mask/src/components/Welcomes/Banner.tsx index d3fc3e37778f..514adbaf7132 100644 --- a/packages/mask/src/components/Welcomes/Banner.tsx +++ b/packages/mask/src/components/Welcomes/Banner.tsx @@ -24,8 +24,9 @@ interface BannerUIProps extends withClasses = { minds: , + default: , } const useStyles = makeStyles()({ buttonText: { @@ -43,11 +44,7 @@ export function BannerUI(props: BannerUIProps) { return props.nextStep === 'hidden' ? null : ( - {props?.iconType && ICON_MAP?.[props.iconType] ? ( - ICON_MAP[props.iconType] - ) : ( - - )} + {ICON_MAP?.[props?.iconType ?? 'default']} ) } From 47a6a39fa4bf7ad66ebec923fd1e26c5b808a09b Mon Sep 17 00:00:00 2001 From: Randolph <840094513@qq.com> Date: Tue, 22 Mar 2022 11:21:40 +0800 Subject: [PATCH 4/5] fix: typo error --- cspell.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cspell.json b/cspell.json index ab9a970d1a08..ee842d281e55 100644 --- a/cspell.json +++ b/cspell.json @@ -55,6 +55,7 @@ "clonable", "codegen", "commentid", + "composertitlebar", "consolas", "contenteditable", "contrib", @@ -230,6 +231,7 @@ "thegraph", "timelock", "timelocked", + "titlebar", "tokelau", "tokenid", "traderjoe", From eadd7693c78febc4b3d7df0d282614ee630e0ca3 Mon Sep 17 00:00:00 2001 From: Randolph <840094513@qq.com> Date: Thu, 31 Mar 2022 20:42:31 +0800 Subject: [PATCH 5/5] feat: change button position when persona connected --- .../components/InjectedComponents/PostDialogHint.tsx | 11 +++++++++-- .../minds.com/injection/PostDialogHint.tsx | 7 ++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx index 88e108d3a955..d952a48fcbc9 100644 --- a/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx +++ b/packages/mask/src/components/InjectedComponents/PostDialogHint.tsx @@ -4,7 +4,7 @@ import { useStylesExtends, makeStyles } from '@masknet/theme' import { useI18N } from '../../utils' import type { BannerProps } from '../Welcomes/Banner' import { isMobileFacebook } from '../../social-network-adaptor/facebook.com/utils/isMobile' -import { MaskSharpIcon } from '../../resources/MaskIcon' +import { MaskSharpIcon, MaskIconInMinds } from '../../resources/MaskIcon' import classNames from 'classnames' import GuideStep from '../GuideStep' import { usePersonaConnectStatus } from '../DataSource/usePersonaConnectStatus' @@ -18,6 +18,7 @@ export interface PostDialogHintUIProps extends withClasses<'buttonTransform' | ' disableGuideTip?: boolean size?: number tooltip?: TooltipConfigProps + iconType?: string onHintButtonClicked: () => void } @@ -43,6 +44,11 @@ const useStyles = makeStyles()((theme) => ({ }, })) +const ICON_MAP: Record = { + minds: , + default: , +} + const EntryIconButton = memo((props: PostDialogHintUIProps) => { const { t } = useI18N() const { size, tooltip, disableGuideTip } = props @@ -61,7 +67,7 @@ const EntryIconButton = memo((props: PostDialogHintUIProps) => { size="large" className={classNames(classes.button, classes.iconButton)} onClick={props.onHintButtonClicked}> - + {ICON_MAP?.[props?.iconType ?? 'default']} ) @@ -96,6 +102,7 @@ export interface PostDialogHintProps extends Partial { NotSetupYetPromptProps?: Partial size?: number disableGuideTip?: boolean + iconType?: string } export function PostDialogHint(props: PostDialogHintProps) { const personaConnectStatus = usePersonaConnectStatus() 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 88c409cabefd..04bc8c38585a 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 @@ -5,10 +5,10 @@ import { useCallback } from 'react' import { PostDialogHint } from '../../../components/InjectedComponents/PostDialogHint' import { createReactRootShadowed } from '../../../utils/shadow-root/renderInShadowRoot' import { startWatch } from '../../../utils/watcher' -import { postEditorInPopupSelector, postEditorInTimelineSelector } from '../utils/selector' +import { postEditorInDialogSelector, postEditorInTimelineSelector } from '../utils/selector' export function injectPostDialogHintAtMinds(signal: AbortSignal) { - renderPostDialogHintTo(postEditorInPopupSelector(), signal, 'popup') + renderPostDialogHintTo(postEditorInDialogSelector(), signal, 'popup') renderPostDialogHintTo(postEditorInTimelineSelector(), signal, 'timeline') } @@ -32,7 +32,7 @@ const useStyles = makeStyles()((theme, { reason }) => ({ margin: 0, }, buttonTransform: { - ...(reason === 'timeline' ? { width: '40px', transform: 'translateX(160px) translateY(-70px)' } : {}), + ...(reason === 'timeline' ? { width: '40px', transform: 'translateX(200px) translateY(-78px)' } : {}), }, iconButton: { '&:hover': { @@ -51,6 +51,7 @@ function PostDialogHintAtMinds({ reason }: { reason: 'timeline' | 'popup' }) { return (