Add modal image preview to file module field

client/web/compose/src/components/ModuleFields/Configurator/File.vue

@@ -36,15 +36,25 @@
       />
     </b-form-group>
 
-    <b-form-group
-      v-if="enablePreviewStyling"
-      class="mb-0"
-    >
+    <b-form-group>
       <b-form-checkbox
+        v-if="enablePreviewStyling"
         v-model="f.options.hideFileName"
       >
         {{ $t('kind.file.view.showName') }}
       </b-form-checkbox>
+
+      <b-form-checkbox
+        v-model="f.options.clickToView"
+      >
+        {{ $t('kind.file.view.clickToView') }}
+      </b-form-checkbox>
+
+      <b-form-checkbox
+        v-model="f.options.enableDownload"
+      >
+        {{ $t('kind.file.view.enableDownload') }}
+      </b-form-checkbox>
     </b-form-group>
 
     <template v-if="enablePreviewStyling">

client/web/compose/src/components/ModuleFields/Viewer/File.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    style="min-width: fit-content"
     @click.stop
   >
     <list-loader
@@ -14,6 +15,7 @@
     <errors :errors="errors" />
   </div>
 </template>
+
 <script>
 import base from './base'
 import ListLoader from 'corteza-webapp-compose/src/components/Public/Page/Attachment/ListLoader'

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

@@ -10,7 +10,7 @@
       :mode="options.mode"
       :hide-file-name="options.hideFileName"
       :preview-options="options"
-      class="h-100"
+      class="h-100 p-2"
     />
   </wrap>
 </template>

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

@@ -14,27 +14,27 @@
         :options="modes"
       />
     </b-form-group>
-    <b-form-checkbox
-      v-model="options.hideFileName"
-      :disabled="!currentPreviewMode"
-      class="mb-3"
-    >
-      {{ $t('kind.file.view.showName') }}
-    </b-form-checkbox>
 
-    <b-form-checkbox
-      v-model="options.clickToView"
-      class="mb-3"
-    >
-      {{ $t('kind.file.view.clickToView') }}
-    </b-form-checkbox>
+    <b-form-group>
+      <b-form-checkbox
+        v-if="enablePreviewStyling"
+        v-model="options.hideFileName"
+      >
+        {{ $t('kind.file.view.showName') }}
+      </b-form-checkbox>
 
-    <b-form-checkbox
-      v-model="options.enableDownload"
-      class="mb-3"
-    >
-      {{ $t('kind.file.view.enableDownload') }}
-    </b-form-checkbox>
+      <b-form-checkbox
+        v-model="options.clickToView"
+      >
+        {{ $t('kind.file.view.clickToView') }}
+      </b-form-checkbox>
+
+      <b-form-checkbox
+        v-model="options.enableDownload"
+      >
+        {{ $t('kind.file.view.enableDownload') }}
+      </b-form-checkbox>
+    </b-form-group>
 
     <uploader
       :endpoint="endpoint"
@@ -51,7 +51,7 @@
       class="mt-2"
     />
 
-    <template v-if="currentPreviewMode">
+    <template v-if="enablePreviewStyling">
       <hr>
 
       <h5 class="mb-2">
@@ -220,7 +220,7 @@ export default {
       ]
     },
 
