From bc2280bdd11e1712b5c48d19f1c6a9b5496d98c5 Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Tue, 25 Oct 2022 20:21:06 +0100
Subject: [PATCH] Add thumbnail styling to file page blocks and field types
 configurators

---
 .../ModuleFields/Configurator/File.vue        | 156 +++++++++++++++++-
 .../components/ModuleFields/Viewer/File.vue   |   1 +
 .../components/ModuleFields/Viewer/base.vue   |   4 +
 .../src/components/PageBlocks/FileBase.vue    |   3 +-
 .../PageBlocks/FileConfigurator.vue           | 155 ++++++++++++++++-
 .../Public/Page/Attachment/ListLoader.vue     |  36 +++-
 lib/js/src/compose/types/module-field/file.ts |  18 +-
 lib/js/src/compose/types/page-block/file.ts   |  16 ++
 locale/en/corteza-webapp-compose/field.yaml   |  10 ++
 9 files changed, 388 insertions(+), 11 deletions(-)

diff --git a/client/web/compose/src/components/ModuleFields/Configurator/File.vue b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
index 68439a199..5aec75e43 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/File.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
@@ -7,6 +7,7 @@
         <b-form-input
           v-model="f.options.maxSize"
           type="number"
+          number
         />
       </b-input-group>
     </b-form-group>
@@ -36,7 +37,7 @@
     </b-form-group>
 
     <b-form-group
-      v-if="enableFileNameHiding"
+      v-if="enablePreviewStyling"
       class="mb-0"
     >
       <b-form-checkbox
@@ -45,6 +46,154 @@
         {{ $t('kind.file.view.showName') }}
       </b-form-checkbox>
     </b-form-group>
+
+    <template v-if="enablePreviewStyling">
+      <hr>
+
+      <h5 class="mb-2">
+        {{ $t('kind.file.view.previewStyle') }}
+      </h5>
+
+      <b-row
+        align-v="center"
+        class="mb-2 mt-2"
+      >
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.height')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="f.options.height"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.height')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.width')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="f.options.width"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.width')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.maxHeight')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="f.options.maxHeight"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.maxHeight')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.maxWidth')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="f.options.maxWidth"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.maxWidth')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.borderRadius')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="f.options.borderRadius"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.borderRadius')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.background')"
+          >
+            <b-form-input
+              v-model="f.options.backgroundColor"
+              type="color"
+              debounce="300"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.margin')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="f.options.margin"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.margin')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </template>
   </div>
 </template>
 
@@ -68,8 +217,9 @@ export default {
       ]
     },
 
-    enableFileNameHiding () {
-      return (this.f.options.mode === 'single') || (this.f.options.mode === 'gallery')
+    enablePreviewStyling () {
+      const { mode } = this.f.options
+      return (mode === 'single') || (mode === 'gallery')
     },
   },
 }
diff --git a/client/web/compose/src/components/ModuleFields/Viewer/File.vue b/client/web/compose/src/components/ModuleFields/Viewer/File.vue
index fe4fd25da..bd76f59d0 100644
--- a/client/web/compose/src/components/ModuleFields/Viewer/File.vue
+++ b/client/web/compose/src/components/ModuleFields/Viewer/File.vue
@@ -8,6 +8,7 @@
       :namespace="namespace"
       :mode="field.options.mode"
       :hide-file-name="field.options.hideFileName"
+      :preview-options="options"
     />
 
     <errors :errors="errors" />
diff --git a/client/web/compose/src/components/ModuleFields/Viewer/base.vue b/client/web/compose/src/components/ModuleFields/Viewer/base.vue
index 45db523f4..4196275be 100644
--- a/client/web/compose/src/components/ModuleFields/Viewer/base.vue
+++ b/client/web/compose/src/components/ModuleFields/Viewer/base.vue
@@ -67,6 +67,10 @@ export default {
       }
       return []
     },
