{dailyNotesFlag && (
@@ -219,4 +221,5 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
const WorkspaceSidebarContent = styled('div')({
flex: 'auto',
overflow: 'hidden auto',
+ marginTop: '18px',
});
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx
new file mode 100644
index 0000000000..8b33a276c4
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx
@@ -0,0 +1,19 @@
+export const Logo = ({ color, style, ...props }) => {
+ return (
+
+
+ );
+};
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts
new file mode 100644
index 0000000000..33af505338
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts
@@ -0,0 +1 @@
+export { Logo } from './Logo';
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx
new file mode 100644
index 0000000000..3722c5e162
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { MuiDivider as Divider, styled } from '@toeverything/components/ui';
+import type { ValueOf } from '@toeverything/utils';
+
+const StyledTabs = styled('div')({
+ width: '100%',
+ height: '12px',
+ marginTop: '12px',
+ display: 'flex',
+ alignItems: 'center',
+ cursor: 'pointer',
+});
+
+const StyledDivider = styled(Divider)<{ isActive?: boolean }>(
+ ({ isActive }) => {
+ return {
+ flex: 1,
+ backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB',
+ borderWidth: '2px',
+ };
+ }
+);
+
+const TAB_TITLE = {
+ PAGES: 'pages',
+ GALLERY: 'gallery',
+ TOC: 'toc',
+} as const;
+
+const TabMap = new Map
([
+ ['PAGES', 'pages'],
+ ['GALLERY', 'gallery'],
+ ['TOC', 'toc'],
+]);
+
+type TabKey = keyof typeof TAB_TITLE;
+type TabValue = ValueOf;
+
+const Tabs = () => {
+ const [activeTab, setActiveTab] = useState(TAB_TITLE.PAGES);
+
+ const onClick = (v: TabValue) => {
+ setActiveTab(v);
+ };
+
+ return (
+
+ {[...TabMap.entries()].map(([k, v]) => {
+ return (
+ onClick(v)}
+ />
+ );
+ })}
+
+ );
+};
+
+export { Tabs };
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts
new file mode 100644
index 0000000000..941e6baba5
--- /dev/null
+++ b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts
@@ -0,0 +1 @@
+export { Tabs } from './Tabs';
diff --git a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
index 24d69b659a..cf6f3a0313 100644
--- a/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
+++ b/apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx
@@ -1,27 +1,28 @@
import {
- MuiButton as Button,
- Switch,
styled,
MuiOutlinedInput as OutlinedInput,
} from '@toeverything/components/ui';
-import { LogoIcon } from '@toeverything/components/icons';
+import { PinIcon } from '@toeverything/components/icons';
import {
useUserAndSpaces,
useShowSpaceSidebar,
} from '@toeverything/datasource/state';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
import { services } from '@toeverything/datasource/db-service';
+import { Logo } from './components/logo/Logo';
const WorkspaceContainer = styled('div')({
display: 'flex',
- alignItems: 'center',
- minHeight: 60,
- padding: '12px 0px',
+ flexDirection: 'column',
+ paddingBottom: '12px',
color: '#566B7D',
});
const LeftContainer = styled('div')({
flex: 'auto',
display: 'flex',
+ height: '52px',
+ alignItems: 'center',
+ margin: '0 12px',
});
const LogoContainer = styled('div')({
@@ -32,20 +33,36 @@ const LogoContainer = styled('div')({
minWidth: 24,
});
-const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
- return {
- color: theme.affine.palette.primary,
- width: '16px !important',
- height: '16px !important',
- };
+const StyledPin = styled('div')({
+ display: 'flex',
+ justifyContent: 'end',
+ alignItems: 'center',
+});
+
+const StyledWorkspace = styled('div')({
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ marginLeft: '12px',
+ paddingLeft: '12px',
+});
+
+const StyledWorkspaceDesc = styled('div')({
+ fontSize: '12px',
+ color: '#98ACBD',
+ height: '18px',
+
+ display: 'flex',
+ alignItems: 'center',
});
const WorkspaceNameContainer = styled('div')({
display: 'flex',
alignItems: 'center',
flex: 'auto',
- width: '100px',
- marginRight: '10px',
+ width: '165px',
+ height: '34px',
input: {
padding: '5px 10px',
},
@@ -58,21 +75,15 @@ const WorkspaceNameContainer = styled('div')({
});
const WorkspaceReNameContainer = styled('div')({
- marginRight: '10px',
+ height: '34px',
+ display: 'flex',
+ alignItems: 'center',
+
input: {
padding: '5px 10px',
},
});
-const ToggleDisplayContainer = styled('div')({
- display: 'flex',
- alignItems: 'center',
- fontSize: 12,
- color: '#3E6FDB',
- padding: 6,
- minWidth: 64,
-});
-
export const WorkspaceName = () => {
const { currentSpaceId } = useUserAndSpaces();
const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar();
@@ -139,35 +150,46 @@ export const WorkspaceName = () => {
return (
+
+
-
- {inRename ? (
-
- setInRename(false)}
- />
-
- ) : (
-
- setInRename(true)}>
- {workspaceName || workspaceId}
-
-
- )}
+
+ {inRename ? (
+
+ setInRename(false)}
+ />
+
+ ) : (
+
+ setInRename(true)}>
+ {workspaceName || workspaceId}
+
+
+ )}
+
+
+ To shape, Not to Adapt.
+
+
-
-
);
};
diff --git a/apps/venus/src/app/index.tsx b/apps/venus/src/app/index.tsx
index 8e17108f13..8bb50308c0 100644
--- a/apps/venus/src/app/index.tsx
+++ b/apps/venus/src/app/index.tsx
@@ -20,12 +20,12 @@ const DiscordIcon = (props: any) => {
width="71"
height="55"
viewBox="0 0 71 55"
- fill="none"
+ fill="currentcolor"
>
@@ -515,10 +515,12 @@ export function App() {
justifyContent: 'left',
textAlign: 'left',
transition: 'all .5s',
- // boxShadow: '2px 2px 40px #08f2',
- // ':hover': {
- // boxShadow: '2px 2px 40px #08f4',
- // },
+ transform: 'scale(0.98)',
+ boxShadow: '2px 2px 40px #0002',
+ ':hover': {
+ transform: 'scale(1)',
+ boxShadow: '2px 2px 40px #0004',
+ },
}}
>
-
+ window.open(
+ 'https://github.com/toeverything/AFFiNE/'
+ )
+ }
>
GitHub
-
+
-
+ window.open('https://www.reddit.com/r/Affine/')
+ }
>
Reddit
-
+
-
+ window.open('https://t.me/affineworkos')
+ }
>
Telegram
-
+
-
+ window.open('https://discord.gg/yz6tGVsf5p')
+ }
>
@@ -883,12 +927,16 @@ export function App() {
}}
>
Discord
-
+
diff --git a/apps/venus/src/assets/collaboration.png b/apps/venus/src/assets/collaboration.png
index 5d56d61581..279d968cb5 100644
Binary files a/apps/venus/src/assets/collaboration.png and b/apps/venus/src/assets/collaboration.png differ
diff --git a/apps/venus/src/assets/page.png b/apps/venus/src/assets/page.png
index 2236ce046d..d5f393262b 100644
Binary files a/apps/venus/src/assets/page.png and b/apps/venus/src/assets/page.png differ
diff --git a/apps/venus/src/assets/shape.png b/apps/venus/src/assets/shape.png
index 178d7ea6a1..0dc76b50fe 100644
Binary files a/apps/venus/src/assets/shape.png and b/apps/venus/src/assets/shape.png differ
diff --git a/apps/venus/src/assets/task.png b/apps/venus/src/assets/task.png
index 8ef6c95057..8c6b197aa2 100644
Binary files a/apps/venus/src/assets/task.png and b/apps/venus/src/assets/task.png differ
diff --git a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
index e6464860c5..687cc28735 100644
--- a/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
+++ b/libs/components/editor-blocks/src/blocks/grid/GirdHandle.tsx
@@ -12,6 +12,8 @@ type GridHandleProps = {
blockId: string;
enabledAddItem: boolean;
draggable: boolean;
+ alertHandleId: string;
+ onMouseEnter?: React.MouseEventHandler;
};
export const GridHandle: FC = function ({
@@ -21,6 +23,8 @@ export const GridHandle: FC = function ({
onDrag,
onMouseDown,
draggable,
+ alertHandleId,
+ onMouseEnter,
}) {
const [isMouseDown, setIsMouseDown] = useState(false);
const handleMouseDown: React.MouseEventHandler = e => {
@@ -44,16 +48,17 @@ export const GridHandle: FC = function ({
editor.selectionManager.setActivatedNodeId(textBlock.id);
}
};
+
+ const handleMouseEnter: React.MouseEventHandler = e => {
+ onMouseEnter && onMouseEnter(e);
+ };
+
return (
{enabledAddItem ? (
= function ({
);
};
-const GridHandleContainer = styled('div')(({ theme }) => ({
+const GridHandleContainer = styled('div')<{
+ isMouseDown: boolean;
+ isAlert: boolean;
+}>(({ theme, isMouseDown, isAlert }) => ({
position: 'relative',
width: '10px',
flexGrow: '0',
@@ -78,11 +86,15 @@ const GridHandleContainer = styled('div')(({ theme }) => ({
borderRadius: '1px',
backgroundClip: 'content-box',
' &:hover': {
- backgroundColor: theme.affine.palette.primary,
+ backgroundColor: isAlert ? 'red' : theme.affine.palette.primary,
[`.${GRID_ADD_HANDLE_NAME}`]: {
display: 'block',
},
},
+ ...(isMouseDown &&
+ (isAlert
+ ? { backgroundColor: 'red' }
+ : { backgroundColor: theme.affine.palette.primary })),
}));
const AddGridHandle = styled('div')(({ theme }) => ({
diff --git a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx
index 77a83ff599..bc27ec4ac6 100644
--- a/libs/components/editor-blocks/src/blocks/grid/Grid.tsx
+++ b/libs/components/editor-blocks/src/blocks/grid/Grid.tsx
@@ -31,6 +31,7 @@ export const Grid: FC = function (props) {
const gridItemCountRef = useRef();
const originalLeftWidth = useRef(GRID_ITEM_MIN_WIDTH);
const originalRightWidth = useRef(GRID_ITEM_MIN_WIDTH);
+ const [alertHandleId, setAlertHandleId] = useState(null);
const getLeftRightGridItemDomByIndex = (index: number) => {
const gridItems = Array.from(gridContainerRef.current?.children).filter(
@@ -117,7 +118,7 @@ export const Grid: FC = function (props) {
itemDom.style.width = width;
};
- const handleDragGrid = (e: MouseEvent, index: number) => {
+ const handleDragGrid = async (e: MouseEvent, index: number) => {
setIsOnDrag(true);
window.getSelection().removeAllRanges();
if (!isSetMouseUp.current) {
@@ -165,39 +166,47 @@ export const Grid: FC = function (props) {
setItemWidth(leftGrid, newLeft);
setItemWidth(rightGrid, newRight);
updateDbWidth(leftBlockId, newLeft, rightBlockId, newRight);
+ [leftBlockId, rightBlockId].forEach(async blockId => {
+ if (await checkGridItemHasOverflow(blockId)) {
+ setAlertHandleId(leftBlockId);
+ } else {
+ setAlertHandleId(null);
+ }
+ });
}
}
};
- const children = (
- <>
- {block.childrenIds.map((id, i) => {
- return (
-
- handleDragGrid(event, i)}
- editor={editor}
- onMouseDown={event => handleMouseDown(event, i)}
- blockId={id}
- enabledAddItem={
- block.childrenIds.length < MAX_ITEM_COUNT
- }
- draggable={i !== block.childrenIds.length - 1}
- />
-
- );
- })}
-
- );
+ const checkGridItemHasOverflow = async (blockId: string) => {
+ let isOverflow = false;
+ const block = await editor.getBlockById(blockId);
+ if (block) {
+ const blockDom = block.dom;
+ if (blockDom) {
+ block.dom.style.overflow = 'scroll';
+ if (block.dom.clientWidth !== block.dom.scrollWidth) {
+ isOverflow = true;
+ }
+ blockDom.style.overflow = 'visible';
+ }
+ }
+ return isOverflow;
+ };
+
+ const handleHandleMouseEnter = (
+ e: React.MouseEvent,
+ index: number
+ ) => {
+ const leftBlockId = block.childrenIds[index];
+ const rightBlockId = block.childrenIds[index + 1];
+ [leftBlockId, rightBlockId].forEach(async blockId => {
+ if (await checkGridItemHasOverflow(blockId)) {
+ setAlertHandleId(leftBlockId);
+ } else {
+ setAlertHandleId(null);
+ }
+ });
+ };
return (
<>
@@ -206,7 +215,35 @@ export const Grid: FC = function (props) {
ref={gridContainerRef}
isOnDrag={isOnDrag}
>
- {children}
+ {block.childrenIds.map((id, i) => {
+ return (
+
+ handleDragGrid(event, i)}
+ editor={editor}
+ onMouseDown={event => handleMouseDown(event, i)}
+ blockId={id}
+ enabledAddItem={
+ block.childrenIds.length < MAX_ITEM_COUNT
+ }
+ onMouseEnter={event =>
+ handleHandleMouseEnter(event, i)
+ }
+ alertHandleId={alertHandleId}
+ draggable={i !== block.childrenIds.length - 1}
+ />
+
+ );
+ })}
{isOnDrag
? ReactDOM.createPortal( = rootBlock ? [rootBlock] : [];
- const children = (await rootBlock?.children()) || [];
+ return [...blockList, ...(await this.getOffspring(rootBlockId))];
+ }
+
+ /**
+ *
+ * get all offspring of block
+ * @param {string} id
+ * @return {*}
+ * @memberof Editor
+ */
+ async getOffspring(id: string) {
+ const block = await this.getBlockById(id);
+ const blockList: Array = [];
+ const children = (await block?.children()) || [];
for (const block of children) {
if (!block) {
continue;
@@ -379,6 +392,20 @@ export class Editor implements Virgo {
return lastBlock;
}
+ async getBlockPath(id: string) {
+ const block = await this.getBlockById(id);
+ if (!block) {
+ return [];
+ }
+ const path = [block];
+ let parent = await block.parent();
+ while (parent) {
+ path.unshift(parent);
+ parent = await parent.parent();
+ }
+ return path;
+ }
+
async getBlockByPoint(point: Point) {
const blockList = await this.getBlockList();
diff --git a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx
index a323ca1961..73ab1fde1c 100644
--- a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx
+++ b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx
@@ -4,7 +4,7 @@ import { HandleParentIcon } from '@toeverything/components/icons';
import { styled } from '@toeverything/components/ui';
import { Point } from '@toeverything/utils';
-export const ICON_WIDTH = 24;
+export const ICON_WIDTH = 16;
type DragItemProps = {
isShow: boolean;
@@ -30,17 +30,21 @@ export const DragItem = function ({
);
};
-const StyledDiv = styled('div')({
+const StyledDiv = styled('div')(({ theme }) => ({
padding: '0',
- display: 'inlineFlex',
+ display: 'inline-flex',
width: `${ICON_WIDTH}px`,
- height: `${ICON_WIDTH}px`,
+ height: '20px',
cursor: 'grab',
+ '& svg': {
+ fontSize: '20px',
+ marginLeft: '-2px',
+ },
':hover': {
- backgroundColor: '#edeef0',
+ backgroundColor: '#F5F7F8',
borderRadius: '4px',
},
-});
+}));
const StyledButton = styled('div')({
padding: '0',
diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
index 602c08aacb..297193971c 100644
--- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
+++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx
@@ -239,10 +239,14 @@ const Draggable = styled(Button)({
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'transparent',
- width: '24px',
- height: '24px',
+ width: '16px',
+ height: '20px',
+ '& svg': {
+ fontSize: '20px',
+ marginLeft: '-2px',
+ },
':hover': {
- backgroundColor: '#edeef0',
+ backgroundColor: '#F5F7F8',
borderRadius: '4px',
},
});
diff --git a/libs/components/editor-plugins/src/placeholder/PlaceholderPanel.tsx b/libs/components/editor-plugins/src/placeholder/PlaceholderPanel.tsx
index 847804bd63..89b66256f7 100644
--- a/libs/components/editor-plugins/src/placeholder/PlaceholderPanel.tsx
+++ b/libs/components/editor-plugins/src/placeholder/PlaceholderPanel.tsx
@@ -141,9 +141,7 @@ export const PlaceholderPanel = (props: PlaceholderPanelProps) => {
setOpen(false);
props.onClickTips();
};
- //@ts-ignore lint rule change result this code lint error, add ingore
- const templateList: Array =
- TemplateFactory.defaultTemplateList;
+ const templateList = TemplateFactory.defaultTemplateList;
const handleNewFromTemplate = async (template: TemplateMeta) => {
const pageId = await editor.getRootBlockId();
const newPage = await services.api.editorBlock.getBlock(
@@ -163,33 +161,30 @@ export const PlaceholderPanel = (props: PlaceholderPanelProps) => {
setOpen(false);
};
return (
- <>
-
-
- Press Enter to continue with an empty page, or pick a
- template
-
-
- {templateList.map((template, index) => {
- return (
- {
- handleNewFromTemplate(template);
- }}
- >
- {template.name}
-
- );
- })}
-
-
-
+
+
+ Press Enter to continue with an empty page, or pick a template
+
+
+ {templateList.map((template, index) => {
+ return (
+ {
+ handleNewFromTemplate(template);
+ }}
+ >
+ {template.name}
+
+ );
+ })}
+
+
);
};
diff --git a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts
index 953cf0e6de..88a8d08bbe 100644
--- a/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts
+++ b/libs/datasource/db-service/src/services/editor-block/templates/template-factory.ts
@@ -13,7 +13,7 @@ const groupTemplateMap = {
grid: gridTemplate,
} as GroupTemplateMap;
-const defaultTemplateList = [
+const defaultTemplateList: Array = [
{
name: 'New From Quick Start',
groupKeys: ['todolist'],
@@ -22,10 +22,10 @@ const defaultTemplateList = [
{ name: 'New From Blog', groupKeys: ['blog'] },
{ name: ' New Todolist', groupKeys: ['todolist'] },
{ name: ' New Empty Page', groupKeys: ['empty'] },
-] as const;
+];
const TemplateFactory = {
- defaultTemplateList: defaultTemplateList,
+ defaultTemplateList,
generatePageTemplateByGroupKeys(props: TemplateMeta): Template {
const newTitle = props.name || 'Get Started with AFFiNE';
const keys: GroupTemplateKeys[] = props.groupKeys || [];
