owncloud · kulmann · Jul 7, 2021 · Jul 7, 2021 · Jul 7, 2021
diff --git a/changelog/unreleased/enhancement-update-ods-8.0.0 b/changelog/unreleased/enhancement-update-ods-8.0.0
@@ -0,0 +1,6 @@
+Enhancement: Update Design System to 8.0.0
+
+The ownCloud design system has been updated, bringing mostly small bugfixes and adding a differentiation between `previews` and `thumbnails`.
+
+https://github.com/owncloud/owncloud-design-system/releases/tag/v8.0.0-rc2
+https://github.com/owncloud/web/pull/5465
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -102,7 +102,7 @@
         <oc-button
           id="files-view-options-btn"
           key="files-view-options-btn"
-          data-test-id="files-view-options-btn"
+          data-testid="files-view-options-btn"
           :aria-label="viewButtonAriaLabel"
           variation="passive"
           appearance="raw"
@@ -122,7 +122,7 @@
             <li>
               <oc-switch
                 v-model="hiddenFilesShownModel"
-                data-test-id="files-switch-hidden-files"
+                data-testid="files-switch-hidden-files"
                 :label="$gettext('Show hidden files')"
               />
             </li>

diff --git a/packages/web-app-files/src/components/FilesList/ListInfo.vue b/packages/web-app-files/src/components/FilesList/ListInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="uk-text-nowrap uk-text-center">
     <p
-      data-test-id="files-list-footer-info"
+      data-testid="files-list-footer-info"
       :data-test-items="items"
       :data-test-files="files"
       :data-test-folders="folders"

diff --git a/packages/web-app-files/src/components/SideBar/Links/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Links/FileLinks.vue
@@ -27,7 +27,7 @@
         </div>
         <p
           v-else
-          data-test-id="files-links-no-reshare-permissions-message"
+          data-testid="files-links-no-reshare-permissions-message"
           class="oc-mt-s"
           v-text="noResharePermsMessage"
         />

diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -21,7 +21,7 @@
         <p
           v-else
           key="no-reshare-permissions-message"
-          data-test-id="files-collaborators-no-reshare-permissions-message"
+          data-testid="files-collaborators-no-reshare-permissions-message"
           v-text="noResharePermsMessage"
         />
         <template v-if="$_ownerAsCollaborator">

diff --git a/packages/web-app-files/src/constants.ts b/packages/web-app-files/src/constants.ts
@@ -1,4 +1,11 @@
 export abstract class ImageDimension {
-  static readonly ThumbNail: [number, number] = [36, 36]
+  static readonly Thumbnail: [number, number] = [36, 36]
+  static readonly Preview: [number, number] = [1200, 1200]
   static readonly Avatar: number = 64
 }
+
+export abstract class ImageType {
+  static readonly Thumbnail: string = 'thumbnail'
+  static readonly Preview: string = 'preview'
+  static readonly Avatar: string = 'avatar'
+}
diff --git a/packages/web-app-files/src/store/actions.js b/packages/web-app-files/src/store/actions.js
@@ -527,7 +527,7 @@ export default {
     })
   },
 
-  async loadPreview({ commit, rootGetters }, { resource, isPublic, dimensions }) {
+  async loadPreview({ commit, rootGetters }, { resource, isPublic, dimensions, type }) {
     if (
       rootGetters.previewFileExtensions.length &&
       !rootGetters.previewFileExtensions.includes(resource.extension)
@@ -548,7 +548,7 @@ export default {
     )
 
     if (preview) {
-      commit('UPDATE_RESOURCE_FIELD', { id: resource.id, field: 'preview', value: preview })
+      commit('UPDATE_RESOURCE_FIELD', { id: resource.id, field: type, value: preview })
     }
   }
 }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
@@ -14,7 +14,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': isSidebarOpen }"
         :are-paths-displayed="true"
-        :are-previews-displayed="displayPreviews"
+        :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
         :highlighted="highlightedFile ? highlightedFile.id : null"
@@ -62,7 +62,7 @@ import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension } from '../constants'
+import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 
 const visibilityObserver = new VisibilityObserver()
@@ -116,7 +116,7 @@ export default {
       return this.inProgress.length > 0
     },
 
-    displayPreviews() {
+    displayThumbnails() {
       return !this.configuration.options.disablePreviews
     }
   },
