Bump @nextcloud/vue to beta 3

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
nextcloud · Aug 18, 2022 · 0fb6d8c · 0fb6d8c
1 parent 7e61528
commit 0fb6d8c
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 52 deletions.
diff --git a/js/viewer-main.js b/js/viewer-main.js
diff --git a/js/viewer-main.js.LICENSE.txt b/js/viewer-main.js.LICENSE.txt
@@ -41,11 +41,11 @@ object-assign
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 
-/*! For license information please see ActionButton.js.LICENSE.txt */
+/*! For license information please see NcActionButton.js.LICENSE.txt */
 
-/*! For license information please see ActionLink.js.LICENSE.txt */
+/*! For license information please see NcActionLink.js.LICENSE.txt */
 
-/*! For license information please see Modal.js.LICENSE.txt */
+/*! For license information please see NcModal.js.LICENSE.txt */
 
 /*! For license information please see isFullscreen.js.LICENSE.txt */
 

diff --git a/js/viewer-main.js.map b/js/viewer-main.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "@nextcloud/logger": "^2.2.1",
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^2.0.0",
-    "@nextcloud/vue": "^6.0.0-beta.2",
+    "@nextcloud/vue": "^6.0.0-beta.3",
     "@skjnldsv/vue-plyr": "^7.2.0",
     "camelcase": "^7.0.0",
     "debounce": "^1.2.1",

diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
@@ -22,59 +22,61 @@
  -->
 
 <template>
-	<Modal v-if="initiated || currentFile.modal"
+	<NcModal v-if="initiated || currentFile.modal"
 		id="viewer"
-		size="full"
-		:class="{'icon-loading': !currentFile.loaded && !currentFile.failed,
-			'theme--undefined': theme === null, 'theme--dark': theme === 'dark', 'theme--light': theme === 'light', 'theme--default': theme === 'default'}"
+		:additional-trap-elements="trapElements"
+		:class="modalClass"
 		:clear-view-delay="-1 /* disable fade-out because of accessibility reasons */"
 		:close-button-contained="false"
 		:dark="true"
+		:data-handler="handlerId"
 		:enable-slideshow="hasPrevious || hasNext"
 		:enable-swipe="canSwipe && !editing"
 		:has-next="hasNext && (canLoop ? true : !isEndOfList)"
 		:has-previous="hasPrevious && (canLoop ? true : !isStartOfList)"
+		:inline-actions="canEdit ? 1 : 0"
 		:spread-navigation="true"
-		:style="{width: isSidebarShown ? `calc(100% - ${sidebarWidth}px)` : null}"
+		:style="{ width: isSidebarShown ? `calc(100% - ${sidebarWidth}px)` : null }"
 		:title="currentFile.basename"
 		:view="currentFile.modal"
 		class="viewer"
-		:data-handler="handlerId"
+		size="full"
 		@close="close"
 		@previous="previous"
-		:additional-trap-elements="trapElements"
 		@next="next">
 		<!-- ACTIONS -->
 		<template #actions>
-			<ActionButton v-if="Sidebar && !isSidebarShown"
-				:close-after-click="true"
-				icon="icon-menu-sidebar"
-				@click="showSidebar">
-				{{ t('viewer', 'Open sidebar') }}
-			</ActionButton>
-			<ActionButton v-if="canEdit"
+			<!-- Inline items -->
+			<NcActionButton v-if="canEdit"
 				:close-after-click="true"
 				@click="onEdit">
 				<template #icon>
-					<Pencil :size="24" />
+					<Pencil :size="20" />
 				</template>
 				{{ t('viewer', 'Edit') }}
-			</ActionButton>
-			<ActionLink v-if="canDownload"
+			</NcActionButton>
+			<!-- Menu items -->
+			<NcActionButton v-if="Sidebar && !isSidebarShown"
+				:close-after-click="true"
+				icon="icon-menu-sidebar"
+				@click="showSidebar">
+				{{ t('viewer', 'Open sidebar') }}
+			</NcActionButton>
+			<NcActionLink v-if="canDownload"
 				:download="currentFile.basename"
 				:close-after-click="true"
 				:href="currentFile.davPath">
 				<template #icon>
 					<Download :size="24" />
 				</template>
 				{{ t('viewer', 'Download') }}
-			</ActionLink>
-			<ActionButton v-if="canDelete"
+			</NcActionLink>
+			<NcActionButton v-if="canDelete"
 				:close-after-click="true"
 				icon="icon-delete"
 				@click="onDelete">
 				{{ t('viewer', 'Delete') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 
 		<div class="viewer__content" @click.self.exact="close">
@@ -122,7 +124,7 @@
 				class="hidden-visually"
 				:name="nextFile.basename" />
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
@@ -133,9 +135,9 @@ import '@nextcloud/dialogs/styles/toast.scss'
 import { showError } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js'
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import isFullscreen from '@nextcloud/vue/dist/Mixins/isFullscreen.js'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
 
@@ -158,12 +160,12 @@ export default {
 	name: 'Viewer',
 
 	components: {
-		ActionButton,
-		ActionLink,
 		Download,
 		Error,
+		NcActionButton,
+		NcActionLink,
+		NcModal,
 		Pencil,
-		Modal,
 	},
 
 	mixins: [isFullscreen, isMobile],
@@ -278,6 +280,16 @@ export default {
 				&& this.currentFile?.permissions?.includes('W')
 				&& ['image/jpeg', 'image/png', 'image/webp'].includes(this.currentFile?.mime)
 		},
+
+		modalClass() {
+			return {
+				'icon-loading': !this.currentFile.loaded && !this.currentFile.failed,
+				'theme--undefined': this.theme === null,
+				'theme--dark': this.theme === 'dark',
+				'theme--light': this.theme === 'light',
+				'theme--default': this.theme === 'default',
+			}
+		},
 	},
 
 	watch: {