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

adds section title and pills to flexible, other misc refinements

Browse Source
This commit is contained in:
Jarrod Flesch
2020-06-18 18:10:02 -04:00
parent 98c1197b5c
commit cb8d6d82fb
18 changed files with 133 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/client/components/elements/Button/index.scss
View File

@@ -12,10 +12,12 @@
font-weight: normal;
text-decoration: none;
text-align: center;
color: inherit;
.btn__icon {
border: 1px solid;
border-radius: 100%;
@include color-svg(currentColor);
}
&--icon-style-without-border {
@@ -94,10 +96,6 @@
&--style-icon-label {
padding: 0;
font-weight: 600;
.icon {
@include color-svg(currentColor);
}
}
&--style-light-gray {
@@ -127,26 +125,24 @@
}
}
&:not(.btn--icon-style-none) {
&:hover {
.btn__icon {
@include color-svg(white);
background: $color-dark-gray;
}
&:hover {
.btn__icon {
@include color-svg(white);
background: $color-dark-gray;
}
}
&:focus {
.btn__icon {
@include color-svg($color-dark-gray);
background: $color-light-gray;
}
&:focus {
.btn__icon {
@include color-svg($color-dark-gray);
background: $color-light-gray;
}
}
&:active {
.btn__icon {
@include color-svg(white);
background: lighten($color-dark-gray, 10%);
}
&:active {
.btn__icon {
@include color-svg(white);
background: lighten($color-dark-gray, 10%);
}
}

2
src/client/components/elements/Pill/index.js
View File

@@ -63,7 +63,7 @@ Pill.propTypes = {
icon: PropTypes.node,
alignIcon: PropTypes.oneOf(['left', 'right']),
onClick: PropTypes.func,
pillStyle: PropTypes.oneOf(['light', 'dark']),
pillStyle: PropTypes.oneOf(['light', 'dark', 'light-gray']),
};
export default Pill;

5
src/client/components/elements/Pill/index.scss
View File

@@ -46,6 +46,11 @@
}
}
&--style-light-gray {
background: $color-background-gray;
color: $color-dark-gray;
}
&--style-dark {
background: $color-dark-gray;
color: white;

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

@@ -38,7 +38,7 @@ const ActionHandle = (props) => {
iconStyle="with-border"
onClick={() => removeRow()}
/>
)}
)}
>
Remove 
{singularLabel}

3
src/client/components/forms/DraggableSection/ActionHandle/index.scss
View File

