Fix excessive space and image covering filename issue

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

@@ -186,15 +186,13 @@ export default {
     modes () {
       return [
         { value: 'list', text: this.$t('kind.file.view.list') },
-        { value: 'grid', text: this.$t('kind.file.view.grid') },
-        { value: 'single', text: this.$t('kind.file.view.single') },
         { value: 'gallery', text: this.$t('kind.file.view.gallery') },
       ]
     },
 
     enablePreviewStyling () {
       const { mode } = this.f.options
-      return (mode === 'single') || (mode === 'gallery')
+      return mode === 'gallery'
     },
   },
 }

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 px-2"
+      class="h-100"
     />
   </wrap>
 </template>

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

@@ -216,15 +216,13 @@ export default {
     modes () {
       return [
         { value: 'list', text: this.$t('kind.file.view.list') },
-        { value: 'grid', text: this.$t('kind.file.view.grid') },
-        { value: 'single', text: this.$t('kind.file.view.single') },
         { value: 'gallery', text: this.$t('kind.file.view.gallery') },
       ]
     },
 
     currentPreviewMode () {
       const { mode } = this.options
-      return (mode === 'single') || (mode === 'gallery')
+      return mode === 'gallery'
     },
   },
 

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

@@ -6,9 +6,9 @@
     >
       <b-spinner />
     </div>
+
     <div
       v-else-if="mode === 'list'"
-      class="list"
     >
       <draggable
         :list.sync="attachments"
@@ -17,7 +17,7 @@
         <div
           v-for="(a, index) in attachments"
           :key="a.attachmentID"
-          class="item"
+          class="item pl-2 mb-2"
         >
           <b-row no-gutters>
             <b-col>
@@ -32,35 +32,42 @@
                   class="handle text-light"
                 />
               </div>
-              <attachment-link :attachment="a" />
-              &nbsp;
+
+              <div class="d-flex align-items-center">
+                <font-awesome-icon
+                  :title="ext(a)"
+                  :icon="['far', `file-${ext(a)}`]"
+                  class="text-dark h5 float-left mb-0 mr-2"
+                />
+
+                <attachment-link :attachment="a" />
+              </div>
+
               <i18next
                 path="general.label.attachmentFileInfo"
-                tag="label"
+                tag="small"
+                class="d-block text-muted"
               >
                 <span>{{ size(a) }}</span>
+
                 <span>{{ uploadedAt(a) }}</span>
               </i18next>
             </b-col>
+
             <div class="col-sm-2 text-right my-auto">
-              <a
+              <b-button
                 v-if="a.download"
                 :href="a.download"
-                class="px-0 btn text-primary mr-2"
+                variant="outline-light"
+                class="border-0 text-primary px-2 mr-2"
               >
                 <font-awesome-icon :icon="['fas', 'download']" />
-              </a>
-              <b-button
-                v-if="enableDelete"
-                variant="link"
-                class="px-0"
-                @click="deleteAttachment(index)"
-              >
-                <font-awesome-icon
-                  :icon="['far', 'trash-alt']"
-                  class="action text-danger"
-                />
               </b-button>
+
+              <c-input-confirm
+                v-if="enableDelete"
+                @confirmed="deleteAttachment(index)"
+              />
             </div>
           </b-row>
         </div>
@@ -68,45 +75,16 @@
     </div>
 
     <div
-      v-else-if="mode === 'grid'"
-      class="grid"
+      v-else
+      class="d-flex align-items-center justify-content-around flex-wrap h-100"
     >
       <div
         v-for="a in attachments"
         :key="a.attachmentID"
