From 72679376293d0fd920ae4b1c283b5008bd84f5f6 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Thu, 25 Jun 2020 16:15:09 -0400 Subject: [PATCH 01/18] adds collapsable toggle --- .../forms/DraggableSection/index.js | 67 ++++--- .../forms/DraggableSection/index.scss | 13 ++ .../forms/field-types/Flexible/index.js | 185 +++++++++--------- .../forms/field-types/rowReducer.js | 8 +- 4 files changed, 149 insertions(+), 124 deletions(-) diff --git a/src/client/components/forms/DraggableSection/index.js b/src/client/components/forms/DraggableSection/index.js index 345359d1e9..32eb434992 100644 --- a/src/client/components/forms/DraggableSection/index.js +++ b/src/client/components/forms/DraggableSection/index.js @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; -// import AnimateHeight from 'react-animate-height'; +import AnimateHeight from 'react-animate-height'; import { Draggable } from 'react-beautiful-dnd'; import ActionHandle from './ActionHandle'; @@ -9,6 +9,7 @@ import PositionHandle from './PositionHandle'; import RenderFields from '../RenderFields'; import './index.scss'; +import Button from '../../elements/Button'; const baseClass = 'draggable-section'; @@ -21,7 +22,6 @@ const DraggableSection = (props) => { parentPath, fieldSchema, initialData, - // dispatchRows, singularLabel, blockType, fieldTypes, @@ -30,19 +30,11 @@ const DraggableSection = (props) => { id, positionHandleVerticalAlignment, actionHandleVerticalAlignment, + toggleRowCollapse, } = props; - // const draggableRef = useRef(null); const [isHovered, setIsHovered] = useState(false); - // const handleCollapseClick = () => { - // draggableRef.current.focus(); - // dispatchRows({ - // type: 'UPDATE_COLLAPSIBLE_STATUS', - // index: rowIndex, - // }); - // }; - const classes = [ baseClass, isOpen && 'is-open', @@ -74,26 +66,40 @@ const DraggableSection = (props) => {
{blockType === 'flexible' && ( - +
+ + +
)} - {/* Render fields */} - { - return ({ - ...field, - path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`, - }); - })} - /> + + { + return ({ + ...field, + path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`, + }); + })} + /> +
{ }; DraggableSection.defaultProps = { + toggleRowCollapse: undefined, rowCount: null, initialData: undefined, singularLabel: '', @@ -125,13 +132,13 @@ DraggableSection.propTypes = { moveRow: PropTypes.func.isRequired, addRow: PropTypes.func.isRequired, removeRow: PropTypes.func.isRequired, + toggleRowCollapse: PropTypes.func, rowIndex: PropTypes.number.isRequired, parentPath: PropTypes.string.isRequired, singularLabel: PropTypes.string, fieldSchema: PropTypes.arrayOf(PropTypes.shape({})).isRequired, rowCount: PropTypes.number, initialData: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.shape({})]), - dispatchRows: PropTypes.func.isRequired, isOpen: PropTypes.bool, blockType: PropTypes.string, fieldTypes: PropTypes.shape({}).isRequired, diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index ede6cbab7d..210247dc87 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -39,6 +39,19 @@ padding-bottom: base(.75); margin-bottom: base(.75); + &__section-header { + display: flex; + + .toggle-collapse { + margin: 0 0 0 auto; + transform: rotate(.5turn); + + &--is-closed { + transform: rotate(0turn); + } + } + } + &__render-fields-wrapper { width: 100%; } diff --git a/src/client/components/forms/field-types/Flexible/index.js b/src/client/components/forms/field-types/Flexible/index.js index cec96e7ec8..2be3d77cbd 100644 --- a/src/client/components/forms/field-types/Flexible/index.js +++ b/src/client/components/forms/field-types/Flexible/index.js @@ -101,6 +101,12 @@ const Flexible = (props) => { }); }; + const toggleCollapse = (index) => { + dispatchRows({ + type: 'TOGGLE_COLLAPSE', index, rows, + }); + }; + const onDragEnd = (result) => { if (!result.destination) return; const sourceIndex = result.source.index; @@ -123,98 +129,97 @@ const Flexible = (props) => { }, [dataToInitialize, setValue]); return ( - <> - -
-
-

{label}

- -
- - {provided => ( -
- {rows.length > 0 && rows.map((row, i) => { - let { blockType } = row.data; - - if (!blockType) { - blockType = dataToInitialize?.[i]?.blockType; - } - - const blockToRender = blocks.find(block => block.slug === blockType); - - if (blockToRender) { - return ( - addRow(i, blockType)} - removeRow={() => removeRow(i)} - rowIndex={i} - fieldSchema={[ - ...blockToRender.fields, - { - name: 'blockType', - type: 'text', - hidden: 'admin', - }, { - name: 'blockName', - type: 'text', - hidden: 'admin', - }, - ]} - singularLabel={blockToRender?.labels?.singular} - initialData={row.data} - dispatchRows={dispatchRows} - blockType="flexible" - customComponentsPath={`${customComponentsPath}${name}.fields.`} - positionHandleVerticalAlignment="sticky" - actionHandleVerticalAlignment="sticky" - /> - ); - } - - return null; - }) - } - {provided.placeholder} -
- )} - - -
- - {`Add ${singularLabel}`} - - )} + +
+
+

{label}

