feat: add change log (#1734)

Co-authored-by: Himself65 <himself65@outlook.com>
This commit is contained in:
JimmFly
2023-03-31 04:17:36 +08:00
committed by GitHub
parent 91c32b6715
commit c9bd4e34b3
12 changed files with 292 additions and 49 deletions

View File

@@ -3,8 +3,9 @@ import { useTranslation } from '@affine/i18n';
import { useCallback, useState } from 'react';
import {
useIsFirstLoad,
useOpenTips,
useGuideHidden,
useGuideHiddenUntilNextUpdate,
useUpdateTipsOnVersionChange,
} from '../../../hooks/affine/use-is-first-load';
import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status';
import { SidebarSwitchIcon } from './icons';
@@ -19,10 +20,12 @@ export const SidebarSwitch = ({
tooltipContent,
testid = '',
}: SidebarSwitchProps) => {
useUpdateTipsOnVersionChange();
const [open, setOpen] = useSidebarStatus();
const [tooltipVisible, setTooltipVisible] = useState(false);
const [isFirstLoad, setIsFirstLoad] = useIsFirstLoad();
const [, setOpenTips] = useOpenTips();
const [guideHidden, setGuideHidden] = useGuideHidden();
const [guideHiddenUntilNextUpdate, setGuideHiddenUntilNextUpdate] =
useGuideHiddenUntilNextUpdate();
const { t } = useTranslation();
tooltipContent =
tooltipContent || (open ? t('Collapse sidebar') : t('Expand sidebar'));
@@ -41,13 +44,23 @@ export const SidebarSwitch = ({
onClick={useCallback(() => {
setOpen(!open);
setTooltipVisible(false);
if (isFirstLoad) {
setIsFirstLoad(false);
if (guideHiddenUntilNextUpdate['quickSearchTips'] === false) {
setGuideHiddenUntilNextUpdate({
...guideHiddenUntilNextUpdate,
quickSearchTips: true,
});
setTimeout(() => {
setOpenTips(true);
setGuideHidden({ ...guideHidden, quickSearchTips: false });
}, 200);
}
}, [isFirstLoad, open, setIsFirstLoad, setOpen, setOpenTips])}
}, [
guideHidden,
guideHiddenUntilNextUpdate,
open,
setGuideHidden,
setGuideHiddenUntilNextUpdate,
setOpen,
])}
onMouseEnter={useCallback(() => {
setTooltipVisible(true);
}, [])}

View File

@@ -8,7 +8,7 @@ import type { HTMLAttributes } from 'react';
import { forwardRef, useCallback, useRef } from 'react';
import { currentEditorAtom, openQuickSearchModalAtom } from '../../../atoms';
import { useOpenTips } from '../../../hooks/affine/use-is-first-load';
import { useGuideHidden } from '../../../hooks/affine/use-is-first-load';
import { usePageMeta } from '../../../hooks/use-page-meta';
import { useElementResizeEffect } from '../../../hooks/use-workspaces';
import type { BlockSuiteWorkspace } from '../../../shared';
@@ -53,7 +53,7 @@ export const BlockSuiteEditorHeader = forwardRef<
assertExists(pageMeta);
const title = pageMeta.title;
const { trash: isTrash } = pageMeta;
const [openTips, setOpenTips] = useOpenTips();
const [isTipsHidden, setTipsHidden] = useGuideHidden();
const isMac = () => {
const env = getEnvironment();
return env.isBrowser && env.isMacOs;
@@ -64,11 +64,11 @@ export const BlockSuiteEditorHeader = forwardRef<
useElementResizeEffect(
useAtomValue(currentEditorAtom),
useCallback(() => {
if (!openTips || !popperRef.current) {
if (isTipsHidden.quickSearchTips || !popperRef.current) {
return;
}
popperRef.current.update();
}, [openTips])
}, [isTipsHidden.quickSearchTips])
);
const TipsContent = (
@@ -91,7 +91,9 @@ export const BlockSuiteEditorHeader = forwardRef<
</div>
<StyledQuickSearchTipButton
data-testid="quick-search-got-it"
onClick={() => setOpenTips(false)}
onClick={() =>
setTipsHidden({ ...isTipsHidden, quickSearchTips: true })
}
>
Got it
</StyledQuickSearchTipButton>
@@ -130,7 +132,7 @@ export const BlockSuiteEditorHeader = forwardRef<
content={TipsContent}
placement="bottom"
popperRef={popperRef}
open={openTips}
open={!isTipsHidden.quickSearchTips}
offset={[0, -5]}
>
<StyledSearchArrowWrapper>

View File

@@ -1,6 +1,6 @@
import { MuiFade, Tooltip } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { CloseIcon } from '@blocksuite/icons';
import { CloseIcon, DoneIcon } from '@blocksuite/icons';
import dynamic from 'next/dynamic';
import { useState } from 'react';
@@ -23,9 +23,9 @@ const ContactModal = dynamic(
}
);
export type IslandItemNames = 'contact' | 'shortcuts';
export type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts';
export const HelpIsland = ({
showList = ['contact', 'shortcuts'],
showList = ['whatNew', 'contact', 'shortcuts'],
}: {
showList?: IslandItemNames[];
}) => {
@@ -62,6 +62,18 @@ export const HelpIsland = ({
<StyledAnimateWrapper
style={{ height: spread ? `${showList.length * 44}px` : 0 }}
>
{showList.includes('whatNew') && (
<Tooltip content={t("Discover what's new")} placement="left-end">
<StyledIconWrapper
data-testid="right-bottom-change-log-icon"
onClick={() => {
window.open('https://affine.pro', '_blank');
}}
>
<DoneIcon />
</StyledIconWrapper>
</Tooltip>
)}
{showList.includes('contact') && (
<Tooltip content={t('Contact Us')} placement="left-end">
<StyledIconWrapper

View File

@@ -0,0 +1,52 @@
import { IconButton } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { CloseIcon, DoneIcon } from '@blocksuite/icons';
import { useCallback } from 'react';
import {
useGuideHidden,
useGuideHiddenUntilNextUpdate,
} from '../../../../hooks/affine/use-is-first-load';
import { StyledListItem } from '../shared-styles';
import { StyledLink } from '../style';
export const ChangeLog = () => {
const [guideHidden, setGuideHidden] = useGuideHidden();
const [guideHiddenUntilNextUpdate, setGuideHiddenUntilNextUpdate] =
useGuideHiddenUntilNextUpdate();
const { t } = useTranslation();
const onCloseWhatsNew = useCallback(() => {
setGuideHiddenUntilNextUpdate({
...guideHiddenUntilNextUpdate,
changeLog: true,
});
setGuideHidden({ ...guideHidden, changeLog: true });
}, [
guideHidden,
guideHiddenUntilNextUpdate,
setGuideHidden,
setGuideHiddenUntilNextUpdate,
]);
if (guideHiddenUntilNextUpdate.changeLog) {
return <></>;
}
return (
<>
<StyledListItem data-testid="change-log">
<StyledLink href={'https://affine.pro'} target="_blank">
<DoneIcon />
{t("Discover what's new!")}
</StyledLink>
<IconButton
onClick={() => {
onCloseWhatsNew();
}}
data-testid="change-log-close-button"
>
<CloseIcon />
</IconButton>
</StyledListItem>
</>
);
};
export default ChangeLog;

View File

@@ -15,6 +15,7 @@ import { useSidebarStatus } from '../../../hooks/affine/use-sidebar-status';
import { usePageMeta } from '../../../hooks/use-page-meta';
import type { RemWorkspace } from '../../../shared';
import { SidebarSwitch } from '../../affine/sidebar-switch';
import { ChangeLog } from './changeLog';
import Favorite from './favorite';
import { Pivots } from './Pivots';
import { StyledListItem } from './shared-styles';
@@ -86,7 +87,7 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
currentWorkspace={currentWorkspace}
onClick={onOpenWorkspaceListModal}
/>
<ChangeLog />
<StyledListItem
data-testid="slider-bar-quick-search-button"
onClick={useCallback(() => {
@@ -117,7 +118,6 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
{t('Workspace Settings')}
</StyledLink>
</StyledListItem>
<StyledListItem
active={
currentPath ===
@@ -133,7 +133,6 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
<span data-testid="all-pages">{t('All pages')}</span>
</StyledLink>
</StyledListItem>
<Favorite
currentPath={currentPath}
paths={paths}
@@ -148,7 +147,6 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
allMetas={pageMeta}
/>
)}
<StyledListItem
active={
currentPath ===