@saltcorn/builder 0.6.0-alpha.0 → 0.6.0-beta.0

package/src/components/elements/boxmodel.html

@@ -0,0 +1,253 @@
+<style>
+  .boxmodel-container {
+    display: inline-flex;
+    flex-direction: column;
+    flex-flow: column wrap;
+    font-family: "Consolas", "Monaco", monospace;
+    font-size: 12px;
+    position: relative;
+  }
+  .boxmodel-container .boxmodel-info {
+    font-size: 10px;
+    font-family: Verdana;
+    font-style: normal;
+    text-align: left;
+    line-height: 14px;
+    margin: 2px 0 0 0;
+    padding: 0px;
+    margin-top: 2px;
+  }
+  .boxmodel-container div:not(.flex-row) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: space-between;
+    padding: 0;
+    margin: 0;
+  }
+  .boxmodel-container span.boxmodel-text {
+    font-size: 8.5px;
+    font-family: Verdana, Geneva, sans-serif;
+    display: inline-block;
+    user-select: none;
+  }
+  .boxmodel-container span.boxmodel-text.boxmodel-header {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    color: #777;
+  }
+  .boxmodel-container .boxmodel-margin {
+    background: #ffffff;
+    border: 1px dashed #aaa;
+    position: relative;
+  }
+  .boxmodel-container .boxmodel-border {
+    background: #ddd;
+    border: 2px solid #aaa;
+    position: relative;
+  }
+  .boxmodel-container .boxmodel-padding {
+    background: #eee;
+    border: 1px dashed #aaa;
+    position: relative;
+  }
+  .boxmodel-container .boxmodel-content {
+    background: #fff;
+    height: 30px;
+    margin: 0;
+    border: 1px solid #aaa;
+    position: relative;
+    font-family: Verdana, Geneva, sans-serif;
+    font-size: 10px;
+  }
+  .boxmodel-container .flex-row {
+    text-align: center;
+  }
+  .boxmodel-container .boxmodel-input-direction-top,
+  .boxmodel-container .boxmodel-input-direction-bottom {
+    display: block;
+    padding: 0;
+    margin: 0;
+    line-height: 0;
+  }
+  .boxmodel-container .boxmodel-input-direction-right,
+  .boxmodel-container .boxmodel-input-direction-left {
+    position: relative;
+  }
+  .boxmodel-container input,
+  .boxmodel-container input:focus,
+  .boxmodel-container input:active {
+    background: transparent;
+    color: black;
+    font-size: 9px;
+    font-family: Verdana, Geneva, sans-serif;
+    box-shadow: none;
+    border: 1px solid transparent;
+    outline: none;
+    user-select: none;
+    margin: 0px;
+    padding: 1px;
+    text-align: center;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-margin {
+    background: #f9cc9d;
+    border: 1px dashed #222;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-border {
+    background: #ffeebc;
+    border: 1px solid #000;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-padding {
+    background: #c3deb7;
+    border: 1px dashed #808080;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-content {
+    background: #a0c5e8;
+    border: 1px solid #808080;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-text {
+    color: black;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-text.boxmodel-header {
+    color: black;
+  }
+</style>
+
+<div class="boxmodel-container boxmodel-chrome-skin">
+  <div class="boxmodel-container">
+    <div class="boxmodel-margin">
+      <span class="boxmodel-text boxmodel-header">Margin</span
+      ><span class="boxmodel-input-container boxmodel-input-direction-left"
+        ><input
+          disabled
+          type="text"
+          autocomplete="off"
+          name="boxmodel-ex-1_left_margin"
+          size="3"
+      /></span>
+      <div class="flex-row">
+        <span class="boxmodel-input-container boxmodel-input-direction-top"
+          ><input
+            disabled
+            type="text"
+            autocomplete="off"
+            name="boxmodel-ex-1_top_margin"
+            size="3"
+        /></span>
+        <div class="boxmodel-border">
+          <span class="boxmodel-text boxmodel-header">Border</span
+          ><span class="boxmodel-input-container boxmodel-input-direction-left"
+            ><input
+              disabled
+              type="text"
+              autocomplete="off"
+              name="boxmodel-ex-1_left_border"
+              size="3"
+          /></span>
+          <div class="flex-row">
+            <span class="boxmodel-input-container boxmodel-input-direction-top"
+              ><input
+                disabled
+                type="text"
+                autocomplete="off"
+                name="boxmodel-ex-1_top_border"
+                size="3"
+            /></span>
+            <div class="boxmodel-padding">
+              <span class="boxmodel-text boxmodel-header">Padding</span
+              ><span
+                class="boxmodel-input-container boxmodel-input-direction-left"
+                ><input
+                  disabled
+                  type="text"
+                  autocomplete="off"
+                  name="boxmodel-ex-1_left_padding"
+                  size="3"
+                  class=""
+              /></span>
+              <div class="flex-row">
+                <span
+                  class="boxmodel-input-container boxmodel-input-direction-top"
+                  ><input
+                    disabled
+                    type="text"
+                    autocomplete="off"
+                    name="boxmodel-ex-1_top_padding"
+                    size="3"
+                /></span>
+                <div class="boxmodel-content">
+                  <input
+                    disabled
+                    type="text"
+                    autocomplete="off"
+                    name="boxmodel-ex-1_width"
+                    size="3"
+                  />x<input
+                    disabled
+                    type="text"
+                    autocomplete="off"
+                    name="boxmodel-ex-1_height"
+                    size="3"
+                  />
+                </div>
+                <span
+                  class="boxmodel-input-container boxmodel-input-direction-bottom"
+                  ><input
+                    disabled
+                    type="text"
+                    autocomplete="off"
+                    name="boxmodel-ex-1_bottom_padding"
+                    size="3"
+                /></span>
+              </div>
+              <span
+                class="boxmodel-input-container boxmodel-input-direction-right"
+                ><input
+                  disabled
+                  type="text"
+                  autocomplete="off"
+                  name="boxmodel-ex-1_right_padding"
+                  size="3"
+              /></span>
+            </div>
+            <span
+              class="boxmodel-input-container boxmodel-input-direction-bottom"
+              ><input
+                disabled
+                type="text"
+                autocomplete="off"
+                name="boxmodel-ex-1_bottom_border"
+                size="3"
+            /></span>
+          </div>
+          <span class="boxmodel-input-container boxmodel-input-direction-right"
+            ><input
+              disabled
+              type="text"
+              autocomplete="off"
+              name="boxmodel-ex-1_right_border"
+              size="3"
+          /></span>
+        </div>
+        <span class="boxmodel-input-container boxmodel-input-direction-bottom"
+          ><input
+            disabled
+            type="text"
+            autocomplete="off"
+            name="boxmodel-ex-1_bottom_margin"
+            size="3"
+        /></span>
+      </div>
+      <span class="boxmodel-input-container boxmodel-input-direction-right"
+        ><input
+          disabled
+          type="text"
+          autocomplete="off"
+          name="boxmodel-ex-1_right_margin"
+          size="3"
+      /></span>
+    </div>
+  </div>
+</div>

package/src/components/elements/utils.js

@@ -279,13 +279,14 @@ export const fetchViewPreview = (args = {}) => (changes = {}) => {
   });
 };
 