+ +
+ + {provided => ( +
- - -
+ {rows.length > 0 && rows.map((row, i) => { + let { blockType } = row.data; + + if (!blockType) { + blockType = dataToInitialize?.[i]?.blockType; + } + + const blockToRender = blocks.find(block => block.slug === blockType); + + if (blockToRender) { + return ( + addRow(i, blockType)} + removeRow={() => removeRow(i)} + toggleRowCollapse={() => toggleCollapse(i)} + rowIndex={i} + fieldSchema={[ + ...blockToRender.fields, + { + name: 'blockType', + type: 'text', + hidden: 'admin', + }, { + name: 'blockName', + type: 'text', + hidden: 'admin', + }, + ]} + singularLabel={blockToRender?.labels?.singular} + initialData={row.data} + dispatchRows={dispatchRows} + blockType="flexible" + customComponentsPath={`${customComponentsPath}${name}.fields.`} + positionHandleVerticalAlignment="sticky" + actionHandleVerticalAlignment="sticky" + /> + ); + } + + return null; + }) + } + {provided.placeholder} +
+ )} + + +
+ + {`Add ${singularLabel}`} + + )} + > + +
- - +
+ ); }; diff --git a/src/client/components/forms/field-types/rowReducer.js b/src/client/components/forms/field-types/rowReducer.js index 7f06517e71..4faeeb5ddc 100644 --- a/src/client/components/forms/field-types/rowReducer.js +++ b/src/client/components/forms/field-types/rowReducer.js @@ -11,6 +11,10 @@ const reducer = (currentState, action) => { case 'SET_ALL': return rows; + case 'TOGGLE_COLLAPSE': + stateCopy[index].open = !stateCopy[index].open; + return stateCopy; + case 'ADD': stateCopy.splice(index + 1, 0, { open: true, @@ -33,10 +37,6 @@ const reducer = (currentState, action) => { stateCopy.splice(index, 1); return stateCopy; - case 'UPDATE_COLLAPSIBLE_STATUS': - stateCopy[index].open = !stateCopy[index].open; - return stateCopy; - case 'MOVE': { const stateCopyWithNewData = stateCopy.map((row, i) => { return { From 7265d63403131d76375f0e4e3b08d16a61fc29c1 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Thu, 25 Jun 2020 17:40:45 -0400 Subject: [PATCH 02/18] adjusts style for collapsible chevron color --- demo/content-blocks/Quote.js | 56 +++++++++---------- .../forms/DraggableSection/index.scss | 15 +++++ .../forms/field-types/Flexible/index.js | 4 +- 3 files changed, 46 insertions(+), 29 deletions(-) diff --git a/demo/content-blocks/Quote.js b/demo/content-blocks/Quote.js index bedf28508d..2cdaa87a54 100644 --- a/demo/content-blocks/Quote.js +++ b/demo/content-blocks/Quote.js @@ -1,30 +1,30 @@ module.exports = { - slug: 'quote', - labels: { - singular: 'Quote', - plural: 'Quotes', - }, - fields: [ - { - name: 'author', - label: 'Author', - type: 'text', - maxLength: 100, - required: true, - }, - { - name: 'quote', - label: 'Quote', - type: 'textarea', - height: 100, - required: true, - }, - { - name: 'color', - label: 'Color', - type: 'text', - maxLength: 7, - required: true, - }, - ], + slug: 'quote', + labels: { + singular: 'Quote', + plural: 'Quotes', + }, + fields: [ + { + name: 'author', + label: 'Author', + type: 'text', + maxLength: 100, + required: true, + }, + { + name: 'quote', + label: 'Quote', + type: 'textarea', + height: 100, + required: true, + }, + { + name: 'color', + label: 'Color', + type: 'text', + maxLength: 7, + required: true, + }, + ], }; diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index 210247dc87..e938b9866e 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -79,6 +79,21 @@ opacity: 1; } } + + .toggle-collapse { + .btn__icon { + background-color: $color-gray; + + &:hover { + background-color: $color-dark-gray; + } + + } + + &:focus { + @include color-svg(white); + } + } } @include mid-break { diff --git a/src/client/components/forms/field-types/Flexible/index.js b/src/client/components/forms/field-types/Flexible/index.js index 2be3d77cbd..d37cebf671 100644 --- a/src/client/components/forms/field-types/Flexible/index.js +++ b/src/client/components/forms/field-types/Flexible/index.js @@ -126,18 +126,20 @@ const Flexible = (props) => { }, ]), []), }); - }, [dataToInitialize, setValue]); + }, [dataToInitialize]); return (

{label}

+
+ {provided => (
Date: Fri, 26 Jun 2020 09:38:29 -0400 Subject: [PATCH 03/18] adds styles for block search popup --- .../assets/images/generic-block-image.svg | 9 ++++ demo/content-blocks/CallToAction.js | 42 ++++++++--------- .../assets/images/generic-block-image.svg | 9 ++++ .../BlockSelector/BlockSearch/index.js | 17 ++++--- .../BlockSelector/BlockSearch/index.scss | 21 ++++++++- .../BlockSelector/BlockSelection/index.js | 47 +++++++++++++++++++ .../BlockSelector/BlockSelection/index.scss | 26 ++++++++++ .../BlockSelector/BlocksContainer/index.js | 5 +- .../BlockSelector/BlocksContainer/index.scss | 5 ++ .../BlockSelector/SelectableBlock/index.js | 32 ------------- .../forms/field-types/Flexible/index.js | 4 +- .../graphics/FallbackBlockImage/index.js | 40 ++++++++++++++++ .../components/graphics/Search/index.js | 34 ++++++++++++++ 13 files changed, 223 insertions(+), 68 deletions(-) create mode 100644 demo/client/assets/images/generic-block-image.svg create mode 100644 src/client/assets/images/generic-block-image.svg create mode 100644 src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js create mode 100644 src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss delete mode 100644 src/client/components/forms/field-types/Flexible/BlockSelector/SelectableBlock/index.js create mode 100644 src/client/components/graphics/FallbackBlockImage/index.js create mode 100644 src/client/components/graphics/Search/index.js diff --git a/demo/client/assets/images/generic-block-image.svg b/demo/client/assets/images/generic-block-image.svg new file mode 100644 index 0000000000..eb8029428f --- /dev/null +++ b/demo/client/assets/images/generic-block-image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/demo/content-blocks/CallToAction.js b/demo/content-blocks/CallToAction.js index 3cd21d18ae..b07dc60943 100644 --- a/demo/content-blocks/CallToAction.js +++ b/demo/content-blocks/CallToAction.js @@ -1,23 +1,23 @@ module.exports = { - slug: 'cta', - labels: { - singular: 'Call to Action', - plural: 'Calls to Action', - }, - fields: [ - { - name: 'label', - label: 'Label', - type: 'text', - maxLength: 100, - required: true, - }, - { - name: 'url', - label: 'URL', - type: 'text', - height: 100, - required: true, - }, - ], + slug: 'cta', + labels: { + singular: 'Call to Action', + plural: 'Calls to Action', + }, + fields: [ + { + name: 'label', + label: 'Label', + type: 'text', + maxLength: 100, + required: true, + }, + { + name: 'url', + label: 'URL', + type: 'text', + height: 100, + required: true, + }, + ], }; diff --git a/src/client/assets/images/generic-block-image.svg b/src/client/assets/images/generic-block-image.svg new file mode 100644 index 0000000000..eb8029428f --- /dev/null +++ b/src/client/assets/images/generic-block-image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js index d1b49fdfb9..f36339737c 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js @@ -1,22 +1,21 @@ import React from 'react'; -import PropTypes from 'prop-types'; + +import SearchIcon from '../../../../../graphics/Search'; import './index.scss'; const baseClass = 'block-search'; -const BlockSearch = (props) => { - const {} = props; - +const BlockSearch = () => { return (
- Search... + +
); }; -BlockSearch.defaultProps = {}; - -BlockSearch.propTypes = {}; - export default BlockSearch; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss index aaee5a0a9d..23e81e29a6 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss @@ -1 +1,20 @@ -@import '../../../../../../scss/styles'; +@import '../../../shared.scss'; + +$icon-width: base(1); +$icon-margin: base(.25); + +.block-search { + position: relative; + + &__input { + @include formInput; + padding-right: calc(#{$icon-width} + #{$icon-margin} * 2); + } + + .search { + position: absolute; + right: 0; + width: $icon-width; + margin: 0 $icon-margin; + } +} diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js new file mode 100644 index 0000000000..c4b437ff33 --- /dev/null +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import FallbackBlockImage from '../../../../../graphics/FallbackBlockImage'; + +import './index.scss'; + +const baseClass = 'block-selection'; + +const BlockSelection = (props) => { + const { addRow, addRowIndex, block } = props; + + const { labels, slug, blockImage } = block; + + return ( +
addRow(addRowIndex, slug)} + > +
+ +
+
{labels.singular}
+
+ ); +}; + +BlockSelection.defaultProps = { + addRow: undefined, + addRowIndex: 0, +}; + +BlockSelection.propTypes = { + addRow: PropTypes.func, + addRowIndex: PropTypes.number, + block: PropTypes.shape({ + labels: PropTypes.shape({ + singular: PropTypes.string, + }), + slug: PropTypes.string, + blockImage: PropTypes.string, + }).isRequired, +}; + +export default BlockSelection; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss new file mode 100644 index 0000000000..fef5ecac05 --- /dev/null +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss @@ -0,0 +1,26 @@ +@import '../../../../../../scss/styles'; + +.block-selection { + display: inline-flex; + flex-direction: column; + flex-wrap: wrap; + width: 33%; + padding: base(.75) base(.5); + cursor: pointer; + + &:hover { + background-color: $color-background-gray; + } + + &__image { + svg { + width: 100%; + height: auto; + } + } + + &__label { + margin-top: base(.25); + font-weight: 600; + } +} diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.js index 38c2f6f8f6..6ad791b401 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.js +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import SelectableBlock from '../SelectableBlock'; +import BlockSelection from '../BlockSelection'; import './index.scss'; @@ -14,14 +14,13 @@ const BlocksContainer = (props) => {
{blocks?.map((block, index) => { return ( - ); })} - Blocks to choose from...
); }; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss index aaee5a0a9d..a1385e5cc4 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss @@ -1 +1,6 @@ @import '../../../../../../scss/styles'; + +.blocks-container { + width: 100%; + margin-top: base(1); +} diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/SelectableBlock/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/SelectableBlock/index.js deleted file mode 100644 index b1bb343f96..0000000000 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/SelectableBlock/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const baseClass = 'selectable-block'; - -const SelectableBlock = (props) => { - const { addRow, addRowIndex, block } = props; - - const { labels, slug } = block; - - return ( -
addRow(addRowIndex, slug)} - > - {labels.singular} -
- ); -}; - -SelectableBlock.defaultProps = { - addRow: undefined, - addRowIndex: 0, -}; - -SelectableBlock.propTypes = { - addRow: PropTypes.func, - addRowIndex: PropTypes.number, -}; - -export default SelectableBlock; diff --git a/src/client/components/forms/field-types/Flexible/index.js b/src/client/components/forms/field-types/Flexible/index.js index d37cebf671..674761eba8 100644 --- a/src/client/components/forms/field-types/Flexible/index.js +++ b/src/client/components/forms/field-types/Flexible/index.js @@ -14,7 +14,7 @@ import { useRenderedFields } from '../../RenderFields'; import Error from '../../Error'; import useFieldType from '../../useFieldType'; import Popup from '../../../elements/Popup'; -import BlocksContainer from './BlockSelector/BlocksContainer'; +import BlockSelector from './BlockSelector'; import { flexible } from '../../../../../fields/validations'; import './index.scss'; @@ -213,7 +213,7 @@ const Flexible = (props) => { )} > - { + return ( + + + + + + + + + + ); +}; + +export default FallbackBlockImage; diff --git a/src/client/components/graphics/Search/index.js b/src/client/components/graphics/Search/index.js new file mode 100644 index 0000000000..dc8e356d96 --- /dev/null +++ b/src/client/components/graphics/Search/index.js @@ -0,0 +1,34 @@ +import React from 'react'; + +const Search = () => { + return ( + + + + + ); +}; + +export default Search; From aa5da49514ffb33986ef6b1636cd447fec356a42 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Fri, 26 Jun 2020 15:19:54 -0400 Subject: [PATCH 04/18] adjusts component props, popup button composition and more --- .../assets/images/generic-block-image.svg | 0 demo/content-blocks/Quote.js | 1 + demo/server.js | 2 + .../elements/Popup/PopupButton/index.js | 56 +++++++++++++++++++ .../elements/Popup/PopupButton/index.scss | 5 ++ src/client/components/elements/Popup/index.js | 36 +++--------- .../DraggableSection/ActionHandle/index.js | 4 +- .../DraggableSection/ActionHandle/index.scss | 3 +- .../PositionHandle/index.scss | 2 +- .../forms/DraggableSection/index.js | 4 +- .../forms/DraggableSection/index.scss | 14 ++--- .../BlockSelector/BlockSearch/index.js | 14 ++++- .../BlockSelector/BlockSearch/index.scss | 2 + .../BlockSelector/BlockSelection/index.js | 15 ++++- .../Flexible/BlockSelector/index.js | 27 +++++++-- .../forms/field-types/Flexible/index.js | 16 +++--- .../forms/field-types/Flexible/index.scss | 1 + 17 files changed, 147 insertions(+), 55 deletions(-) rename demo/client/{ => static}/assets/images/generic-block-image.svg (100%) create mode 100644 src/client/components/elements/Popup/PopupButton/index.js create mode 100644 src/client/components/elements/Popup/PopupButton/index.scss diff --git a/demo/client/assets/images/generic-block-image.svg b/demo/client/static/assets/images/generic-block-image.svg similarity index 100% rename from demo/client/assets/images/generic-block-image.svg rename to demo/client/static/assets/images/generic-block-image.svg diff --git a/demo/content-blocks/Quote.js b/demo/content-blocks/Quote.js index 2cdaa87a54..9d4d095a91 100644 --- a/demo/content-blocks/Quote.js +++ b/demo/content-blocks/Quote.js @@ -1,4 +1,5 @@ module.exports = { + blockImage: '/static/assets/images/generic-block-image.svg', slug: 'quote', labels: { singular: 'Quote', diff --git a/demo/server.js b/demo/server.js index 49faeb6b70..a55553efa6 100644 --- a/demo/server.js +++ b/demo/server.js @@ -4,6 +4,8 @@ const Payload = require('../src'); const expressApp = express(); +expressApp.use('/static', express.static(path.resolve(__dirname, 'client/static'))); + const payload = new Payload({ email: { provider: 'mock', diff --git a/src/client/components/elements/Popup/PopupButton/index.js b/src/client/components/elements/Popup/PopupButton/index.js new file mode 100644 index 0000000000..8645d38e63 --- /dev/null +++ b/src/client/components/elements/Popup/PopupButton/index.js @@ -0,0 +1,56 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import './index.scss'; + +const baseClass = 'popup-button'; + +const PopupButton = (props) => { + const { + buttonType, + button, + setActive, + active, + } = props; + + const classes = [ + baseClass, + `${baseClass}--${buttonType}`, + ].filter(Boolean).join(' '); + + if (buttonType === 'custom') { + return ( +
setActive(!active)} + className={classes} + > + {button} +
+ ); + } + + return ( + + ); +}; + +PopupButton.defaultProps = { + buttonType: null, +}; + +PopupButton.propTypes = { + buttonType: PropTypes.oneOf(['custom', 'default']), + button: PropTypes.node.isRequired, + setActive: PropTypes.func.isRequired, + active: PropTypes.bool.isRequired, +}; + +export default PopupButton; diff --git a/src/client/components/elements/Popup/PopupButton/index.scss b/src/client/components/elements/Popup/PopupButton/index.scss new file mode 100644 index 0000000000..27c47e294e --- /dev/null +++ b/src/client/components/elements/Popup/PopupButton/index.scss @@ -0,0 +1,5 @@ +@import '../../../../scss/styles.scss'; + +.popup-button { + display: inline-flex; +} diff --git a/src/client/components/elements/Popup/index.js b/src/client/components/elements/Popup/index.js index 72ca2f8de7..27686826f0 100644 --- a/src/client/components/elements/Popup/index.js +++ b/src/client/components/elements/Popup/index.js @@ -2,37 +2,14 @@ import React, { useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import { useWindowInfo } from '@trbl/react-window-info'; import { useScrollInfo } from '@trbl/react-scroll-info'; + import useThrottledEffect from '../../../hooks/useThrottledEffect'; +import PopupButton from './PopupButton'; import './index.scss'; const baseClass = 'popup'; -const ClickableButton = ({ - buttonType, button, setActive, active, -}) => { - if (buttonType === 'custom') { - return ( -
setActive(!active)} - > - {button} -
- ); - } - - return ( - - ); -}; - const Popup = (props) => { const { render, align, size, color, pointerAlignment, button, buttonType, children, showOnHover, @@ -90,7 +67,10 @@ const Popup = (props) => { return (
-
+
{showOnHover ? (
{ onMouseEnter={() => setActive(true)} onMouseLeave={() => setActive(false)} > - {
) : ( - { icon="x" iconPosition="left" iconStyle="with-border" - onClick={() => removeRow()} + onClick={removeRow} /> )} > @@ -58,7 +58,7 @@ const ActionHandle = (props) => { icon="plus" iconPosition="left" iconStyle="with-border" - onClick={() => addRow()} + onClick={addRow} /> )} > diff --git a/src/client/components/forms/DraggableSection/ActionHandle/index.scss b/src/client/components/forms/DraggableSection/ActionHandle/index.scss index 2952b27525..73ff0474c8 100644 --- a/src/client/components/forms/DraggableSection/ActionHandle/index.scss +++ b/src/client/components/forms/DraggableSection/ActionHandle/index.scss @@ -3,11 +3,12 @@ .action-handle { padding: base(.5); padding-left: base(.75); - margin-bottom: base(.5); + margin-bottom: base(.75); &__controls-container { position: relative; height: 100%; + z-index: $z-nav; } &__controls { diff --git a/src/client/components/forms/DraggableSection/PositionHandle/index.scss b/src/client/components/forms/DraggableSection/PositionHandle/index.scss index 10ff121c22..6344ae1bec 100644 --- a/src/client/components/forms/DraggableSection/PositionHandle/index.scss +++ b/src/client/components/forms/DraggableSection/PositionHandle/index.scss @@ -2,7 +2,7 @@ .position-handle { padding-right: base(1); - margin-bottom: base(.5); + margin-bottom: base(.75); &__controls-container { position: relative; diff --git a/src/client/components/forms/DraggableSection/index.js b/src/client/components/forms/DraggableSection/index.js index 32eb434992..908cbf0967 100644 --- a/src/client/components/forms/DraggableSection/index.js +++ b/src/client/components/forms/DraggableSection/index.js @@ -51,8 +51,9 @@ const DraggableSection = (props) => {
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} + onMouseOver={() => setIsHovered(true)} + onFocus={() => setIsHovered(true)} {...providedDrag.draggableProps} > @@ -105,7 +106,6 @@ const DraggableSection = (props) => { diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index e938b9866e..4198faadd9 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -56,8 +56,7 @@ width: 100%; } - &.is-hovered, - &:focus-within { + &.is-hovered { > .position-handle { .position-handle__controls-container { box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray; @@ -81,17 +80,14 @@ } .toggle-collapse { + @include color-svg(white); + .btn__icon { background-color: $color-gray; &:hover { background-color: $color-dark-gray; } - - } - - &:focus { - @include color-svg(white); } } } @@ -107,6 +103,10 @@ .collection-edit { @include absolutely-position-handles(); + + @include mid-break { + @include realtively-position-handles(); + } } .field-type.repeater .field-type.repeater { diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js index f36339737c..0d2efb4f7f 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import SearchIcon from '../../../../../graphics/Search'; @@ -6,16 +7,27 @@ import './index.scss'; const baseClass = 'block-search'; -const BlockSearch = () => { +const BlockSearch = (props) => { + const { setSearchTerm } = props; + + const handleChange = (e) => { + setSearchTerm(e.target.value); + }; + return (
); }; +BlockSearch.propTypes = { + setSearchTerm: PropTypes.func.isRequired, +}; + export default BlockSearch; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss index 23e81e29a6..a99332a919 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss @@ -5,6 +5,8 @@ $icon-margin: base(.25); .block-search { position: relative; + display: flex; + align-items: center; &__input { @include formInput; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js index c4b437ff33..eac4050fa1 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js @@ -8,18 +8,28 @@ import './index.scss'; const baseClass = 'block-selection'; const BlockSelection = (props) => { - const { addRow, addRowIndex, block } = props; + const { + addRow, addRowIndex, block, close, + } = props; const { labels, slug, blockImage } = block; + console.log(blockImage); + + const handleBlockSelection = () => { + close(); + addRow(addRowIndex, slug); + }; + return (
addRow(addRowIndex, slug)} + onClick={handleBlockSelection} >
+ {/* */}
{labels.singular}
@@ -42,6 +52,7 @@ BlockSelection.propTypes = { slug: PropTypes.string, blockImage: PropTypes.string, }).isRequired, + close: PropTypes.func.isRequired, }; export default BlockSelection; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/index.js index add1d0152e..2c1f392c88 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/index.js +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import BlockSearch from './BlockSearch'; @@ -7,16 +7,35 @@ import BlocksContainer from './BlocksContainer'; const baseClass = 'block-selector'; const BlockSelector = (props) => { + const { blocks, ...remainingProps } = props; + + const [searchTerm, setSearchTerm] = useState(''); + const [filteredBlocks, setFilteredBlocks] = useState(blocks); + + useEffect(() => { + const matchingBlocks = blocks.reduce((matchedBlocks, block) => { + if (block.slug.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) matchedBlocks.push(block); + return matchedBlocks; + }, []); + + setFilteredBlocks(matchingBlocks); + }, [searchTerm, blocks]); + return (
- - + +
); }; BlockSelector.defaultProps = {}; -BlockSelector.propTypes = {}; +BlockSelector.propTypes = { + blocks: PropTypes.arrayOf(PropTypes.shape({})).isRequired, +}; export default BlockSelector; diff --git a/src/client/components/forms/field-types/Flexible/index.js b/src/client/components/forms/field-types/Flexible/index.js index 674761eba8..22da57888a 100644 --- a/src/client/components/forms/field-types/Flexible/index.js +++ b/src/client/components/forms/field-types/Flexible/index.js @@ -212,13 +212,15 @@ const Flexible = (props) => { {`Add ${singularLabel}`} )} - > - - + render={({ close }) => ( + + )} + />
diff --git a/src/client/components/forms/field-types/Flexible/index.scss b/src/client/components/forms/field-types/Flexible/index.scss index f380bd853f..8d5702e684 100644 --- a/src/client/components/forms/field-types/Flexible/index.scss +++ b/src/client/components/forms/field-types/Flexible/index.scss @@ -3,6 +3,7 @@ .field-type.flexible { &__add-button-wrap { + .btn { color: $color-gray; margin: 0; From b2a09c8bd814a21cdad5ed35f3758ff3df44a32e Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Fri, 26 Jun 2020 16:06:48 -0400 Subject: [PATCH 05/18] enables the search bar as sticky to the add-block popup --- demo/collections/FlexibleContent.js | 3 ++- .../BlockSelector/BlockSearch/index.scss | 4 +++- .../BlockSelector/BlockSelection/index.js | 20 +++++++++++++------ .../BlockSelector/BlockSelection/index.scss | 8 +------- .../BlockSelector/BlocksContainer/index.scss | 6 ++++++ .../index.js | 4 ++-- 6 files changed, 28 insertions(+), 17 deletions(-) rename src/client/components/graphics/{FallbackBlockImage => DefaultBlockImage}/index.js (98%) diff --git a/demo/collections/FlexibleContent.js b/demo/collections/FlexibleContent.js index 6fb734f8bc..ec1c764554 100644 --- a/demo/collections/FlexibleContent.js +++ b/demo/collections/FlexibleContent.js @@ -1,6 +1,7 @@ const Email = require('../content-blocks/Email'); const Quote = require('../content-blocks/Quote'); const NumberBlock = require('../content-blocks/Number'); +const CallToAction = require('../content-blocks/CallToAction'); module.exports = { slug: 'flexible-content', @@ -14,7 +15,7 @@ module.exports = { label: 'Layout Blocks', singularLabel: 'Block', type: 'flexible', - blocks: [Email, NumberBlock, Quote], + blocks: [Email, NumberBlock, Quote, CallToAction], localized: true, required: true, }, diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss index a99332a919..d6d840d7b5 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss @@ -4,9 +4,11 @@ $icon-width: base(1); $icon-margin: base(.25); .block-search { - position: relative; + position: sticky; + top: 0; display: flex; align-items: center; + z-index: 1; &__input { @include formInput; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js index eac4050fa1..f3236a40f5 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import FallbackBlockImage from '../../../../../graphics/FallbackBlockImage'; +import DefaultBlockImage from '../../../../../graphics/DefaultBlockImage'; import './index.scss'; @@ -12,9 +12,9 @@ const BlockSelection = (props) => { addRow, addRowIndex, block, close, } = props; - const { labels, slug, blockImage } = block; - - console.log(blockImage); + const { + labels, slug, blockImage, blockImageAltText, + } = block; const handleBlockSelection = () => { close(); @@ -29,8 +29,15 @@ const BlockSelection = (props) => { onClick={handleBlockSelection} >
- {/* */} - + {blockImage + ? ( + {blockImageAltText} + ) + : + }
{labels.singular}
@@ -51,6 +58,7 @@ BlockSelection.propTypes = { }), slug: PropTypes.string, blockImage: PropTypes.string, + blockImageAltText: PropTypes.string, }).isRequired, close: PropTypes.func.isRequired, }; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss index fef5ecac05..88eb937f76 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss @@ -7,18 +7,12 @@ width: 33%; padding: base(.75) base(.5); cursor: pointer; + align-items: center; &:hover { background-color: $color-background-gray; } - &__image { - svg { - width: 100%; - height: auto; - } - } - &__label { margin-top: base(.25); font-weight: 600; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss index a1385e5cc4..5896c9019b 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss @@ -3,4 +3,10 @@ .blocks-container { width: 100%; margin-top: base(1); + display: flex; + flex-wrap: wrap; + align-items: center; + max-width: 450px; + max-height: 300px; + position: relative; } diff --git a/src/client/components/graphics/FallbackBlockImage/index.js b/src/client/components/graphics/DefaultBlockImage/index.js similarity index 98% rename from src/client/components/graphics/FallbackBlockImage/index.js rename to src/client/components/graphics/DefaultBlockImage/index.js index 06adc8bf74..30d1bb00e6 100644 --- a/src/client/components/graphics/FallbackBlockImage/index.js +++ b/src/client/components/graphics/DefaultBlockImage/index.js @@ -1,6 +1,6 @@ import React from 'react'; -const FallbackBlockImage = () => { +const DefaultBlockImage = () => { return ( { ); }; -export default FallbackBlockImage; +export default DefaultBlockImage; From 2a005c3d9f850e5d4dd17a3a379aa6e85b6262c8 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Fri, 26 Jun 2020 16:18:30 -0400 Subject: [PATCH 06/18] tweaks block popup style --- .../Flexible/BlockSelector/BlocksContainer/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss index 5896c9019b..45087a9a81 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss @@ -3,6 +3,7 @@ .blocks-container { width: 100%; margin-top: base(1); + margin-bottom: base(.5); display: flex; flex-wrap: wrap; align-items: center; From 1c84e8a97fede3c365bc105d2166b39074c60b2f Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Fri, 26 Jun 2020 16:23:55 -0400 Subject: [PATCH 07/18] renames handles to panels for the draggableSection --- .../{ActionHandle => ActionPanel}/index.js | 10 +++--- .../{ActionHandle => ActionPanel}/index.scss | 6 ++-- .../index.js | 10 +++--- .../index.scss | 6 ++-- .../forms/DraggableSection/index.js | 26 +++++++------- .../forms/DraggableSection/index.scss | 36 +++++++++---------- .../forms/field-types/Flexible/index.js | 2 -- .../forms/field-types/Repeater/index.js | 2 -- 8 files changed, 47 insertions(+), 51 deletions(-) rename src/client/components/forms/DraggableSection/{ActionHandle => ActionPanel}/index.js (92%) rename src/client/components/forms/DraggableSection/{ActionHandle => ActionPanel}/index.scss (89%) rename src/client/components/forms/DraggableSection/{PositionHandle => PositionPanel}/index.js (89%) rename src/client/components/forms/DraggableSection/{PositionHandle => PositionPanel}/index.scss (90%) diff --git a/src/client/components/forms/DraggableSection/ActionHandle/index.js b/src/client/components/forms/DraggableSection/ActionPanel/index.js similarity index 92% rename from src/client/components/forms/DraggableSection/ActionHandle/index.js rename to src/client/components/forms/DraggableSection/ActionPanel/index.js index 21a150c809..32af3f2df7 100644 --- a/src/client/components/forms/DraggableSection/ActionHandle/index.js +++ b/src/client/components/forms/DraggableSection/ActionPanel/index.js @@ -6,9 +6,9 @@ import Popup from '../../../elements/Popup'; import './index.scss'; -const baseClass = 'action-handle'; +const baseClass = 'action-panel'; -const ActionHandle = (props) => { +const ActionPanel = (props) => { const { addRow, removeRow, singularLabel, verticalAlignment, } = props; @@ -71,16 +71,16 @@ const ActionHandle = (props) => { ); }; -ActionHandle.defaultProps = { +ActionPanel.defaultProps = { singularLabel: 'Row', verticalAlignment: 'center', }; -ActionHandle.propTypes = { +ActionPanel.propTypes = { singularLabel: PropTypes.string, addRow: PropTypes.func.isRequired, removeRow: PropTypes.func.isRequired, verticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), }; -export default ActionHandle; +export default ActionPanel; diff --git a/src/client/components/forms/DraggableSection/ActionHandle/index.scss b/src/client/components/forms/DraggableSection/ActionPanel/index.scss similarity index 89% rename from src/client/components/forms/DraggableSection/ActionHandle/index.scss rename to src/client/components/forms/DraggableSection/ActionPanel/index.scss index 73ff0474c8..b86a02bf01 100644 --- a/src/client/components/forms/DraggableSection/ActionHandle/index.scss +++ b/src/client/components/forms/DraggableSection/ActionPanel/index.scss @@ -1,6 +1,6 @@ @import '../../../../scss/styles'; -.action-handle { +.action-panel { padding: base(.5); padding-left: base(.75); margin-bottom: base(.75); @@ -20,13 +20,13 @@ } &--vertical-alignment-top { - .action-handle__controls { + .action-panel__controls { justify-content: flex-start; } } &--vertical-alignment-sticky { - .action-handle__controls { + .action-panel__controls { position: sticky; top: 120px; height: unset; diff --git a/src/client/components/forms/DraggableSection/PositionHandle/index.js b/src/client/components/forms/DraggableSection/PositionPanel/index.js similarity index 89% rename from src/client/components/forms/DraggableSection/PositionHandle/index.js rename to src/client/components/forms/DraggableSection/PositionPanel/index.js index c126e783c2..fbf9f4f215 100644 --- a/src/client/components/forms/DraggableSection/PositionHandle/index.js +++ b/src/client/components/forms/DraggableSection/PositionPanel/index.js @@ -5,9 +5,9 @@ import Button from '../../../elements/Button'; import './index.scss'; -const baseClass = 'position-handle'; +const baseClass = 'position-panel'; -const PositionHandle = (props) => { +const PositionPanel = (props) => { const { dragHandleProps, moveRow, positionIndex, verticalAlignment, } = props; @@ -49,15 +49,15 @@ const PositionHandle = (props) => { ); }; -PositionHandle.defaultProps = { +PositionPanel.defaultProps = { verticalAlignment: 'center', }; -PositionHandle.propTypes = { +PositionPanel.propTypes = { dragHandleProps: PropTypes.shape({}).isRequired, positionIndex: PropTypes.number.isRequired, moveRow: PropTypes.func.isRequired, verticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), }; -export default PositionHandle; +export default PositionPanel; diff --git a/src/client/components/forms/DraggableSection/PositionHandle/index.scss b/src/client/components/forms/DraggableSection/PositionPanel/index.scss similarity index 90% rename from src/client/components/forms/DraggableSection/PositionHandle/index.scss rename to src/client/components/forms/DraggableSection/PositionPanel/index.scss index 6344ae1bec..c144ab1527 100644 --- a/src/client/components/forms/DraggableSection/PositionHandle/index.scss +++ b/src/client/components/forms/DraggableSection/PositionPanel/index.scss @@ -1,6 +1,6 @@ @import '../../../../scss/styles'; -.position-handle { +.position-panel { padding-right: base(1); margin-bottom: base(.75); @@ -19,13 +19,13 @@ } &--vertical-alignment-top { - .position-handle__controls { + .position-panel__controls { justify-content: flex-start; } } &--vertical-alignment-sticky { - .position-handle__controls { + .position-panel__controls { position: sticky; top: 120px; height: unset; diff --git a/src/client/components/forms/DraggableSection/index.js b/src/client/components/forms/DraggableSection/index.js index 908cbf0967..485dca6422 100644 --- a/src/client/components/forms/DraggableSection/index.js +++ b/src/client/components/forms/DraggableSection/index.js @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import AnimateHeight from 'react-animate-height'; import { Draggable } from 'react-beautiful-dnd'; -import ActionHandle from './ActionHandle'; +import ActionPanel from './ActionPanel'; import SectionTitle from './SectionTitle'; -import PositionHandle from './PositionHandle'; +import PositionPanel from './PositionPanel'; import RenderFields from '../RenderFields'; import './index.scss'; @@ -28,8 +28,8 @@ const DraggableSection = (props) => { customComponentsPath, isOpen, id, - positionHandleVerticalAlignment, - actionHandleVerticalAlignment, + positionPanelVerticalAlignment, + actionPanelVerticalAlignment, toggleRowCollapse, } = props; @@ -57,11 +57,11 @@ const DraggableSection = (props) => { {...providedDrag.draggableProps} > -
@@ -103,11 +103,11 @@ const DraggableSection = (props) => {
-
); @@ -124,8 +124,8 @@ DraggableSection.defaultProps = { blockType: '', customComponentsPath: '', isOpen: true, - positionHandleVerticalAlignment: 'center', - actionHandleVerticalAlignment: 'center', + positionPanelVerticalAlignment: 'sticky', + actionPanelVerticalAlignment: 'sticky', }; DraggableSection.propTypes = { @@ -144,8 +144,8 @@ DraggableSection.propTypes = { fieldTypes: PropTypes.shape({}).isRequired, customComponentsPath: PropTypes.string, id: PropTypes.string.isRequired, - positionHandleVerticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), - actionHandleVerticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), + positionPanelVerticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), + actionPanelVerticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), }; export default DraggableSection; diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index 4198faadd9..c30f84c7d8 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -4,25 +4,25 @@ // HELPER MIXINS ////////////////////// -@mixin realtively-position-handles { - .position-handle { +@mixin realtively-position-panels { + .position-panel { position: relative; right: 0; } - .action-handle { + .action-panel { position: relative; left: 0; } } -@mixin absolutely-position-handles { - .position-handle { +@mixin absolutely-position-panels { + .position-panel { position: absolute; top: 0; right: 100%; bottom: 0; } - .action-handle { + .action-panel { position: absolute; top: 0; bottom: 0; left: 100%; } @@ -57,24 +57,24 @@ } &.is-hovered { - > .position-handle { - .position-handle__controls-container { + > .position-panel { + .position-panel__controls-container { box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray; } - .position-handle__move-forward, - .position-handle__move-backward { + .position-panel__move-forward, + .position-panel__move-backward { opacity: 1; } - .position-handle__current-position { + .position-panel__current-position { color: $color-dark-gray; } } - > .action-handle { - .action-handle__add-row, - .action-handle__remove-row { + > .action-panel { + .action-panel__add-row, + .action-panel__remove-row { opacity: 1; } } @@ -93,7 +93,7 @@ } @include mid-break { - @include realtively-position-handles(); + @include realtively-position-panels(); } } @@ -102,15 +102,15 @@ ////////////////////// .collection-edit { - @include absolutely-position-handles(); + @include absolutely-position-panels(); @include mid-break { - @include realtively-position-handles(); + @include realtively-position-panels(); } } .field-type.repeater .field-type.repeater { - @include realtively-position-handles(); + @include realtively-position-panels(); } diff --git a/src/client/components/forms/field-types/Flexible/index.js b/src/client/components/forms/field-types/Flexible/index.js index 65b2991451..b4438ae69d 100644 --- a/src/client/components/forms/field-types/Flexible/index.js +++ b/src/client/components/forms/field-types/Flexible/index.js @@ -185,8 +185,6 @@ const Flexible = (props) => { dispatchRows={dispatchRows} blockType="flexible" customComponentsPath={`${customComponentsPath}${name}.fields.`} - positionHandleVerticalAlignment="sticky" - actionHandleVerticalAlignment="sticky" /> ); } diff --git a/src/client/components/forms/field-types/Repeater/index.js b/src/client/components/forms/field-types/Repeater/index.js index a0bef0d61a..1bd2f5e916 100644 --- a/src/client/components/forms/field-types/Repeater/index.js +++ b/src/client/components/forms/field-types/Repeater/index.js @@ -144,8 +144,6 @@ const Repeater = (props) => { initNull={row.initNull} dispatchRows={dispatchRows} customComponentsPath={`${customComponentsPath}${name}.fields.`} - positionHandleVerticalAlignment="sticky" - actionHandleVerticalAlignment="sticky" /> ); }) From 9fad400f75a03ea34e1680b2da9e64cf8da92fa5 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Fri, 26 Jun 2020 16:37:41 -0400 Subject: [PATCH 08/18] fixes dragHandleProps naming convention, reenabling dragging --- src/client/components/forms/DraggableSection/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/components/forms/DraggableSection/index.js b/src/client/components/forms/DraggableSection/index.js index 485dca6422..bce4eb0f9a 100644 --- a/src/client/components/forms/DraggableSection/index.js +++ b/src/client/components/forms/DraggableSection/index.js @@ -58,7 +58,7 @@ const DraggableSection = (props) => { > Date: Mon, 29 Jun 2020 13:51:24 -0400 Subject: [PATCH 09/18] tweaks styles for action/position draggable panels --- demo/collections/NestedRepeater.js | 14 +++- .../DraggableSection/ActionPanel/index.js | 74 +++++++++++++----- .../DraggableSection/ActionPanel/index.scss | 4 +- .../DraggableSection/PositionPanel/index.scss | 23 +++++- .../forms/DraggableSection/index.js | 74 ++++++++++-------- .../forms/DraggableSection/index.scss | 43 ++++++++-- .../BlockSelection/fallback-block-image.png | Bin 0 -> 952 bytes .../forms/field-types/Flexible/index.js | 9 +-- .../forms/field-types/Repeater/index.js | 12 ++- .../forms/field-types/Repeater/index.scss | 8 +- 10 files changed, 182 insertions(+), 79 deletions(-) create mode 100644 src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/fallback-block-image.png diff --git a/demo/collections/NestedRepeater.js b/demo/collections/NestedRepeater.js index 83ad08e636..127cadeeca 100644 --- a/demo/collections/NestedRepeater.js +++ b/demo/collections/NestedRepeater.js @@ -12,6 +12,10 @@ const NestedRepeater = { type: 'repeater', label: 'Repeater', name: 'repeater', + labels: { + singular: 'Parent Row', + plural: 'Parent Rows', + }, required: true, minRows: 2, maxRows: 4, @@ -19,13 +23,17 @@ const NestedRepeater = { { name: 'parentIdentifier', label: 'Parent Identifier', - defaultValue: 'test', + defaultValue: '', type: 'text', required: true, }, { type: 'repeater', name: 'nestedRepeater', + labels: { + singular: 'Child Row', + plural: 'Child Rows', + }, required: true, fields: [ { @@ -37,6 +45,10 @@ const NestedRepeater = { { type: 'repeater', name: 'deeplyNestedRepeater', + labels: { + singular: 'Grandchild Row', + plural: 'Grandchild Rows', + }, required: true, fields: [ { diff --git a/src/client/components/forms/DraggableSection/ActionPanel/index.js b/src/client/components/forms/DraggableSection/ActionPanel/index.js index 32af3f2df7..a835d30fbe 100644 --- a/src/client/components/forms/DraggableSection/ActionPanel/index.js +++ b/src/client/components/forms/DraggableSection/ActionPanel/index.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import Button from '../../../elements/Button'; import Popup from '../../../elements/Popup'; +import BlockSelector from '../../field-types/Flexible/BlockSelector'; import './index.scss'; @@ -10,9 +11,11 @@ const baseClass = 'action-panel'; const ActionPanel = (props) => { const { - addRow, removeRow, singularLabel, verticalAlignment, + addRow, removeRow, singularLabel, verticalAlignment, useFlexibleBlockSelection, blocks, rowIndex, } = props; + console.log(blocks); + const classes = [ baseClass, `${baseClass}--vertical-alignment-${verticalAlignment}`, @@ -44,27 +47,54 @@ const ActionPanel = (props) => { {singularLabel} - + )} + render={({ close }) => ( + + )} /> - )} - > - Add  - {singularLabel} - + ) + : ( + + )} + > + Add  + {singularLabel} + + ) + }
@@ -74,12 +104,14 @@ const ActionPanel = (props) => { ActionPanel.defaultProps = { singularLabel: 'Row', verticalAlignment: 'center', + useFlexibleBlockSelection: false, }; ActionPanel.propTypes = { singularLabel: PropTypes.string, addRow: PropTypes.func.isRequired, removeRow: PropTypes.func.isRequired, + useFlexibleBlockSelection: PropTypes.bool, verticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), }; diff --git a/src/client/components/forms/DraggableSection/ActionPanel/index.scss b/src/client/components/forms/DraggableSection/ActionPanel/index.scss index b86a02bf01..b011173f15 100644 --- a/src/client/components/forms/DraggableSection/ActionPanel/index.scss +++ b/src/client/components/forms/DraggableSection/ActionPanel/index.scss @@ -1,9 +1,9 @@ @import '../../../../scss/styles'; .action-panel { - padding: base(.5); + padding: 0 base(.5); padding-left: base(.75); - margin-bottom: base(.75); + margin-bottom: base(1); &__controls-container { position: relative; diff --git a/src/client/components/forms/DraggableSection/PositionPanel/index.scss b/src/client/components/forms/DraggableSection/PositionPanel/index.scss index c144ab1527..cf5677c483 100644 --- a/src/client/components/forms/DraggableSection/PositionPanel/index.scss +++ b/src/client/components/forms/DraggableSection/PositionPanel/index.scss @@ -1,12 +1,14 @@ @import '../../../../scss/styles'; +$controls-top-adjustment: base(.1); + .position-panel { padding-right: base(1); - margin-bottom: base(.75); + margin-bottom: base(1); &__controls-container { position: relative; - height: 100%; + min-height: 100%; box-shadow: #{$style-stroke-width-s} 0px 0px 0px $color-light-gray; } @@ -34,12 +36,12 @@ &__move-backward { transform: rotate(.5turn); - margin: 0 0 base(.25); + margin: 0; opacity: 0; } &__move-forward { - margin: base(.25) 0 0; + margin: 0; opacity: 0; } @@ -48,3 +50,16 @@ color: $color-gray; } } + + +.field-type.flexible { + .position-panel { + &__controls-container { + min-height: calc(100% + #{$controls-top-adjustment}); + } + + &__controls { + margin-top: - $controls-top-adjustment; + } + } +} diff --git a/src/client/components/forms/DraggableSection/index.js b/src/client/components/forms/DraggableSection/index.js index bce4eb0f9a..ca6beaee7e 100644 --- a/src/client/components/forms/DraggableSection/index.js +++ b/src/client/components/forms/DraggableSection/index.js @@ -31,13 +31,15 @@ const DraggableSection = (props) => { positionPanelVerticalAlignment, actionPanelVerticalAlignment, toggleRowCollapse, + blocks, + useCustomBlockSelection, } = props; const [isHovered, setIsHovered] = useState(false); const classes = [ baseClass, - isOpen && 'is-open', + isOpen ? 'is-open' : 'is-closed', isHovered && 'is-hovered', ].filter(Boolean).join(' '); @@ -57,16 +59,17 @@ const DraggableSection = (props) => { {...providedDrag.draggableProps} > - +
+ -
+
- {blockType === 'flexible' && ( + {blockType === 'flexible' && (
{ round />
- )} + )} - - { - return ({ - ...field, - path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`, - }); - })} - /> - + + { + return ({ + ...field, + path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`, + }); + })} + /> + +
+ +
- -
); }} diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index c30f84c7d8..735d82e78d 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -33,11 +33,19 @@ ////////////////////// .draggable-section { - display: flex; - position: relative; - padding-top: base(.75); - padding-bottom: base(.75); - margin-bottom: base(.75); + + &__content-wrapper { + display: flex; + position: relative; + padding-top: base(.75); + margin-bottom: base(.5); + } + + &.is-closed { + .draggable-section__content-wrapper { + margin-bottom: base(1.75); + } + } &__section-header { display: flex; @@ -56,7 +64,7 @@ width: 100%; } - &.is-hovered { + &.is-hovered > div { > .position-panel { .position-panel__controls-container { box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray; @@ -92,6 +100,11 @@ } } + label.field-label { + line-height: 1; + padding-bottom: base(.75) + } + @include mid-break { @include realtively-position-panels(); } @@ -113,5 +126,21 @@ @include realtively-position-panels(); } +.field-type.repeater > div, +.field-type.flexible > div { + > .draggable-section { + &:last-child &:not(.is-closed) { + .draggable-section__content-wrapper { + margin-bottom: 0; + } + } + } +} - +.field-type.repeater { + .draggable-section { + &__content-wrapper { + padding-top: 0; + } + } +} diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/fallback-block-image.png b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/fallback-block-image.png new file mode 100644 index 0000000000000000000000000000000000000000..977669be9088a0ec22a1f4e6b14942e2447a84e7 GIT binary patch literal 952 zcmV;p14sOcP)-}$(h*)rM|dF};e~XB7t#@4NJo?;M@%LY z84icCSS*6iXJ=<}eSIzG=jUQeE`(f7xTM`~2SRQ#ola#m8p+kwmE7OoOQBE@Q!?+` zSYNBv`XS;bh}r3M#D>fZiAY%9A;#lz;P$3uUdTA&Ai61;7LwRFpU)#d&$IlF39*GF z=5)K=SPMKBaYZo|5h7=8{t0me5&0fBxVyUxGM-JgOOj%-7_2R-Ks;|sBq6cFe!ssJ zZ&)0nk_{go9@b*=%-7eK)$Y24&DXl|J8y4q^8Ea~{(O0PX>1e+g(Tx4*laeFu!S}n zji3&@xVVsNwJMcLMScTpwhDqYmlsDyaIq~q4 z>O7Kq(?tx91Dl97Q{yH{szScJyljCU){QmOR2*aSl&J~1c4ySBVbiLl$mCH2R~oLK`NJ;~5sg67uAYm#KU4#_I@Li^)|s12R0v3W>Uzqh_L{wUxo3vJkL;u9H7cJtSo}PC7 axb+`slq&5V4z&jW0000kI9 literal 0 HcmV?d00001 diff --git a/src/client/components/forms/field-types/Flexible/index.js b/src/client/components/forms/field-types/Flexible/index.js index b4438ae69d..7b96279370 100644 --- a/src/client/components/forms/field-types/Flexible/index.js +++ b/src/client/components/forms/field-types/Flexible/index.js @@ -64,14 +64,11 @@ const Flexible = (props) => { }); const dataToInitialize = initialData || defaultValue; - const [addRowIndex, setAddRowIndex] = useState(null); const [rows, dispatchRows] = useReducer(reducer, []); const { customComponentsPath } = useRenderedFields(); const { getDataByPath } = useForm(); const addRow = (index, blockType) => { - setAddRowIndex(current => current + 1); - const data = getDataByPath(path); dispatchRows({ @@ -164,7 +161,7 @@ const Flexible = (props) => { id={row.key} parentPath={path} moveRow={moveRow} - addRow={() => addRow(i, blockType)} + addRow={addRow} removeRow={() => removeRow(i)} toggleRowCollapse={() => toggleCollapse(i)} rowIndex={i} @@ -185,6 +182,8 @@ const Flexible = (props) => { dispatchRows={dispatchRows} blockType="flexible" customComponentsPath={`${customComponentsPath}${name}.fields.`} + useFlexibleBlockSelection + blocks={blocks} /> ); } @@ -214,7 +213,7 @@ const Flexible = (props) => { )} diff --git a/src/client/components/forms/field-types/Repeater/index.js b/src/client/components/forms/field-types/Repeater/index.js index 1bd2f5e916..ad08574b90 100644 --- a/src/client/components/forms/field-types/Repeater/index.js +++ b/src/client/components/forms/field-types/Repeater/index.js @@ -25,12 +25,14 @@ const Repeater = (props) => { fields, defaultValue, initialData, - singularLabel, fieldTypes, validate, required, maxRows, minRows, + labels: { + singular: singularLabel, + }, } = props; const dataToInitialize = initialData || defaultValue; @@ -171,13 +173,15 @@ const Repeater = (props) => { Repeater.defaultProps = { label: '', - singularLabel: 'Row', defaultValue: [], initialData: [], validate: repeater, required: false, maxRows: undefined, minRows: undefined, + labels: { + singular: 'Row', + }, }; Repeater.propTypes = { @@ -191,7 +195,9 @@ Repeater.propTypes = { PropTypes.shape({}), ).isRequired, label: PropTypes.string, - singularLabel: PropTypes.string, + labels: PropTypes.shape({ + singular: PropTypes.string, + }), name: PropTypes.string.isRequired, path: PropTypes.string.isRequired, fieldTypes: PropTypes.shape({}).isRequired, diff --git a/src/client/components/forms/field-types/Repeater/index.scss b/src/client/components/forms/field-types/Repeater/index.scss index f865bfafb0..062844eb7b 100644 --- a/src/client/components/forms/field-types/Repeater/index.scss +++ b/src/client/components/forms/field-types/Repeater/index.scss @@ -4,7 +4,7 @@ background: white; &__add-button-wrap { - margin-left: 0; + margin-left: base(0); .btn { color: $color-gray; @@ -28,7 +28,11 @@ .field-type.repeater { .field-type.repeater__add-button-wrap { - margin-left: base(2.25); + margin-left: base(2.75); + } + + .field-type.repeater__header { + display: none; } } } From 992c3edc69ce213e44a586ef3780b7885f38b126 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Mon, 29 Jun 2020 13:54:03 -0400 Subject: [PATCH 10/18] removes old png image --- .../BlockSelection/fallback-block-image.png | Bin 952 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/fallback-block-image.png diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/fallback-block-image.png b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/fallback-block-image.png deleted file mode 100644 index 977669be9088a0ec22a1f4e6b14942e2447a84e7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 952 zcmV;p14sOcP)-}$(h*)rM|dF};e~XB7t#@4NJo?;M@%LY z84icCSS*6iXJ=<}eSIzG=jUQeE`(f7xTM`~2SRQ#ola#m8p+kwmE7OoOQBE@Q!?+` zSYNBv`XS;bh}r3M#D>fZiAY%9A;#lz;P$3uUdTA&Ai61;7LwRFpU)#d&$IlF39*GF z=5)K=SPMKBaYZo|5h7=8{t0me5&0fBxVyUxGM-JgOOj%-7_2R-Ks;|sBq6cFe!ssJ zZ&)0nk_{go9@b*=%-7eK)$Y24&DXl|J8y4q^8Ea~{(O0PX>1e+g(Tx4*laeFu!S}n zji3&@xVVsNwJMcLMScTpwhDqYmlsDyaIq~q4 z>O7Kq(?tx91Dl97Q{yH{szScJyljCU){QmOR2*aSl&J~1c4ySBVbiLl$mCH2R~oLK`NJ;~5sg67uAYm#KU4#_I@Li^)|s12R0v3W>Uzqh_L{wUxo3vJkL;u9H7cJtSo}PC7 axb+`slq&5V4z&jW0000kI9 From 482bceaf2213ca6c3f548582d7dc3a25b309e9b2 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Mon, 29 Jun 2020 17:53:45 -0400 Subject: [PATCH 11/18] adds horizontal alignment to popup component, fixes sidebar mobile hard width --- src/client/components/elements/Popup/index.js | 10 +- .../components/elements/Popup/index.scss | 116 ++++++++++++++---- .../DraggableSection/ActionPanel/index.js | 21 +++- .../DraggableSection/ActionPanel/index.scss | 6 +- .../DraggableSection/PositionPanel/index.scss | 2 +- .../forms/DraggableSection/index.js | 3 +- .../forms/DraggableSection/index.scss | 8 +- .../BlockSelector/BlockSearch/index.scss | 6 + .../BlockSelector/BlockSelection/index.js | 1 + .../BlockSelector/BlocksContainer/index.scss | 1 + .../Flexible/BlockSelector/index.js | 25 +++- .../forms/field-types/Flexible/index.js | 2 + .../views/collections/Edit/index.scss | 4 + src/client/scss/vars.scss | 8 ++ 14 files changed, 168 insertions(+), 45 deletions(-) diff --git a/src/client/components/elements/Popup/index.js b/src/client/components/elements/Popup/index.js index 27686826f0..eecc5b7a44 100644 --- a/src/client/components/elements/Popup/index.js +++ b/src/client/components/elements/Popup/index.js @@ -12,7 +12,7 @@ const baseClass = 'popup'; const Popup = (props) => { const { - render, align, size, color, pointerAlignment, button, buttonType, children, showOnHover, + render, align, size, color, button, buttonType, children, showOnHover, horizontalAlign, } = props; const [active, setActive] = useState(false); @@ -60,8 +60,8 @@ const Popup = (props) => { `${baseClass}--align-${align}`, `${baseClass}--size-${size}`, `${baseClass}--color-${color}`, - `${baseClass}--pointer-alignment-${pointerAlignment}`, - `${baseClass}--vertical-align-${verticalAlign}`, + `${baseClass}--v-align-${verticalAlign}`, + `${baseClass}--h-align-${horizontalAlign}`, active && `${baseClass}--active`, ].filter(Boolean).join(' '); @@ -116,19 +116,19 @@ Popup.defaultProps = { align: 'center', size: 'small', color: 'light', - pointerAlignment: 'left', children: undefined, render: undefined, buttonType: 'default', button: undefined, showOnHover: false, + horizontalAlign: 'left', }; Popup.propTypes = { render: PropTypes.func, children: PropTypes.node, align: PropTypes.oneOf(['left', 'center', 'right']), - pointerAlignment: PropTypes.oneOf(['left', 'center', 'right']), + horizontalAlign: PropTypes.oneOf(['left', 'center', 'right']), size: PropTypes.oneOf(['small', 'large', 'wide']), color: PropTypes.oneOf(['light', 'dark']), buttonType: PropTypes.oneOf(['default', 'custom']), diff --git a/src/client/components/elements/Popup/index.scss b/src/client/components/elements/Popup/index.scss index f4dc15acb5..8bbd4c615e 100644 --- a/src/client/components/elements/Popup/index.scss +++ b/src/client/components/elements/Popup/index.scss @@ -14,6 +14,8 @@ content: ' '; position: absolute; top: calc(100% - 1px); + border: 12px solid transparent; + border-top-color: white; } } @@ -22,7 +24,7 @@ } &__scroll { - width: calc(100% + #{$baseline}); + padding: base(1); overflow-y: scroll; } @@ -32,21 +34,12 @@ } //////////////////////////////// - // SIZES + // SIZE //////////////////////////////// &--size-small { .popup__content { @include shadow-sm; - - &:after { - border: 12px solid transparent; - border-top-color: white; - } - } - - .popup__scroll { - padding: base(1) base(2) base(1) base(1); } &.popup--align-left { @@ -60,6 +53,16 @@ } } + &--size-large { + .popup__content { + @include shadow-lg; + } + + .popup__scroll { + padding: base(1) base(1.5); + } + } + &--size-wide { .popup__content { @include shadow-sm; @@ -85,29 +88,55 @@ } } - &--color-dark { + //////////////////////////////// + // HORIZONTAL ALIGNMENT + //////////////////////////////// + + &--h-align-left { .popup__content { - background: $color-dark-gray; - color: white; + left: - base(1.75); &:after { - border-top-color: $color-dark-gray; + left: base(1.75); + } + } + } + + &--h-align-center { + .popup__content { + left: 50%; + transform: translateX(-50%); + + &:after { + left: 50%; + transform: translateX(-50%); + } + } + } + + &--h-align-right { + .popup__content { + right: - base(1.75); + + &:after { + right: base(1.75); } } } //////////////////////////////// - // VERTICAL ALIGNMENTS + // VERTICAL ALIGNMENT //////////////////////////////// - &--vertical-align-top { + &--v-align-top { .popup__content { bottom: calc(100% + #{$baseline}); } } - &--vertical-align-bottom { + &--v-align-bottom { .popup__content { + @include shadow-lg-top; top: calc(100% + #{$baseline}); &:after { @@ -120,16 +149,16 @@ } //////////////////////////////// - // POINTER POSITION + // COLOR //////////////////////////////// - &--pointer-alignment-center { + + &--color-dark { .popup__content { - left: 50%; - transform: translateX(-50%); + background: $color-dark-gray; + color: white; &:after { - left: 50%; - transform: translateX(-50%); + border-top-color: $color-dark-gray; } } } @@ -144,4 +173,43 @@ visibility: visible; } } + + @include mid-break { + &__scroll, + &--size-large .popup__scroll{ + padding: base(.75); + } + + &--h-align-left { + .popup__content { + left: - base(.5); + + &:after { + left: base(.5); + } + } + } + + &--h-align-center { + .popup__content { + left: 50%; + transform: translateX(-50%); + + &:after { + left: 50%; + transform: translateX(-50%); + } + } + } + + &--h-align-right { + .popup__content { + right: - base(.5); + + &:after { + right: base(.5); + } + } + } + } } diff --git a/src/client/components/forms/DraggableSection/ActionPanel/index.js b/src/client/components/forms/DraggableSection/ActionPanel/index.js index a835d30fbe..5fe1362fc4 100644 --- a/src/client/components/forms/DraggableSection/ActionPanel/index.js +++ b/src/client/components/forms/DraggableSection/ActionPanel/index.js @@ -11,11 +11,16 @@ const baseClass = 'action-panel'; const ActionPanel = (props) => { const { - addRow, removeRow, singularLabel, verticalAlignment, useFlexibleBlockSelection, blocks, rowIndex, + addRow, + removeRow, + singularLabel, + verticalAlignment, + useFlexibleBlockSelection, + blocks, + rowIndex, + isHovered, } = props; - console.log(blocks); - const classes = [ baseClass, `${baseClass}--vertical-alignment-${verticalAlignment}`, @@ -29,7 +34,7 @@ const ActionPanel = (props) => { showOnHover size="wide" color="dark" - pointerAlignment="center" + horizontalAlign="center" buttonType="custom" button={(
diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index 735d82e78d..698cda8932 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -41,6 +41,10 @@ margin-bottom: base(.5); } + .draggable-section__content-wrapper { + margin-bottom: 0; + } + &.is-closed { .draggable-section__content-wrapper { margin-bottom: base(1.75); @@ -81,9 +85,9 @@ } > .action-panel { - .action-panel__add-row, - .action-panel__remove-row { + .action-panel__controls { opacity: 1; + visibility: visible; } } diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss index d6d840d7b5..ae0f2f8aa1 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss @@ -21,4 +21,10 @@ $icon-margin: base(.25); width: $icon-width; margin: 0 $icon-margin; } + + @include mid-break { + &__input { + margin-bottom: 0; + } + } } diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js index f3236a40f5..b077ec2d04 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js @@ -17,6 +17,7 @@ const BlockSelection = (props) => { } = block; const handleBlockSelection = () => { + console.log('adding'); close(); addRow(addRowIndex, slug); }; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss index 45087a9a81..1f5a6e2f3a 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss @@ -7,6 +7,7 @@ display: flex; flex-wrap: wrap; align-items: center; + min-width: 300px; max-width: 450px; max-height: 300px; position: relative; diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/index.js b/src/client/components/forms/field-types/Flexible/BlockSelector/index.js index 2c1f392c88..ae5dca6a27 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/index.js +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/index.js @@ -7,10 +7,13 @@ import BlocksContainer from './BlocksContainer'; const baseClass = 'block-selector'; const BlockSelector = (props) => { - const { blocks, ...remainingProps } = props; + const { + blocks, close, parentIsHovered, watchParentHover, ...remainingProps + } = props; const [searchTerm, setSearchTerm] = useState(''); const [filteredBlocks, setFilteredBlocks] = useState(blocks); + const [isBlockSelectorHovered, setBlockSelectorHovered] = useState(false); useEffect(() => { const matchingBlocks = blocks.reduce((matchedBlocks, block) => { @@ -21,21 +24,37 @@ const BlockSelector = (props) => { setFilteredBlocks(matchingBlocks); }, [searchTerm, blocks]); + useEffect(() => { + if (!parentIsHovered && !isBlockSelectorHovered && close && watchParentHover) close(); + }, [isBlockSelectorHovered, parentIsHovered, close, watchParentHover]); + return ( -
+
setBlockSelectorHovered(true)} + onMouseLeave={() => setBlockSelectorHovered(false)} + >
); }; -BlockSelector.defaultProps = {}; +BlockSelector.defaultProps = { + close: null, + parentIsHovered: false, + watchParentHover: false, +}; BlockSelector.propTypes = { blocks: PropTypes.arrayOf(PropTypes.shape({})).isRequired, + close: PropTypes.func, + watchParentHover: PropTypes.bool, + parentIsHovered: PropTypes.bool, }; export default BlockSelector; diff --git a/src/client/components/forms/field-types/Flexible/index.js b/src/client/components/forms/field-types/Flexible/index.js index 7b96279370..1487698c73 100644 --- a/src/client/components/forms/field-types/Flexible/index.js +++ b/src/client/components/forms/field-types/Flexible/index.js @@ -199,6 +199,8 @@ const Flexible = (props) => {
Date: Mon, 29 Jun 2020 17:57:20 -0400 Subject: [PATCH 12/18] adds visibility to desktop hover items, on mobile --- .../forms/DraggableSection/ActionPanel/index.scss | 13 +++++++++++++ .../components/forms/DraggableSection/index.scss | 5 +++++ 2 files changed, 18 insertions(+) diff --git a/src/client/components/forms/DraggableSection/ActionPanel/index.scss b/src/client/components/forms/DraggableSection/ActionPanel/index.scss index 779dc29a80..a616ce1373 100644 --- a/src/client/components/forms/DraggableSection/ActionPanel/index.scss +++ b/src/client/components/forms/DraggableSection/ActionPanel/index.scss @@ -42,4 +42,17 @@ &__add-row { margin: base(.3) 0 0; } + + @include mid-break { + &__controls { + opacity: 1; + visibility: visible; + } + + &--vertical-alignment-sticky { + .action-panel__controls { + top: 100px; + } + } + } } diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index 698cda8932..c0f06e6662 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -111,6 +111,11 @@ @include mid-break { @include realtively-position-panels(); + + .position-panel__move-forward, + .position-panel__move-backward { + opacity: 1; + } } } From a02e0f33a85c66132dc8debc41497abd2a2974af Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Tue, 30 Jun 2020 09:31:22 -0400 Subject: [PATCH 13/18] style adjustments for draggableSection --- .../forms/DraggableSection/index.scss | 23 ++++++------------- .../forms/field-types/Repeater/index.scss | 2 +- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index c0f06e6662..e58b3ab240 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -33,16 +33,16 @@ ////////////////////// .draggable-section { + padding-bottom: base(.5); + + .draggable-section { + padding-bottom: 0; + } &__content-wrapper { display: flex; position: relative; padding-top: base(.75); - margin-bottom: base(.5); - } - - .draggable-section__content-wrapper { - margin-bottom: 0; } &.is-closed { @@ -135,17 +135,8 @@ @include realtively-position-panels(); } -.field-type.repeater > div, -.field-type.flexible > div { - > .draggable-section { - &:last-child &:not(.is-closed) { - .draggable-section__content-wrapper { - margin-bottom: 0; - } - } - } -} - +// remove padding above repeater rows to level +// the line with the top of the input label .field-type.repeater { .draggable-section { &__content-wrapper { diff --git a/src/client/components/forms/field-types/Repeater/index.scss b/src/client/components/forms/field-types/Repeater/index.scss index 062844eb7b..61a21c796e 100644 --- a/src/client/components/forms/field-types/Repeater/index.scss +++ b/src/client/components/forms/field-types/Repeater/index.scss @@ -28,7 +28,7 @@ .field-type.repeater { .field-type.repeater__add-button-wrap { - margin-left: base(2.75); + margin-left: base(3.25); } .field-type.repeater__header { From b5a41b6a2af2eb5291a812d41d9217689e8e8cd8 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Tue, 30 Jun 2020 13:48:32 -0400 Subject: [PATCH 14/18] popups are now self-aware horizontally and will override prop alignment if needed --- src/client/components/elements/Popup/index.js | 33 +++++++++--- .../components/elements/Popup/index.scss | 54 +++++++++++++++++++ .../DraggableSection/ActionPanel/index.scss | 5 +- 3 files changed, 84 insertions(+), 8 deletions(-) diff --git a/src/client/components/elements/Popup/index.js b/src/client/components/elements/Popup/index.js index eecc5b7a44..f485924456 100644 --- a/src/client/components/elements/Popup/index.js +++ b/src/client/components/elements/Popup/index.js @@ -15,12 +15,14 @@ const Popup = (props) => { render, align, size, color, button, buttonType, children, showOnHover, horizontalAlign, } = props; - const [active, setActive] = useState(false); - const [verticalAlign, setVerticalAlign] = useState('top'); - const { height: windowHeight } = useWindowInfo(); - const { y: scrollY } = useScrollInfo(); const buttonRef = useRef(null); const contentRef = useRef(null); + const [active, setActive] = useState(false); + const [verticalAlign, setVerticalAlign] = useState('top'); + const [forceHorizontalAlign, setForceHorizontalAlign] = useState(null); + + const { y: scrollY } = useScrollInfo(); + const { height: windowHeight } = useWindowInfo(); const handleClickOutside = (e) => { if (contentRef.current.contains(e.target)) { @@ -32,10 +34,26 @@ const Popup = (props) => { useThrottledEffect(() => { if (contentRef.current && buttonRef.current) { - const { height: contentHeight } = contentRef.current.getBoundingClientRect(); - const { y: buttonOffsetTop } = buttonRef.current.getBoundingClientRect(); + const { + height: contentHeight, + width: contentWidth, + right: contentRightEdge, + } = contentRef.current.getBoundingClientRect(); + const { y: buttonYCoord } = buttonRef.current.getBoundingClientRect(); - if (buttonOffsetTop > contentHeight) { + const windowWidth = window.innerWidth; + const distanceToRightEdge = windowWidth - contentRightEdge; + const distanceToLeftEdge = contentRightEdge - contentWidth; + + if (distanceToRightEdge <= 0) { + setForceHorizontalAlign('right'); + } + + if (distanceToLeftEdge <= 0) { + setForceHorizontalAlign('left'); + } + + if (buttonYCoord > contentHeight) { setVerticalAlign('top'); } else { setVerticalAlign('bottom'); @@ -62,6 +80,7 @@ const Popup = (props) => { `${baseClass}--color-${color}`, `${baseClass}--v-align-${verticalAlign}`, `${baseClass}--h-align-${horizontalAlign}`, + forceHorizontalAlign && `${baseClass}--force-h-align-${forceHorizontalAlign}`, active && `${baseClass}--active`, ].filter(Boolean).join(' '); diff --git a/src/client/components/elements/Popup/index.scss b/src/client/components/elements/Popup/index.scss index 8bbd4c615e..b328c9e297 100644 --- a/src/client/components/elements/Popup/index.scss +++ b/src/client/components/elements/Popup/index.scss @@ -9,6 +9,7 @@ opacity: 0; visibility: hidden; z-index: $z-modal; + max-width: calc(100vw - #{$baseline}); &:after { content: ' '; @@ -26,6 +27,7 @@ &__scroll { padding: base(1); overflow-y: scroll; + white-space: nowrap; } &:focus, @@ -124,6 +126,30 @@ } } + &--force-h-align-left { + .popup__content { + left: - base(1.75); + + &:after { + left: base(1.75); + right: unset; + transform: unset; + } + } + } + + &--force-h-align-right { + .popup__content { + right: - base(1.75); + + &:after { + right: base(1.75); + left: unset; + transform: unset; + } + } + } + //////////////////////////////// // VERTICAL ALIGNMENT //////////////////////////////// @@ -211,5 +237,33 @@ } } } + + &--force-h-align-left { + .popup__content { + left: - base(.5); + right: unset; + transform: unset; + + &:after { + left: base(.5); + right: unset; + transform: unset; + } + } + } + + &--force-h-align-right { + .popup__content { + right: - base(.5); + left: unset; + transform: unset; + + &:after { + right: base(.5); + left: unset; + transform: unset; + } + } + } } } diff --git a/src/client/components/forms/DraggableSection/ActionPanel/index.scss b/src/client/components/forms/DraggableSection/ActionPanel/index.scss index a616ce1373..2a771ad5f8 100644 --- a/src/client/components/forms/DraggableSection/ActionPanel/index.scss +++ b/src/client/components/forms/DraggableSection/ActionPanel/index.scss @@ -5,13 +5,16 @@ padding-left: base(.75); margin-bottom: base(1); + &:hover { + z-index: $z-nav; + } + &__controls-container { position: relative; height: 100%; } &__controls { - z-index: $z-nav; display: flex; justify-content: center; height: 100%; From e9ff8cb1b08a2f0c014a2fc596c7281dcff47e44 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Tue, 30 Jun 2020 13:55:34 -0400 Subject: [PATCH 15/18] removes forced alignment if unnecessary, better calculation to include content width --- src/client/components/elements/Popup/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/client/components/elements/Popup/index.js b/src/client/components/elements/Popup/index.js index f485924456..159407428b 100644 --- a/src/client/components/elements/Popup/index.js +++ b/src/client/components/elements/Popup/index.js @@ -42,15 +42,15 @@ const Popup = (props) => { const { y: buttonYCoord } = buttonRef.current.getBoundingClientRect(); const windowWidth = window.innerWidth; - const distanceToRightEdge = windowWidth - contentRightEdge; + const distanceToRightEdge = windowWidth - (contentRightEdge + contentWidth); const distanceToLeftEdge = contentRightEdge - contentWidth; if (distanceToRightEdge <= 0) { setForceHorizontalAlign('right'); - } - - if (distanceToLeftEdge <= 0) { + } else if (distanceToLeftEdge <= 0) { setForceHorizontalAlign('left'); + } else { + setForceHorizontalAlign(null); } if (buttonYCoord > contentHeight) { From c5c4fcd639524eecdcc19f011d663b13e85ac3c0 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Wed, 1 Jul 2020 13:57:45 -0400 Subject: [PATCH 16/18] general cleanup, hides position up/down arrows if up/down is not theoretically possible ie first/last row --- .../DraggableSection/ActionPanel/index.js | 9 ++++---- .../DraggableSection/PositionPanel/index.js | 11 ++++++--- .../DraggableSection/PositionPanel/index.scss | 8 +++++++ .../forms/DraggableSection/index.js | 4 +++- .../forms/field-types/Flexible/index.js | 23 +++++++++---------- .../forms/field-types/Repeater/index.js | 17 +++++++------- 6 files changed, 44 insertions(+), 28 deletions(-) diff --git a/src/client/components/forms/DraggableSection/ActionPanel/index.js b/src/client/components/forms/DraggableSection/ActionPanel/index.js index 5fe1362fc4..2ef155390c 100644 --- a/src/client/components/forms/DraggableSection/ActionPanel/index.js +++ b/src/client/components/forms/DraggableSection/ActionPanel/index.js @@ -15,7 +15,7 @@ const ActionPanel = (props) => { removeRow, singularLabel, verticalAlignment, - useFlexibleBlockSelection, + blockType, blocks, rowIndex, isHovered, @@ -52,7 +52,7 @@ const ActionPanel = (props) => { {singularLabel} - {useFlexibleBlockSelection + {blockType === 'flexible' ? ( { ActionPanel.defaultProps = { singularLabel: 'Row', verticalAlignment: 'center', - useFlexibleBlockSelection: false, + blockType: null, isHovered: false, }; @@ -121,9 +121,10 @@ ActionPanel.propTypes = { singularLabel: PropTypes.string, addRow: PropTypes.func.isRequired, removeRow: PropTypes.func.isRequired, - useFlexibleBlockSelection: PropTypes.bool, + blockType: PropTypes.oneOf(['flexible', 'repeater']), verticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), isHovered: PropTypes.bool, + rowIndex: PropTypes.number.isRequired, }; export default ActionPanel; diff --git a/src/client/components/forms/DraggableSection/PositionPanel/index.js b/src/client/components/forms/DraggableSection/PositionPanel/index.js index fbf9f4f215..fbba0ddd9c 100644 --- a/src/client/components/forms/DraggableSection/PositionPanel/index.js +++ b/src/client/components/forms/DraggableSection/PositionPanel/index.js @@ -9,7 +9,7 @@ const baseClass = 'position-panel'; const PositionPanel = (props) => { const { - dragHandleProps, moveRow, positionIndex, verticalAlignment, + dragHandleProps, moveRow, positionIndex, verticalAlignment, rowCount, } = props; const adjustedIndex = positionIndex + 1; @@ -19,6 +19,8 @@ const PositionPanel = (props) => { `${baseClass}--vertical-alignment-${verticalAlignment}`, ].filter(Boolean).join(' '); + console.log(rowCount); + console.log(positionIndex); return (
{ >
+
@@ -58,6 +62,7 @@ PositionPanel.propTypes = { positionIndex: PropTypes.number.isRequired, moveRow: PropTypes.func.isRequired, verticalAlignment: PropTypes.oneOf(['top', 'center', 'sticky']), + rowCount: PropTypes.number.isRequired, }; export default PositionPanel; diff --git a/src/client/components/forms/DraggableSection/PositionPanel/index.scss b/src/client/components/forms/DraggableSection/PositionPanel/index.scss index 741fc1c7ed..6a072b38f0 100644 --- a/src/client/components/forms/DraggableSection/PositionPanel/index.scss +++ b/src/client/components/forms/DraggableSection/PositionPanel/index.scss @@ -38,11 +38,19 @@ $controls-top-adjustment: base(.1); transform: rotate(.5turn); margin: 0; opacity: 0; + + &.first-row { + visibility: hidden; + } } &__move-forward { margin: 0; opacity: 0; + + &.last-row { + visibility: hidden; + } } &__current-position { diff --git a/src/client/components/forms/DraggableSection/index.js b/src/client/components/forms/DraggableSection/index.js index c71443d9da..62fcb865ab 100644 --- a/src/client/components/forms/DraggableSection/index.js +++ b/src/client/components/forms/DraggableSection/index.js @@ -19,6 +19,7 @@ const DraggableSection = (props) => { addRow, removeRow, rowIndex, + rowCount, parentPath, fieldSchema, initialData, @@ -61,6 +62,7 @@ const DraggableSection = (props) => { @@ -106,8 +108,8 @@ const DraggableSection = (props) => { { if (blockToRender) { return ( removeRow(i)} + moveRow={moveRow} toggleRowCollapse={() => toggleCollapse(i)} - rowIndex={i} + parentPath={path} + initialData={row.data} + customComponentsPath={`${customComponentsPath}${name}.fields.`} + fieldTypes={fieldTypes} fieldSchema={[ ...blockToRender.fields, { @@ -177,13 +183,6 @@ const Flexible = (props) => { hidden: 'admin', }, ]} - singularLabel={blockToRender?.labels?.singular} - initialData={row.data} - dispatchRows={dispatchRows} - blockType="flexible" - customComponentsPath={`${customComponentsPath}${name}.fields.`} - useFlexibleBlockSelection - blocks={blocks} /> ); } diff --git a/src/client/components/forms/field-types/Repeater/index.js b/src/client/components/forms/field-types/Repeater/index.js index ad08574b90..67315e56ee 100644 --- a/src/client/components/forms/field-types/Repeater/index.js +++ b/src/client/components/forms/field-types/Repeater/index.js @@ -131,21 +131,22 @@ const Repeater = (props) => { {rows.length > 0 && rows.map((row, i) => { return ( addRow(i)} - moveRow={moveRow} - removeRow={() => removeRow(i)} + isOpen={row.open} + rowCount={rows.length} rowIndex={i} - fieldSchema={fields} + addRow={() => addRow(i)} + removeRow={() => removeRow(i)} + moveRow={moveRow} + parentPath={path} initialData={row.data} initNull={row.initNull} - dispatchRows={dispatchRows} customComponentsPath={`${customComponentsPath}${name}.fields.`} + fieldTypes={fieldTypes} + fieldSchema={fields} /> ); }) From 2f60a527da1236fa52fc9b4953197dc7b66d2312 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Wed, 1 Jul 2020 14:07:12 -0400 Subject: [PATCH 17/18] alters the way up/down arrows are hidden if not needed by supressing opacity instead of completely hiding them --- .../forms/DraggableSection/PositionPanel/index.js | 2 -- .../forms/DraggableSection/PositionPanel/index.scss | 8 -------- src/client/components/forms/DraggableSection/index.scss | 6 ++++++ 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/client/components/forms/DraggableSection/PositionPanel/index.js b/src/client/components/forms/DraggableSection/PositionPanel/index.js index fbba0ddd9c..8b8c54214b 100644 --- a/src/client/components/forms/DraggableSection/PositionPanel/index.js +++ b/src/client/components/forms/DraggableSection/PositionPanel/index.js @@ -19,8 +19,6 @@ const PositionPanel = (props) => { `${baseClass}--vertical-alignment-${verticalAlignment}`, ].filter(Boolean).join(' '); - console.log(rowCount); - console.log(positionIndex); return (
Date: Wed, 1 Jul 2020 17:56:42 -0400 Subject: [PATCH 18/18] slims up the position-panel margin, fixes Popup self-awareness issues --- demo/collections/AllFields.js | 16 ++++++++++++++++ src/client/components/elements/Popup/index.js | 9 ++++++--- .../DraggableSection/PositionPanel/index.scss | 11 ++++++++++- .../components/forms/DraggableSection/index.scss | 1 + .../BlockSelector/BlockSelection/index.scss | 13 +++++++++++++ .../BlockSelector/BlocksContainer/index.scss | 4 ++-- .../Flexible/BlockSelector/index.scss | 8 ++++++++ .../forms/field-types/Repeater/index.scss | 2 +- .../graphics/DefaultBlockImage/index.js | 14 +++++++++----- 9 files changed, 66 insertions(+), 12 deletions(-) create mode 100644 src/client/components/forms/field-types/Flexible/BlockSelector/index.scss diff --git a/demo/collections/AllFields.js b/demo/collections/AllFields.js index efaa11119e..8d50268a59 100644 --- a/demo/collections/AllFields.js +++ b/demo/collections/AllFields.js @@ -1,3 +1,8 @@ +const Email = require('../content-blocks/Email'); +const Quote = require('../content-blocks/Quote'); +const NumberBlock = require('../content-blocks/Number'); +const CallToAction = require('../content-blocks/CallToAction'); + const AllFields = { slug: 'all-fields', labels: { @@ -164,6 +169,17 @@ const AllFields = { }, ], }, + { + type: 'flexible', + label: 'Flexible Content', + name: 'flexible', + minRows: 2, + singularLabel: 'Block', + blocks: [Email, NumberBlock, Quote, CallToAction], + localized: true, + required: true, + timestamps: true, + }, { type: 'relationship', label: 'Relationship to One Collection', diff --git a/src/client/components/elements/Popup/index.js b/src/client/components/elements/Popup/index.js index 159407428b..4482309df8 100644 --- a/src/client/components/elements/Popup/index.js +++ b/src/client/components/elements/Popup/index.js @@ -42,13 +42,16 @@ const Popup = (props) => { const { y: buttonYCoord } = buttonRef.current.getBoundingClientRect(); const windowWidth = window.innerWidth; - const distanceToRightEdge = windowWidth - (contentRightEdge + contentWidth); + const distanceToRightEdge = windowWidth - contentRightEdge; const distanceToLeftEdge = contentRightEdge - contentWidth; - if (distanceToRightEdge <= 0) { + if (horizontalAlign === 'left' && distanceToRightEdge <= 0) { setForceHorizontalAlign('right'); - } else if (distanceToLeftEdge <= 0) { + } else if (horizontalAlign === 'right' && distanceToLeftEdge <= 0) { setForceHorizontalAlign('left'); + } else if (horizontalAlign === 'center' && (distanceToLeftEdge <= contentWidth / 2 || distanceToRightEdge <= contentWidth / 2)) { + if (distanceToRightEdge > distanceToLeftEdge) setForceHorizontalAlign('left'); + else setForceHorizontalAlign('right'); } else { setForceHorizontalAlign(null); } diff --git a/src/client/components/forms/DraggableSection/PositionPanel/index.scss b/src/client/components/forms/DraggableSection/PositionPanel/index.scss index 741fc1c7ed..61b92d3e12 100644 --- a/src/client/components/forms/DraggableSection/PositionPanel/index.scss +++ b/src/client/components/forms/DraggableSection/PositionPanel/index.scss @@ -13,7 +13,7 @@ $controls-top-adjustment: base(.1); } &__controls { - padding-right: base(1.25); + padding-right: base(.65); display: flex; flex-direction: column; justify-content: center; @@ -49,9 +49,18 @@ $controls-top-adjustment: base(.1); text-align: center; color: $color-gray; } + + @include large-break { + padding-right: base(1); + + &__controls { + padding-right: base(.75); + } + } } +// External scopes .field-type.flexible { .position-panel { &__controls-container { diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss index 57bdb948b6..2d56121e43 100644 --- a/src/client/components/forms/DraggableSection/index.scss +++ b/src/client/components/forms/DraggableSection/index.scss @@ -94,6 +94,7 @@ .action-panel__controls { opacity: 1; visibility: visible; + z-index: $z-nav; } } diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss index 88eb937f76..50b5ae7fea 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss @@ -13,8 +13,21 @@ background-color: $color-background-gray; } + &__image { + svg, + img { + max-width: 100%; + } + } + &__label { margin-top: base(.25); font-weight: 600; + text-align: center; + white-space: initial; + } + + @include mid-break { + width: unset; } } diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss index 1f5a6e2f3a..c3014d2f5d 100644 --- a/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss @@ -7,8 +7,8 @@ display: flex; flex-wrap: wrap; align-items: center; - min-width: 300px; - max-width: 450px; + min-width: 450px; + max-width: 80vw; max-height: 300px; position: relative; } diff --git a/src/client/components/forms/field-types/Flexible/BlockSelector/index.scss b/src/client/components/forms/field-types/Flexible/BlockSelector/index.scss new file mode 100644 index 0000000000..6c5e738d1a --- /dev/null +++ b/src/client/components/forms/field-types/Flexible/BlockSelector/index.scss @@ -0,0 +1,8 @@ +@import '../../../../../scss/styles.scss'; + +.block-selector { + + @include mid-break { + min-width: 80vw; + } +} diff --git a/src/client/components/forms/field-types/Repeater/index.scss b/src/client/components/forms/field-types/Repeater/index.scss index 61a21c796e..1ea46f8133 100644 --- a/src/client/components/forms/field-types/Repeater/index.scss +++ b/src/client/components/forms/field-types/Repeater/index.scss @@ -28,7 +28,7 @@ .field-type.repeater { .field-type.repeater__add-button-wrap { - margin-left: base(3.25); + margin-left: base(2.65); } .field-type.repeater__header { diff --git a/src/client/components/graphics/DefaultBlockImage/index.js b/src/client/components/graphics/DefaultBlockImage/index.js index 30d1bb00e6..13ef649576 100644 --- a/src/client/components/graphics/DefaultBlockImage/index.js +++ b/src/client/components/graphics/DefaultBlockImage/index.js @@ -1,6 +1,10 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { v4 as uuid } from 'uuid'; const DefaultBlockImage = () => { + const [patternID] = useState(`pattern${uuid()}`); + const [imageID] = useState(`image${uuid()}`); + return ( { x="0.713013" width="80.574" height="52.7791" - fill="url(#pattern0)" + fill={`url(#${patternID})`} />