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

revises the way that negative field type gutter works

Browse Source
This commit is contained in:
James
2020-10-03 15:55:07 -04:00
parent e9c2b46c97
commit c5ea2dcd2a
14 changed files with 133 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.js
View File

@@ -21,7 +21,7 @@ const EditableBlockTitle = (props) => {
});
useEffect(() => {
setInputWidth(inputCloneRef.current.offsetWidth);
setInputWidth(inputCloneRef.current.offsetWidth + 5);
}, [value]);
const onKeyDown = (e) => {

24
src/client/components/forms/DraggableSection/index.js
View File

@@ -7,10 +7,10 @@ import ActionPanel from './ActionPanel';
import SectionTitle from './SectionTitle';
import PositionPanel from './PositionPanel';
import Button from '../../elements/Button';
import { NegativeFieldGutterProvider } from '../FieldTypeGutter/context';
import FieldTypeGutter from '../FieldTypeGutter';
import RenderFields from '../RenderFields';
import './index.scss';
const baseClass = 'draggable-section';
@@ -97,16 +97,18 @@ const DraggableSection = (props) => {
height={isOpen ? 'auto' : 0}
duration={0}
>
<RenderFields
readOnly={readOnly}
fieldTypes={fieldTypes}
key={rowIndex}
permissions={permissions}
fieldSchema={fieldSchema.map((field) => ({
...field,
path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`,
}))}
/>
<NegativeFieldGutterProvider allow={false}>
<RenderFields
readOnly={readOnly}
fieldTypes={fieldTypes}
key={rowIndex}
permissions={permissions}
fieldSchema={fieldSchema.map((field) => ({
...field,
path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`,
}))}
/>
</NegativeFieldGutterProvider>
</AnimateHeight>
</div>

70
src/client/components/forms/DraggableSection/index.scss
View File

@@ -1,33 +1,5 @@
@import '../../../scss/styles.scss';
//////////////////////
// HELPER MIXINS
//////////////////////
@mixin relatively-position-panels {
.field-type-gutter {
position: relative;
right: 0;
}
.field-type-gutter.actions {
position: relative;
left: 0;
}
}
@mixin absolutely-position-panels {
.field-type-gutter {
position: absolute;
top: 0; right: 100%; bottom: 0;
}
.field-type-gutter.actions {
position: absolute;
top: 0; bottom: 0; left: 100%; right: unset;
}
}
//////////////////////
// COMPONENT STYLES
//////////////////////
@@ -127,8 +99,6 @@
}
@include mid-break {
@include relatively-position-panels();
.position-panel__move-forward,
.position-panel__move-backward {
opacity: 1;
@@ -139,43 +109,3 @@
}
}
}
//////////////////////
// EXTERNAL SCOPES
//////////////////////
.global-edit,
.collection-edit {
@include absolutely-position-panels();
@include mid-break {
@include relatively-position-panels();
}
}
.field-type.group .field-type.array,
.field-type.group .field-type.blocks,
.field-type.blocks .field-type.blocks,
.field-type.blocks .field-type.array,
.field-type.array .field-type.array,
.field-type.array .field-type.blocks {
@include relatively-position-panels();
}
.field-type.group {
@include absolutely-position-panels();
@include mid-break {
@include relatively-position-panels();
}
}
// remove padding above array rows to level
// the line with the top of the input label
.field-type.array {
.draggable-section {
&__content-wrapper {
padding-top: 0;
}
}
}

27
src/client/components/forms/FieldTypeGutter/context.js Normal file
View File

@@ -0,0 +1,27 @@
import React, { createContext, useContext } from 'react';
import PropTypes from 'prop-types';
import { useWindowInfo } from '@faceless-ui/window-info';
const context = createContext(false);
const { Provider } = context;
export const NegativeFieldGutterProvider = ({ children, allow }) => {
const { breakpoints: { m: midBreak } } = useWindowInfo();
return (
<Provider value={allow && !midBreak}>
{children}
</Provider>
);
};
export const useNegativeFieldGutter = () => useContext(context);
NegativeFieldGutterProvider.defaultProps = {
allow: false,
};
NegativeFieldGutterProvider.propTypes = {
children: PropTypes.node.isRequired,
allow: PropTypes.bool,
};