@@ -4,8 +4,6 @@
padding: base(.5);
padding-left: base(.75);
margin-bottom: base(.5);
position: absolute;
top: 0; bottom: 0; left: 100%;
&__controls-container {
position: relative;
@@ -17,6 +15,7 @@
justify-content: center;
height: 100%;
flex-direction: column;
color: $color-gray;
}
&--vertical-alignment-top {

6
src/client/components/forms/DraggableSection/PositionHandle/index.scss
View File

@@ -1,10 +1,8 @@
@import '../../../../scss/styles';
.position-handle {
padding: base(.5) base(.75) base(.5) 0;
padding-right: base(1);
margin-bottom: base(.5);
position: absolute;
top: 0; right: 100%; bottom: 0;
&__controls-container {
position: relative;
@@ -13,7 +11,7 @@
}
&__controls {
padding-right: base(.5);
padding-right: base(.75);
display: flex;
flex-direction: column;
justify-content: center;

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

@@ -1,7 +1,7 @@
import React, { useRef, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import useFieldType from '../../useFieldType';
import useFieldType from '../../../useFieldType';
import './index.scss';

18
src/client/components/forms/DraggableSection/EditableBlockTitle/index.scss → src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.scss
View File

@@ -1,4 +1,4 @@
@import '../../../../scss/styles.scss';
@import '../../../../../scss/styles.scss';
.editable-block-title {
position: relative;
@@ -18,21 +18,29 @@
input {
padding: base(.1) base(.2);
font-family: $font-body;
font-weight: bold;
font-weight: 600;
margin-right: base(.5);
font-size: base(.75);
color: $color-dark-gray
}
input {
background: none;
border: none;
width: 100%;
margin-right: base(.5);
border-radius: $style-radius-s;
margin-left: base(.5);
&:hover,
&:focus {
outline: 0;
background-color: $color-light-gray;
}
&:hover {
box-shadow: inset 0px -2px 0px -1px $color-light-gray;
}
&:focus {
box-shadow: none;
}
}
}

34
src/client/components/forms/DraggableSection/SectionTitle/index.js Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import PropTypes from 'prop-types';
import EditableBlockTitle from './EditableBlockTitle';
import Pill from '../../../elements/Pill';
import './index.scss';
const baseClass = 'section-title';
const SectionTitle = (props) => {
const { label, ...remainingProps } = props;
const classes = [
baseClass,
].filter(Boolean).join(' ');
return (
<div className={classes}>
<Pill pillStyle="light-gray">{label}</Pill>
<EditableBlockTitle {...remainingProps} />
</div>
);
};
SectionTitle.defaultProps = {
label: '',
};
SectionTitle.propTypes = {
label: PropTypes.string,
};
export default SectionTitle;

7
src/client/components/forms/DraggableSection/SectionTitle/index.scss Normal file
View File

@@ -0,0 +1,7 @@
@import '../../../../scss/styles';
.section-title {
display: flex;
align-items: center;
margin-bottom: base(.75);
}

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

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
import AnimateHeight from 'react-animate-height';
import { Draggable } from 'react-beautiful-dnd';
import RenderFields from '../RenderFields';
import Pill from '../../elements/Pill';
import Chevron from '../../icons/Chevron';
import EditableBlockTitle from './EditableBlockTitle';
import PositionHandle from './PositionHandle';
import ActionHandle from './ActionHandle';
import Chevron from '../../icons/Chevron';
import SectionTitle from './SectionTitle';
import PositionHandle from './PositionHandle';
import RenderFields from '../RenderFields';
import './index.scss';
@@ -66,7 +65,6 @@ const DraggableSection = (props) => {
{...providedDrag.draggableProps}
>
{/* Render DragPoint - with MoveRow Action Points */}
<PositionHandle
dragHandleProps={providedDrag.dragHandleProps}
moveRow={moveRow}
@@ -75,6 +73,15 @@ const DraggableSection = (props) => {
/>
<div className={`${baseClass}__render-fields-wrapper`}>
{blockType === 'flexible' && (
<SectionTitle
label={singularLabel}
initialData={initialData?.[`${parentPath}.${rowIndex}.blockName`]}
path={`${parentPath}.${rowIndex}.blockName`}
/>
)}
{/* Render fields */}
<RenderFields
initialData={initialData}
@@ -90,7 +97,6 @@ const DraggableSection = (props) => {
/>
</div>
{/* Render Add/Remove/Collapse */}
<ActionHandle
removeRow={removeRow}
addRow={addRow}

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

@@ -1,5 +1,9 @@
@import '../../../scss/styles.scss';
//////////////////////
// HELPER MIXINS
//////////////////////
@mixin realtively-position-handles {
.position-handle {
position: relative;
@@ -12,15 +16,35 @@
}
}
@mixin absolutely-position-handles {
.position-handle {
position: absolute;
top: 0; right: 100%; bottom: 0;
}
.action-handle {
position: absolute;
top: 0; bottom: 0; left: 100%;
}
}
//////////////////////
// COMPONENT STYLES
//////////////////////
.draggable-section {
display: flex;
position: relative;
padding-top: base(.75);
padding-bottom: base(.75);
margin-bottom: base(.75);
&__render-fields-wrapper {
width: 100%;
}
&.is-hovered {
&.is-hovered,
&:focus-within {
> .position-handle {
.position-handle__controls-container {
box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
@@ -45,12 +69,20 @@
}
@include mid-break {
@include realtively-position-handles;
@include realtively-position-handles();
}
}
//////////////////////
// EXTERNAL SCOPES
//////////////////////
.collection-edit {
@include absolutely-position-handles();
}
.field-type.repeater .field-type.repeater {
@include realtively-position-handles;
@include realtively-position-handles();
}

62
src/client/components/forms/field-types/Flexible/AddContentBlockModal/index.js
View File

@@ -1,62 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { asModal } from '@trbl/react-modal';
import './index.scss';
const baseClass = 'add-content-block-modal';
const AddContentBlockModal = (props) => {
const {
addRow,
blocks,
rowIndexBeingAdded,
closeAllModals,
} = props;
const handleAddRow = (blockType) => {
addRow(rowIndexBeingAdded, blockType);
closeAllModals();
};
return (
<div className={baseClass}>
<h2>Add a layout block</h2>
<ul>
{blocks.map((block, i) => {
return (
<li key={i}>
<button
onClick={() => handleAddRow(block.slug)}
type="button"
>
{block.labels.singular}
</button>
</li>
);
})}
</ul>
</div>
);
};
AddContentBlockModal.defaultProps = {
rowIndexBeingAdded: null,
};
AddContentBlockModal.propTypes = {
addRow: PropTypes.func.isRequired,
closeAllModals: PropTypes.func.isRequired,
blocks: PropTypes.arrayOf(
PropTypes.shape({
labels: PropTypes.shape({
singular: PropTypes.string,
}),
previewImage: PropTypes.string,
slug: PropTypes.string,
}),
).isRequired,
rowIndexBeingAdded: PropTypes.number,
};
export default asModal(AddContentBlockModal);

10
src/client/components/forms/field-types/Flexible/AddContentBlockModal/index.scss
View File

@@ -1,10 +0,0 @@
@import '../../../../../scss/styles';
.add-content-block-modal {
height: 100%;
background: rgba(white, .875);
&__wrap {
padding: base(1);
}
}

59
src/client/components/forms/field-types/Flexible/AddRowModal/index.js
View File

@@ -1,59 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import { asModal } from '@trbl/react-modal';
const baseClass = 'flexible-add-row-modal';
const AddRowModal = (props) => {
const {
addRow,
blocks,
rowIndexBeingAdded,
closeAllModals,
} = props;
const handleAddRow = (blockType) => {
addRow(rowIndexBeingAdded, blockType);
closeAllModals();
};
return (
<div className={baseClass}>
<ul>
{blocks.map((block, i) => {
return (
<li key={i}>
<button
onClick={() => handleAddRow(block.slug)}
type="button"
>
{block.labels.singular}
</button>
</li>
);
})}
</ul>
</div>
);
};
AddRowModal.defaultProps = {
rowIndexBeingAdded: null,
};
AddRowModal.propTypes = {
addRow: PropTypes.func.isRequired,
closeAllModals: PropTypes.func.isRequired,
blocks: PropTypes.arrayOf(
PropTypes.shape({
labels: PropTypes.shape({
singular: PropTypes.string,
}),
previewImage: PropTypes.string,
slug: PropTypes.string,
}),
).isRequired,
rowIndexBeingAdded: PropTypes.number,
};
export default asModal(AddRowModal);

4
src/client/components/forms/field-types/Flexible/index.js
View File

@@ -205,8 +205,8 @@ const Flexible = (props) => {
dispatchCollapsibleStates={dispatchCollapsibleStates}
collapsibleStates={collapsibleStates}
customComponentsPath={`${customComponentsPath}${name}.fields.`}
positionHandleVerticalAlignment="top"
actionHandleVerticalAlignment="top"
positionHandleVerticalAlignment="sticky"
actionHandleVerticalAlignment="sticky"
/>
);
}

2
src/client/components/icons/Plus/index.scss
View File

@@ -6,6 +6,6 @@
.stroke {
stroke: $color-dark-gray;
stroke-width: $style-stroke-width-m;
stroke-width: $style-stroke-width;
}
}

2
src/client/components/icons/X/index.scss
View File

@@ -3,6 +3,6 @@
.icon--x {
line {
stroke: $color-dark-gray;
stroke-width: $style-stroke-width-m;
stroke-width: $style-stroke-width;
}
}