+
+    options () {
+      return this.field.options
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/FileBase.vue b/client/web/compose/src/components/PageBlocks/FileBase.vue
index 0b61d49bb..fb2d1334f 100644
--- a/client/web/compose/src/components/PageBlocks/FileBase.vue
+++ b/client/web/compose/src/components/PageBlocks/FileBase.vue
@@ -7,12 +7,13 @@
       class="p-2 h-100"
     >
       <list-loader
-        class="h-100"
         kind="page"
         :set="options.attachments"
         :namespace="namespace"
         :mode="options.mode"
         :hide-file-name="options.hideFileName"
+        :preview-options="options"
+        class="h-100"
       />
     </div>
   </wrap>
diff --git a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
index ec07f538e..05a0978d0 100644
--- a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
@@ -16,7 +16,7 @@
     </b-form-group>
     <b-form-checkbox
       v-model="options.hideFileName"
-      :disabled="!enableFileNameHiding"
+      :disabled="!currentPreviewMode"
       class="mb-3"
     >
       {{ $t('kind.file.view.showName') }}
@@ -35,6 +35,154 @@
       mode="list"
       class="mt-2"
     />
+
+    <template v-if="currentPreviewMode">
+      <hr>
+
+      <h5 class="mb-2">
+        {{ $t('kind.file.view.previewStyle') }}
+      </h5>
+
+      <b-row
+        align-v="center"
+        class="mb-2 mt-2"
+      >
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.height')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="options.height"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.height')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.width')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="options.width"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.width')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.maxHeight')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="options.maxHeight"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.maxHeight')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.maxWidth')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="options.maxWidth"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.maxWidth')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.borderRadius')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="options.borderRadius"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.borderRadius')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.background')"
+          >
+            <b-form-input
+              v-model="options.backgroundColor"
+              type="color"
+              debounce="300"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          sm="12"
+          md="6"
+        >
+          <b-form-group
+            :label="$t('kind.file.view.margin')"
+          >
+            <b-input-group
+              :append="$t('kind.file.view.px')"
+            >
+              <b-form-input
+                v-model="options.margin"
+                type="number"
+                number
+                :placeholder="$t('kind.file.view.margin')"
+              />
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </template>
   </b-tab>
 </template>
 <script>
@@ -75,8 +223,9 @@ export default {
       ]
     },
 
-    enableFileNameHiding () {
-      return (this.options.mode === 'single') || (this.options.mode === 'gallery')
+    currentPreviewMode () {
+      const { mode } = this.options
+      return (mode === 'single') || (mode === 'gallery')
     },
   },
 
diff --git a/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue b/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
index 33cec7ee5..ecea0a6c4 100644
--- a/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
+++ b/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
@@ -83,7 +83,6 @@
             :icon="['far', 'file-'+ext(a)]"
             class="text-dark float-left mr-2"
           />
-          {{ a.name }}
         </attachment-link>
         <i18next
           path="general.label.attachmentFileInfo"
@@ -111,7 +110,7 @@
           :meta="a.meta"
           :name="a.name"
           :alt="a.name"
-          :preview-style="{ width: 'unset' }"
+          :preview-style="{ width: 'unset', ...inlineCustomStyles(a) }"
           :labels="previewLabels"
           @openPreview="openLightbox({ ...a, ...$event })"
         />
@@ -189,6 +188,11 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    previewOptions: {
+      type: Object,
+      default: () => ({}),
+    },
   },
 
   data () {
@@ -321,6 +325,34 @@ export default {
         default: return 'alt'
       }
     },
+
+    inlineCustomStyles (a) {
+      const {
+        height,
+        width,
+        maxHeight,
+        maxWidth,
+        borderRadius,
+        backgroundColor,
+        margin,
+      } = this.previewOptions
+
+      if (this.ext(a) === 'image') {
+        return {
+          ...(height && { height: `${height}px` }),
+          ...(width && { width: `${width}px` }),
+          ...(maxHeight && { maxHeight: `${maxHeight}px` }),
+          ...(maxWidth && { maxWidth: `${maxWidth}px` }),
+          ...(borderRadius && { borderRadius: `${borderRadius}px` }),
+          ...(backgroundColor && { backgroundColor: backgroundColor }),
+          ...(margin && { margin: `${margin}px` }),
+          objectFit: 'cover',
+          objectPosition: 'center',
+        }
+      }
+
+      return {}
+    },
   },
 }
 </script>