-export const SelectUnits = ({ vert, ...props }) => (
+export const SelectUnits = ({ vert, autoable, ...props }) => (
   <select {...props}>
     <option>px</option>
     <option>%</option>
     <option>{vert ? "vh" : "vw"}</option>
     <option>em</option>
     <option>rem</option>
+    {autoable && <option>auto</option>}
   </select>
 );
 
@@ -309,6 +310,19 @@ export const parseStyles = (styles) =>
       }),
       {}
     );
+
+export const reactifyStyles = (styles) => {
+  const toCamel = (s) => {
+    return s.replace(/([-][a-z])/gi, ($1) => {
+      return $1.toUpperCase().replace("-", "");
+    });
+  };
+  const reactified = {};
+  Object.keys(styles).forEach((k) => {
+    reactified[toCamel(k)] = styles[k];
+  });
+  return reactified;
+};
 const isCheckbox = (f) =>
   f && f.type && (f.type === "Bool" || f.type.name === "Bool");
 export const setInitialConfig = (setProp, fieldview, fields) => {
@@ -320,6 +334,24 @@ export const setInitialConfig = (setProp, fieldview, fields) => {
       });
   });
 };
+
+const ColorInput = ({ value, onChange }) =>
+  value ? (
+    <input
+      type="color"
+      value={value}
+      className="form-control"
+      onChange={(e) => e.target && onChange(e.target.value)}
+    />
+  ) : (
+    <button
+      className="btn btn-sm btn-outline-secondary"
+      onClick={() => onChange("#000000")}
+    >
+      <small>Set color</small>
+    </button>
+  );
+
 export const ConfigForm = ({
   fields,
   configuration,
@@ -365,18 +397,26 @@ export const ConfigField = ({
   setProp,
   onChange,
   props,
+  isStyle,
 }) => {
   const myOnChange = (v) => {
     setProp((prop) => {
       if (configuration) {
         if (!prop.configuration) prop.configuration = {};
         prop.configuration[field.name] = v;
+      } else if (isStyle) {
+        if (!prop.style) prop.style = {};
+        prop.style[field.name] = v;
       } else prop[field.name] = v;
     });
     onChange && onChange(field.name, v);
   };
   const value = or_if_undef(
-    configuration ? configuration[field.name] : props[field.name],
+    configuration
+      ? configuration[field.name]
+      : isStyle
+      ? props.style[field.name]
+      : props[field.name],
     field.default
   );
   if (field.input_type === "fromtype") field.input_type = null;
@@ -412,14 +452,7 @@ export const ConfigField = ({
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
-    Color: () => (
-      <input
-        type="color"
-        value={value}
-        className="form-control"
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      />
-    ),
+    Color: () => <ColorInput value={value} onChange={(c) => myOnChange(c)} />,
     Bool: () => (
       <div className="form-check">
         <input
@@ -478,38 +511,74 @@ export const ConfigField = ({
         ))}
       </div>
     ),
-    DimUnits: () => (
-      <Fragment>
-        <input
-          type="number"
-          value={value}
-          step="1"
-          min="0"
-          max="9999"
-          className="w-50 form-control-sm d-inline dimunit"
-          onChange={(e) => myOnChange(e.target.value)}
-        />
-        <SelectUnits
-          value={or_if_undef(
-            configuration
-              ? configuration[field.name + "Unit"]
-              : props[field.name + "Unit"],
-            "px"
+    DimUnits: () => {
+      let styleVal, styleDim;
+      if (isStyle && value === "auto") {
+        styleVal = "";
+        styleDim = "auto";
+      } else if (isStyle && value && typeof value === "string") {
+        const matches = value.match(/^([0-9]+\.?[0-9]*)(.*)/);
+        if (matches) {
+          styleVal = matches[1];
+          styleDim = matches[2];
+        }
+      }
+      return (
+        <Fragment>
+          {styleDim !== "auto" && (
+            <input
+              type="number"
+              value={(isStyle ? styleVal : value) || ""}
+              step="1"
+              min="0"
+              max="9999"
+              className="w-50 form-control-sm d-inline dimunit"
+              disabled={field.autoable && styleDim === "auto"}
+              onChange={(e) =>
+                myOnChange(
+                  isStyle
+                    ? `${e.target.value}${styleDim || "px"}`
+                    : e.target.value
+                )
+              }
+            />
           )}
-          className="w-50 form-control-sm d-inline dimunit"
-          vert={true}
-          onChange={(e) => {
-            if (!e.target) return;
-            const target_value = e.target.value;
-            setProp((prop) => {
-              if (configuration)
-                prop.configuration[field.name + "Unit"] = target_value;
-              else prop[field.name + "Unit"] = target_value;
-            });
-          }}
-        />
-      </Fragment>
-    ),
+          <SelectUnits
+            value={or_if_undef(
+              configuration
+                ? configuration[field.name + "Unit"]
+                : isStyle
+                ? styleDim
+                : props[field.name + "Unit"],
+              "px"
+            )}
+            autoable={field.autoable}
+            className={`w-${
+              styleDim === "auto" ? 100 : 50
+            } form-control-sm d-inline dimunit`}
+            vert={true}
+            onChange={(e) => {
+              if (!e.target) return;
+              const target_value = e.target.value;
+              setProp((prop) => {
+                const myStyleVal =
+                  target_value === "auto" && field.autoable && isStyle
+                    ? ""
+                    : styleVal;
+                if (configuration)
+                  prop.configuration[field.name + "Unit"] = target_value;
+                else if (isStyle) {
+                  prop.style[field.name] = `${or_if_undef(
+                    myStyleVal,
+                    0
+                  )}${target_value}`;
+                } else prop[field.name + "Unit"] = target_value;
+              });
+            }}
+          />
+        </Fragment>
+      );
+    },
   };
   const f = dispatch[field.input_type || field.type.name || field.type];
   return f ? f() : null;
@@ -546,7 +615,7 @@ export const SettingsSectionHeaderRow = ({ title }) => (
   </tr>
 );
 
-export const SettingsRow = ({ field, node, setProp, onChange }) => {
+export const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
   const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
@@ -568,6 +637,7 @@ export const SettingsRow = ({ field, node, setProp, onChange }) => {
       props={node}
       setProp={setProp}
       onChange={onChange}
+      isStyle={isStyle}
     />
   );
   return (
@@ -737,3 +807,17 @@ export const ButtonOrLinkSettingsRows = ({
       : []),
   ];
 };
+export const bstyleopt = (style) => ({
+  value: style,
+  title: style,
+  label: (
+    <div
+      style={{
+        borderLeftStyle: style,
+        borderTopStyle: style,
+        height: "15px",
+        width: "6px",
+      }}
+    ></div>
+  ),
+});

package/src/components/storage.js

@@ -136,12 +136,6 @@ export const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
         <Element
           key={ix}
           canvas
-          borderWidth={segment.borderWidth}
-          borderStyle={segment.borderStyle}
-          borderRadius={segment.borderRadius}
-          borderDirection={segment.borderDirection}
-          borderColor={segment.borderColor}
-          borderRadiusUnit={segment.borderRadiusUnit}
           gradStartColor={segment.gradStartColor}
           gradEndColor={segment.gradEndColor}
           gradDirection={segment.gradDirection}
@@ -161,7 +155,14 @@ export const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           widthUnit={segment.widthUnit || "px"}
           vAlign={segment.vAlign}
           hAlign={segment.hAlign}
-          block={typeof segment.block === "undefined" ? true : segment.block}
+          display={
+            segment.display ||
+            (segment.block === true
+              ? "block"
+              : segment.block === false
+              ? "inline-block"
+              : "block")
+          }
           fullPageWidth={
             typeof segment.fullPageWidth === "undefined"
               ? false
@@ -170,6 +171,7 @@ export const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           bgFileId={segment.bgFileId}
           imageSize={segment.imageSize || "contain"}
           bgType={segment.bgType || "None"}
+          style={segment.style || {}}
           bgColor={segment.bgColor || "#ffffff"}
           setTextColor={!!segment.setTextColor}
           textColor={segment.textColor || "#000000"}
@@ -282,12 +284,6 @@ export const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         return {
           contents: get_nodes(node),
           type: "container",
-          borderWidth: node.props.borderWidth,
-          borderStyle: node.props.borderStyle,
-          borderColor: node.props.borderColor,
-          borderRadius: node.props.borderRadius,
-          borderDirection: node.props.borderDirection,
-          borderRadiusUnit: node.props.borderRadiusUnit,
           customCSS: node.props.customCSS,
           customClass: node.props.customClass,
           minHeight: node.props.minHeight,
@@ -303,7 +299,7 @@ export const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
           margin: node.props.margin,
           padding: node.props.padding,
           overflow: node.props.overflow,
-          block: node.props.block || false,
+          display: node.props.display,
           fullPageWidth: node.props.fullPageWidth || false,
           bgFileId: node.props.bgFileId,
           bgType: node.props.bgType,
@@ -321,6 +317,7 @@ export const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
           gradEndColor: node.props.gradEndColor,
           gradDirection: node.props.gradDirection,
           rotate: node.props.rotate,
+          style: node.props.style,
         };
       else return get_nodes(node);
     }