mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-09-23 20:18:42 +08:00
chore: update view text
This commit is contained in:
@@ -8,7 +8,7 @@ import type { ChangeEvent, KeyboardEvent } from 'react';
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { IconButton } from '../components/IconButton';
|
import { IconButton } from '../components/IconButton';
|
||||||
import { Panel } from '../components/Panel';
|
import { Panel } from '../components/Panel';
|
||||||
import { VIEW_ICON_MAP } from './constant';
|
import { VIEW_LIST } from './constant';
|
||||||
import { PanelItem } from './styles';
|
import { PanelItem } from './styles';
|
||||||
|
|
||||||
export const AddViewMenu = () => {
|
export const AddViewMenu = () => {
|
||||||
@@ -61,26 +61,23 @@ export const AddViewMenu = () => {
|
|||||||
</PanelItem>
|
</PanelItem>
|
||||||
|
|
||||||
<PanelItem>
|
<PanelItem>
|
||||||
{Object.entries(VIEW_ICON_MAP).map(
|
{VIEW_LIST.map(({ name, icon, scene }) => (
|
||||||
([name, icon]) => (
|
<IconButton
|
||||||
<IconButton
|
key={name}
|
||||||
key={name}
|
active={viewType === scene}
|
||||||
active={
|
onClick={() => {
|
||||||
viewType === (name as RecastScene)
|
if (scene === RecastScene.Table) {
|
||||||
|
// The table view is under progress
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
onClick={() => {
|
setViewType(scene);
|
||||||
if (name === 'table') {
|
}}
|
||||||
// The table view is under progress
|
style={{ textTransform: 'uppercase' }}
|
||||||
return;
|
>
|
||||||
}
|
{icon}
|
||||||
setViewType(name as RecastScene);
|
{name}
|
||||||
}}
|
</IconButton>
|
||||||
>
|
))}
|
||||||
{VIEW_ICON_MAP[name as RecastScene]}
|
|
||||||
{name.toUpperCase()}
|
|
||||||
</IconButton>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</PanelItem>
|
</PanelItem>
|
||||||
</Panel>
|
</Panel>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import type { ChangeEvent, KeyboardEvent } from 'react';
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { IconButton } from '../components/IconButton';
|
import { IconButton } from '../components/IconButton';
|
||||||
import { Panel } from '../components/Panel';
|
import { Panel } from '../components/Panel';
|
||||||
import { VIEW_ICON_MAP } from './constant';
|
import { VIEW_LIST } from './constant';
|
||||||
import { PanelItem } from './styles';
|
import { PanelItem } from './styles';
|
||||||
|
|
||||||
export const ViewsMenu = () => {
|
export const ViewsMenu = () => {
|
||||||
@@ -65,9 +65,8 @@ export const ViewsMenu = () => {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{VIEW_ICON_MAP[view.type]}
|
{VIEW_LIST.find(v => view.type === v.scene)?.icon}
|
||||||
<span style={{ userSelect: 'none' }}>{view.name}</span>
|
<span style={{ userSelect: 'none' }}>{view.name}</span>
|
||||||
|
|
||||||
{activeView === view && (
|
{activeView === view && (
|
||||||
<Panel>
|
<Panel>
|
||||||
<PanelItem>
|
<PanelItem>
|
||||||
@@ -95,29 +94,23 @@ export const ViewsMenu = () => {
|
|||||||
</PanelItem>
|
</PanelItem>
|
||||||
|
|
||||||
<PanelItem>
|
<PanelItem>
|
||||||
{Object.entries(VIEW_ICON_MAP).map(
|
{VIEW_LIST.map(({ name, icon, scene }) => (
|
||||||
([name, icon]) => (
|
<IconButton
|
||||||
<IconButton
|
key={name}
|
||||||
key={name}
|
active={viewType === scene}
|
||||||
active={
|
onClick={() => {
|
||||||
viewType ===
|
if (scene === RecastScene.Table) {
|
||||||
(name as RecastScene)
|
// The table view is under progress
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
onClick={() => {
|
setViewType(scene);
|
||||||
if (name === 'table') {
|
}}
|
||||||
// The table view is under progress
|
style={{ textTransform: 'uppercase' }}
|
||||||
return;
|
>
|
||||||
}
|
{icon}
|
||||||
setViewType(
|
{name}
|
||||||
name as RecastScene
|
</IconButton>
|
||||||
);
|
))}
|
||||||
}}
|
|
||||||
>
|
|
||||||
{VIEW_ICON_MAP[name as RecastScene]}
|
|
||||||
{name.toUpperCase()}
|
|
||||||
</IconButton>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</PanelItem>
|
</PanelItem>
|
||||||
</Panel>
|
</Panel>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,13 +1,24 @@
|
|||||||
import { RecastView } from '@toeverything/components/editor-core';
|
import { RecastScene } from '@toeverything/components/editor-core';
|
||||||
import {
|
import {
|
||||||
KanBanIcon,
|
KanBanIcon,
|
||||||
TableIcon,
|
TableIcon,
|
||||||
TodoListIcon,
|
TodoListIcon,
|
||||||
} from '@toeverything/components/icons';
|
} from '@toeverything/components/icons';
|
||||||
import type { ReactElement } from 'react';
|
|
||||||
|
|
||||||
export const VIEW_ICON_MAP: Record<RecastView['type'], ReactElement> = {
|
export const VIEW_LIST = [
|
||||||
page: <TodoListIcon fontSize="small" />,
|
{
|
||||||
kanban: <KanBanIcon fontSize="small" />,
|
name: 'Text',
|
||||||
table: <TableIcon fontSize="small" />,
|
scene: RecastScene.Page,
|
||||||
};
|
icon: <TodoListIcon fontSize="small" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Kanban',
|
||||||
|
scene: RecastScene.Kanban,
|
||||||
|
icon: <KanBanIcon fontSize="small" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Table',
|
||||||
|
scene: RecastScene.Table,
|
||||||
|
icon: <TableIcon fontSize="small" />,
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ const genViewId = () => nanoid(16) as RecastViewId; // This is a safe type cast
|
|||||||
const DEFAULT_VIEWS: RecastView[] = [
|
const DEFAULT_VIEWS: RecastView[] = [
|
||||||
{
|
{
|
||||||
id: genViewId(),
|
id: genViewId(),
|
||||||
name: 'Text View',
|
name: 'Text',
|
||||||
type: RecastScene.Page,
|
type: RecastScene.Page,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user