diff --git a/lib/js/src/compose/types/module-field/file.ts b/lib/js/src/compose/types/module-field/file.ts
index 24b875ca9..d57166ec5 100644
--- a/lib/js/src/compose/types/module-field/file.ts
+++ b/lib/js/src/compose/types/module-field/file.ts
@@ -22,6 +22,13 @@ interface FileOptions extends Options {
   inline: boolean;
   hideFileName: boolean;
   mimetypes?: string;
+  height?: number;
+  width?: number;
+  maxHeight?: number;
+  maxWidth?: number;
+  borderRadius?: number;
+  margin?: number;
+  backgroundColor?: string;
 }
 
 const defaults = (): Readonly<FileOptions> => Object.freeze({
@@ -33,6 +40,13 @@ const defaults = (): Readonly<FileOptions> => Object.freeze({
   inline: true,
   hideFileName: false,
   mimetypes: '',
+  height: undefined,
+  width: undefined,
+  maxHeight: undefined,
+  maxWidth: undefined,
+  borderRadius: undefined,
+  margin: undefined,
+  backgroundColor: undefined,
 })
 
 export class ModuleFieldFile extends ModuleField {
@@ -49,9 +63,9 @@ export class ModuleFieldFile extends ModuleField {
     if (!o) return
     super.applyOptions(o)
 
-    Apply(this.options, o, Number, 'maxSize')
+    Apply(this.options, o, Number, 'maxSize', 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin')
     Apply(this.options, o, Boolean, 'allowImages', 'allowDocuments', 'inline', 'hideFileName')
-    Apply(this.options, o, String, 'mimetypes')
+    Apply(this.options, o, String, 'mimetypes', 'backgroundColor')
     ApplyWhitelisted(this.options, o, modes, 'mode')
   }
 }
diff --git a/lib/js/src/compose/types/page-block/file.ts b/lib/js/src/compose/types/page-block/file.ts
index 1f6ed19a7..ea7813fc2 100644
--- a/lib/js/src/compose/types/page-block/file.ts
+++ b/lib/js/src/compose/types/page-block/file.ts
@@ -7,6 +7,13 @@ interface Options {
   mode: string;
   attachments: string[];
   hideFileName: boolean;
+  height?: number;
+  width?: number;
+  maxHeight?: number;
+  maxWidth?: number;
+  borderRadius?: number;
+  margin?: number;
+  backgroundColor?: string;
 }
 
 const PageBlockFileDefaultMode = 'list'
@@ -25,6 +32,13 @@ const defaults: Readonly<Options> = Object.freeze({
   mode: PageBlockFileDefaultMode,
   attachments: [],
   hideFileName: false,
+  height: undefined,
+  width: undefined,
+  maxHeight: undefined,
+  maxWidth: undefined,
+  borderRadius: undefined,
+  margin: undefined,
+  backgroundColor: undefined,
 })
 
 export class PageBlockFile extends PageBlock {
@@ -45,6 +59,8 @@ export class PageBlockFile extends PageBlock {
     }
 
     Apply(this.options, o, Boolean, 'hideFileName')
+    Apply(this.options, o, String, 'backgroundColor')
+    Apply(this.options, o, Number, 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin')
 
     if (o.mode) {
       if (PageBlockFileModes.includes(o.mode)) {
diff --git a/locale/en/corteza-webapp-compose/field.yaml b/locale/en/corteza-webapp-compose/field.yaml
index 4a2d78dd8..fc7c0f5a5 100644
--- a/locale/en/corteza-webapp-compose/field.yaml
+++ b/locale/en/corteza-webapp-compose/field.yaml
@@ -38,6 +38,16 @@ kind:
       modeLabel: View mode
       showName: Hide file name
       single: Single image
+      previewStyle: Preview style
+      height: Height
+      width: Width
+      maxHeight: Max height
+      maxWidth: Max width
+      borderRadius: Border radius
+      background: Background color
+      margin: Margin
+      unitType: Unit type
+      px: px
   number:
     exampleFormat: Format
     exampleInput: Input