@@ -151,7 +151,7 @@ export default {
     ...mapMutations(['SET_QUOTA']),
 
     rowMounted(resource, component) {
-      if (!this.displayPreviews) {
+      if (!this.displayThumbnails) {
         return
       }
 
@@ -160,7 +160,8 @@ export default {
         this.loadPreview({
           resource,
           isPublic: false,
-          dimensions: ImageDimension.ThumbNail
+          dimensions: ImageDimension.Thumbnail,
+          type: ImageType.Thumbnail
         })
       }, 250)
 

diff --git a/packages/web-app-files/src/views/LocationPicker.vue b/packages/web-app-files/src/views/LocationPicker.vue
@@ -43,7 +43,7 @@
             v-else
             id="files-location-picker-table"
             class="files-table"
-            :are-previews-displayed="false"
+            :are-thumbnails-displayed="false"
             :resources="activeFiles"
             :disabled="disabledResources"
             :target-route="targetRoute"

diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
@@ -22,7 +22,7 @@
         v-model="selected"
         class="files-table"
         :class="{ 'files-table-squashed': isSidebarOpen }"
-        :are-previews-displayed="displayPreviews"
+        :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
         :highlighted="highlightedFile ? highlightedFile.id : null"
@@ -80,7 +80,7 @@ import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension } from '../constants'
+import { ImageDimension, ImageType } from '../constants'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -145,7 +145,7 @@ export default {
       return { name: this.$route.name }
     },
 
-    displayPreviews() {
+    displayThumbnails() {
       return !this.configuration.options.disablePreviews
     }
   },
@@ -202,7 +202,7 @@ export default {
     ...mapMutations(['SET_QUOTA']),
 
     rowMounted(resource, component) {
-      if (!this.displayPreviews) {
+      if (!this.displayThumbnails) {
         return
       }
 
@@ -211,7 +211,8 @@ export default {
         this.loadPreview({
           resource,
           isPublic: false,
-          dimensions: ImageDimension.ThumbNail
+          dimensions: ImageDimension.Thumbnail,
+          type: ImageType.Thumbnail
         })
       }, 250)
 

diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
@@ -22,7 +22,7 @@
         v-model="selected"
         class="files-table"
         :class="{ 'files-table-squashed': isSidebarOpen }"
-        :are-previews-displayed="displayPreviews"
+        :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
         :highlighted="highlightedFile ? highlightedFile.id : null"
@@ -67,7 +67,7 @@ import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import NotFoundMessage from '../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension } from '../constants'
+import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 
 const visibilityObserver = new VisibilityObserver()
@@ -137,7 +137,7 @@ export default {
       return { name: this.$route.name }
     },
 
-    displayPreviews() {
+    displayThumbnails() {
       return !this.configuration.options.disablePreviews
     }
   },
@@ -172,7 +172,7 @@ export default {
     ]),
 
     rowMounted(resource, component) {
-      if (!this.displayPreviews) {
+      if (!this.displayThumbnails) {
         return
       }
 
@@ -181,7 +181,8 @@ export default {
         this.loadPreview({
           resource,
           isPublic: true,
-          dimensions: ImageDimension.ThumbNail
+          dimensions: ImageDimension.Thumbnail,
+          type: ImageType.Thumbnail
         })
       }, 250)
 

diff --git a/packages/web-app-files/src/views/SharedViaLink.vue b/packages/web-app-files/src/views/SharedViaLink.vue
@@ -18,7 +18,7 @@
         v-model="selected"
         class="files-table"
         :class="{ 'files-table-squashed': isSidebarOpen }"
-        :are-previews-displayed="displayPreviews"
+        :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
         :highlighted="highlightedFile ? highlightedFile.id : null"
@@ -62,7 +62,7 @@ import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension } from '../constants'
+import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 
 const visibilityObserver = new VisibilityObserver()
@@ -121,7 +121,7 @@ export default {
       return { name: 'files-personal' }
     },
 
-    displayPreviews() {
+    displayThumbnails() {
       return !this.configuration.options.disablePreviews
     }
   },
@@ -156,7 +156,7 @@ export default {
     ...mapMutations(['SET_QUOTA']),
 
     rowMounted(resource, component) {
-      if (!this.displayPreviews) {
+      if (!this.displayThumbnails) {
         return
       }
 
@@ -165,7 +165,8 @@ export default {
         this.loadPreview({
           resource,
           isPublic: false,
-          dimensions: ImageDimension.ThumbNail
+          dimensions: ImageDimension.Thumbnail,
+          type: ImageType.Thumbnail
         })
       }, 250)
 

diff --git a/packages/web-app-files/src/views/SharedWithMe.vue b/packages/web-app-files/src/views/SharedWithMe.vue
@@ -20,7 +20,7 @@
         v-model="selected"
         class="files-table"
         :class="{ 'files-table-squashed': isSidebarOpen }"
-        :are-previews-displayed="displayPreviews"
+        :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
         :highlighted="highlightedFile ? highlightedFile.id : null"
@@ -94,7 +94,7 @@ import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension } from '../constants'
+import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 
 const visibilityObserver = new VisibilityObserver()
@@ -159,7 +159,7 @@ export default {
       return { name: 'files-personal' }
     },
 
-    displayPreviews() {
+    displayThumbnails() {
       return !this.configuration.options.disablePreviews
     }
   },
@@ -203,14 +203,15 @@ export default {
         unobserve()
         this.loadAvatars({ resource })
 
-        if (!this.displayPreviews) {
+        if (!this.displayThumbnails) {
           return
         }
 
         this.loadPreview({
           resource,
           isPublic: false,
-          dimensions: ImageDimension.ThumbNail
+          dimensions: ImageDimension.Thumbnail,
+          type: ImageType.Thumbnail
         })
       }, 250)
 

diff --git a/packages/web-app-files/src/views/SharedWithOthers.vue b/packages/web-app-files/src/views/SharedWithOthers.vue
@@ -20,7 +20,7 @@
         v-model="selected"
         class="files-table"
         :class="{ 'files-table-squashed': isSidebarOpen }"
-        :are-previews-displayed="displayPreviews"
+        :are-thumbnails-displayed="displayThumbnails"
         :resources="activeFiles"
         :target-route="targetRoute"
         :highlighted="highlightedFile ? highlightedFile.id : null"
@@ -64,7 +64,7 @@ import ListLoader from '../components/FilesList/ListLoader.vue'
 import NoContentMessage from '../components/FilesList/NoContentMessage.vue'
 import ListInfo from '../components/FilesList/ListInfo.vue'
 import { VisibilityObserver } from 'web-pkg/src/observer'
-import { ImageDimension } from '../constants'
+import { ImageDimension, ImageType } from '../constants'
 import debounce from 'lodash-es/debounce'
 
 const visibilityObserver = new VisibilityObserver()
@@ -123,7 +123,7 @@ export default {
       return { name: 'files-personal' }
     },
 
-    displayPreviews() {
+    displayThumbnails() {
       return !this.configuration.options.disablePreviews
     }
   },
@@ -166,14 +166,15 @@ export default {
         unobserve()
         this.loadAvatars({ resource })
 
-        if (!this.displayPreviews) {
+        if (!this.displayThumbnails) {
           return
         }
 
         this.loadPreview({
           resource,
           isPublic: false,
-          dimensions: ImageDimension.ThumbNail
+          dimensions: ImageDimension.Thumbnail,
+          type: ImageType.Thumbnail
         })
       }, 250)
 

diff --git a/packages/web-app-files/src/views/Trashbin.vue b/packages/web-app-files/src/views/Trashbin.vue
@@ -19,7 +19,7 @@
         class="files-table"
         :class="{ 'files-table-squashed': isSidebarOpen }"
         :are-paths-displayed="true"
-        :are-previews-displayed="false"
+        :are-thumbnails-displayed="false"
         :resources="activeFiles"
         :highlighted="highlightedFile ? highlightedFile.id : null"
         :are-resources-clickable="false"

diff --git a/packages/web-app-files/tests/unit/components/AppBar.spec.js b/packages/web-app-files/tests/unit/components/AppBar.spec.js
@@ -50,7 +50,7 @@ describe('AppBar', () => {
       directives: { OcTooltip: () => {} }
     })
 
-    wrapper.find('[data-test-id="files-switch-hidden-files"]').vm.$emit('change', false)
+    wrapper.find('[data-testid="files-switch-hidden-files"]').vm.$emit('change', false)
     await wrapper.vm.$nextTick()
 
     expect(mutations.SET_HIDDEN_FILES_VISIBILITY).toHaveBeenCalled()

diff --git a/packages/web-app-files/tests/unit/views/Favorites.spec.js b/packages/web-app-files/tests/unit/views/Favorites.spec.js
@@ -138,12 +138,12 @@ describe('Favorites component', () => {
           })
         })
         expect(
-          wrapper.find(selectors.favoritesTable).attributes('arepreviewsdisplayed')
+          wrapper.find(selectors.favoritesTable).attributes('arethumbnailsdisplayed')
         ).toBeTruthy()
       })
       it('hides previews when the "disablePreviews" config is enabled', () => {
         expect(
-          defaultWrapper.find(selectors.favoritesTable).attributes('arepreviewsdisplayed')
+          defaultWrapper.find(selectors.favoritesTable).attributes('arethumbnailsdisplayed')
         ).toBeFalsy()
       })
     })