Add filebase improvements

client/web/compose/src/components/PageBlocks/FileConfigurator.vue

@@ -21,6 +21,21 @@
     >
       {{ $t('kind.file.view.showName') }}
     </b-form-checkbox>
+
+    <b-form-checkbox
+      v-model="options.enablePreview"
+      class="mb-3"
+    >
+      {{ $t('kind.file.view.enablePreview') }}
+    </b-form-checkbox>
+
+    <b-form-checkbox
+      v-model="options.enableDownload"
+      class="mb-3"
+    >
+      {{ $t('kind.file.view.enableDownload') }}
+    </b-form-checkbox>
+
     <uploader
       :endpoint="endpoint"
       :max-filesize="$s('compose.Page.Attachments.MaxSize', 100)"

client/web/compose/src/components/Public/Page/Attachment/ListLoader.vue

@@ -96,12 +96,12 @@
 
     <div
       v-else
-      class="single gallery"
+      class="single gallery h-100"
     >
       <div
         v-for="(a) in files"
         :key="a.attachmentID"
-        class="my-2"
+        class="my-2 mx-auto h-100"
       >
         <c-preview-inline
           v-if="canPreview(a)"
@@ -111,6 +111,9 @@
           :name="a.name"
           :alt="a.name"
           :preview-style="{ width: 'unset', ...inlineCustomStyles(a) }"
+          :preview-class="[
+            !previewOptions.enablePreview ? 'disable-zoom-cursor' : ''
+          ]"
           :labels="previewLabels"
           @openPreview="openLightbox({ ...a, ...$event })"
         />
@@ -205,7 +208,7 @@ export default {
 
   computed: {
     inlineUrl () {
-      return (a) => (this.ext(a) === 'pdf' ? a.download : a.previewUrl)
+      return (a) => (this.ext(a) === 'pdf' ? a.download : (this.previewOptions.enablePreview ? a.previewUrl : a.url))
     },
 
     previewLabels () {
@@ -287,7 +290,10 @@ export default {
     },
 
     openLightbox (e) {
-      this.$root.$emit('showAttachmentsModal', e)
+      if (this.previewOptions.enablePreview) {
+        const { enableDownload } = this.previewOptions
+        this.$root.$emit('showAttachmentsModal', { ...e, enableDownload })
+      }
     },
 
     deleteAttachment (index) {
@@ -339,6 +345,10 @@ export default {
 
       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` }),

client/web/compose/src/components/Public/Page/Attachment/Modal.vue

@@ -16,7 +16,7 @@
     </p>
 
     <a
-      v-if="attachment"
+      v-if="attachment && attachment.enableDownload"
       slot="header.right"
       :href="(attachment || {}).download"
     >
@@ -71,7 +71,7 @@ export default {
 
   created () {
     window.addEventListener('keyup', this.onKeyUp)
-    this.$root.$on('showAttachmentsModal', ({ url, download, name, document = undefined, meta }) => {
+    this.$root.$on('showAttachmentsModal', ({ url, download, name, document = undefined, meta, enableDownload }) => {
       this.attachment = {
         document,
         download,
@@ -79,6 +79,7 @@ export default {
         src: url,
         name: name,
         caption: name,
+        enableDownload,
       }
     })
   },

lib/js/src/compose/types/page-block/file.ts

@@ -15,6 +15,8 @@ interface Options {
   margin?: number;
   backgroundColor?: string;
   magnifyOption: string;
+  enablePreview?: boolean;
+  enableDownload?: boolean;
 }
 
 const PageBlockFileDefaultMode = 'list'
@@ -40,7 +42,9 @@ const defaults: Readonly<Options> = Object.freeze({
   borderRadius: undefined,
   margin: undefined,
   backgroundColor: undefined,
-  magnifyOption: ''
+  magnifyOption: '',
+  enablePreview: true,
+  enableDownload: true
 })
 
 export class PageBlockFile extends PageBlock {
@@ -60,7 +64,7 @@ export class PageBlockFile extends PageBlock {
       this.options.attachments = o.attachments
     }
 
-    Apply(this.options, o, Boolean, 'hideFileName')
+    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')
 

lib/vue/src/components/filePreview/CPreviewInline.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="inline">
-    <main>
+  <div class="inline h-100">
+    <main class="h-100">
       <component
         :is="previewType"
         v-bind="$attrs"

lib/vue/src/components/filePreview/common/types/IMG/InlineIMG.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline">
+  <div class="inline h-100">
     <img
       ref="image"
       :key="src"
@@ -90,7 +90,7 @@ div {
   }
 
   &.inline {
-    img {
+    img:not(.disable-zoom-cursor) {
       cursor: zoom-in;
     }
   }

locale/en/corteza-webapp-compose/field.yaml

@@ -48,6 +48,8 @@ kind:
       margin: Margin
       unitType: Unit type
       px: px
+      enableDownload: Enable download
+      enablePreview: Enable preview
   number:
     exampleFormat: Format
     exampleInput: Input