@saltcorn/builder 0.7.1 → 0.7.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.1",
+  "version": "0.7.2-beta.0",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/elements/Container.js

@@ -229,6 +229,7 @@ const ContainerSettings = () => {
     rotate: node.data.props.rotate,
     display: node.data.props.display,
     style: node.data.props.style,
+    imgResponsiveWidths: node.data.props.imgResponsiveWidths,
   }));
   const {
     actions: { setProp },
@@ -257,6 +258,7 @@ const ContainerSettings = () => {
     fullPageWidth,
     overflow,
     htmlElement,
+    imgResponsiveWidths,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -520,6 +522,26 @@ const ContainerSettings = () => {
                   </select>
                 </td>
               </tr>
+              {imageSize !== "repeat" && (
+                <tr>
+                  <td>
+                    <label>Responsive widths</label>
+                  </td>
+
+                  <td>
+                    <input
+                      type="text"
+                      value={imgResponsiveWidths}
+                      className="form-control"
+                      onChange={setAProp("imgResponsiveWidths")}
+                    />
+                    <small>
+                      <i>List of widths to serve resized images,
+                         e.g. 300, 400, 600</i>
+                    </small>
+                  </td>
+                </tr>
+              )}
             </Fragment>
           )}
           {bgType === "Color" && (

package/src/components/elements/Image.js

@@ -71,6 +71,7 @@ const ImageSettings = () => {
     block: node.data.props.block,
     style: node.data.props.style,
     isFormula: node.data.props.isFormula,
+    imgResponsiveWidths: node.data.props.imgResponsiveWidths,
   }));
   const {
     actions: { setProp },
@@ -82,6 +83,7 @@ const ImageSettings = () => {
     block,
     isFormula,
     filepath,
+    imgResponsiveWidths,
     style,
   } = node;
   const options = useContext(optionsCtx);
@@ -252,6 +254,27 @@ const ImageSettings = () => {
               </td>
             </tr>
           )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td>
+                <label>Responsive widths</label>
+              </td>
+
+              <td>
+                <input
+                  type="text"
+                  value={imgResponsiveWidths}
+                  className="form-control"
+                  onChange={setAProp("imgResponsiveWidths")}
+                />
+                <small>
+                  <i>
+                    List of widths to serve resized images, e.g. 300, 400, 600
+                  </i>
+                </small>
+              </td>
+            </tr>
+          )}
           {srctype !== "Upload" && (
             <tr>
               <td colSpan="2">
@@ -290,6 +313,7 @@ Image.craft = {
       { name: "fileid", default: 0 },
       "field",
       "block",
+      "imgResponsiveWidths",
       { name: "style", default: {} },
     ],
   },

package/src/components/storage.js

@@ -206,6 +206,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           }
           bgFileId={segment.bgFileId}
           imageSize={segment.imageSize || "contain"}
+          imgResponsiveWidths={segment.imgResponsiveWidths}
           bgType={segment.bgType || "None"}
           style={segment.style || {}}
           bgColor={segment.bgColor || "#ffffff"}
@@ -373,6 +374,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
           bgFileId: node.props.bgFileId,
           bgType: node.props.bgType,
           imageSize: node.props.imageSize,
+          imgResponsiveWidths: node.props.imgResponsiveWidths,
           bgColor: node.props.bgColor,
           setTextColor: node.props.setTextColor,
           textColor: node.props.textColor,