-        class="p-2"
-      >
-        <attachment-link
-          :attachment="a"
-          class="d-block"
-        >
-          <font-awesome-icon
-            :icon="['far', 'file-'+ext(a)]"
-            class="text-dark float-left mr-2"
-          />
-        </attachment-link>
-        <i18next
-          path="general.label.attachmentFileInfo"
-          tag="label"
-        >
-          <span>{{ size(a) }}</span>
-          <span>{{ uploadedAt(a) }}</span>
-        </i18next>
-      </div>
-    </div>
-
-    <div
-      v-else
-      class="single gallery h-100"
-    >
-      <div
-        v-for="(a) in files"
-        :key="a.attachmentID"
-        class="mx-auto h-100"
+        :class="{ 'h-100': attachments.length === 1 }"
       >
         <c-preview-inline
           v-if="canPreview(a)"
-          class="ml-0 py-2"
           :src="inlineUrl(a)"
           :meta="a.meta"
           :name="a.name"
@@ -128,7 +106,7 @@
 
         <div
           v-if="!hideFileName"
-          class="m-1"
+          class="text-center"
         >
           <attachment-link
             :attachment="a"
@@ -233,14 +211,6 @@ export default {
     baseURL () {
       return url.Make({ url: window.CortezaAPI + '/compose' })
     },
-
-    files () {
-      if (this.mode === 'single') {
-        return this.attachments.slice(this.attachments.length - 1)
-      } else {
-        return this.attachments
-      }
-    },
   },
 
   watch: {
@@ -371,25 +341,13 @@ export default {
   },
 }
 </script>
+
 <style lang="scss" scoped>
-
-.grid {
-  .svg-inline--fa {
-    font-size: 40px;
-  }
-}
-
-.single {
-  .svg-inline--fa {
-    font-size: 40px;
-  }
-
-  img {
-    cursor: pointer;
-  }
-}
-
 .handle {
   cursor: grab;
 }
+
+.item:hover {
+  background-color: $gray-200;
+}
 </style>

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

@@ -31,7 +31,7 @@
     </div>
 
     <div
-      v-if="mode === 'single' || 'gallery'"
+      v-else
       class="single"
     >
       <div v-if="isImage(a)">

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

@@ -1,5 +1,6 @@
 import { ModuleField, Registry, Options, defaultOptions } from './base'
 import { Apply, ApplyWhitelisted } from '../../../cast'
+import { omit } from 'lodash';
 
 const kind = 'File'
 
@@ -8,8 +9,6 @@ export const modes = [
   'list',
   // grid of icons
   'grid',
-  // single (first) image/file, show preview
-  'single',
   // list of all images/files, show preview
   'gallery',
 ]
@@ -66,6 +65,14 @@ export class ModuleFieldFile extends ModuleField {
     Apply(this.options, o, Number, 'maxSize')
     Apply(this.options, o, Boolean, 'allowImages', 'allowDocuments', 'inline', 'hideFileName')
     Apply(this.options, o, String, 'mimetypes', 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin', 'backgroundColor')
+
+    // Legacy
+    if (o.mode === 'single') {
+      o.mode = 'gallery'
+    } else if (o.mode === 'grid') {
+      o.mode = 'list'
+    }
+
     ApplyWhitelisted(this.options, o, modes, 'mode')
   }
 }

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

@@ -23,10 +23,6 @@ const PageBlockFileDefaultMode = 'list'
 const PageBlockFileModes = [
   // list of attachments, no preview
   'list',
-  // grid of icons
-  'grid',
-  // single (first) image/file, show preview
-  'single',
   // list of all images/files, show preview
   'gallery',
 ]
@@ -68,6 +64,13 @@ export class PageBlockFile extends PageBlock {
     Apply(this.options, o, String, 'height', 'width', 'maxHeight', 'maxWidth', 'borderRadius', 'margin', 'backgroundColor', 'magnifyOption')
 
     if (o.mode) {
+      // Legacy
+      if (o.mode === 'single') {
+        o.mode = 'gallery'
+      } else if (o.mode === 'grid') {
+        o.mode = 'list'
+      }
+
       if (PageBlockFileModes.includes(o.mode)) {
         this.options.mode = o.mode
       } else {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline h-100">
+  <div class="d-flex inline h-100">
     <img
       ref="image"
       :key="src"