Adjust file preview logic and styles

2023-03-22 14:29:52 +01:00
parent dead68f078
commit 61646f0827
7 changed files with 90 additions and 107 deletions
--- a/client/web/compose/src/components/PageBlocks/FileBase.vue
+++ b/client/web/compose/src/components/PageBlocks/FileBase.vue
@@ -3,19 +3,15 @@
    v-bind="$props"
    v-on="$listeners"
  >
-    <div
-      class="p-2 h-100"
-    >
-      <list-loader
-        kind="page"
-        :set="options.attachments"
-        :namespace="namespace"
-        :mode="options.mode"
-        :hide-file-name="options.hideFileName"
-        :preview-options="options"
-        class="h-100"
-      />
-    </div>
+    <list-loader
+      kind="page"
+      :set="options.attachments"
+      :namespace="namespace"
+      :mode="options.mode"
+      :hide-file-name="options.hideFileName"
+      :preview-options="options"
+      class="h-100 px-2"
+    />
  </wrap>
 </template>
 <script>
--- a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
@@ -23,10 +23,10 @@
    </b-form-checkbox>

    <b-form-checkbox
-      v-model="options.enablePreview"
+      v-model="options.clickToView"
      class="mb-3"
    >
-      {{ $t('kind.file.view.enablePreview') }}
+      {{ $t('kind.file.view.clickToView') }}
    </b-form-checkbox>

    <b-form-checkbox
@@ -68,14 +68,11 @@
        >
          <b-form-group
            :label="$t('kind.file.view.height')"
+            label-class="text-primary"
          >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
+            <b-input-group>
              <b-form-input
                v-model="options.height"
-                type="number"
-                number
                :placeholder="$t('kind.file.view.height')"
              />
            </b-input-group>
@@ -88,14 +85,11 @@
        >
          <b-form-group
            :label="$t('kind.file.view.width')"
+            label-class="text-primary"
          >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
+            <b-input-group>
              <b-form-input
                v-model="options.width"
-                type="number"
-                number
                :placeholder="$t('kind.file.view.width')"
              />
            </b-input-group>
@@ -108,14 +102,11 @@
        >
          <b-form-group
            :label="$t('kind.file.view.maxHeight')"
+            label-class="text-primary"
          >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
+            <b-input-group>
              <b-form-input
                v-model="options.maxHeight"
-                type="number"
-                number
                :placeholder="$t('kind.file.view.maxHeight')"
              />
            </b-input-group>
@@ -128,14 +119,11 @@
        >
          <b-form-group
            :label="$t('kind.file.view.maxWidth')"
+            label-class="text-primary"
          >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
+            <b-input-group>
              <b-form-input
                v-model="options.maxWidth"
-                type="number"
-                number
                :placeholder="$t('kind.file.view.maxWidth')"
              />
            </b-input-group>
@@ -148,14 +136,11 @@
        >
          <b-form-group
            :label="$t('kind.file.view.borderRadius')"
+            label-class="text-primary"
          >
-            <b-input-group
-              :append="$t('kind.file.view.px')"
-            >
+            <b-input-group>
              <b-form-input
                v-model="options.borderRadius"
-                type="number"
-                number
                :placeholder="$t('kind.file.view.borderRadius')"
              />
            </b-input-group>
@@ -167,13 +152,15 @@
          md="6"
        >
          <b-form-group
-            :label="$t('kind.file.view.background')"
+            :label="$t('kind.file.view.margin')"
+            label-class="text-primary"
          >
-            <b-form-input
-              v-model="options.backgroundColor"
-              type="color"
-              debounce="300"
-            />
+            <b-input-group>
+              <b-form-input
+                v-model="options.margin"
+                :placeholder="$t('kind.file.view.margin')"
+              />
+            </b-input-group>
          </b-form-group>
        </b-col>

@@ -182,18 +169,14 @@
          md="6"
        >
          <b-form-group
-            :label="$t('kind.file.view.margin')"
+            :label="$t('kind.file.view.background')"
+            label-class="text-primary"
          >
-            <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-input
+              v-model="options.backgroundColor"
+              type="color"
+              debounce="300"
+            />
          </b-form-group>
        </b-col>
      </b-row>
--- a/client/web/compose/src/components/Public/Page/Attachment/Link.vue
+++ b/client/web/compose/src/components/Public/Page/Attachment/Link.vue
@@ -1,7 +1,7 @@
 <template>
  <a
-    v-if="canPreview"
-    :href="attachment.download"
+    v-if="canPreview && attachment.clickToView"
+    :href="attachment.url"
    @click.exact.prevent="openLightbox({ ...attachment, ...$event })"
  >
    <slot>
@@ -10,7 +10,6 @@
  </a>
  <a
    v-else
-    :href="attachment.download"
  >
    <slot>
      {{ attachment.name }}
@@ -33,7 +32,7 @@ export default {
    canPreview () {
      const meta = this.attachment.meta || {}
      const type = (meta.preview || meta.original || {}).mimetype
-      const src = (this.attachment.meta.original && this.attachment.meta.original.ext === 'pdf' ? this.attachment.download : this.attachment.previewUrl)
+      const src = (this.attachment.meta.original && this.attachment.meta.original.ext === 'pdf' ? this.attachment.download : this.attachment.url)
      return canPreview({ type, src, name: this.attachment.name })
    },
  },
--- a/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
+++ b/client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue
@@ -44,6 +44,7 @@
            </b-col>
            <div class="col-sm-2 text-right my-auto">
              <a