3
src/client/components/forms/FieldTypeGutter/index.js
View File

@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useNegativeFieldGutter } from './context';
import './index.scss';
@@ -7,11 +8,13 @@ const baseClass = 'field-type-gutter';
const FieldTypeGutter = (props) => {
const { children, variant, verticalAlignment, className, dragHandleProps } = props;
const allowNegativeGutter = useNegativeFieldGutter();
const classes = [
baseClass,
`${baseClass}--${variant}`,
`${baseClass}--v-align-${verticalAlignment}`,
allowNegativeGutter && `${baseClass}--negative-gutter`,
className && className,
].filter(Boolean).join(' ');

7
src/client/components/forms/FieldTypeGutter/index.scss
View File

@@ -61,6 +61,13 @@ $controls-top-adjustment: base(.1);
height: 100%;
}
&--negative-gutter {
&.field-type-gutter--left {
position: absolute;
top: 0; right: 100%; bottom: 0;
}
}
@include mid-break {
padding-right: base(1);

19
src/client/components/forms/field-types/Group/index.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import RenderFields from '../../RenderFields';
import withCondition from '../../withCondition';
import FieldTypeGutter from '../../FieldTypeGutter';
import { NegativeFieldGutterProvider } from '../../FieldTypeGutter/context';
import './index.scss';
@@ -31,14 +32,16 @@ const Group = (props) => {
<h2 className={`${baseClass}__title`}>{label}</h2>
)}
<div className={`${baseClass}__fields-wrapper`}>
<RenderFields
readOnly={readOnly}
fieldTypes={fieldTypes}
fieldSchema={fields.map((subField) => ({
...subField,
path: `${path}${subField.name ? `.${subField.name}` : ''}`,
}))}
/>
<NegativeFieldGutterProvider allow={false}>
<RenderFields
readOnly={readOnly}
fieldTypes={fieldTypes}
fieldSchema={fields.map((subField) => ({
...subField,
path: `${path}${subField.name ? `.${subField.name}` : ''}`,
}))}
/>
</NegativeFieldGutterProvider>
</div>
</div>
</div>

6
src/client/components/forms/field-types/Group/index.scss
View File

