customise image width

a-c-sreedhar-reddy · Oct 19, 2020 · 9ee5220 · 9ee5220
1 parent 4f20477
commit 9ee5220
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 47 deletions.
diff --git a/...script/schools/courses/components/curriculum_editor/CurriculumEditor__ImageBlockEditor.re b/...script/schools/courses/components/curriculum_editor/CurriculumEditor__ImageBlockEditor.re
@@ -17,18 +17,9 @@ let make =
       ~width: ContentBlock.width,
     ) => {
   let captionInputId = "caption-" ++ (contentBlock |> ContentBlock.id);
+  let widthInputId = "width-" ++ contentBlock.id;
 
-  let widthToString = width =>
-    switch (width) {
-    | `auto => "auto"
-    | `xs => "xs"
-    | `sm => "sm"
-    | `md => "md"
-    | `lg => "lg"
-    | `xl => "xl"
-    | `xl2 => "2xl"
-    };
-  let widthString = widthToString(width);
+  let widthString = ContentBlock.widthToString(width);
   <div className="relative border border-gray-400 rounded-lg">
     <div
       className={
@@ -68,38 +59,43 @@ let make =
         />
       </div>
     </div>
-    <label>
-      "Width : "->React.string
-      <select
-        value=widthString
-        onChange={_event => {
-          _event |> ReactEvent.Form.preventDefault;
+    <div className="flex border-t justify-end">
+      <div className="flex-1 content-block__action-bar-input p-3">
+        <label htmlFor=widthInputId className="text-sm font-semibold">
+          "Width : "->React.string
+          <select
+            id=widthInputId
+            value=widthString
+            onChange={_event => {
+              _event |> ReactEvent.Form.preventDefault;
 
-          let value: string = ReactEvent.Synthetic.target(_event)##value;
-          let width =
-            switch (value) {
-            | "xs" => `xs
-            | "sm" => `sm
-            | "md" => `md
-            | "lg" => `lg
-            | "xl" => `xl
-            | "2xl" => `xl2
-            | _ => `auto
-            };
-          updateContentBlockCB({
-            ...contentBlock,
-            blockType: Image(url, caption, width),
-          });
-          ();
-        }}>
-        <option value="auto"> "auto"->React.string </option>
-        <option value="xs"> "xs"->React.string </option>
-        <option value="sm"> "sm"->React.string </option>
-        <option value="md"> "md"->React.string </option>
-        <option value="lg"> "lg"->React.string </option>
-        <option value="xl"> "xl"->React.string </option>
-        <option value="2xl"> "2xl"->React.string </option>
-      </select>
-    </label>
+              let value: string = ReactEvent.Synthetic.target(_event)##value;
+              let width =
+                switch (value) {
+                | "xs" => `xs
+                | "sm" => `sm
+                | "md" => `md
+                | "lg" => `lg
+                | "xl" => `xl
+                | "2xl" => `xl2
+                | _ => `auto
+                };
+              updateContentBlockCB({
+                ...contentBlock,
+                blockType: Image(url, caption, width),
+              });
+              ();
+            }}>
+            <option value="auto"> "auto"->React.string </option>
+            <option value="xs"> "xs"->React.string </option>
+            <option value="sm"> "sm"->React.string </option>
+            <option value="md"> "md"->React.string </option>
+            <option value="lg"> "lg"->React.string </option>
+            <option value="xl"> "xl"->React.string </option>
+            <option value="2xl"> "2xl"->React.string </option>
+          </select>
+        </label>
+      </div>
+    </div>
   </div>;
 };
diff --git a/app/javascript/shared/components/TargetContentView.re b/app/javascript/shared/components/TargetContentView.re
@@ -28,8 +28,14 @@ let fileContentBlock = (url, title, filename) =>
     <div> <FaIcon classes="text-2xl fas fa-download" /> </div>
   </a>;
 
-let imageContentBlock = (url, caption) =>
-  <div className="rounded-lg bg-white text-center">
+let imageContentBlock = (url, caption, width: ContentBlock.width) =>
+  <div
+    className={
+      "rounded-lg bg-white text-center "
+      ++ "max-w-"
+      ++ ContentBlock.widthToString(width)
+      ++ " mx-auto"
+    }>
     <img className="mx-auto" src=url alt=caption />
     <div className="px-4 py-2 text-sm italic"> {caption |> str} </div>
   </div>;
@@ -51,7 +57,8 @@ let make = (~contentBlocks) =>
             | Markdown(markdown) => markdownContentBlock(markdown)
             | File(url, title, filename) =>
               fileContentBlock(url, title, filename)
-            | Image(url, caption, width) => imageContentBlock(url, caption)
+            | Image(url, caption, width) =>
+              imageContentBlock(url, caption, width)
             | Embed(url, embedCode) => embedContentBlock(url, embedCode)
             };
 

diff --git a/app/javascript/shared/types/ContentBlock.re b/app/javascript/shared/types/ContentBlock.re
@@ -7,6 +7,16 @@ type caption = string;
 type embedCode = string;
 type filename = string;
 type width = [ | `auto | `lg | `md | `sm | `xl | `xl2 | `xs];
+let widthToString = width =>
+  switch (width) {
+  | `auto => "auto"
+  | `xs => "xs"
+  | `sm => "sm"
+  | `md => "md"
+  | `lg => "lg"
+  | `xl => "xl"
+  | `xl2 => "2xl"
+  };
 type blockType =
   | Markdown(markdown)
   | File(url, title, filename)
@@ -24,7 +34,7 @@ let decodeMarkdownContent = json =>
   Json.Decode.(json |> field("markdown", string));
 let decodeFileContent = json => Json.Decode.(json |> field("title", string));
 let decodeImageContent = json => {
-  let widthString = Json.Decode.(json |> field("width", optional(string)));
+  let widthString = Json.Decode.(json |> optional(field("width", string)));
   let width: width =
     switch (widthString) {
     | None => `auto