Add thumbnail styling to file page blocks and field types configurators

2022-10-25 20:21:06 +01:00 · 2022-10-25 20:21:06 +01:00 · bc2280bdd1
commit bc2280bdd1
parent 522fe9a8f5
9 changed files with 388 additions and 11 deletions
--- 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')
    },
  },
 }
--- 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" />
--- 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>
--- 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>
--- 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')
    },
  },

--- 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>
--- 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')
  }
 }
--- 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)) {
--- 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