@@ -6,13 +6,10 @@
}
.group {
margin-top: base(2);
margin-bottom: base(2);
display: flex;
&__title {
margin-top: base(2);
}
&:hover {
.field-type-gutter__content-container {
box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
@@ -51,7 +48,6 @@
.field-type.group .field-type.group,
.field-type.blocks .field-type.group,
.field-type.array .field-type.group {
.field-type-gutter__content-container {
@include reduce-gutter;
}

13
src/client/components/forms/field-types/Upload/Add/index.js
View File

@@ -8,6 +8,7 @@ import Button from '../../../../elements/Button';
import RenderFields from '../../../RenderFields';
import FormSubmit from '../../../Submit';
import Upload from '../../../../views/collections/Edit/Upload';
import { NegativeFieldGutterProvider } from '../../../FieldTypeGutter/context';
import './index.scss';
@@ -65,11 +66,13 @@ const AddUploadModal = (props) => {
{...collection.upload}
fieldTypes={fieldTypes}
/>
<RenderFields
filter={(field) => (!field.position || (field.position && field.position !== 'sidebar'))}
fieldTypes={fieldTypes}
fieldSchema={collection.fields}
/>
<NegativeFieldGutterProvider allow>
<RenderFields
filter={(field) => (!field.position || (field.position && field.position !== 'sidebar'))}
fieldTypes={fieldTypes}
fieldSchema={collection.fields}
/>
</NegativeFieldGutterProvider>
</Form>
</MinimalTemplate>
</Modal>

30
src/client/components/views/Account/index.js
View File

@@ -6,8 +6,8 @@ import { useAuthentication } from '../../providers/Authentication';
import usePayloadAPI from '../../../hooks/usePayloadAPI';
import DefaultAccount from './Default';
import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
import RenderCustomComponent from '../../utilities/RenderCustomComponent';
import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
const AccountView = () => {
const { state: locationState } = useLocation();
@@ -58,19 +58,21 @@ const AccountView = () => {
}, [dataToRender, fields]);
return (
<RenderCustomComponent
DefaultComponent={DefaultAccount}
CustomComponent={CustomAccount}
componentProps={{
data,
collection,
permissions: collectionPermissions,
hasSavePermission,
initialState,
apiURL,
isLoading,
}}
/>
<NegativeFieldGutterProvider allow>
<RenderCustomComponent
DefaultComponent={DefaultAccount}
CustomComponent={CustomAccount}
componentProps={{
data,
collection,
permissions: collectionPermissions,
hasSavePermission,
initialState,
apiURL,
isLoading,
}}
/>
</NegativeFieldGutterProvider>
);
};

17
src/client/components/views/CreateFirstUser/index.js
View File

@@ -8,6 +8,7 @@ import RenderFields from '../../forms/RenderFields';
import fieldTypes from '../../forms/field-types';
import FormSubmit from '../../forms/Submit';
import { useAuthentication } from '../../providers/Authentication';
import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
import './index.scss';
@@ -59,13 +60,15 @@ const CreateFirstUser = (props) => {
redirect={admin}
action={`${serverURL}${api}/${userSlug}/first-register`}
>
<RenderFields
fieldSchema={[
...fields,
...userConfig.fields,
]}
fieldTypes={fieldTypes}
/>
<NegativeFieldGutterProvider allow>
<RenderFields
fieldSchema={[
...fields,
...userConfig.fields,
]}
fieldTypes={fieldTypes}
/>
</NegativeFieldGutterProvider>
<FormSubmit>Create</FormSubmit>
</Form>
</MinimalTemplate>

29
src/client/components/views/Global/index.js
View File

@@ -10,6 +10,7 @@ import { useLocale } from '../../utilities/Locale';
import RenderCustomComponent from '../../utilities/RenderCustomComponent';
import DefaultGlobal from './Default';
import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
const GlobalView = (props) => {
const { state: locationState } = useLocation();
@@ -79,19 +80,21 @@ const GlobalView = (props) => {
const globalPermissions = permissions?.[slug];
return (
<RenderCustomComponent
DefaultComponent={DefaultGlobal}
CustomComponent={CustomEdit}
componentProps={{
data: dataToRender,
permissions: globalPermissions,
initialState,
global,
onSave,
apiURL: `${serverURL}${api}/globals/${slug}?depth=0`,
action: `${serverURL}${api}/globals/${slug}?locale=${locale}`,
}}
/>
<NegativeFieldGutterProvider allow>
<RenderCustomComponent
DefaultComponent={DefaultGlobal}
CustomComponent={CustomEdit}
componentProps={{
data: dataToRender,
permissions: globalPermissions,
initialState,
global,
onSave,
apiURL: `${serverURL}${api}/globals/${slug}?depth=0`,
action: `${serverURL}${api}/globals/${slug}?locale=${locale}`,
}}
/>
</NegativeFieldGutterProvider>
);
};

35
src/client/components/views/collections/Edit/index.js
View File

@@ -9,6 +9,7 @@ import { useAuthentication } from '../../../providers/Authentication';
import RenderCustomComponent from '../../../utilities/RenderCustomComponent';
import DefaultEdit from './Default';
import buildStateFromSchema from '../../../forms/Form/buildStateFromSchema';
import { NegativeFieldGutterProvider } from '../../../forms/FieldTypeGutter/context';
const EditView = (props) => {
const { collection, isEditing } = props;
@@ -97,22 +98,24 @@ const EditView = (props) => {
action += '?depth=0';
return (
<RenderCustomComponent
DefaultComponent={DefaultEdit}
CustomComponent={CustomEdit}
componentProps={{
isLoading,
data: dataToRender,
collection,
permissions: collectionPermissions,
isEditing,
onSave,
initialState,
hasSavePermission,
apiURL,
action,
}}
/>
<NegativeFieldGutterProvider allow>
<RenderCustomComponent
DefaultComponent={DefaultEdit}
CustomComponent={CustomEdit}
componentProps={{
isLoading,
data: dataToRender,
collection,
permissions: collectionPermissions,
isEditing,
onSave,
initialState,
hasSavePermission,
apiURL,
action,
}}
/>
</NegativeFieldGutterProvider>
);
};

1
src/client/components/views/collections/Edit/index.scss
View File

@@ -17,6 +17,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
}
}