-    currentPreviewMode () {
+    enablePreviewStyling () {
       const { mode } = this.options
       return mode === 'gallery'
     },

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

@@ -17,13 +17,15 @@
         <div
           v-for="(a, index) in attachments"
           :key="a.attachmentID"
-          class="item pl-2 mb-2"
+          class="item mb-2"
         >
           <b-row no-gutters>
-            <b-col>
+            <b-col
+              cols="auto"
+            >
               <div
                 v-if="enableOrder"
-                class="mr-2 d-inline"
+                class="d-inline p-1 mr-2"
               >
                 <font-awesome-icon
                   v-b-tooltip.hover
@@ -32,7 +34,9 @@
                   class="handle text-light"
                 />
               </div>
+            </b-col>
 
+            <b-col>
               <div class="d-flex align-items-center">
                 <font-awesome-icon
                   :title="ext(a)"
@@ -54,7 +58,7 @@
               </i18next>
             </b-col>
 
-            <div class="col-sm-2 text-right my-auto">
+            <b-col cols="auto">
               <b-button
                 v-if="a.download"
                 :href="a.download"
@@ -68,7 +72,7 @@
                 v-if="enableDelete"
                 @confirmed="deleteAttachment(index)"
               />
-            </div>
+            </b-col>
           </b-row>
         </div>
       </draggable>

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -735,7 +735,6 @@ export default {
         if (b.kind === 'RecordList' && b.options.editable) {
           const p = new Promise((resolve) => {
             const recordListUniqueID = [this.page.pageID, (this.record || {}).recordID, b.blockID, false].map(v => v || NoID).join('-')
-            console.log(`page-block:validate:${recordListUniqueID}`)
             this.$root.$emit(`page-block:validate:${recordListUniqueID}`, resolve)
           })
 

lib/js/src/compose/types/module-field/file.ts

@@ -1,14 +1,11 @@
 import { ModuleField, Registry, Options, defaultOptions } from './base'
 import { Apply, ApplyWhitelisted } from '../../../cast'
-import { omit } from 'lodash';
 
 const kind = 'File'
 
 export const modes = [
   // list of attachments, no preview
   'list',
-  // grid of icons
-  'grid',
   // list of all images/files, show preview
   'gallery',
 ]
@@ -28,6 +25,8 @@ interface FileOptions extends Options {
   borderRadius?: string;
   margin?: string;
   backgroundColor?: string;
+  clickToView?: boolean;
+  enableDownload?: boolean;
 }
 
 const defaults = (): Readonly<FileOptions> => Object.freeze({
@@ -35,7 +34,7 @@ const defaults = (): Readonly<FileOptions> => Object.freeze({
   allowImages: true,
   allowDocuments: true,
   maxSize: 0,
-  mode: '\n',
+  mode: 'list',
   inline: true,
   hideFileName: false,
   mimetypes: '',
@@ -46,6 +45,8 @@ const defaults = (): Readonly<FileOptions> => Object.freeze({
   borderRadius: '',
   margin: 'auto',
   backgroundColor: '#FFFFFF00',
+  clickToView: true,
+  enableDownload: true,
 })
 
 export class ModuleFieldFile extends ModuleField {
@@ -63,7 +64,7 @@ export class ModuleFieldFile extends ModuleField {
     super.applyOptions(o)
 
     Apply(this.options, o, Number, 'maxSize')
-    Apply(this.options, o, Boolean, 'allowImages', 'allowDocuments', 'inline', 'hideFileName')
+    Apply(this.options, o, Boolean, 'allowImages', 'allowDocuments', 'inline', 'hideFileName', 'clickToView', 'enableDownload')
     Apply(this.options, o, String, 'mimetypes', 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin', 'backgroundColor')
 
     // Legacy

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

@@ -90,9 +90,13 @@ div {
   }
 
   &.inline {
-    img:not(.disable-zoom-cursor) {
+    img {
       cursor: zoom-in;
     }
+
+    img.disable-zoom-cursor {
+      cursor: default;
+    }
   }
 }
 </style>

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

@@ -34,9 +34,10 @@ kind:
       maxSizeLabel: Maximum file size
       mimetypesFootnote: 'MIME types, separated with ",". Example: "text/plain,text/csv"'
       mimetypesLabel: File type allow list
-      modeFootnote: How files are represented in record page blocks
+      modeFootnote: How files are represented in page blocks
       modeLabel: View mode
       showName: Hide file name
+      enableDownload: Enable download
       single: Single image
       previewStyle: Preview style
       height: Height
@@ -49,7 +50,6 @@ kind:
       margin: Margin
       unitType: Unit type
       px: px
-      enableDownload: Enable download
       clickToView: Click to view file
       description: 'Add unit after value to set it. For example: 50px or 50%'
   number: