mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-11-24 00:32:44 +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 { RoutePublicAutoLogin } from './RoutePublicAutoLogin';
|
||||
import { Tools } from './tools';
|
||||
import { Templates } from './templates';
|
||||
import { LigoVirgoRootContainer } from './AppContainer';
|
||||
import { UIPage } from './ui';
|
||||
|
||||
@ -33,7 +32,6 @@ export function LigoVirgoRoutes() {
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="/shared" element={<Shared />} />
|
||||
<Route path="/started" element={<Starred />} />
|
||||
<Route path="/templates" element={<Templates />} />
|
||||
<Route path="/ui" element={<UIPage />} />
|
||||
<Route
|
||||
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 { CollapsiblePageTree } from './collapsible-page-tree';
|
||||
import TemplatesPortal from './templates-portal';
|
||||
import { useFlag } from '@toeverything/datasource/feature-flags';
|
||||
import { type BlockEditor } from '@toeverything/components/editor-core';
|
||||
|
||||
@ -35,7 +34,6 @@ export function Page(props: PageProps) {
|
||||
const { showSpaceSidebar, fixedDisplay, setSpaceSidebarVisible } =
|
||||
useShowSpaceSidebar();
|
||||
const { user } = useUserAndSpaces();
|
||||
const templatesPortalFlag = useFlag('BooleanTemplatesPortal', false);
|
||||
const dailyNotesFlag = useFlag('BooleanDailyNotes', false);
|
||||
|
||||
useEffect(() => {
|
||||
@ -78,7 +76,6 @@ export function Page(props: PageProps) {
|
||||
<Divider light={true} sx={{ my: 1, margin: '6px 0px' }} />
|
||||
<WorkspaceSidebarContent>
|
||||
<div>
|
||||
{templatesPortalFlag && <TemplatesPortal />}
|
||||
{dailyNotesFlag && (
|
||||
<div>
|
||||
<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