tweaks styles for action/position draggable panels

2020-06-29 13:51:24 -04:00
parent 9fad400f75
commit a69be94422
10 changed files with 182 additions and 79 deletions
--- 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}
          </Popup>

-          <Popup
-            showOnHover
-            size="wide"
-            color="dark"
-            pointerAlignment="center"
-            buttonType="custom"
-            button={(
-              <Button
-                className={`${baseClass}__add-row`}
-                round
-                buttonStyle="none"
-                icon="plus"
-                iconPosition="left"
-                iconStyle="with-border"
-                onClick={addRow}
+          {useFlexibleBlockSelection
+            ? (
+              <Popup
+                buttonType="custom"
+                button={(
+                  <Button
+                    className={`${baseClass}__add-row`}
+                    round
+                    buttonStyle="none"
+                    icon="plus"
+                    iconPosition="left"
+                    iconStyle="with-border"
+                  />
+                )}
+                render={({ close }) => (
+                  <BlockSelector
+                    blocks={blocks}
+                    addRow={addRow}
+                    addRowIndex={rowIndex}
+                    close={close}
+                  />
+                )}
              />
-            )}
-          >
-            Add&nbsp;
-            {singularLabel}
-          </Popup>
+            )
+            : (
+              <Popup
+                showOnHover
+                size="wide"
+                color="dark"
+                pointerAlignment="center"
+                buttonType="custom"
+                button={(
+                  <Button
+                    className={`${baseClass}__add-row`}
+                    round
+                    buttonStyle="none"
+                    icon="plus"
+                    iconPosition="left"
+                    iconStyle="with-border"
+                    onClick={addRow}
+                  />
+                )}
+              >
+                Add&nbsp;
+                {singularLabel}
+              </Popup>
+            )
+          }
        </div>
      </div>
    </div>
@@ -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']),
 };

--- 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;
--- 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;
+    }
+  }
+}
--- 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}
          >

-            <PositionPanel
-              dragHandleProps={providedDrag.dragHandleProps}
-              moveRow={moveRow}
-              positionIndex={rowIndex}
-              verticalAlignment={positionPanelVerticalAlignment}
-            />
+            <div className={`${baseClass}__content-wrapper`}>
+              <PositionPanel
+                dragHandleProps={providedDrag.dragHandleProps}
+                moveRow={moveRow}
+                positionIndex={rowIndex}
+                verticalAlignment={positionPanelVerticalAlignment}
+              />

-            <div className={`${baseClass}__render-fields-wrapper`}>
+              <div className={`${baseClass}__render-fields-wrapper`}>

-              {blockType === 'flexible' && (
+                {blockType === 'flexible' && (
                <div className={`${baseClass}__section-header`}>
                  <SectionTitle
                    label={singularLabel}
@@ -82,33 +85,36 @@ const DraggableSection = (props) => {
                    round
                  />
                </div>
-              )}
+                )}

-              <AnimateHeight
-                height={isOpen ? 'auto' : 0}
-                duration={0}
-              >
-                <RenderFields
-                  initialData={initialData}
-                  customComponentsPath={customComponentsPath}
-                  fieldTypes={fieldTypes}
-                  key={rowIndex}
-                  fieldSchema={fieldSchema.map((field) => {
-                    return ({
-                      ...field,
-                      path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`,
-                    });
-                  })}
-                />
-              </AnimateHeight>
+                <AnimateHeight
+                  height={isOpen ? 'auto' : 0}
+                  duration={0}
+                >
+                  <RenderFields
+                    initialData={initialData}
+                    customComponentsPath={customComponentsPath}
+                    fieldTypes={fieldTypes}
+                    key={rowIndex}
+                    fieldSchema={fieldSchema.map((field) => {
+                      return ({
+                        ...field,
+                        path: `${parentPath}.${rowIndex}${field.name ? `.${field.name}` : ''}`,
+                      });
+                    })}
+                  />
+                </AnimateHeight>
+              </div>
+
+              <ActionPanel
+                rowIndex={rowIndex}
+                removeRow={removeRow}
+                addRow={addRow}
+                singularLabel={singularLabel}
+                verticalAlignment={actionPanelVerticalAlignment}
+                {...props}
+              />
            </div>
-
-            <ActionPanel
-              removeRow={removeRow}
-              addRow={addRow}
-              singularLabel={singularLabel}
-              verticalAlignment={actionPanelVerticalAlignment}
-            />
          </div>
        );
      }}
--- 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;
+    }
+  }
+}
--- 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
--- 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) => {
              <BlockSelector
                blocks={blocks}
                addRow={addRow}
-                addRowIndex={addRowIndex}
+                addRowIndex={value}
                close={close}
              />
            )}
--- 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,
--- 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;
    }
  }
 }