tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enables document drawers from read-only fields (#1989)

Browse Source
This commit is contained in:
Jacob Fletcher
2023-02-04 10:42:51 -05:00
committed by GitHub
parent 071462b33b
commit 0dbc4fa213
14 changed files with 147 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/components/elements/DocumentDrawer/index.scss
View File

@@ -24,8 +24,10 @@
&__toggler {
background: transparent;
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
color: inherit;
&:focus,
&:focus-within {

2
src/admin/components/elements/ListDrawer/index.scss
View File

@@ -41,6 +41,7 @@
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
&:focus,
&:focus-within {
@@ -56,6 +57,7 @@
border: 0;
background-color: transparent;
padding: 0;
margin: 0;
cursor: pointer;
overflow: hidden;
width: base(1);

1
src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss
View File

@@ -24,6 +24,7 @@
align-items: center;
justify-content: center;
margin-left: base(0.25);
pointer-events: all;
.icon {
width: base(0.75);

1
src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss
View File

@@ -25,6 +25,7 @@
align-items: center;
justify-content: center;
margin-left: base(0.25);
pointer-events: all;
.icon {
width: base(0.75);

3
src/admin/components/forms/field-types/RichText/RichText.tsx
View File

@@ -205,9 +205,8 @@ const RichText: React.FC<Props> = (props) => {
function setClickableState(clickState: 'disabled' | 'enabled') {
const selectors = 'button, a, [role="button"]';
const toolbarButtons: (HTMLButtonElement | HTMLAnchorElement)[] = toolbarRef.current?.querySelectorAll(selectors);
const editorButtons: (HTMLButtonElement | HTMLAnchorElement)[] = editorRef.current?.querySelectorAll(selectors);
[...(toolbarButtons || []), ...(editorButtons || [])].forEach((child) => {
(toolbarButtons || []).forEach((child) => {
const isButton = child.tagName === 'BUTTON';
const isDisabling = clickState === 'disabled';
child.setAttribute('tabIndex', isDisabling ? '-1' : '0');

40
src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
View File

@@ -49,46 +49,42 @@
outline: none;
}
&__toggler {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
&:focus,
&:focus-within {
outline: none;
}
&:disabled {
pointer-events: none;
}
}
&__actions {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: base(0.5);
.rich-text-relationship__doc-drawer-toggler {
pointer-events: all;
}
& > *:not(:last-child) {
margin-right: base(.25);
}
}
&__actionButton {
&__removeButton {
margin: 0;
border-radius: 0;
flex-shrink: 0;
width: base(1);
height: base(1);
line {
stroke-width: $style-stroke-width-m;
}
&:disabled {
opacity: 0.5;
color: var(--theme-elevation-300);
pointer-events: none;
}
}
&__doc-drawer-toggler,
&__list-drawer-toggler {
& > * {
margin: 0;
}
&:disabled {
color: var(--theme-elevation-300);
pointer-events: none;
}
}

21
src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.tsx
View File

@@ -28,9 +28,13 @@ const Element: React.FC<{
attributes,
children,
element,
element: {
relationTo,
value,
},
fieldProps,
} = props;
const { relationTo, value } = element;
const { collections, serverURL, routes: { api } } = useConfig();
const [enabledCollectionSlugs] = useState(() => collections.filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship).map(({ slug }) => slug));
const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
@@ -146,30 +150,27 @@ const Element: React.FC<{
</div>
<div className={`${baseClass}__actions`}>
{value?.id && (
<DocumentDrawerToggler
className={`${baseClass}__toggler`}
disabled={fieldProps?.admin?.readOnly}
>
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
<Button
icon="edit"
round
buttonStyle="icon-label"
el="div"
className={`${baseClass}__actionButton`}
onClick={(e) => {
e.preventDefault();
}}
tooltip={t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
disabled={fieldProps?.admin?.readOnly}
/>
</DocumentDrawerToggler>
)}
<ListDrawerToggler disabled={fieldProps?.admin?.readOnly}>
<ListDrawerToggler
disabled={fieldProps?.admin?.readOnly}
className={`${baseClass}__list-drawer-toggler`}
>
<Button
icon="swap"
round
buttonStyle="icon-label"
className={`${baseClass}__actionButton`}
onClick={() => {
// do nothing
}}
@@ -182,7 +183,7 @@ const Element: React.FC<{
icon="x"
round
buttonStyle="icon-label"
className={`${baseClass}__actionButton`}
className={`${baseClass}__removeButton`}
onClick={(e) => {
e.preventDefault();
removeRelationship();

26
src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
View File

@@ -62,33 +62,37 @@
flex-shrink: 0;
margin-left: base(0.5);
.rich-text-upload__doc-drawer-toggler {
pointer-events: all;
}
& > *:not(:last-child) {
margin-right: base(.25);
}
}
&__actionButton {
&__removeButton {
margin: 0;
border-radius: 0;
flex-shrink: 0;
line {
stroke-width: $style-stroke-width-m;
}
&:disabled {
opacity: 0.5;
color: var(--theme-elevation-300);
pointer-events: none;
}
}
&__toggler {
background: transparent;
border: none;
padding: 0;
&:focus,
&:focus-within {
outline: none;
&__doc-drawer-toggler,
&__list-drawer-toggler {
& > * {
margin: 0;
}
&:disabled {
color: var(--theme-elevation-300);
pointer-events: none;
}
}

25
src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
View File

@@ -26,12 +26,17 @@ const Element: React.FC<{
children: React.ReactNode
element: any
fieldProps: RichTextProps
}> = ({ attributes, children, element }) => {
}> = (props) => {
const {
relationTo,
value,
attributes,
children,
element,
element: {
relationTo,
value,
},
fieldProps,
} = element;
} = props;
const { collections, serverURL, routes: { api } } = useConfig();
const { t, i18n } = useTranslation('fields');
@@ -159,27 +164,27 @@ const Element: React.FC<{
</div>
<div className={`${baseClass}__actions`}>
{value?.id && (
<DocumentDrawerToggler className={`${baseClass}__toggler`}>
<DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
<Button
icon="edit"
round
buttonStyle="icon-label"
el="div"
className={`${baseClass}__actionButton`}
onClick={(e) => {
e.preventDefault();
}}
tooltip={t('general:editLabel', { label: relatedCollection.labels.singular })}
disabled={fieldProps?.admin?.readOnly}
/>
</DocumentDrawerToggler>
)}
<ListDrawerToggler>
<ListDrawerToggler
className={`${baseClass}__list-drawer-toggler`}
disabled={fieldProps?.admin?.readOnly}
>
<Button
icon="swap"
round
buttonStyle="icon-label"
className={`${baseClass}__actionButton`}
onClick={() => {
// do nothing
}}
@@ -192,7 +197,7 @@ const Element: React.FC<{
icon="x"
round
buttonStyle="icon-label"
className={`${baseClass}__actionButton`}
className={`${baseClass}__removeButton`}
onClick={(e) => {
e.preventDefault();
removeUpload();