From e6a27f62866f2d1c4294b605135e5c000e0c5bf6 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Mon, 1 Aug 2022 11:32:55 +0800 Subject: [PATCH 1/6] feat: show card action only on hover --- .../blocks/group/scene-kanban/CardItem.tsx | 37 +++++++++++++------ 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx index a84a9ba74..f26374e4c 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx @@ -1,14 +1,6 @@ -import { styled } from '@toeverything/components/ui'; -import { RenderBlock, useKanban } from '@toeverything/components/editor-core'; import type { KanbanCard } from '@toeverything/components/editor-core'; - -const CardContainer = styled('div')({ - display: 'flex', - flexDirection: 'column', - backgroundColor: '#fff', - border: '1px solid #E2E7ED', - borderRadius: '5px', -}); +import { RenderBlock, useKanban } from '@toeverything/components/editor-core'; +import { styled } from '@toeverything/components/ui'; const CardContent = styled('div')({ margin: '20px', @@ -20,12 +12,16 @@ const CardActions = styled('div')({ alignItems: 'center', width: '100%', height: '29px', - background: 'rgba(152, 172, 189, 0.1)', borderRadius: '0px 0px 5px 5px', padding: '6px 0 6px 19px', fontSize: '12px', fontWeight: '300', color: '#98ACBD', + transition: 'all ease-in 0.2s', + + ':hover': { + background: '#F5F7F8', + }, }); const PlusIcon = styled('div')({ @@ -37,6 +33,23 @@ const PlusIcon = styled('div')({ }, }); +const CardContainer = styled('div')({ + display: 'flex', + flexDirection: 'column', + backgroundColor: '#fff', + border: '1px solid #E2E7ED', + borderRadius: '5px', + + [CardActions.toString()]: { + opacity: '0', + }, + ':hover': { + [CardActions.toString()]: { + opacity: '1', + }, + }, +}); + export const CardItem = ({ id, block, @@ -56,7 +69,7 @@ export const CardItem = ({ - Add item + Add item ); From 8822d1a0962388b8b6e064c330b06051538789c3 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Mon, 1 Aug 2022 11:33:29 +0800 Subject: [PATCH 2/6] chore: tweak kanban group gap --- .../editor-blocks/src/blocks/group/scene-kanban/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts index 71457104c..4cd22c978 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts @@ -31,7 +31,7 @@ export const KanbanContainer = styled('div')({ // overscrollBehavior: 'contain', '& > * + *': { - marginLeft: '10px', + marginLeft: '20px', }, }); From b5cc15287fd9bd5717e1098812a6e2e51450c740 Mon Sep 17 00:00:00 2001 From: tzhangchi Date: Mon, 1 Aug 2022 14:27:26 +0800 Subject: [PATCH 3/6] refactor(src): change affine to AFFiNE in string --- apps/ligo-virgo/src/index.html | 2 +- apps/ligo-virgo/src/pages/ui/index.tsx | 2 +- apps/ligo-virgo/webpack.config.js | 2 +- docs/affine-icons-user-guide.md | 4 ++-- docs/how-to-add-ui-component-in-affine.md | 2 +- libs/components/account/src/login/firebase.tsx | 2 +- libs/components/common/src/lib/Logo/LogoImg.tsx | 2 +- libs/components/editor-core/src/editor/editor.ts | 2 +- .../layout/src/header/file-exporter/file-exporter.ts | 2 +- .../src/settings-sidebar/Settings/util/file-exporter.ts | 2 +- .../src/services/editor-block/templates/group-templates.ts | 2 +- .../src/services/editor-block/templates/template-factory.ts | 2 +- libs/datasource/jwt/src/adapter/yjs/index.ts | 4 ++-- libs/utils/src/types/user-workspace.ts | 2 +- 14 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/ligo-virgo/src/index.html b/apps/ligo-virgo/src/index.html index 1291a1091..94f01b6db 100644 --- a/apps/ligo-virgo/src/index.html +++ b/apps/ligo-virgo/src/index.html @@ -5,7 +5,7 @@ - Affine | Local Dev Environment + AFFiNE | Local Dev Environment diff --git a/apps/ligo-virgo/src/pages/ui/index.tsx b/apps/ligo-virgo/src/pages/ui/index.tsx index cc8273dbe..be4d79a68 100644 --- a/apps/ligo-virgo/src/pages/ui/index.tsx +++ b/apps/ligo-virgo/src/pages/ui/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; export const UIPage = () => { return (
- This page is used to show ui components of Affine ~ + This page is used to show ui components of AFFiNE ~
); }; diff --git a/apps/ligo-virgo/webpack.config.js b/apps/ligo-virgo/webpack.config.js index 4d7500c60..c147f3e14 100644 --- a/apps/ligo-virgo/webpack.config.js +++ b/apps/ligo-virgo/webpack.config.js @@ -161,7 +161,7 @@ module.exports = function (webpackConfig) { }), isProd && new HtmlWebpackPlugin({ - title: 'Affine - All In One Workos', + title: 'AFFiNE - All In One Workos', favicon: path.resolve( __dirname, './src/assets/images/favicon.ico' diff --git a/docs/affine-icons-user-guide.md b/docs/affine-icons-user-guide.md index 70e9742af..0e376a409 100644 --- a/docs/affine-icons-user-guide.md +++ b/docs/affine-icons-user-guide.md @@ -1,7 +1,7 @@ -## Affine Icons +## AFFiNE Icons > Abundant and colorful icon resource for free free use Website: [http://localhost:4200/tools/icons](http://localhost:4200/tools/icons) -Figma: [Figma Affine Icons](https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734) +Figma: [Figma AFFiNE Icons](https://www.figma.com/file/7pyx5gMz6CN0qSRADmScQ7/AFFINE?node-id=665%3A1734) diff --git a/docs/how-to-add-ui-component-in-affine.md b/docs/how-to-add-ui-component-in-affine.md index dc7ea52c5..acb2a8091 100644 --- a/docs/how-to-add-ui-component-in-affine.md +++ b/docs/how-to-add-ui-component-in-affine.md @@ -1,6 +1,6 @@ # Tutorial -Affine defines a new component development specification in Figma, extends Affine UI Components based on MUI BASE and MUI SYSTEM, and supplements as needed https://github.com/toeverything/AFFiNE/tree/master/libs/components/ui , eg `src/libs/components/ui/src/button/base-button.ts` +AFFiNE defines a new component development specification in Figma, extends AFFiNE UI Components based on MUI BASE and MUI SYSTEM, and supplements as needed https://github.com/toeverything/AFFiNE/tree/master/libs/components/ui , eg `src/libs/components/ui/src/button/base-button.ts` ```jsx import ButtonUnstyled, { diff --git a/libs/components/account/src/login/firebase.tsx b/libs/components/account/src/login/firebase.tsx index e2f0a6b08..55453782b 100644 --- a/libs/components/account/src/login/firebase.tsx +++ b/libs/components/account/src/login/firebase.tsx @@ -106,7 +106,7 @@ export const Firebase = () => { /> diff --git a/libs/components/common/src/lib/Logo/LogoImg.tsx b/libs/components/common/src/lib/Logo/LogoImg.tsx index d104588fe..1048f8a36 100644 --- a/libs/components/common/src/lib/Logo/LogoImg.tsx +++ b/libs/components/common/src/lib/Logo/LogoImg.tsx @@ -6,7 +6,7 @@ export const LogoImg = ({ style = {} }: { style: CSSProperties }) => { Affine Logo ); }; diff --git a/libs/components/editor-core/src/editor/editor.ts b/libs/components/editor-core/src/editor/editor.ts index 45db53c67..da46769ed 100644 --- a/libs/components/editor-core/src/editor/editor.ts +++ b/libs/components/editor-core/src/editor/editor.ts @@ -59,7 +59,7 @@ export class Editor implements Virgo { public bdCommands: Commands; public ui_container?: HTMLDivElement; public version = '0.0.1'; - public copyright = '@Affine 2019-2022'; + public copyright = '@AFFiNE 2020-2022'; private plugin_manager: PluginManager; private hooks: Hooks; private views: Record = {}; diff --git a/libs/components/layout/src/header/file-exporter/file-exporter.ts b/libs/components/layout/src/header/file-exporter/file-exporter.ts index 428ae0dd6..ccbe9bc5f 100644 --- a/libs/components/layout/src/header/file-exporter/file-exporter.ts +++ b/libs/components/layout/src/header/file-exporter/file-exporter.ts @@ -34,7 +34,7 @@ const FileExporter = { `; }, decoreateAffineBrand: (pageTitle: string) => { - return pageTitle + ` Created in Affine`; + return pageTitle + ` Created in AFFiNE`; }, exportHtml: (pageTitle: string, htmlContent: string) => { FileExporter.exportFile( diff --git a/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts b/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts index 99b17d885..bb561a139 100644 --- a/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts +++ b/libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts @@ -34,7 +34,7 @@ export const fileExporter = { `; }, decoreateAffineBrand: (pageTitle: string) => { - return pageTitle + ` Created in Affine`; + return pageTitle + ` Created in AFFiNE`; }, exportHtml: (pageTitle: string, htmlContent: string) => { fileExporter.exportFile( diff --git a/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts b/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts index 75f0b219c..3888b5433 100644 --- a/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts +++ b/libs/datasource/db-service/src/services/editor-block/templates/group-templates.ts @@ -200,7 +200,7 @@ const groupTemplateMap: GroupTemplateMap = { text: { value: [ { - text: 'As a collaborative real-time editor, Affine aims to resolve problems in three situations:', + text: 'As a collaborative real-time editor, AFFiNE aims to resolve problems in three situations:', }, ], }, 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 5a381b175..3fa16ac46 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 defaultTemplateList: Array = [ const TemplateFactory = { defaultTemplateList: defaultTemplateList, generatePageTemplateByGroupKeys(props: TemplateMeta): Template { - const newTitle = props.name || 'Get Started with Affine'; + const newTitle = props.name || 'Get Started with AFFiNE'; const keys = props.groupKeys || []; const blankPage: Template = { type: 'page', diff --git a/libs/datasource/jwt/src/adapter/yjs/index.ts b/libs/datasource/jwt/src/adapter/yjs/index.ts index 2d14aec56..ddace6db7 100644 --- a/libs/datasource/jwt/src/adapter/yjs/index.ts +++ b/libs/datasource/jwt/src/adapter/yjs/index.ts @@ -343,10 +343,10 @@ export class YjsAdapter implements AsyncDatabaseAdapter { const handles = await window.showOpenFilePicker({ types: [ { - description: 'Affine Package', + description: 'AFFiNE Package', accept: { // eslint-disable-next-line @typescript-eslint/naming-convention - 'application/affine': ['.apk'], + 'application/AFFiNE': ['.apk'], }, }, ], diff --git a/libs/utils/src/types/user-workspace.ts b/libs/utils/src/types/user-workspace.ts index e6d4fc58c..85f46a49f 100644 --- a/libs/utils/src/types/user-workspace.ts +++ b/libs/utils/src/types/user-workspace.ts @@ -1,4 +1,4 @@ -/** user model for Affine */ +/** user model for AFFiNE */ export type UserInfo = { id: string; nickname: string; From 60f330f67f786d58e8dd93368753ca0d74e9f1fd Mon Sep 17 00:00:00 2001 From: tzhangchi Date: Mon, 1 Aug 2022 15:25:40 +0800 Subject: [PATCH 4/6] refactor(src): restore apk accept to application/affine --- libs/datasource/jwt/src/adapter/yjs/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/datasource/jwt/src/adapter/yjs/index.ts b/libs/datasource/jwt/src/adapter/yjs/index.ts index ddace6db7..1037d9e3f 100644 --- a/libs/datasource/jwt/src/adapter/yjs/index.ts +++ b/libs/datasource/jwt/src/adapter/yjs/index.ts @@ -346,7 +346,7 @@ export class YjsAdapter implements AsyncDatabaseAdapter { description: 'AFFiNE Package', accept: { // eslint-disable-next-line @typescript-eslint/naming-convention - 'application/AFFiNE': ['.apk'], + 'application/affine': ['.apk'], }, }, ], From 171d0b8673b0fa22392ad3f1268a34e6d6768547 Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Mon, 1 Aug 2022 11:09:20 +0800 Subject: [PATCH 5/6] feat: add @emotion/babel-plugin --- apps/ligo-virgo/webpack.config.js | 58 +++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/apps/ligo-virgo/webpack.config.js b/apps/ligo-virgo/webpack.config.js index c147f3e14..edb5305b2 100644 --- a/apps/ligo-virgo/webpack.config.js +++ b/apps/ligo-virgo/webpack.config.js @@ -151,6 +151,8 @@ module.exports = function (webpackConfig) { } } + addEmotionBabelPlugin(config); + config.plugins = [ ...config.plugins.filter( p => !(isProd && p instanceof MiniCssExtractPlugin) @@ -195,3 +197,59 @@ module.exports = function (webpackConfig) { return config; }; + +// TODO handle nx issue +// see https://github.com/nrwl/nx/issues/8870 +// see https://github.com/nrwl/nx/issues/4520#issuecomment-787473383 +const addEmotionBabelPlugin = config => { + const babelLoader = config.module.rules.find( + rule => + typeof rule !== 'string' && + rule.loader?.toString().includes('babel-loader') + ); + if (!babelLoader) { + return; + } + + babelLoader.options.plugins = [ + [ + require.resolve('@emotion/babel-plugin'), + { + // See https://github.com/mui/material-ui/issues/27380#issuecomment-928973157 + // See https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin#importmap + importMap: { + '@toeverything/components/ui': { + styled: { + canonicalImport: ['@emotion/styled', 'default'], + styledBaseImport: [ + '@toeverything/components/ui', + 'styled', + ], + }, + }, + '@mui/material': { + styled: { + canonicalImport: ['@emotion/styled', 'default'], + styledBaseImport: ['@mui/material', 'styled'], + }, + }, + '@mui/material/styles': { + styled: { + canonicalImport: ['@emotion/styled', 'default'], + styledBaseImport: [ + '@mui/material/styles', + 'styled', + ], + }, + }, + }, + // sourceMap is on by default but source maps are dead code eliminated in production + sourceMap: true, + autoLabel: 'dev-only', + labelFormat: '[filename]-[local]', + cssPropOptimization: true, + }, + ], + ...(babelLoader.options.plugins ?? []), + ]; +}; From 4fb498c5629754ea971d789da6eede9dc35e439d Mon Sep 17 00:00:00 2001 From: lawvs <18554747+lawvs@users.noreply.github.com> Date: Mon, 1 Aug 2022 12:06:53 +0800 Subject: [PATCH 6/6] fix(kanban): kanban reorder Co-authored-by: mitsuhatu --- .../group/scene-kanban/dndable/helper.ts | 35 +++++++++++++++++-- .../dndable/wrapper/use-dndable.ts | 19 +++++----- 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts index f662144ec..5f20962d3 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts @@ -6,6 +6,7 @@ import type { DndableItems } from './type'; import type { KanbanCard, KanbanGroup, + RecastItem, } from '@toeverything/components/editor-core'; import { isEqual } from '@toeverything/utils'; @@ -33,15 +34,44 @@ const findContainer = (id: string, items: DndableItems) => { ); }; +type FindMoveInfo = (params: { + id: string; + activeContainer: string; + overContainer: string; + kanban: KanbanGroup[]; +}) => { + targetCard: RecastItem; + targetGroup: KanbanGroup | null; +}; + +const findMoveInfo: FindMoveInfo = ({ + id, + activeContainer, + overContainer, + kanban, +}) => { + const activeGroup = kanban.find(group => group.id === activeContainer); + const overGroup = kanban.find(group => group.id === overContainer); + const activityCard = activeGroup.items.find(item => item.id === id); + + return { + targetCard: activityCard.block, + targetGroup: overGroup, + }; +}; + /** * Find the sibling node after the dragging of the moved node ends * @param cards * @param currentCardId */ -const findSibling = (cards: KanbanCard[], currentCardId: string) => { +const findSibling = ( + cards: KanbanCard[], + currentCardId: string +): [string, string, number] => { const index = cards.findIndex(card => card.id === currentCardId); - return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null]; + return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null, index]; }; /** @@ -84,4 +114,5 @@ export { findSibling, pickIdFromCards, shouldUpdate, + findMoveInfo, }; diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts index 4dfcc5f5a..ff814d545 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts @@ -11,6 +11,7 @@ import { findSibling, pickIdFromCards, shouldUpdate, + findMoveInfo, } from '../helper'; import type { CollisionDetection, @@ -19,11 +20,13 @@ import type { DragEndEvent, } from '@dnd-kit/core'; import type { DndableItems, UseDndableRes } from '../type'; +import { useKanban } from '@toeverything/components/editor-core'; export const useDndable = ( dndableItems: DndableItems, dndableContainerIds: string[] ): UseDndableRes => { + const { kanban, moveCard } = useKanban(); const [items, setItems] = useState(dndableItems); const [containerIds, setContainerIds] = useState(dndableContainerIds); const [active, setActive] = useState(null); @@ -259,16 +262,14 @@ export const useDndable = ( ).filter(Boolean), }; - const activeItems = items[activeContainer]; - const activeItem = activeItems.find( - item => item.id === activeId - ); - const [beforeId, afterId] = findSibling( - items[overContainer], - activeId - ); + const { targetCard } = findMoveInfo({ + id: activeId, + activeContainer, + overContainer, + kanban, + }); - activeItem?.moveTo(overContainer, beforeId, afterId); + moveCard(targetCard, null, overIndex); return data; });