Update ODS to v8.0.0-rc2

owncloud · Jul 7, 2021 · d999bf7 · d999bf7
1 parent c53852d
commit d999bf7
Show file tree

Hide file tree

Showing 16 changed files with 63 additions and 45 deletions.
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/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/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()
       })
     })

diff --git a/packages/web-runtime/package.json b/packages/web-runtime/package.json
@@ -12,7 +12,7 @@
     "lodash-es": "^4.17.21",
     "luxon": "^1.27.0",
     "oidc-client": "1.10.1",
-    "owncloud-design-system": "^7.5.0",
+    "owncloud-design-system": "^8.0.0-rc2",
     "owncloud-sdk": "1.0.0-2296",
     "p-queue": "^6.1.1",
     "tippy.js": "^6.3.1",

diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -94,7 +94,6 @@
         :title="modal.title"
         :message="modal.message"
         :has-input="modal.hasInput"
-        :focus-trap-active="true"
         :input-label="modal.inputLabel"
         :input-disabled="modal.inputDisabled"
         :input-value="modal.inputValue"

diff --git a/tests/acceptance/pageObjects/FilesPageElement/filesList.js b/tests/acceptance/pageObjects/FilesPageElement/filesList.js
@@ -699,7 +699,7 @@ module.exports = {
      * This element is concatenated as child of @see fileRowByResourcePath
      */
     filePreviewInFileRow: {
-      selector: '//img[contains(@class, "oc-resource-preview")]',
+      selector: '//img[contains(@class, "oc-resource-thumbnail")]',
       locateStrategy: 'xpath'
     },
     /**
@@ -753,7 +753,7 @@ module.exports = {
       selector: '.oc-modal-body-actions-cancel'
     },
     previewImage: {
-      selector: '//img[contains(@class, "oc-resource-preview")]',
+      selector: '//img[contains(@class, "oc-resource-thumbnail")]',
       locateStrategy: 'xpath'
     }
   }

diff --git a/yarn.lock b/yarn.lock
@@ -8149,10 +8149,10 @@ [email protected]:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^7.5.0:
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-7.5.0.tgz#ad17d7276fcb6729524f312cdc0bf77476da29b8"
-  integrity sha512-l/P+z1R40B0z4n3Q40MY5xGjYa/WSeK66WM+aCReULxFJaP+Bjd9yCUcoy+fmJ0B9T4a+YC+/DM7u3PswdVS7Q==
+owncloud-design-system@^8.0.0-rc2:
+  version "8.0.0-rc2"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-8.0.0-rc2.tgz#e82f948ead4f9f6258cb6bf49556da4a2aa6503b"
+  integrity sha512-HJlI+UMN/F5cqU2KKeh0RqiLj6RLwB41xoTERUzet7hT48tDRRwBDsdXhjx4p1uqyasm2Gq1Kwqg/xe+rdJ+hg==
 
 [email protected]:
   version "1.0.0-2296"