Add fontSize; move bise styles to volto-bise

eea · Oct 8, 2020 · 48ceafb · 48ceafb
1 parent ff40a15
commit 48ceafb
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 65 deletions.
diff --git a/src/BlockStyleWrapper/Edit.jsx b/src/BlockStyleWrapper/Edit.jsx
@@ -1,8 +1,12 @@
 import React from 'react';
 import { StyleWrapperEdit, StyleWrapperView } from '../StyleWrapper';
 
+// For blocks, store the style data in data.styles, then
+// adapt the data.styles.[align,size,...] info to default data.align, data.size, etc.
+
 export default (props) => {
-  const { block, data, onChangeBlock } = props;
+  const { block, data = {}, onChangeBlock } = props;
+
   return (
     <StyleWrapperEdit
       {...props}

diff --git a/src/SidebarPopup/SidebarPopup.jsx b/src/SidebarPopup/SidebarPopup.jsx
@@ -25,6 +25,7 @@ const SidebarPopup = ({ children, open }, ref) => {
           ref={ref}
           key="sidebarpopup"
           className="sidebar-container"
+          style={{ overflowY: 'auto' }}
         >
           {children}
         </aside>

diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
@@ -7,6 +7,7 @@ export function getStyles(data) {
     backgroundColor: data.backgroundColor,
     color: data.textColor,
     textAlign: data.textAlign,
+    fontSize: data.fontSize,
     // fill in more
   };
 }
@@ -20,15 +21,11 @@ export default (props) => {
   const { data = {}, children } = props;
   const { style_name, align, size } = data;
   const style = getStyle(style_name);
-  const ViewWrapper = style?.viewComponent;
+  const ViewComponentWrapper = style?.viewComponent;
 
   return (
     <div
-      className={cx(
-        'block align',
-        style?.cssClass,
-        align,
-      )}
+      className={cx('block align', style?.cssClass, align)}
       style={getStyles(data)}
     >
       <div
@@ -39,7 +36,7 @@ export default (props) => {
           small: size === 's',
         })}
       >
-        {ViewWrapper ? <ViewWrapper {...props} /> : children}
+        {ViewComponentWrapper ? <ViewComponentWrapper {...props} /> : children}
       </div>
     </div>
   );

diff --git a/src/StyleWrapper/schema.js b/src/StyleWrapper/schema.js
@@ -11,7 +11,7 @@ export const StyleSchema = () => ({
     {
       id: 'standard',
       title: 'Standard',
-      fields: ['textAlign', 'align', 'size'],
+      fields: ['textAlign', 'fontSize', 'align', 'size'],
     },
     {
       id: 'advanced',
@@ -32,8 +32,22 @@ export const StyleSchema = () => ({
       title: 'Align',
       widget: 'style_align',
     },
+    fontSize: {
+      title: 'Font size',
+      description: 'Relative to normal size of text in the block',
+      choices: [
+        ['xx-small', 'xx-small'],
+        ['x-small', 'x-small'],
+        ['small', 'small'],
+        ['medium', 'medium'],
+        ['large', 'large'],
+        ['x-large', 'x-large'],
+        ['xx-large', 'xx-large'],
+        ['xxx-large', 'xxx-large'],
+      ],
+    },
     size: {
-      title: 'Size',
+      title: 'Box size',
       widget: 'style_size',
     },
     backgroundColor: {

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import StyleWrapperEdit from './BlockStyleWrapper/Edit';
-import StyleWrapperView from './BlockStyleWrapper/View';
+import BlockStyleWrapperEdit from './BlockStyleWrapper/Edit';
+import BlockStyleWrapperView from './BlockStyleWrapper/View';
 import StyleSelectWidget from './Widgets/StyleSelect';
 import AlignWidget from './Widgets/Align';
 import TextAlignWidget from './Widgets/TextAlign';
@@ -12,7 +12,7 @@ import './styles.less';
 const applyConfig = (config) => {
   const { settings } = config;
   const whitelist = settings.pluggableStylesBlocksWhitelist;
-  const blacklist = settings.pluggableStylesBlocksBlacklist; // || ['tabsBlock']
+  const blacklist = settings.pluggableStylesBlocksBlacklist;
   const { blocksConfig } = config.blocks;
 
   const okBlocks = Object.keys(blocksConfig).filter(
@@ -24,14 +24,14 @@ const applyConfig = (config) => {
     const EditComponent = blocksConfig[name].edit;
     const ViewComponent = blocksConfig[name].view;
     blocksConfig[name].edit = (props) => (
-      <StyleWrapperEdit {...props}>
+      <BlockStyleWrapperEdit {...props}>
         <EditComponent {...props} />
-      </StyleWrapperEdit>
+      </BlockStyleWrapperEdit>
     );
     blocksConfig[name].view = (props) => (
-      <StyleWrapperView {...props}>
+      <BlockStyleWrapperView {...props}>
         <ViewComponent {...props} />
-      </StyleWrapperView>
+      </BlockStyleWrapperView>
     );
   });
 
@@ -68,16 +68,6 @@ export const installDemoStyles = (config) => {
       ),
       // TODO: support also editComponent ?
     },
-    {
-      id: 'borderBlock',
-      title: 'Border',
-      cssClass: 'border-block',
-    },
-    {
-      id: 'dividedBlock',
-      title: 'Divided',
-      cssClass: 'divided-block',
-    },
   ];
 
   return config;

diff --git a/src/styles.less b/src/styles.less
@@ -19,6 +19,7 @@
   .card {
     cursor: pointer;
   }
+
   .card.active {
     .extra.content {
       background-color: #eee;
@@ -27,6 +28,41 @@
   }
 }
 
+// Size
+.block {
+  .small {
+    max-width: 25%;
+  }
+
+  .medium {
+    max-width: 50%;
+  }
+
+  .large {
+    max-width: 100%;
+  }
+}
+
+// Fix overrides
+#view .block:before {
+  border: none !important;
+}
+
+.blocks-chooser {
+  .ui.image {
+    max-width: 100% !important;
+  }
+}
+
+.ui.container .block.align.center {
+  text-align: inherit;
+}
+
+.block.align {
+  z-index: auto !important;
+}
+
+/* Demo styles */
 .green-demo-box {
   -webkit-box-shadow: 0 1px 6px 0 #c7d5d8;
   box-shadow: 0 1px 6px 0 #c7d5d8;
@@ -45,45 +81,20 @@
   border-radius: 4px;
 }
 
-.border-block {
-  border: 1px solid rgba(0,0,0, 0.2);
-  padding: 0.7rem;
-  p {margin-bottom: 0!important;}
+.green-demo-box {
+  -webkit-box-shadow: 0 1px 6px 0 #c7d5d8;
+  box-shadow: 0 1px 6px 0 #c7d5d8;
+  border-radius: 5px;
+  padding: 1em;
+  background-color: #aef2de;
 }
 
-.divided-block {
-  border-top: 1px solid rgba(0,0,0, 0.2);
-  border-bottom: 1px solid rgba(0,0,0, 0.2);
+.preview-blue-demo-box,
+.blue-demo-box {
+  background: #1b217d;
+  color: white !important;
   padding: 0.3rem;
-  p {margin-bottom: 0!important;}
-}
-
-
-// Block standard styles
-
-// Size
-.block {
-  .small { max-width: 25%; }
-  .medium { max-width: 50%; }
-  .large { max-width: 100%; }
-}
-
-
-// Fix overrides
-#view .block:before {
-  border: none!important;
-}
-
-.blocks-chooser {
-  .ui.image {
-    max-width: 100%!important;
-  }
-}
-
-.ui.container .block.align.center {
-  text-align: inherit;
-}
-
-.block.align {
-  z-index: auto!important;
+  -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 11px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
 }