Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-24 18:02:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): improve the UX for edit collection (#4827)

Browse Source 
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
This commit is contained in:
3720
2023-11-07 18:18:56 +08:00
committed by GitHub
parent 7305530d97
commit 08e7fa3486
7 changed files with 121 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/component/src/components/page-list/filter/multi-select.tsx
View File

@@ -29,6 +29,7 @@ export const MultiSelect = ({
const selected = value.includes(option.value);
const click = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
e.preventDefault();
if (selected) {
onChange(value.filter(v => v !== option.value));
} else {

170
packages/frontend/component/src/components/page-list/view/affine-shape.tsx
View File

@@ -2,132 +2,126 @@ import type React from 'react';
export const AffineShapeIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg
width="200"
height="174"
viewBox="0 0 200 174"
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 695"
fill="none"
width={200}
{...props}
>
<rect width="200" height="173.475" fill="white" />
<rect
x="51.7242"
y="38.4618"
width="96.5517"
height="96.5517"
stroke="#D2D2D2"
strokeWidth="0.530504"
x="206.896"
y="154.635"
width="386.207"
height="386.207"
stroke="currentColor"
strokeWidth="3"
/>
<path
d="M51.8341 86.7377L100 38.5717L148.166 86.7377L100 134.904L51.8341 86.7377Z"
stroke="#D2D2D2"
strokeWidth="0.530504"
d="M207.336 347.738L400 155.074L592.664 347.738L400 540.402L207.336 347.738Z"
stroke="currentColor"
strokeWidth="3"
/>
<path
d="M99.6055 38.1965C107.662 33.4757 117.043 30.7695 127.056 30.7695C157.087 30.7695 181.432 55.1147 181.432 85.1461C181.432 107.547 167.887 126.783 148.541 135.113"
stroke="#D2D2D2"
strokeWidth="0.530504"
d="M398.421 153.574C430.649 134.691 468.171 123.866 508.222 123.866C628.347 123.866 725.729 221.247 725.729 341.372C725.729 430.974 671.549 507.921 594.163 541.241"
stroke="currentColor"
strokeWidth="3"
/>
<path
d="M148.375 86.4724C153.096 94.5294 155.802 103.91 155.802 113.923C155.802 143.954 131.457 168.299 101.426 168.299C79.0252 168.299 59.7883 154.754 51.4585 135.408"
stroke="#D2D2D2"
strokeWidth="0.530504"
d="M593.501 346.677C612.385 378.905 623.21 416.427 623.21 456.478C623.21 576.603 525.829 673.984 405.703 673.984C316.101 673.984 239.154 619.805 205.835 542.419"
stroke="currentColor"
strokeWidth="3"
/>
<path
d="M100.395 135.113C92.3376 139.834 82.957 142.54 72.9444 142.54C42.913 142.54 18.5677 118.195 18.5677 88.1636C18.5677 65.7632 32.1126 46.5264 51.459 38.1965"
stroke="#D2D2D2"
strokeWidth="0.530504"
d="M401.578 541.24C369.35 560.123 331.828 570.948 291.777 570.948C171.651 570.948 74.2704 473.567 74.2704 353.441C74.2704 263.84 128.45 186.892 205.835 153.573"
stroke="currentColor"
strokeWidth="3"
/>
<path
d="M51.4588 87.1319C46.7379 79.0749 44.0317 69.6944 44.0317 59.6818C44.0317 29.6504 68.377 5.3051 98.4084 5.30509C120.809 5.30509 140.046 18.85 148.375 38.1963"
stroke="#D2D2D2"
strokeWidth="0.530504"
d="M205.834 349.315C186.951 317.088 176.126 279.565 176.126 239.515C176.126 119.389 273.507 22.0086 393.633 22.0086C483.235 22.0085 560.182 76.188 593.501 153.573"
stroke="currentColor"
strokeWidth="3"
/>
<path
d="M51.459 38.1965L148.541 135.279"
stroke="#D2D2D2"
strokeWidth="0.530504"
d="M205.835 153.574L594.164 541.903"
stroke="currentColor"
strokeWidth="3"
/>
<path
d="M148.541 38.1965L51.459 135.279"
stroke="#D2D2D2"
strokeWidth="0.530504"
d="M594.164 153.574L205.835 541.903"
stroke="currentColor"
strokeWidth="3"
/>
<path d="M399.999 153.574V541.903" stroke="currentColor" strokeWidth="3" />
<path
d="M99.9995 38.1965V135.279"
stroke="#D2D2D2"
strokeWidth="0.530504"
/>
<path
d="M148.541 86.7376L51.4588 86.7376"
stroke="#D2D2D2"
strokeWidth="0.530504"
d="M594.164 347.738L205.835 347.738"
stroke="currentColor"
strokeWidth="3"
/>
<ellipse
cx="148.276"
cy="38.4618"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
cx="593.102"
cy="154.635"
rx="15.9151"
ry="15.9151"
fill="currentColor"
/>
<ellipse
cx="148.276"
cy="135.014"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
cx="593.102"
cy="540.842"
rx="15.9151"
ry="15.9151"
fill="currentColor"
/>
<ellipse
cx="148.276"
cy="86.7377"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
cx="593.102"
cy="347.738"
rx="15.9151"
ry="15.9151"
fill="currentColor"
/>
<ellipse
cx="51.7239"
cy="38.4618"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
cx="206.896"
cy="154.635"
rx="15.9151"
ry="15.9151"
fill="currentColor"
/>
<ellipse
cx="51.7239"
cy="135.014"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
cx="206.896"
cy="540.842"
rx="15.9151"
ry="15.9151"
fill="currentColor"
/>
<ellipse
cx="51.7239"
cy="86.7377"
rx="3.97878"
ry="3.97878"
fill="#5B5B5B"
cx="206.896"
cy="347.738"
rx="15.9151"
ry="15.9151"
fill="currentColor"
/>
<ellipse
cx="99.9998"
cy="38.4618"
rx="3.97878"
ry="3.97878"
transform="rotate(-90 99.9998 38.4618)"
fill="#5B5B5B"
cx="400"
cy="154.635"
rx="15.9151"
ry="15.9151"
transform="rotate(-90 400 154.635)"
fill="currentColor"
/>
<ellipse
cx="99.9998"
cy="86.2071"
rx="3.97878"
ry="3.97878"
transform="rotate(-90 99.9998 86.2071)"
fill="#5B5B5B"
cx="400"
cy="345.616"
rx="15.9151"
ry="15.9151"
transform="rotate(-90 400 345.616)"
fill="currentColor"
/>
<ellipse
cx="99.9998"
cy="135.014"
rx="3.97878"
ry="3.97878"
transform="rotate(-90 99.9998 135.014)"
fill="#5B5B5B"
cx="400"
cy="540.842"
rx="15.9151"
ry="15.9151"
transform="rotate(-90 400 540.842)"
fill="currentColor"
/>
</svg>
);

3
packages/frontend/component/src/components/page-list/view/create-collection.tsx
View File

@@ -96,6 +96,9 @@ export const CreateCollection = ({
<Input
autoFocus
value={value}
onKeyDown={e => {
e.stopPropagation();
}}
data-testid="input-collection-title"
placeholder={t['com.affine.editCollectionName.name.placeholder']()}
onChange={useCallback((value: string) => onChange(value), [onChange])}

13
packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx
View File

@@ -22,6 +22,7 @@ export interface EditCollectionModalProps {
onConfirm: (view: Collection) => Promise<void>;
allPageListConfig: AllPageListConfig;
}
const contentOptions: DialogContentProps = {
onPointerDownOutside: e => {
e.preventDefault();
@@ -29,7 +30,7 @@ const contentOptions: DialogContentProps = {
style: {
padding: 0,
maxWidth: 944,
backgroundColor: 'var(--affine-white)',
backgroundColor: 'var(--affine-background-primary-color)',
},
};
export const EditCollectionModal = ({
@@ -167,7 +168,15 @@ export const EditCollection = ({
[mode, t]
);
return (
<div className={styles.collectionEditContainer}>
<div
onKeyDown={e => {
if (e.key === 'Escape') {
return;
}
e.stopPropagation();
}}
className={styles.collectionEditContainer}
>
{mode === 'page' ? (
<PagesMode
collection={value}

4
packages/frontend/component/src/components/page-list/view/edit-collection/rules-mode.tsx
View File

@@ -75,7 +75,9 @@ export const RulesMode = ({
}
);
}, [open, updateCollection, collection]);
const [expandInclude, setExpandInclude] = useState(true);
const [expandInclude, setExpandInclude] = useState(
collection.allowList.length > 0
);
return (
<>
{/*prevents modal autofocus to the first input*/}