Merge develop

eea · Jul 29, 2021 · 0274ef8 · 0274ef8
2 parents 2fffb80 + 177db51
commit 0274ef8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 4 deletions.
diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
@@ -4,13 +4,28 @@ 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;
+  }
+};
+
 export function getInlineStyles(data, props = {}) {
+  // console.log('props', 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 -
@@ -46,6 +61,7 @@ const StyleWrapperView = (props) => {
     customId,
     isDropCap,
     isScreenHeight,
+    hidden = false,
   } = styleData;
   const containerType = data['@type'];
   const backgroundImage = styleData.backgroundImage;
@@ -61,6 +77,7 @@ const StyleWrapperView = (props) => {
     size ||
     customClass ||
     isDropCap ||
+    hidden ||
     customId;
 
   const attrs = {

diff --git a/src/StyleWrapper/schema.js b/src/StyleWrapper/schema.js
@@ -11,7 +11,12 @@ export const StyleSchema = () => ({
     {
       id: 'standard',
       title: 'Standard',
-      fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap'],
+      fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap', 'hidden'],
+    },
+    {
+      id: 'decorations',
+      title: 'Decorations',
+      fields: ['shadowDepth', 'shadowColor', 'borderRadius'],
     },
     {
       id: 'decorations',
@@ -96,6 +101,11 @@ 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',

diff --git a/src/Widgets/Size.jsx b/src/Widgets/Size.jsx
@@ -6,8 +6,10 @@
 
 import React from 'react';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
 import ImageSizeWidget from '@plone/volto/components/manage/Blocks/Image/ImageSizeWidget';
+import { Button } from 'semantic-ui-react';
+import clearSVG from '@plone/volto/icons/clear.svg';
 
 // TODO: copy the styles from Volto's stylesheet
 
@@ -21,6 +23,18 @@ const SizeWidget = (props) => {
           data={{ size: value }}
           block={id}
         />
+        <Button.Group>
+          <Button
+            icon
+            basic
+            onClick={() => onChange(id, null)}
+            active={value === null}
+          >
+            <div className="image-sizes-text">
+              <Icon name={clearSVG} size="18px" />
+            </div>
+          </Button>
+        </Button.Group>
       </div>
     </FormFieldWrapper>
   );