Add new layout controls

eea · Jul 30, 2021 · 613d015 · 613d015
1 parent 7960ff8
commit 613d015
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 16 deletions.
diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
@@ -15,8 +15,30 @@ const getLineHeight = (fontSize) => {
   }
 };
 
+const getSide = (side, v) =>
+  `${v[side] ? `${v[side]}${v.unit ? v.unit : 'px'}` : ''}`;
+
+const getSides = (v) => {
+  return `${getSide('top', v)} ${getSide('right', v)} ${getSide(
+    'bottom',
+    v,
+  )} ${getSide('left', v)}`;
+};
+
+const hexColorToRGB = (hex) => {
+  const R = parseInt(hex.slice(1, 3), 16);
+  const G = parseInt(hex.slice(3, 5), 16);
+  const B = parseInt(hex.slice(5, 7), 16);
+  return [R, G, B];
+};
+
+const h2rgb = (hex) => {
+  if (!hex) return '0, 0, 0, ';
+  const [R, G, B] = hexColorToRGB(hex);
+  return `${R}, ${G}, ${B},`;
+};
+
 export function getInlineStyles(data, props = {}) {
-  // console.log('props', props);
   return {
     ...(data.hidden && props.mode !== 'edit' ? { display: 'none' } : {}),
     ...(data.backgroundColor ? { backgroundColor: data.backgroundColor } : {}),
@@ -35,10 +57,12 @@ export function getInlineStyles(data, props = {}) {
         }
       : {}),
     ...(data.shadowDepth && {
-      boxShadow: `0px 0px ${data.shadowDepth}px rgba(0, 0, 0, ${
-        (data.shadowDepth * 100) / 0.24
-      })`,
+      boxShadow: `0px 0px ${data.shadowDepth}px rgba(${h2rgb(
+        data.shadowColor,
+      )} ${(data.shadowDepth * 100) / 0.24})`,
     }),
+    ...(data.margin && { margin: getSides(data.margin) }),
+    ...(data.padding && { padding: getSides(data.padding) }),
     ...(data.borderRadius && {
       borderRadius: data.borderRadius,
     }),

diff --git a/src/StyleWrapper/schema.js b/src/StyleWrapper/schema.js
@@ -16,25 +16,30 @@ export const StyleSchema = () => ({
     {
       id: 'standard',
       title: 'Standard',
-      fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap', 'hidden'],
+      fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap'],
     },
     {
       id: 'decorations',
       title: 'Decorations',
-      fields: ['shadowDepth', 'shadowColor', 'borderRadius'],
-    },
-    {
-      id: 'advanced',
-      title: 'Advanced',
       fields: [
-        'isScreenHeight',
         'backgroundImage',
         'backgroundColor',
         'textColor',
-        'customClass',
-        'customId',
+        'borderRadius',
+        'shadowDepth',
+        'shadowColor',
       ],
     },
+    {
+      id: 'layout',
+      title: 'Layout',
+      fields: ['margin', 'padding', 'size', 'align'], // todo: width, conflicts with size
+    },
+    {
+      id: 'advanced',
+      title: 'Advanced',
+      fields: ['hidden', 'isScreenHeight', 'customClass', 'customId'],
+    },
   ],
   properties: {
     style_name: {
@@ -63,6 +68,14 @@ export const StyleSchema = () => ({
         ['xxx-large', 'xxx-large'],
       ],
     },
+    margin: {
+      title: 'Margin',
+      widget: 'quad_size',
+    },
+    padding: {
+      title: 'Padding',
+      widget: 'quad_size',
+    },
     size: {
       title: 'Box size',
       widget: 'style_size',

diff --git a/src/Widgets/QuadSize.jsx b/src/Widgets/QuadSize.jsx
@@ -0,0 +1,154 @@
+import React from 'react';
+import { Field, FormFieldWrapper } from '@plone/volto/components';
+import ErrorBoundary from '../ErrorBoundary';
+import { Grid } from 'semantic-ui-react';
+import { Slider } from './Slider';
+
+const fields = {
+  unitField: {
+    title: 'Unit',
+    columns: 2,
+    placeholder: 'Unit',
+    defaultValue: 'px',
+    choices: [
+      ['px', 'px'],
+      ['%', 'percentage'],
+      ['em', 'em'],
+      ['rem', 'rem'],
+    ],
+  },
+};
+
+const getMax = (unit) => {
+  switch (unit) {
+    case '%':
+      return 100;
+    case 'px':
+      return 100;
+    case 'em':
+      return 24;
+    case 'rem':
+      return 24;
+    default:
+      return 10;
+  }
+};
+
+const QuadSizeWidget = (props) => {
+  const {
+    value = {},
+    id,
+    onChange,
+    sliderSettings = {
+      max: 12,
+      min: 0,
+      step: 1,
+      start: 0,
+    },
+  } = props;
+  const {
+    top = 0,
+    right = 0,
+    bottom = 0,
+    left = 0,
+    unit = 'px',
+    unlock = false,
+  } = value;
+  const settings = {
+    ...sliderSettings,
+    max: getMax(unit),
+  };
+  // console.log('value', value);
+
+  return (
+    <ErrorBoundary>
+      <FormFieldWrapper {...props}>
+        <Field
+          columns={2}
+          id={`${id}-unit`}
+          {...fields.unitField}
+          onChange={(fid, val) => onChange(id, { ...value, unit: val })}
+          value={value.unit || 'px'}
+        />
+
+        {unlock ? (
+          <Grid columns={2}>
+            <Grid.Column width={3}></Grid.Column>
+            <Grid.Column width={6}>
+              <Slider
+                settings={{
+                  onChange: (val) => onChange(id, { ...value, top: val }),
+                  ...settings,
+                }}
+                value={top}
+                extra={<strong>{top}</strong>}
+              />
+            </Grid.Column>
+            <Grid.Column width={3}></Grid.Column>
+            <Grid.Column>
+              <Slider
+                settings={{
+                  onChange: (val) => onChange(id, { ...value, left: val }),
+                  ...settings,
+                }}
+                value={left}
+                extra={<strong>{left}</strong>}
+              />
+            </Grid.Column>
+            <Grid.Column>
+              <Slider
+                settings={{
+                  onChange: (val) => onChange(id, { ...value, right: val }),
+                  ...settings,
+                }}
+                value={right}
+                extra={<strong>{right}</strong>}
+              />
+            </Grid.Column>
+            <Grid.Column width={3}></Grid.Column>
+            <Grid.Column width={6}>
+              <Slider
+                settings={{
+                  onChange: (val) => onChange(id, { ...value, bottom: val }),
+                  ...settings,
+                }}
+                extra={<strong>{bottom}</strong>}
+                value={bottom}
+              />
+            </Grid.Column>
+            <Grid.Column width={3}></Grid.Column>
+          </Grid>
+        ) : (
+          <Field
+            id={`${id}-slider`}
+            settings={settings}
+            onChange={(fid, val) => {
+              onChange(id, {
+                ...value,
+                top: val,
+                left: val,
+                bottom: val,
+                right: val,
+              });
+            }}
+            value={top}
+            title="Size"
+            widget="slider"
+            columns={2}
+          />
+        )}
+
+        <Field
+          id={`${id}-lockSize`}
+          onChange={(fid, val) => onChange(id, { ...value, unlock: val })}
+          value={unlock}
+          title="Customize"
+          type="boolean"
+          columns={1}
+        />
+      </FormFieldWrapper>
+    </ErrorBoundary>
+  );
+};
+
+export default QuadSizeWidget;
diff --git a/src/Widgets/Slider.jsx b/src/Widgets/Slider.jsx
@@ -257,6 +257,7 @@ export class Slider extends Component {
     if (event.pageX) {
       pageX = event.pageX;
     } else {
+      // eslint-disable-next-line
       console.log('PageX undefined');
     }
     let value = this.determineValue(this.innerLeft, this.innerRight, pageX);
@@ -406,7 +407,9 @@ export class Slider extends Component {
                     : {}),
                   ...{ left: this.state.position + 'px' },
                 }}
-              />
+              >
+                {this.props.extra}
+              </div>
             )}
           </div>
         </div>
@@ -444,12 +447,19 @@ Slider.propTypes = {
 };
 
 const SliderWidget = (props) => {
-  const { id, onChange, settings = {}, ...rest } = props;
+  const { id, onChange, value, settings = {}, ...rest } = props;
   return (
     <FormFieldWrapper {...props}>
       <Slider
         {...rest}
-        settings={{ ...settings, onChange: (value) => onChange(id, value) }}
+        settings={{
+          ...settings,
+          onChange: (value) => {
+            onChange(id, value);
+          },
+        }}
+        value={value}
+        extra={<strong style={{ fontSize: 'x-small' }}>{value}</strong>}
       />
     </FormFieldWrapper>
   );

diff --git a/src/Widgets/range.css.js b/src/Widgets/range.css.js
@@ -51,6 +51,11 @@ const styles = {
     backgroundColor: '#205c90',
     boxShadow:
       '0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset',
+    display: 'flex',
+    color: 'white',
+    flexDirection: 'column',
+    textAlign: 'center',
+    fontSize: 'xx-small',
   },
   red: {
     backgroundColor: '#DB2828',

diff --git a/src/index.js b/src/index.js
@@ -9,6 +9,7 @@ import TextAlignWidget from './Widgets/TextAlign';
 import SliderWidget from './Widgets/Slider';
 import SizeWidget from './Widgets/Size';
 import SimpleColorPicker from './Widgets/SimpleColorPicker';
+import QuadSizeWidget from './Widgets/QuadSize';
 
 import './styles.less';
 
@@ -67,6 +68,8 @@ const applyConfig = (config) => {
   config.widgets.widget.style_size = SizeWidget; // avoid conflict for now
   config.widgets.widget.style_simple_color = SimpleColorPicker;
   config.widgets.widget.slider = SliderWidget;
+  config.widgets.widget.quad_size = QuadSizeWidget;
+  config.widgets.widget.four_sliders = FourSliders;
 
   // types of blocks that natively integrate with the volto-block-style and
   // allow passing the style as a prop;

diff --git a/src/styles.less b/src/styles.less
@@ -56,14 +56,17 @@
   }
 
   &.small {
+    min-width: 10%;
     max-width: 25%;
   }
 
   &.medium {
+    min-width: 25%;
     max-width: 50%;
   }
 
   &.large {
+    min-width: 50%;
     max-width: 100%;
   }