feat: apply new design to document thumbnail

components.d.ts

@@ -73,7 +73,7 @@ declare module 'vue' {
     DocumentTabPreview: typeof import('./src/components/Document/DocumentTab/DocumentTabPreview.vue')['default']
     DocumentTagsForm: typeof import('./src/components/DocumentTagsForm.vue')['default']
     DocumentThread: typeof import('./src/components/DocumentThread.vue')['default']
-    DocumentThumbnail: typeof import('./src/components/DocumentThumbnail.vue')['default']
+    DocumentThumbnail: typeof import('./src/components/Document/DocumentThumbnail.vue')['default']
     DocumentTranslatedContent: typeof import('./src/components/DocumentTranslatedContent.vue')['default']
     DocumentTypeCard: typeof import('./src/components/DocumentTypeCard.vue')['default']
     DocumentViewerAudio: typeof import('./src/components/Document/DocumentViewer/DocumentViewerAudio.vue')['default']

src/components/DocumentThumbnail.vue → src/components/Document/DocumentThumbnail.vue

@@ -2,19 +2,27 @@
   <div class="document-thumbnail" :class="thumbnailClass" :style="thumbnailStyle">
     <img v-if="isActivated" :alt="thumbnailAlt" class="document-thumbnail__image" :src="thumbnailSrc" />
     <span v-if="!loaded && document.contentTypeIcon" class="document-thumbnail__placeholder">
-      <fa :icon="document.contentTypeIcon"></fa>
+      <phosphor-icon :name="document.contentTypeIcon" :size="size" :scale="1.5" />
+    </span>
+    <span class="document-thumbnail__overlay">
+      <phosphor-icon :name="overlayIcon" :size="size" :scale="1.5" />
     </span>
   </div>
 </template>
 
 <script>
-import preview from '../mixins/preview'
+import { PhosphorIcon } from '@icij/murmur-next'
+
+import preview from '@/mixins/preview'
 
 /**
  * The document's thumbnail (using the preview) server
  */
 export default {
   name: 'DocumentThumbnail',
+  components: {
+    PhosphorIcon
+  },
   mixins: [preview],
   props: {
     /**
@@ -32,18 +40,42 @@ export default {
     },
     /**
      * Size of the thumbnail
-     * @values xs, sm, md, lg, xl
+     * @values xs, sm, md, lg, xl, xxl
      */
     size: {
       type: [Number, String],
       default: 'sm'
     },
+    /**
+     * The image is clickable and can have a hover effect
+     */
+    clickable: {
+      type: Boolean
+    },
+    /**
+     * The image has an active effect
+     */
+    active: {
+      type: Boolean
+    },
+    /**
+     * The image has a hover effect
+     */
+    hover: {
+      type: Boolean
+    },
     /**
      * Crop the image to have fixed squared size
      */
     crop: {
       type: Boolean
     },
+    /**
+     * Fit the image to its container
+     */
+    fit: {
+      type: Boolean
+    },
     /**
      * Load the thumbnail only when it enters the viewport
      */
@@ -69,9 +101,13 @@ export default {
   computed: {
     thumbnailClass() {
       return {
+        'document-thumbnail--active': this.active,
         'document-thumbnail--crop': this.crop,
+        'document-thumbnail--fit': this.fit,
         'document-thumbnail--errored': this.errored,
         'document-thumbnail--loaded': this.loaded,
+        'document-thumbnail--clickable': this.clickable,
+        'document-thumbnail--hover': this.hover,
         'document-thumbnail--estimated-size': this.ratio !== null,
         [`document-thumbnail--${this.size}`]: isNaN(this.size)
       }
@@ -95,6 +131,9 @@ export default {
     },
     lazyLoadable() {
       return window && 'IntersectionObserver' in window
+    },
+    overlayIcon() {
+      return this.loaded ? 'eye' : 'eye-slash'
     }
   },
   async mounted() {
@@ -156,28 +195,74 @@ export default {
 
 <style lang="scss" scoped>
 .document-thumbnail {
+  $zindex-image: 0;
+  $zindex-placeholder: 0;
+  $zindex-border: 20;
+  $zindex-overlay: 30;
+
   $heights: (
-    xs: 80px,
-    sm: 310px,
-    md: 540px,
-    lg: 720px,
-    xl: 960px
+    xs: 50px,
+    sm: 80px,
+    md: 150px,
+    lg: 310px,
+    xl: 720px,
+    xxl: 960px
   );
 
   @each $name, $value in $heights {
-    --height-#{$name}: #{$value};
+    &--#{$name} {
+      --height: #{$value};
+    }
   }
 
-  background: $body-bg;
-  color: mix($body-bg, $text-muted, 70%);
-  max-width: 100%;
-  min-width: 80px;
+  background: var(--bs-body-bg);
+  color: var(--bs-tertiary-color);
+  min-width: var(--height);
+  max-width: var(--height);
   overflow: hidden;
   position: relative;
 
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 1px;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: $zindex-border;
+    background: transparent;
+  }
+
+  &--active:after,
+  &--clickable:hover:after,
+  &--hover:after {
+    background: $secondary;
+  }
+
+  &--clickable:hover,
+  &--hover {
+    .document-thumbnail__placeholder {
+      display: none;
+    }
+
+    .document-thumbnail__overlay {
+      display: flex;
+      cursor: pointer;
+    }
+
+    .document-thumbnail__placeholder  + .document-thumbnail__overlay {
+      cursor: auto;
+    }
+  }
+
+  &--fit {
+    max-width: 100%;
+  }
+
   &--crop {
-    height: 80px;
-    width: 80px;
+    height: var(--height);
+    width: var(--height);
   }
 
   &--loaded:not(&--errored) &__image {
@@ -207,6 +292,8 @@ export default {
 
   &__image {
     display: inline-block;
+    position: relative;
+    z-index: $zindex-image;
     margin: auto;
     opacity: 0;
     transition: opacity 300ms;
@@ -229,11 +316,31 @@ export default {
   }
 
   &__placeholder {
-    left: 50%;
     position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 200%;
+    z-index: $zindex-placeholder;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bs-light-bg-subtle);
+  }
+
+  &__overlay {
+    position: absolute;
+    z-index: $zindex-overlay;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(var(--bs-lighter-rgb), 0.5);
+    color: var(--bs-tertiary);
+    display: none;
   }
 }
 </style>

src/components/Document/DocumentViewer/DocumentViewerPaginated.vue

@@ -69,7 +69,7 @@ import { get, range, uniqueId } from 'lodash'
 import axios from 'axios'
 
 import preview from '@/mixins/preview'
-import DocumentThumbnail from '@/components/DocumentThumbnail'
+import DocumentThumbnail from '@/components/Document/DocumentThumbnail'
 
 /**
  * Display a paginated preview of a document using the preview server.

src/components/DocumentTypeCard.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import DocumentThumbnail from '@/components/DocumentThumbnail'
+import DocumentThumbnail from '@/components/Document/DocumentThumbnail'
 
 /**
  * A small card to display information about the content-type of a document.

src/components/SearchResultsGrid.vue

@@ -50,10 +50,10 @@
 <script>
 import { mapState } from 'vuex'
 
-import DocumentActions from '@/components/DocumentActions'
-import DocumentSlicedName from '@/components/DocumentSlicedName'
-import DocumentThumbnail from '@/components/DocumentThumbnail'
-import SearchResultsHeader from '@/components/SearchResultsHeader'
+import DocumentActions from '@/components/Document/DocumentActions'
+import DocumentSlicedName from '@/components/Document/DocumentSlicedName'
+import DocumentThumbnail from '@/components/Document/DocumentThumbnail'
+import SearchResultsHeader from '@/components/Document/SearchResultsHeader'
 import settings from '@/utils/settings'
 
 /**

src/components/SearchResultsListLink.vue

@@ -34,9 +34,9 @@
 import { startCase } from 'lodash'
 import { mapState } from 'vuex'
 
-import DocumentSlicedName from '@/components/DocumentSlicedName'
-import DocumentThumbnail from '@/components/DocumentThumbnail'
-import ProjectLink from '@/components/ProjectLink'
+import DocumentSlicedName from '@/components/Document/DocumentSlicedName'
+import DocumentThumbnail from '@/components/Document/DocumentThumbnail'
+import ProjectLink from '@/components/Document/ProjectLink'
 import ner from '@/mixins/ner'
 
 /**

src/components/Widget/WidgetRecommendedBy.vue

@@ -73,9 +73,9 @@ import InfiniteLoading from 'v3-infinite-loading'
 
 import { fromNow, humanLongDate } from '@/utils/humanDate'
 import EsDocList from '@/api/resources/EsDocList'
-import DocumentThumbnail from '@/components/DocumentThumbnail'
-import DocumentSlicedName from '@/components/DocumentSlicedName'
-import UserDisplay from '@/components/UserDisplay'
+import DocumentThumbnail from '@/components/Document/DocumentThumbnail'
+import DocumentSlicedName from '@/components/Document/DocumentSlicedName'
+import UserDisplay from '@/components/Document/UserDisplay'
 
 /**
  * Widget to display a list of facets on the insights page.

src/pages/UserHistoryDocumentList.vue

@@ -78,10 +78,10 @@ import { castArray, compact, find, property, trimStart } from 'lodash'
 import { pathToRegexp } from 'path-to-regexp'
 
 import Document from '@/api/resources/Document'
-import DocumentThumbnail from '@/components/DocumentThumbnail'
-import DocumentActions from '@/components/DocumentActions'
-import ColumnFilterDropdown from '@/components/ColumnFilterDropdown'
-import ProjectLink from '@/components/ProjectLink'
+import DocumentThumbnail from '@/components/Document/DocumentThumbnail'
+import DocumentActions from '@/components/Document/DocumentActions'
+import ColumnFilterDropdown from '@/components/Document/ColumnFilterDropdown'
+import ProjectLink from '@/components/Document/ProjectLink'
 import utils from '@/mixins/utils'
 import { humanTime } from '@/utils/humanTime'
 import { humanDate } from '@/utils/humanDate'

src/stories/components/Document/DocumentThumbnail.stories.js

@@ -0,0 +1,61 @@
+import { markRaw } from 'vue'
+import { PhFilePdf } from '@phosphor-icons/vue'
+
+import { withMurmur } from '~storybook/decorators/murmur'
+import DocumentThumbnail from '@/components/Document/DocumentThumbnail'
+
+export default {
+  title: 'Components/Document/DocumentThumbnail',
+  decorators: [withMurmur({ previewHost: null })],
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+    }
+  },
+  args: {
+    size: 'xs',
+    crop: true,
+    hover: false,
+    clickable: true,
+    fit: false,
+    document: {
+      extractionLevel: 0,
+      inlineFullUrl: 'https://i.imgur.com/ns9ThQx.jpeg',
+      contentLength: 0,
+      contentType: 'image/jpeg',
+      isSupportedImage: true,
+      contentTypeIcon: markRaw(PhFilePdf)
+    }
+  },
+  render: (args) => ({
+    components: {
+      DocumentThumbnail
+    },
+    setup: () => ({ args }),
+    template: `
+      <div style="background-color: var(--bs-light-bg-subtle);" class="p-3">
+        <document-thumbnail v-bind="args" />
+      </div>
+    `
+  })
+}
+
+export const Default = {}
+
+export const WithPlaceholder = {
+  args: {
+    size: 'xs',
+    crop: true,
+    fit: false,
+    document: {
+      extractionLevel: 0,
+      inlineFullUrl: null,
+      contentLength: 0,
+      contentType: 'image/jpeg',
+      isSupportedImage: true,
+      contentTypeIcon: markRaw(PhFilePdf)
+    }
+  }
+}

src/utils/settings.scss

@@ -68,6 +68,8 @@ $danger-bg-subtle:#FBEBEC;
 
 $light-bg-subtle: $lighter;
 $light-bg-subtle-dark: $darker;
+$light-border-subtle: $light;
+$light-border-subtle-dark: #3E3F3F;
 
 $dark-bg-subtle: $darker;
 $dark-text-emphasis: $white;