+                v-if="a.download"
                :href="a.download"
                class="px-0 btn text-primary mr-2"
              >
@@ -101,18 +102,19 @@
      <div
        v-for="(a) in files"
        :key="a.attachmentID"
-        class="my-2 mx-auto h-100"
+        class="mx-auto h-100"
      >
        <c-preview-inline
          v-if="canPreview(a)"
-          class="ml-0"
+          class="ml-0 py-2"
          :src="inlineUrl(a)"
          :meta="a.meta"
          :name="a.name"
          :alt="a.name"
          :preview-style="{ width: 'unset', ...inlineCustomStyles(a) }"
          :preview-class="[
-            !previewOptions.enablePreview ? 'disable-zoom-cursor' : ''
+            !previewOptions.clickToView ? 'disable-zoom-cursor' : '',
+
          ]"
          :labels="previewLabels"
          @openPreview="openLightbox({ ...a, ...$event })"
@@ -208,7 +210,7 @@ export default {

  computed: {
    inlineUrl () {
-      return (a) => (this.ext(a) === 'pdf' ? a.download : (this.previewOptions.enablePreview ? a.previewUrl : a.url))
+      return (a) => (this.ext(a) === 'pdf' ? a.download : a.url)
    },

    previewLabels () {
@@ -269,9 +271,18 @@ export default {
        }))
          .then(() => {
          // Filter out invalid/missing attachments
+            const { clickToView = true, enableDownload = true } = this.previewOptions
+
            this.attachments = att
              .filter(a => !!a)
              .filter(a => typeof a === 'object')
+              .map(a => {
+                return {
+                  ...a,
+                  download: enableDownload ? a.download : undefined,
+                  clickToView,
+                }
+              })
          })
          .finally(() => {
            this.processing = false
@@ -290,10 +301,9 @@ export default {
    },

    openLightbox (e) {
-      if (this.previewOptions.enablePreview) {
-        const { enableDownload } = this.previewOptions
-        this.$root.$emit('showAttachmentsModal', { ...e, enableDownload })
-      }
+      if (!this.previewOptions.clickToView) return
+
+      this.$root.$emit('showAttachmentsModal', e)
    },

    deleteAttachment (index) {
@@ -334,30 +344,26 @@ export default {

    inlineCustomStyles (a) {
      const {
-        height,
        width,
-        maxHeight,
-        maxWidth,
+        height,
        borderRadius,
        backgroundColor,
-        margin,
      } = this.previewOptions
+      let { maxWidth, maxHeight, margin } = this.previewOptions
+
+      maxWidth = maxWidth || '100%'
+      maxHeight = maxHeight || '100%'
+      margin = margin || 'auto'

      if (this.ext(a) === 'image') {
        return {
-          ...((!this.previewOptions.enablePreview || height === '0' || width === '0') && {
-            height: '100%',
-            width: '100%',
-          }),
-          ...(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',
+          height,
+          width,
+          maxHeight,
+          maxWidth,
+          borderRadius,
+          backgroundColor,
+          margin,
        }
      }

--- a/client/web/compose/src/components/Public/Page/Attachment/Modal.vue
+++ b/client/web/compose/src/components/Public/Page/Attachment/Modal.vue
@@ -16,7 +16,7 @@
    </p>

    <a
-      v-if="attachment && attachment.enableDownload"
+      v-if="attachment.download"
      slot="header.right"
      :href="(attachment || {}).download"
    >
--- a/lib/js/src/compose/types/page-block/file.ts
+++ b/lib/js/src/compose/types/page-block/file.ts
@@ -7,15 +7,15 @@ interface Options {
  mode: string;
  attachments: string[];
  hideFileName: boolean;
-  height?: number;
-  width?: number;
-  maxHeight?: number;
-  maxWidth?: number;
-  borderRadius?: number;
-  margin?: number;
-  backgroundColor?: string;
+  height: string;
+  width: string;
+  maxHeight: string;
+  maxWidth: string;
+  borderRadius: string;
+  margin: string;
+  backgroundColor: string;
  magnifyOption: string;
-  enablePreview?: boolean;
+  clickToView?: boolean;
  enableDownload?: boolean;
 }

@@ -35,15 +35,15 @@ 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,
+  height: '',
+  width: '',
+  maxHeight: '',
+  maxWidth: '',
+  borderRadius: '',
+  margin: 'auto',
+  backgroundColor: '',
  magnifyOption: '',
-  enablePreview: true,
+  clickToView: true,
  enableDownload: true
 })

@@ -64,9 +64,8 @@ export class PageBlockFile extends PageBlock {
      this.options.attachments = o.attachments
    }

-    Apply(this.options, o, Boolean, 'hideFileName', 'enablePreview', 'enableDownload')
-    Apply(this.options, o, String, 'backgroundColor', 'magnifyOption')
-    Apply(this.options, o, Number, 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin')
+    Apply(this.options, o, Boolean, 'hideFileName', 'clickToView', 'enableDownload')
+    Apply(this.options, o, String, 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin', 'backgroundColor', 'magnifyOption')

    if (o.mode) {
      if (PageBlockFileModes.includes(o.mode)) {
--- a/locale/en/corteza-webapp-compose/field.yaml
+++ b/locale/en/corteza-webapp-compose/field.yaml
@@ -49,7 +49,7 @@ kind:
      unitType: Unit type
      px: px
      enableDownload: Enable download
-      enablePreview: Enable preview
+      clickToView: Click to view file
  number:
    exampleFormat: Format
    exampleInput: Input