From 5d6129e67f8420d70f0fcca1e6b56b3a477705a4 Mon Sep 17 00:00:00 2001 From: etouyang Date: Sun, 30 Jan 2022 10:49:58 +0800 Subject: [PATCH 1/2] refactor: pet close --- packages/mask/shared-ui/locales/en-US.json | 1 + .../src/plugins/Pets/SNSAdaptor/Animate.tsx | 9 ++++--- .../src/plugins/Pets/SNSAdaptor/PetDialog.tsx | 27 ++++++++++++++++--- packages/mask/src/plugins/Pets/settings.ts | 6 +++++ 4 files changed, 37 insertions(+), 6 deletions(-) create mode 100644 packages/mask/src/plugins/Pets/settings.ts diff --git a/packages/mask/shared-ui/locales/en-US.json b/packages/mask/shared-ui/locales/en-US.json index ad6ef994c56e..7d73699903af 100644 --- a/packages/mask/shared-ui/locales/en-US.json +++ b/packages/mask/shared-ui/locales/en-US.json @@ -896,6 +896,7 @@ "plugin_pets_dialog_powered": "Powered by RSS3", "plugin_pets_dialog_success": "Your Non-Fungible Friend has been set up successfully", "plugin_pets_dialog_fail": "Setting failed, please try later", + "plugin_pets_dialog_check_title": "Show NFT friends on the profile page.", "popups_following_permissions": "The plugin ({{pluginName}}) (hosted on {{pluginURL}}) is going to request the following permissions:", "popups_permissions": "Permissions", "popups_sites": "Sites", diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/Animate.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/Animate.tsx index c8493f09a8c1..f1503442c4da 100644 --- a/packages/mask/src/plugins/Pets/SNSAdaptor/Animate.tsx +++ b/packages/mask/src/plugins/Pets/SNSAdaptor/Animate.tsx @@ -1,10 +1,12 @@ import { useEffect, useState } from 'react' import { makeStyles, useStylesExtends } from '@masknet/theme' +import { useValueRef } from '@masknet/shared' import { useEssay, useDefaultEssay, useCurrentVisitingUser } from '../hooks' import { ModelNFT } from './ModelNFT' import { NormalNFT } from './NormalNFT' import { ImageType } from '../types' import { PluginPetMessages } from '../messages' +import { petShowSettings } from '../settings' const useStyles = makeStyles()(() => ({ root: { @@ -17,6 +19,8 @@ const useStyles = makeStyles()(() => ({ const AnimatePic = () => { const classes = useStylesExtends(useStyles(), {}) + const petShow = useValueRef(petShowSettings) + const [start, setStart] = useState(true) const [refresh, setRefresh] = useState(0) @@ -25,10 +29,9 @@ const AnimatePic = () => { const defMeta = useDefaultEssay(visitor) const showMeta = visitorMeta ?? defMeta - const [hidden, setHidden] = useState(false) const [infoShow, setInfoShow] = useState(false) - const handleClose = () => setHidden(true) + const handleClose = () => (petShowSettings.value = false) const handleMouseEnter = () => setInfoShow(true) const handleMouseLeave = () => setInfoShow(false) @@ -46,7 +49,7 @@ const AnimatePic = () => { PluginPetMessages.events.setResult.off(refreshHandle) } }, []) - if (!visitor.userId || visitor.userId === '$unknown' || hidden || !showMeta?.image) return null + if (!petShow || !visitor.userId || visitor.userId === '$unknown' || !showMeta?.image) return null return (
({ desBox: { display: 'flex', justifyContent: 'space-between', + marginTop: theme.spacing(3), }, des: { color: '#7b8192', @@ -43,7 +56,7 @@ const useStyles = makeStyles()((theme) => ({ width: '100%', }, btn: { - margin: theme.spacing(8, 0, 4), + marginTop: theme.spacing(8), }, thumbnail: { width: 25, @@ -89,6 +102,7 @@ export function PetDialog() { const { open, closeDialog } = useRemoteControlledDialog(PluginPetMessages.events.essayDialogUpdated, () => {}) const [configNFTs, setConfigNFTs] = useState | undefined>(undefined) const [loading, setLoading] = useState(false) + const checked = useValueRef(petShowSettings) const user = useUser() const nfts = useNFTs(user, configNFTs) @@ -310,6 +324,13 @@ export function PetDialog() { disabled={!collection.name || !metaData.image}> {t('plugin_pets_dialog_btn')} + (petShowSettings.value = e.target.checked)} /> + } + label={t('plugin_pets_dialog_check_title')} + sx={{ marginTop: '4px' }} + /> {t('plugin_pets_dialog_created')} {t('plugin_pets_dialog_powered')} diff --git a/packages/mask/src/plugins/Pets/settings.ts b/packages/mask/src/plugins/Pets/settings.ts new file mode 100644 index 000000000000..5f8214a4fabe --- /dev/null +++ b/packages/mask/src/plugins/Pets/settings.ts @@ -0,0 +1,6 @@ +import { createGlobalSettings } from '../../settings/createSettings' +import { PetsPluginID } from './constants' + +export const petShowSettings = createGlobalSettings(`${PetsPluginID}+selectedClosePet`, true, { + primary: () => 'DO NOT DISPLAY IT IN UI', +}) From e2f87987a1d0f50d6df326a6ac29c7eb3abcc7d3 Mon Sep 17 00:00:00 2001 From: etouyang Date: Sun, 30 Jan 2022 11:05:59 +0800 Subject: [PATCH 2/2] fix: change css --- .../src/plugins/Pets/SNSAdaptor/PetDialog.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/mask/src/plugins/Pets/SNSAdaptor/PetDialog.tsx b/packages/mask/src/plugins/Pets/SNSAdaptor/PetDialog.tsx index 3a64dd30a274..7a18fda8274f 100644 --- a/packages/mask/src/plugins/Pets/SNSAdaptor/PetDialog.tsx +++ b/packages/mask/src/plugins/Pets/SNSAdaptor/PetDialog.tsx @@ -56,7 +56,7 @@ const useStyles = makeStyles()((theme) => ({ width: '100%', }, btn: { - marginTop: theme.spacing(8), + margin: theme.spacing(8, 0, 2), }, thumbnail: { width: 25, @@ -312,7 +312,13 @@ export function PetDialog() { /> - + (petShowSettings.value = e.target.checked)} /> + } + label={t('plugin_pets_dialog_check_title')} + sx={{ marginTop: '4px' }} + /> {t('plugin_pets_dialog_btn')} - (petShowSettings.value = e.target.checked)} /> - } - label={t('plugin_pets_dialog_check_title')} - sx={{ marginTop: '4px' }} - /> {t('plugin_pets_dialog_created')} {t('plugin_pets_dialog_powered')}