Merge pull request #22 from eea/develop

Add new controls

CHANGELOG.md

@@ -4,9 +4,35 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [3.3.4](https://github.com/eea/volto-block-style/compare/3.3.3...3.3.4)
+
+- New controls [`#23`](https://github.com/eea/volto-block-style/pull/23)
+-   Improve api [`#21`](https://github.com/eea/volto-block-style/pull/21)
+- Add clear button to size [`#20`](https://github.com/eea/volto-block-style/pull/20)
+- Code linting [`0d9ab18`](https://github.com/eea/volto-block-style/commit/0d9ab18f0817171e38153f61d8299771e2633384)
+- Add missing component [`2c7110c`](https://github.com/eea/volto-block-style/commit/2c7110c9612e59bd85a563543364afa0f0eb7ecd)
+- Fix config [`8029e6e`](https://github.com/eea/volto-block-style/commit/8029e6ef8a005464a165c6b24c69ec419f581702)
+- Add new layout controls [`613d015`](https://github.com/eea/volto-block-style/commit/613d015aa17d058b1ebe181115deb9a1bbe42a22)
+- Make sidebar form more usable [`7960ff8`](https://github.com/eea/volto-block-style/commit/7960ff86f21bf6f839caedea368075ab2518293e)
+- Merge develop [`0274ef8`](https://github.com/eea/volto-block-style/commit/0274ef8da1a8faa57de01ffd31f9413b0c978d45)
+- Add extra controls [`15ebf89`](https://github.com/eea/volto-block-style/commit/15ebf8925e1ea099b759a47da6e567a0a79c9621)
+- Improve box shadow calculation [`177db51`](https://github.com/eea/volto-block-style/commit/177db51146d7bc25fbda365abadefb76260d992b)
+- Improve box shadow calculation [`2fffb80`](https://github.com/eea/volto-block-style/commit/2fffb802795b8af96f64740c1b07d493422c4730)
+- Add range slider [`8a91ef1`](https://github.com/eea/volto-block-style/commit/8a91ef168df01e4a0f114596d50a401a14a41251)
+- Separate block wrapping; don't apply multiple times [`2adffd5`](https://github.com/eea/volto-block-style/commit/2adffd58a99af59bb42d72c54f2a05be3b9b2ea1)
+- Separate block wrapping; don't apply multiple times [`584e7a9`](https://github.com/eea/volto-block-style/commit/584e7a9859c7d417708f9aa78b83e94547f2f1ab)
+- Add Sonarqube tag using frontend addons list [`f6737ef`](https://github.com/eea/volto-block-style/commit/f6737ef68ba906c5fb72e18c77b060aa82ed0a73)
+- Add Sonarqube tag using frontend addons list [`6a4c6c1`](https://github.com/eea/volto-block-style/commit/6a4c6c16acc88471279a82a62b92555dc1ac20cc)
+- Add Sonarqube tag using frontend addons list [`2101b55`](https://github.com/eea/volto-block-style/commit/2101b550588402b37cd91b5d582e27a6255d6cac)
+- Add Sonarqube tag using frontend addons list [`2583c68`](https://github.com/eea/volto-block-style/commit/2583c68ea49ddbedc7b90b9d477cbbe4e2b779fd)
+- Add hidden toggle [`3b8ed26`](https://github.com/eea/volto-block-style/commit/3b8ed26a82c31ff430301adceea1174e92464a77)
+- Add a clear button to the box size widget [`4bdf803`](https://github.com/eea/volto-block-style/commit/4bdf8030d7a4d39d3a48b56ed6c8cddc311b3ff7)
+
 #### [3.3.3](https://github.com/eea/volto-block-style/compare/3.3.2...3.3.3)
 
-- Make add-on dependencies more flexible [`0f542cb`](https://github.com/eea/volto-block-style/commit/0f542cb741e96b1286ba2a10a1f5d2a86d72eaf7)
+> 25 June 2021
+
+- Make add-on dependencies more flexible [`#19`](https://github.com/eea/volto-block-style/pull/19)
 
 #### [3.3.2](https://github.com/eea/volto-block-style/compare/3.3.1...3.3.2)
 

Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-block-style"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,clms.land.copernicus.eu,biodiversity.europa.eu"
         DEPENDENCIES = ""
     }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-style",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "volto-block-style: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/ErrorBoundary.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // eslint-disable-next-line
+    console.error(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <strong>Error in component</strong>;
+    }
+
+    return this.props.children;
+  }
+}

src/StyleWrapper/StyleWrapperView.jsx

@@ -4,13 +4,50 @@ import cx from 'classnames';
 import config from '@plone/volto/registry';
 import { withCachedImages } from '@eeacms/volto-block-style/hocs';
 
+const getLineHeight = (fontSize) => {
+  switch (fontSize) {
+    case 'large':
+      return '110%';
+    case 'x-large':
+      return '130%';
+    default:
+      return;
+  }
+};
+
+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 = {}) {
   return {
+    ...(data.hidden && props.mode !== 'edit' ? { display: 'none' } : {}),
     ...(data.backgroundColor ? { backgroundColor: data.backgroundColor } : {}),
     ...(data.textColor ? { color: data.textColor } : {}),
     ...(data.textAlign ? { textAlign: data.textAlign } : {}),
-    ...(data.fontSize ? { fontSize: data.fontSize } : {}),
-    ...(data.isScreenHeight && props.screen.height
+    ...(data.fontSize
+      ? { fontSize: data.fontSize, lineHeight: getLineHeight(data.fontSize) }
+      : {}),
+    ...(data.isScreenHeight && props.screen.screenHeight
       ? {
           minHeight: (
             props.screen.height -
@@ -19,6 +56,16 @@ export function getInlineStyles(data, props = {}) {
           ).toPixel(),
         }
       : {}),
+    ...(data.shadowDepth && {
+      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,
+    }),
     // fill in more
   };
 }
@@ -38,6 +85,7 @@ const StyleWrapperView = (props) => {
     customId,
     isDropCap,
     isScreenHeight,
+    hidden = false,
   } = styleData;
   const containerType = data['@type'];
   const backgroundImage = styleData.backgroundImage;
@@ -53,6 +101,7 @@ const StyleWrapperView = (props) => {
     size ||
     customClass ||
     isDropCap ||
+    hidden ||
     customId;
 
   const attrs = {

src/StyleWrapper/schema.js

@@ -6,6 +6,11 @@ export const StyleSchema = () => ({
     {
       id: 'default',
       title: 'Default',
+      fields: [],
+    },
+    {
+      id: 'presets',
+      title: 'Preset styles',
       fields: ['style_name'],
     },
     {
@@ -14,17 +19,27 @@ export const StyleSchema = () => ({
       fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap'],
     },
     {
-      id: 'advanced',
-      title: 'Advanced',
+      id: 'decorations',
+      title: 'Decorations',
       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: {
@@ -53,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',
@@ -91,6 +114,37 @@ export const StyleSchema = () => ({
       description: 'First letter is styled as a drop cop',
       type: 'boolean',
     },
+    hidden: {
+      title: 'Hidden',
+      description: 'Hide this block',
+      type: 'boolean',
+    },
+    shadowDepth: {
+      widget: 'slider',
+      title: 'Shadow depth',
+      settings: {
+        min: 0,
+        max: 24,
+        step: 1,
+        start: 0,
+      },
+    },
+    shadowColor: {
+      title: 'Shadow color',
+      type: 'color',
+      widget: 'style_simple_color',
+      available_colors: config.settings.available_colors,
+    },
+    borderRadius: {
+      widget: 'slider',
+      title: 'Rounded Corner',
+      settings: {
+        min: 0,
+        max: 24,
+        step: 1,
+        start: 0,
+      },
+    },
   },
   required: [],
 });