mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-11-24 02:46:24 +03:00
feat(templates): remote dialog templates
This commit is contained in:
zhangchi
parent
d1368ad62e
commit
6cd8fe6832
@ -13,7 +13,6 @@ import { WorkspaceNotFound } from './status/workspace-not-found';
|
|||||||
import { RoutePrivate } from './RoutePrivate';
|
import { RoutePrivate } from './RoutePrivate';
|
||||||
import { RoutePublicAutoLogin } from './RoutePublicAutoLogin';
|
import { RoutePublicAutoLogin } from './RoutePublicAutoLogin';
|
||||||
import { Tools } from './tools';
|
import { Tools } from './tools';
|
||||||
import { Templates } from './templates';
|
|
||||||
import { LigoVirgoRootContainer } from './AppContainer';
|
import { LigoVirgoRootContainer } from './AppContainer';
|
||||||
import { UIPage } from './ui';
|
import { UIPage } from './ui';
|
||||||
|
|
||||||
@ -33,7 +32,6 @@ export function LigoVirgoRoutes() {
|
|||||||
<Route path="/settings" element={<Settings />} />
|
<Route path="/settings" element={<Settings />} />
|
||||||
<Route path="/shared" element={<Shared />} />
|
<Route path="/shared" element={<Shared />} />
|
||||||
<Route path="/started" element={<Starred />} />
|
<Route path="/started" element={<Starred />} />
|
||||||
<Route path="/templates" element={<Templates />} />
|
|
||||||
<Route path="/ui" element={<UIPage />} />
|
<Route path="/ui" element={<UIPage />} />
|
||||||
<Route
|
<Route
|
||||||
path="/:workspace_id/*"
|
path="/:workspace_id/*"
|
||||||
|
|||||||
@ -1,98 +0,0 @@
|
|||||||
import { styled, ListButton } from '@toeverything/components/ui';
|
|
||||||
import { TemplateData } from './template-data';
|
|
||||||
import { useParams } from 'react-router-dom';
|
|
||||||
import { AffineEditor } from '@toeverything/components/affine-editor';
|
|
||||||
const TemplatesContainer = styled('div')({
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
border: '1px solid #E2E7ED',
|
|
||||||
borderRadius: '5px',
|
|
||||||
margin: '0 auto',
|
|
||||||
'.sidebar': {
|
|
||||||
width: '240px',
|
|
||||||
display: 'flex',
|
|
||||||
borderRight: '1px solid #E2E7ED',
|
|
||||||
flexDirection: 'column',
|
|
||||||
color: 'rgba(55, 53, 47, 0.65)',
|
|
||||||
background: 'rgb(247, 246, 243)',
|
|
||||||
padding: '12px',
|
|
||||||
},
|
|
||||||
'.preview-template': {
|
|
||||||
display: 'flex',
|
|
||||||
},
|
|
||||||
'.sidebar-title': {
|
|
||||||
borderBottom: '1px solid #E2E7ED',
|
|
||||||
},
|
|
||||||
'.sidebar-template-type': {
|
|
||||||
height: '600px',
|
|
||||||
overflowY: 'scroll',
|
|
||||||
ul: {},
|
|
||||||
'ul li': {
|
|
||||||
paddingLeft: '10px',
|
|
||||||
height: '32px',
|
|
||||||
lineHeight: '32px',
|
|
||||||
listStyle: 'none',
|
|
||||||
fontWeight: 600,
|
|
||||||
fontSize: '14px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
'&:hover': {
|
|
||||||
background: '#eee',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'.btn-use-this-template': {
|
|
||||||
background: '#eee',
|
|
||||||
color: '#fff',
|
|
||||||
':hover': {
|
|
||||||
background: '#ccc',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
interface ITemplateProps {
|
|
||||||
handleClickUseThisTemplate?: () => void;
|
|
||||||
}
|
|
||||||
function Templates(props: ITemplateProps) {
|
|
||||||
const handle_click_use_this_template = () => {
|
|
||||||
props.handleClickUseThisTemplate();
|
|
||||||
};
|
|
||||||
const { workspace_id, page_id } = useParams();
|
|
||||||
return (
|
|
||||||
<TemplatesContainer>
|
|
||||||
<div className="sidebar">
|
|
||||||
<div className="sidebar-title">
|
|
||||||
<ListButton
|
|
||||||
className="btn-use-this-template"
|
|
||||||
content="Use this template"
|
|
||||||
onClick={handle_click_use_this_template}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="sidebar-template-type">
|
|
||||||
{TemplateData.map((item, index) => {
|
|
||||||
return (
|
|
||||||
<div key={index}>
|
|
||||||
{item.name}
|
|
||||||
<ul>
|
|
||||||
{item.subList.map((item, index) => {
|
|
||||||
return <li key={index}>{item.name}</li>;
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="preview-template">
|
|
||||||
{page_id && (
|
|
||||||
<AffineEditor
|
|
||||||
workspace={workspace_id}
|
|
||||||
rootBlockId={page_id}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TemplatesContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Templates };
|
|
||||||
@ -1,125 +0,0 @@
|
|||||||
export const TemplateData = [
|
|
||||||
{
|
|
||||||
name: 'Design',
|
|
||||||
subList: [
|
|
||||||
{ name: '🚘 Roadmap' },
|
|
||||||
{ name: '🔬 User Research Database' },
|
|
||||||
{ name: '🎒 Design Tasks' },
|
|
||||||
{ name: '✏️ Meeting Notes' },
|
|
||||||
{ name: '🖋️ Design System' },
|
|
||||||
{ name: '🎯 Company goals' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Student',
|
|
||||||
subList: [
|
|
||||||
{ name: '✏️ Class Notes' },
|
|
||||||
{ name: '🏗 Job Applications' },
|
|
||||||
{ name: '⚖️ Grade Calculator' },
|
|
||||||
{ name: '🏡 Club Homepage' },
|
|
||||||
{ name: '📚 Reading List' },
|
|
||||||
{ name: '📜 Thesis Planning' },
|
|
||||||
{ name: '📍 Cornell Notes System' },
|
|
||||||
{ name: '📇 Personal CRM' },
|
|
||||||
{ name: '✌️ Roommate Space' },
|
|
||||||
{ name: '💸 Simple Budget' },
|
|
||||||
{ name: '📄 Syllabus' },
|
|
||||||
{ name: '🏠 Classroom Home' },
|
|
||||||
{ name: '📋 Lesson Plans' },
|
|
||||||
{ name: '🗓 Course Schedule' },
|
|
||||||
{ name: '👋 Class Directory' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Engineering',
|
|
||||||
subList: [
|
|
||||||
{ name: '🎒 To-Do' },
|
|
||||||
{ name: '🚘 Roadmap' },
|
|
||||||
{ name: '📓 Engineering Wiki' },
|
|
||||||
{ name: '📎 Docs' },
|
|
||||||
{ name: '✏️ Meeting Notes' },
|
|
||||||
{ name: '🎯 Company goals' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Human resources',
|
|
||||||
subList: [
|
|
||||||
{ name: '💼 Job Board' },
|
|
||||||
{ name: '✏️ Meeting Notes' },
|
|
||||||
{ name: '🚂 New Hire Onboarding' },
|
|
||||||
{ name: '📮 Applicant Tracker' },
|
|
||||||
{ name: '🏠 Company Home' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Marketing',
|
|
||||||
subList: [
|
|
||||||
{ name: '🎨 Brand Assets' },
|
|
||||||
{ name: '✏️ Meeting Notes' },
|
|
||||||
{ name: '🎤 Media List' },
|
|
||||||
{ name: '📆 Content Calendar' },
|
|
||||||
{ name: '🎟️ Mood Board' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Personal',
|
|
||||||
subList: [
|
|
||||||
{ name: '📌 Quick Note' },
|
|
||||||
{ name: '🏠 Personal Home' },
|
|
||||||
{ name: '✔️ Task List' },
|
|
||||||
{ name: '🖊️ Journal' },
|
|
||||||
{ name: '📚 Reading List' },
|
|
||||||
{ name: '🏔️ Goals' },
|
|
||||||
{ name: '✈️ Travel Planner' },
|
|
||||||
{ name: '✏️ Blog Post' },
|
|
||||||
{ name: '📔 Simple Notebook' },
|
|
||||||
{ name: '👟 Habit Tracker' },
|
|
||||||
{ name: '🧭 Life Wiki' },
|
|
||||||
{ name: '👔 Resume' },
|
|
||||||
{ name: '📥 Job Applications' },
|
|
||||||
{ name: '📕 Weekly Agenda' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Other',
|
|
||||||
subList: [
|
|
||||||
{ name: '️📝 Meeting Notes' },
|
|
||||||
{ name: '📄 Docs' },
|
|
||||||
{ name: '🏠 Team Home' },
|
|
||||||
{ name: '☑️ Team Tasks' },
|
|
||||||
{ name: '✔️ Task List' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Product management',
|
|
||||||
subList: [
|
|
||||||
{ name: '🚘 Roadmap' },
|
|
||||||
{ name: ' User Research Database' },
|
|
||||||
{ name: '📎 Docs' },
|
|
||||||
{ name: '✏️ Meeting Notes' },
|
|
||||||
{ name: '🏗 Product Wiki' },
|
|
||||||
{ name: '🎯 Company goals' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Sales',
|
|
||||||
subList: [
|
|
||||||
{ name: '✏️ Meeting Notes' },
|
|
||||||
{ name: '👟 Sales CRM' },
|
|
||||||
{ name: '📕 Sales Wiki' },
|
|
||||||
{ name: '🎯 Competitive Analysis' },
|
|
||||||
{ name: '✌️ Sales Assets' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Support',
|
|
||||||
subList: [
|
|
||||||
{ name: '✌️ Team Directory' },
|
|
||||||
{ name: '❓ Product FAQs' },
|
|
||||||
{ name: '✏️ Meeting Notes' },
|
|
||||||
{ name: '🎒 Task List' },
|
|
||||||
{ name: '🚨 Help Center' },
|
|
||||||
{ name: '📎 Process Docs' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -22,7 +22,6 @@ import { services } from '@toeverything/datasource/db-service';
|
|||||||
|
|
||||||
import { WorkspaceName } from './workspace-name';
|
import { WorkspaceName } from './workspace-name';
|
||||||
import { CollapsiblePageTree } from './collapsible-page-tree';
|
import { CollapsiblePageTree } from './collapsible-page-tree';
|
||||||
import TemplatesPortal from './templates-portal';
|
|
||||||
import { useFlag } from '@toeverything/datasource/feature-flags';
|
import { useFlag } from '@toeverything/datasource/feature-flags';
|
||||||
import { type BlockEditor } from '@toeverything/components/editor-core';
|
import { type BlockEditor } from '@toeverything/components/editor-core';
|
||||||
|
|
||||||
@ -35,7 +34,6 @@ export function Page(props: PageProps) {
|
|||||||
const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
|
const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
|
||||||
useShowSpaceSidebar();
|
useShowSpaceSidebar();
|
||||||
const { user } = useUserAndSpaces();
|
const { user } = useUserAndSpaces();
|
||||||
const templatesPortalFlag = useFlag('BooleanTemplatesPortal', false);
|
|
||||||
const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
|
const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -78,7 +76,6 @@ export function Page(props: PageProps) {
|
|||||||
<Divider light={true} sx={{ my: 1, margin: '6px 0px' }} />
|
<Divider light={true} sx={{ my: 1, margin: '6px 0px' }} />
|
||||||
<WorkspaceSidebarContent>
|
<WorkspaceSidebarContent>
|
||||||
<div>
|
<div>
|
||||||
{templatesPortalFlag && <TemplatesPortal />}
|
|
||||||
{dailyNotesFlag && (
|
{dailyNotesFlag && (
|
||||||
<div>
|
<div>
|
||||||
<CollapsibleTitle title="Daily Notes">
|
<CollapsibleTitle title="Daily Notes">
|
||||||
|
|||||||
@ -1,90 +0,0 @@
|
|||||||
import {
|
|
||||||
styled,
|
|
||||||
MuiBox as Box,
|
|
||||||
MuiModal as Modal,
|
|
||||||
} from '@toeverything/components/ui';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import { Templates } from '../../templates';
|
|
||||||
import StarIcon from '@mui/icons-material/Star';
|
|
||||||
import { useNavigate } from 'react-router';
|
|
||||||
import { AsyncBlock } from '@toeverything/framework/virgo';
|
|
||||||
import { createEditor } from '@toeverything/components/affine-editor';
|
|
||||||
const TemplatePortalContainer = styled('div')({
|
|
||||||
position: 'relative',
|
|
||||||
marginLeft: '10px',
|
|
||||||
height: '22px',
|
|
||||||
lineHeight: '22px',
|
|
||||||
width: '220px',
|
|
||||||
borderRadius: '8px',
|
|
||||||
color: '#4c6275',
|
|
||||||
fontSize: '14px',
|
|
||||||
paddingLeft: '20px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
':hover': {
|
|
||||||
backgroundColor: '#ccc',
|
|
||||||
},
|
|
||||||
'.shortcutIcon': {
|
|
||||||
position: 'absolute',
|
|
||||||
top: '3px',
|
|
||||||
left: '0px',
|
|
||||||
fontSize: '16px!important',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const style = {
|
|
||||||
position: 'absolute',
|
|
||||||
top: '40%',
|
|
||||||
left: '50%',
|
|
||||||
transform: 'translate(-50%, -50%)',
|
|
||||||
width: '80%',
|
|
||||||
height: '70%',
|
|
||||||
boxShadow: 0,
|
|
||||||
p: 0,
|
|
||||||
};
|
|
||||||
const maskStyle = {
|
|
||||||
background: 'rgba(0,0,0,0.5)',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
position: 'fixed',
|
|
||||||
};
|
|
||||||
function TemplatesPortal() {
|
|
||||||
const [open, set_open] = React.useState(false);
|
|
||||||
const handle_open = () => set_open(true);
|
|
||||||
const handle_close = () => set_open(false);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const get_default_workspace_id = () => {
|
|
||||||
return window.location.pathname.split('/')[1];
|
|
||||||
};
|
|
||||||
const handleClickUseThisTemplate = () => {
|
|
||||||
const block_editor = createEditor(get_default_workspace_id());
|
|
||||||
//@ts-ignore
|
|
||||||
block_editor.plugins
|
|
||||||
.getPlugin('page-toolbar')
|
|
||||||
//@ts-ignore 泛型处理
|
|
||||||
.addDailyNote()
|
|
||||||
.then((new_page: AsyncBlock) => {
|
|
||||||
handle_close();
|
|
||||||
const new_state =
|
|
||||||
`/${get_default_workspace_id()}/` + new_page.id;
|
|
||||||
navigate(new_state);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<TemplatePortalContainer onClick={handle_open}>
|
|
||||||
<StarIcon className="shortcutIcon" /> Templates
|
|
||||||
</TemplatePortalContainer>
|
|
||||||
<Modal open={open} onClose={handle_close}>
|
|
||||||
<Box sx={style}>
|
|
||||||
<Templates
|
|
||||||
handleClickUseThisTemplate={handleClickUseThisTemplate}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Modal>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TemplatesPortal;
|
|
||||||
Loading…
Reference in New Issue
Block a user