From d999bf772fe7e62c606d811a8fee901587f12b11 Mon Sep 17 00:00:00 2001 From: Benedikt Kulmann Date: Wed, 7 Jul 2021 10:13:27 +0200 Subject: [PATCH 1/2] Update ODS to v8.0.0-rc2 --- changelog/unreleased/enhancement-update-ods-8.0.0 | 6 ++++++ packages/web-app-files/src/constants.ts | 9 ++++++++- packages/web-app-files/src/store/actions.js | 4 ++-- packages/web-app-files/src/views/Favorites.vue | 11 ++++++----- packages/web-app-files/src/views/LocationPicker.vue | 2 +- packages/web-app-files/src/views/Personal.vue | 11 ++++++----- packages/web-app-files/src/views/PublicFiles.vue | 11 ++++++----- packages/web-app-files/src/views/SharedViaLink.vue | 11 ++++++----- packages/web-app-files/src/views/SharedWithMe.vue | 11 ++++++----- packages/web-app-files/src/views/SharedWithOthers.vue | 11 ++++++----- packages/web-app-files/src/views/Trashbin.vue | 2 +- .../web-app-files/tests/unit/views/Favorites.spec.js | 4 ++-- packages/web-runtime/package.json | 2 +- packages/web-runtime/src/App.vue | 1 - .../pageObjects/FilesPageElement/filesList.js | 4 ++-- yarn.lock | 8 ++++---- 16 files changed, 63 insertions(+), 45 deletions(-) create mode 100644 changelog/unreleased/enhancement-update-ods-8.0.0 diff --git a/changelog/unreleased/enhancement-update-ods-8.0.0 b/changelog/unreleased/enhancement-update-ods-8.0.0 new file mode 100644 index 00000000000..74008cef5fd --- /dev/null +++ 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 index deff4a97237..e42a72a85e3 100644 --- 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 index 14762f6eaaa..81b6de72262 100644 --- 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 index 484f646d668..551eba14c37 100644 --- 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 index 159c2a7dc6f..47f6348bf38 100644 --- 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 index b1c7618e28e..d24b47f7fc5 100644 --- 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 index 908f3d8f0f3..424a3766c5b 100644 --- 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 index f50d347b8df..430967bea58 100644 --- 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 index ddb115c0582..40ff70b97eb 100644 --- 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 index 473cef11da4..32bcfd4f0ef 100644 --- 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 index 90c57050580..3f88330245c 100644 --- 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 index 34de1b1d1b1..8adf09ce260 100644 --- 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 index 0fa920c0bec..ab4bcd12ef8 100644 --- 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 index 3189e10243e..dd258c9f159 100644 --- 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 index 646a8ac37f6..fcd88af0e65 100644 --- 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 index 33c733368d2..cb4c90d2cd0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8149,10 +8149,10 @@ ospec@3.1.0: 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== owncloud-sdk@1.0.0-2296: version "1.0.0-2296" From 507c0eb80c322abd762a4a1ed76bb49d40739e8f Mon Sep 17 00:00:00 2001 From: Benedikt Kulmann Date: Wed, 7 Jul 2021 10:25:23 +0200 Subject: [PATCH 2/2] Switch from `data-test-id` to `data-testid` --- packages/web-app-files/src/components/AppBar/AppBar.vue | 4 ++-- packages/web-app-files/src/components/FilesList/ListInfo.vue | 2 +- .../web-app-files/src/components/SideBar/Links/FileLinks.vue | 2 +- .../src/components/SideBar/Shares/FileShares.vue | 2 +- packages/web-app-files/tests/unit/components/AppBar.spec.js | 2 +- tests/acceptance/pageObjects/FilesPageElement/filesList.js | 2 +- .../acceptance/pageObjects/FilesPageElement/sharingDialog.js | 4 ++-- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue index 876d844a8d1..23689bf5d97 100644 --- a/packages/web-app-files/src/components/AppBar/AppBar.vue +++ b/packages/web-app-files/src/components/AppBar/AppBar.vue @@ -102,7 +102,7 @@ diff --git a/packages/web-app-files/src/components/FilesList/ListInfo.vue b/packages/web-app-files/src/components/FilesList/ListInfo.vue index dd35c71547e..2f22713000f 100644 --- a/packages/web-app-files/src/components/FilesList/ListInfo.vue +++ b/packages/web-app-files/src/components/FilesList/ListInfo.vue @@ -1,7 +1,7 @@