Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-10 11:28:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #194 from toeverything/fix/experience

Browse Source 
Fix/experience
This commit is contained in:
DarkSky
2022-08-11 19:37:31 +08:00
committed by GitHub
parent 42c4f10000 5e3f914182
commit eb929eb99e
11 changed files with 125 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.github/deployment/Dockerfile-affine vendored
View File

@@ -2,7 +2,7 @@ FROM node:16-alpine as builder
WORKDIR /app
COPY . .
RUN apk add g++ make python3 git libpng-dev
RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:local
RUN npm i -g pnpm@7 && pnpm i --frozen-lockfile --store=node_modules/.pnpm-store && pnpm run build:local --skip-nx-cache
FROM node:16-alpine as relocate
WORKDIR /app
@@ -18,4 +18,4 @@ WORKDIR /app
COPY --from=relocate /app .
EXPOSE 3000
CMD ["caddy", "run"]
CMD ["caddy", "run"]

3
libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContext.tsx
View File

@@ -60,6 +60,9 @@ export const CardContext = (props: Props) => {
const StyledCardContainer = styled('div')`
cursor: pointer;
&:hover {
z-index: 1;
}
&:focus-within {
z-index: 1;
}

48
libs/components/editor-core/src/block-pendant/BlockPendantProvider.tsx
View File

@@ -3,6 +3,8 @@ import { styled } from '@toeverything/components/ui';
import type { AsyncBlock } from '../editor';
import { PendantPopover } from './pendant-popover';
import { PendantRender } from './pendant-render';
import { useRef } from 'react';
import { getRecastItemValue, useRecastBlockMeta } from '../recast-block';
/**
* @deprecated
*/
@@ -14,13 +16,27 @@ export const BlockPendantProvider: FC<PropsWithChildren<BlockTagProps>> = ({
block,
children,
}) => {
const triggerRef = useRef<HTMLDivElement>();
const { getProperties } = useRecastBlockMeta();
const properties = getProperties();
const { getValue } = getRecastItemValue(block);
const showTriggerLine =
properties.filter(property => getValue(property.id)).length === 0;
return (
<Container>
{children}
<PendantPopover block={block}>
<StyledTriggerLine />
</PendantPopover>
{showTriggerLine ? (
<StyledPendantContainer ref={triggerRef}>
<PendantPopover
block={block}
container={triggerRef.current}
>
<StyledTriggerLine />
</PendantPopover>
</StyledPendantContainer>
) : null}
<PendantRender block={block} />
</Container>
@@ -43,10 +59,12 @@ const StyledTriggerLine = styled('div')({
width: '100%',
height: '2px',
background: '#dadada',
display: 'none',
display: 'flex',
position: 'absolute',
left: '0',
top: '4px',
transition: 'opacity .2s',
opacity: '0',
},
'::after': {
content: "''",
@@ -60,18 +78,24 @@ const StyledTriggerLine = styled('div')({
transition: 'width .3s',
},
});
const Container = styled('div')({
position: 'relative',
paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
const StyledPendantContainer = styled('div')({
width: '100px',
'&:hover': {
[StyledTriggerLine.toString()]: {
'&::before': {
display: 'flex',
},
[`${StyledTriggerLine}`]: {
'&::after': {
width: '100%',
},
},
},
});
const Container = styled('div')({
position: 'relative',
paddingBottom: `${LINE_GAP - TAG_GAP * 2}px`,
'&:hover': {
[`${StyledTriggerLine}`]: {
'&::before': {
opacity: '1',
},
},
},
});

4
libs/components/editor-core/src/block-pendant/pendant-history-panel/PendantHistoryPanel.tsx
View File

@@ -29,6 +29,7 @@ export const PendantHistoryPanel = ({
const [history, setHistory] = useState<RecastBlockValue[]>([]);
const popoverHandlerRef = useRef<{ [key: string]: PopperHandler }>({});
const historyPanelRef = useRef<HTMLDivElement>();
const { getValueHistory } = getRecastItemValue(block);
useEffect(() => {
@@ -84,7 +85,7 @@ export const PendantHistoryPanel = ({
}, [block, getProperties, groupBlock, recastBlock]);
return (
<StyledPendantHistoryPanel>
<StyledPendantHistoryPanel ref={historyPanelRef}>
{history.map(item => {
const property = getProperty(item.id);
return (
@@ -116,6 +117,7 @@ export const PendantHistoryPanel = ({
/>
}
trigger="click"
container={historyPanelRef.current}
>
<PendantTag
style={{

22
libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx
View File

@@ -1,5 +1,11 @@
import React, { useState, useEffect } from 'react';
import { Input, Option, Select, Tooltip } from '@toeverything/components/ui';
import {
Input,
message,
Option,
Select,
Tooltip,
} from '@toeverything/components/ui';
import { HelpCenterIcon } from '@toeverything/components/icons';
import { AsyncBlock } from '../../editor';
@@ -18,6 +24,7 @@ import {
generateRandomFieldName,
generateInitialOptions,
getPendantConfigByType,
checkPendantForm,
} from '../utils';
import { useOnCreateSure } from './hooks';
@@ -74,7 +81,7 @@ export const CreatePendantPanel = ({
setFieldName(e.target.value);
}}
endAdornment={
<Tooltip content="Help info here">
<Tooltip content="Help info here" placement="top">
<StyledInputEndAdornment>
<HelpCenterIcon />
</StyledInputEndAdornment>
@@ -98,6 +105,17 @@ export const CreatePendantPanel = ({
)}
iconConfig={getPendantConfigByType(selectedOption.type)}
onSure={async (type, newPropertyItem, newValue) => {
const checkResult = checkPendantForm(
type,
fieldName,
newPropertyItem,
newValue
);
if (!checkResult.passed) {
await message.error(checkResult.message);
return;
}
await onCreateSure({
type,
newPropertyItem,

17
libs/components/editor-core/src/block-pendant/pendant-operation-panel/UpdatePendantPanel.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react';
import { Input, Tooltip } from '@toeverything/components/ui';
import { Input, message, Tooltip } from '@toeverything/components/ui';
import { HelpCenterIcon } from '@toeverything/components/icons';
import { PendantModifyPanel } from '../pendant-modify-panel';
import type { AsyncBlock } from '../../editor';
@@ -8,7 +8,7 @@ import {
type RecastBlockValue,
type RecastMetaProperty,
} from '../../recast-block';
import { getPendantConfigByType } from '../utils';
import { checkPendantForm, getPendantConfigByType } from '../utils';
import {
StyledPopoverWrapper,
StyledOperationLabel,
@@ -70,7 +70,7 @@ export const UpdatePendantPanel = ({
setFieldName(e.target.value);
}}
endAdornment={
<Tooltip content="Help info here">
<Tooltip content="Help info here" placement="top">
<StyledInputEndAdornment>
<HelpCenterIcon />
</StyledInputEndAdornment>
@@ -98,6 +98,17 @@ export const UpdatePendantPanel = ({
property={property}
type={property.type}
onSure={async (type, newPropertyItem, newValue) => {
const checkResult = checkPendantForm(
type,
fieldName,
newPropertyItem,
newValue
);
if (!checkResult.passed) {
await message.error(checkResult.message);
return;
}
await onUpdateSure({
type,
newPropertyItem,

31
libs/components/editor-core/src/block-pendant/pendant-operation-panel/hooks.ts
View File

@@ -23,12 +23,7 @@ import {
PendantTypes,
type TempInformationType,
} from '../types';
import {
checkPendantForm,
getOfficialSelected,
getPendantConfigByType,
} from '../utils';
import { message } from '@toeverything/components/ui';
import { getOfficialSelected, getPendantConfigByType } from '../utils';
type SelectPropertyType = MultiSelectProperty | SelectProperty;
type SureParams = {
@@ -56,18 +51,6 @@ export const useOnCreateSure = ({ block }: { block: AsyncBlock }) => {
newPropertyItem,
newValue,
}: SureParams) => {
const checkResult = checkPendantForm(
type,
fieldName,
newPropertyItem,
newValue
);
if (!checkResult.passed) {
await message.error(checkResult.message);
return;
}
if (
type === PendantTypes.MultiSelect ||
type === PendantTypes.Select ||
@@ -181,18 +164,6 @@ export const useOnUpdateSure = ({
newPropertyItem,
newValue,
}: SureParams) => {
const checkResult = checkPendantForm(
type,
fieldName,
newPropertyItem,
newValue
);
if (!checkResult.passed) {
await message.error(checkResult.message);
return;
}
if (
type === PendantTypes.MultiSelect ||
type === PendantTypes.Select ||

1
libs/components/editor-core/src/block-pendant/pendant-popover/PendantPopover.tsx
View File

@@ -26,6 +26,7 @@ export const PendantPopover: FC<
block={block}
endElement={
<AddPendantPopover
container={popoverProps.container}
block={block}
onSure={() => {
popoverHandlerRef.current?.setVisible(false);

2
libs/components/editor-core/src/block-pendant/pendant-render/PandentRender.tsx
View File

@@ -105,6 +105,8 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
<AddPendantPopover
block={block}
iconStyle={{ marginTop: 4 }}
trigger="click"
// trigger={isKanbanView ? 'hover' : 'click'}
container={blockRenderContainerRef.current}
/>
</div>

6
libs/components/layout/src/settings-sidebar/Settings/use-settings.ts
View File

@@ -1,4 +1,5 @@
import { useNavigate } from 'react-router-dom';
import { message } from '@toeverything/components/ui';
import { useSettingFlags, type SettingFlags } from './use-setting-flags';
import { copyToClipboard } from '@toeverything/utils';
import {
@@ -91,7 +92,10 @@ export const useSettings = (): SettingItem[] => {
{
type: 'button',
name: 'Copy Page Link',
onClick: () => copyToClipboard(window.location.href),
onClick: () => {
copyToClipboard(window.location.href);
message.success('Page link copied successfully');
},
},
{
type: 'separator',

64
libs/components/ui/src/select/Select.tsx
View File

@@ -12,6 +12,7 @@ import SelectUnstyled, {
} from '@mui/base/SelectUnstyled';
/* eslint-disable no-restricted-imports */
import PopperUnstyled from '@mui/base/PopperUnstyled';
import { ArrowDropDownIcon } from '@toeverything/components/icons';
import { styled } from '../styled';
type ExtendSelectProps = {
@@ -41,20 +42,29 @@ export const Select = forwardRef(function CustomSelect<TValue>(
const { width = '100%', style, listboxStyle, placeholder } = props;
const components: SelectUnstyledProps<TValue>['components'] = {
// Root: generateStyledRoot({ width, ...style }),
Root: forwardRef((rootProps, rootRef) => (
<StyledRoot
ref={rootRef}
{...rootProps}
style={{
width,
...style,
}}
>
{rootProps.children || (
<StyledPlaceholder>{placeholder}</StyledPlaceholder>
)}
</StyledRoot>
)),
Root: forwardRef((rootProps, rootRef) => {
const {
ownerState: { open },
} = rootProps;
return (
<StyledRoot
ref={rootRef}
{...rootProps}
style={{
width,
...style,
}}
>
{rootProps.children || (
<StyledPlaceholder>{placeholder}</StyledPlaceholder>
)}
<StyledSelectedArrowWrapper open={open}>
<ArrowDropDownIcon />
</StyledSelectedArrowWrapper>
</StyledRoot>
);
}),
Listbox: forwardRef((listboxProps, listboxRef) => (
<StyledListbox
ref={listboxRef}
@@ -73,6 +83,20 @@ export const Select = forwardRef(function CustomSelect<TValue>(
RefAttributes<HTMLUListElement>
) => JSX.Element;
const StyledSelectedArrowWrapper = styled('div')<{ open: boolean }>(
({ open }) => ({
position: 'absolute',
top: '0',
bottom: '0',
right: '12px',
margin: 'auto',
lineHeight: '32px',
display: 'flex',
alignItems: 'center',
transform: `rotate(${open ? '180deg' : '0'})`,
})
);
const StyledRoot = styled('div')(({ theme }) => ({
height: '32px',
border: `1px solid ${theme.affine.palette.borderColor}`,
@@ -95,18 +119,6 @@ const StyledRoot = styled('div')(({ theme }) => ({
[`&.${selectUnstyledClasses.expanded}`]: {
borderColor: `${theme.affine.palette.primary}`,
'&::after': {
content: '"▴"',
},
},
'&::after': {
content: '"▾"',
position: ' absolute',
top: '0',
bottom: '0',
right: '12px',
margin: 'auto',
lineHeight: '32px',
},
}));