Interactive board widget

package.json

@@ -34,6 +34,7 @@
     "@babel/runtime": "^7.23.9",
     "@nextcloud/auth": "^2.2.1",
     "@nextcloud/axios": "^2.4.0",
+    "@nextcloud/capabilities": "^1.1.0",
     "@nextcloud/dialogs": "^4.2.6",
     "@nextcloud/event-bus": "^3.1.0",
     "@nextcloud/files": "^3.1.0",

src/components/Controls.vue

@@ -78,32 +78,32 @@
 						required
 						@focus="$store.dispatch('toggleShortcutLock', true)"
 						@blur="$store.dispatch('toggleShortcutLock', false)">
-					<input v-tooltip="t('deck', 'Add list')"
+					<input :title="t('deck', 'Add list')"
 						class="icon-confirm"
 						type="submit"
 						value="">
 				</form>
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<div class="board-action-buttons__filter">
-					<NcPopover container=".board-action-buttons__filter"
-						:placement="'bottom-end'"
+					<NcPopover :placement="'bottom-end'"
 						:aria-label="t('deck', 'Active filters')"
 						:name="t('deck', 'Active filters')"
-						:tooltip="t('deck', 'Active filters')"
 						@show="filterVisible=true"
 						@hide="filterVisible=false">
 						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
-						<NcButton slot="trigger"
-							ref="filterPopover"
-							:name="t('deck', 'Apply filter')"
-							class="filter-button"
-							:type="isFilterActive ? 'primary' : 'tertiary'">
-							<template #icon>
-								<FilterIcon v-if="isFilterActive" :size="20" decorative />
-								<FilterOffIcon v-else :size="20" decorative />
-							</template>
-						</NcButton>
+						<template #trigger>
+							<NcButton ref="filterPopover"
+								:title="t('deck', 'Apply filter')"
+								:aria-label="t('deck', 'Apply filter')"
+								class="filter-button"
+								:type="isFilterActive ? 'primary' : 'tertiary'">
+								<template #icon>
+									<FilterIcon v-if="isFilterActive" :size="20" decorative />
+									<FilterOffIcon v-else :size="20" decorative />
+								</template>
+							</NcButton>
+						</template>
 
 						<div v-if="filterVisible" class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -228,7 +228,7 @@
 					</NcActionButton>
 				</NcActions>
 				<!-- FIXME: NcActionRouter currently doesn't work as an inline action -->
-				<NcActions>
+				<NcActions v-if="isFullApp">
 					<NcActionButton icon="icon-menu-sidebar"
 						:aria-label="t('deck', 'Open details')"
 						:name="t('deck', 'Details')"
@@ -306,6 +306,7 @@ export default {
 			'canManage',
 		]),
 		...mapState({
+			isFullApp: state => state.isFullApp,
 			compactMode: state => state.compactMode,
 			showCardCover: state => state.showCardCover,
 			searchQuery: state => state.searchQuery,
@@ -412,6 +413,9 @@ export default {
 			this.showAddCardModal = false
 		},
 		setPageTitle(title) {
+			if (!this.isFullApp) {
+				return
+			}
 			if (this.defaultPageTitle === false) {
 				this.defaultPageTitle = window.document.title
 				if (this.defaultPageTitle.indexOf(' - Deck - ') !== -1) {
@@ -559,8 +563,4 @@ export default {
 	.popover:focus {
 		outline: 2px solid var(--color-main-text);
 	}
-
-	.tooltip-inner.popover-inner {
-		text-align: left;
-	}
 </style>

src/components/SessionList.vue

@@ -20,7 +20,7 @@
  * -->
 
 <template>
-	<div v-tooltip.bottom="t('text', 'Currently present people')"
+	<div :title="t('text', 'Currently present people')"
 		class="avatar-list">
 		<div v-for="session in sessionsVisible"
 			:key="session.uid"
@@ -37,16 +37,13 @@
 </template>
 
 <script>
-import { NcAvatar, Tooltip } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 
 export default {
 	name: 'SessionList',
 	components: {
 		NcAvatar,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	props: {
 		sessions: {
 			type: Array,

src/components/board/Board.vue

@@ -52,7 +52,7 @@
 							class="no-close"
 							:placeholder="t('deck', 'List name')"
 							required>
-						<input v-tooltip="t('deck', 'Add list')"
+						<input title="t('deck', 'Add list')"
 							class="icon-confirm"
 							type="submit"
 							value="">
@@ -81,7 +81,16 @@
 				</Container>
 			</div>
 		</transition>
-		<GlobalSearchResults />
+		<GlobalSearchResults v-if="isFullApp" />
+		<NcModal v-if="localModal"
+			:clear-view-delay="0"
+			:close-button-contained="true"
+			size="large"
+			@close="localModal = null">
+			<div class="modal__content modal__card">
+				<CardSidebar :id="localModal" @close="localModal = null" />
+			</div>
+		</NcModal>
 	</div>
 </template>
 
@@ -91,11 +100,11 @@ import { mapState, mapGetters } from 'vuex'
 import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
 import Stack from './Stack.vue'
-import { NcEmptyContent } from '@nextcloud/vue'
+import { NcEmptyContent, NcModal } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 import { showError } from '../../helpers/errors.js'
 import { createSession } from '../../sessions.js'
-
+import CardSidebar from '../card/CardSidebar.vue'
 export default {
 	name: 'Board',
 	components: {
@@ -106,6 +115,8 @@ export default {
 		Draggable,
 		Stack,
 		NcEmptyContent,
+		NcModal,
+		CardSidebar,
 	},
 	inject: [
 		'boardApi',
@@ -123,10 +134,12 @@ export default {
 			newStackTitle: '',
 			currentScrollPosX: null,
 			currentMousePosX: null,
+			localModal: null,
 		}
 	},
 	computed: {
 		...mapState({
+			isFullApp: state => state.isFullApp,
 			board: state => state.currentBoard,
 			showArchived: state => state.showArchived,
 		}),
@@ -155,6 +168,9 @@ export default {
 	created() {
 		this.session = createSession(this.id)
 		this.fetchData()
+		this.$root.$on('open-card', (cardId) => {
+			this.localModal = cardId
+		})
 	},
 	beforeDestroy() {
 		this.session.close()

src/components/board/SharingTabSidebar.vue

@@ -24,7 +24,7 @@
 			class="shareWithList">
 			<li>
 				<NcAvatar :user="board.owner.uid" />
-				<span class="has-tooltip username">
+				<span class="username">
 					{{ board.owner.displayname }}
 					<span v-if="!isCurrentUser(board.owner.uid)" class="board-owner-label">
 						{{ t('deck', 'Board owner') }}
@@ -35,7 +35,7 @@
 				<NcAvatar v-if="acl.type===0" :user="acl.participant.uid" />
 				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
 				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
-				<span class="has-tooltip username">
+				<span class="username">
 					{{ acl.participant.displayname }}
 					<span v-if="acl.type===1">{{ t('deck', '(Group)') }}</span>
 					<span v-if="acl.type===7">{{ t('deck', '(Team)') }}</span>

src/components/board/Stack.vue

@@ -32,7 +32,7 @@
 					{{ stack.title }}
 				</h3>
 				<h3 v-else-if="!editing"
-					v-tooltip="stack.title"
+					title="stack.title"
 					dir="auto"
 					tabindex="0"
 					:aria-label="stack.title"
@@ -51,7 +51,7 @@
 						dir="auto"
 						type="text"
 						required="required">
-					<input v-tooltip="t('deck', 'Edit list title')"
+					<input title="t('deck', 'Edit list title')"
 						class="icon-confirm"
 						type="submit"
 						value="">

src/components/board/TagsTabSidebar.vue

@@ -12,20 +12,21 @@
 							<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
 						</NcColorPicker>
 						<input v-model="editingLabel.title" type="text">
-						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
-							:disabled="!editLabelObjValidated"
+						<input :disabled="!editLabelObjValidated"
 							type="submit"
 							value=""
 							class="icon-confirm">
 						<NcActions>
-							<NcActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
-								:disabled="!editLabelObjValidated"
+							<NcActionButton :disabled="!editLabelObjValidated"
 								icon="icon-close"
 								@click="editingLabelId = null">
 								{{ t('deck', 'Cancel') }}
 							</NcActionButton>
 						</NcActions>
 					</form>
+					<p v-if="!editLabelObjValidated">
+						{{ missingDataLabel }}
+					</p>
 				</template>
 				<template v-else>
 					<div v-if="canManage && !isArchived" class="label-title" @click="clickEdit(label)">
@@ -58,8 +59,7 @@
 						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
 					</NcColorPicker>
 					<input v-model="addLabelObj.title" type="text">
-					<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
-						:disabled="!addLabelObjValidated"
+					<input :disabled="!addLabelObjValidated"
 						type="submit"
 						value=""
 						class="icon-confirm">
@@ -69,6 +69,9 @@
 						</NcActionButton>
 					</NcActions>
 				</form>
+				<p v-if="!addLabelObjValidated">
+					{{ missingDataLabel }}
+				</p>
 			</li>
 			<button v-if="canManage && !isArchived" @click="clickShowAddLabel()">
 				<span class="icon-add" />{{ t('deck', 'Add a new tag') }}

src/components/boards/BoardItem.vue

@@ -39,7 +39,7 @@
 				:user="user.participant.uid"
 				:display-name="user.participant.displayname"
 				class="board-list-avatar" />
-			<div v-if="board.acl.length > 5" v-tooltip="otherAcl" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
+			<div v-if="board.acl.length > 5" :title="otherAcl" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
 		</div>
 		<div class="board-list-actions-cell" />
 	</router-link>

src/components/card/CardSidebar.vue

@@ -32,10 +32,10 @@
 		@submit-title="handleSubmitTitle"
 		@close="closeSidebar">
 		<template #secondary-actions>
-			<NcActionButton v-if="cardDetailsInModal" icon="icon-menu-sidebar" @click.stop="closeModal()">
+			<NcActionButton v-if="cardDetailsInModal && isFullApp" icon="icon-menu-sidebar" @click.stop="closeModal()">
 				{{ t('deck', 'Open in sidebar view') }}
 			</NcActionButton>
-			<NcActionButton v-else icon="icon-external" @click.stop="showModal()">
+			<NcActionButton v-else-if="isFullApp" icon="icon-external" @click.stop="showModal()">
 				{{ t('deck', 'Open in bigger view') }}
 			</NcActionButton>
 
@@ -83,6 +83,7 @@
 
 <script>
 import { NcActionButton, NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
+import { getCapabilities } from '@nextcloud/capabilities'
 import { mapState, mapGetters } from 'vuex'
 import CardSidebarTabDetails from './CardSidebarTabDetails.vue'
 import CardSidebarTabAttachments from './CardSidebarTabAttachments.vue'
@@ -99,7 +100,7 @@ import { showError } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
 import CardMenuEntries from '../cards/CardMenuEntries.vue'
 
-const capabilities = window.OC.getCapabilities()
+const capabilities = getCapabilities()
 
 export default {
 	name: 'CardSidebar',
@@ -144,6 +145,7 @@ export default {
 	},
 	computed: {
 		...mapState({
+			isFullApp: state => state.isFullApp,
 			currentBoard: state => state.currentBoard,
 		}),
 		...mapGetters(['canEdit', 'assignables', 'cardActions', 'stackById']),
@@ -188,7 +190,8 @@ export default {
 		},
 
 		closeSidebar() {
-			this.$router.push({ name: 'board' })
+			this.$router?.push({ name: 'board' })
+			this.$emit('close')
 		},
 
 		showModal() {

src/components/card/CardSidebarTabComments.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="comment--header">
 			<NcAvatar :user="currentUser.uid" />
-			<span class="has-tooltip username">
+			<span class="username">
 				{{ currentUser.displayName }}
 			</span>
 		</div>

src/components/card/CommentForm.vue

@@ -49,7 +49,7 @@
 					@blur="error = null"
 					@input="validate()" />
 			</At>
-			<input v-tooltip="t('deck', 'Save')"
+			<input :title="t('deck', 'Save')"
 				class="icon-confirm"
 				type="submit"
 				value=""

src/components/card/CommentItem.vue

@@ -22,7 +22,7 @@
 	<li v-else class="comment">
 		<div class="comment--header">
 			<NcAvatar :user="comment.actorId" />
-			<span class="has-tooltip username">
+			<span class="username">
 				{{ comment.actorDisplayName }}
 			</span>
 			<NcActions v-show="!edit" :force-menu="true">

src/components/card/Description.vue

@@ -27,7 +27,7 @@
 			<span v-if="descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
 			<span v-if="descriptionSaving">{{ t('deck', '(Saving…)') }}</span>
 			<a v-if="!textAppAvailable"
-				v-tooltip="t('deck', 'Formatting help')"
+				:title="t('deck', 'Formatting help')"
 				href="https://deck.readthedocs.io/en/latest/Markdown/"
 				target="_blank"
 				class="icon icon-info" />

src/components/cards/AvatarList.vue

@@ -85,7 +85,7 @@
 </template>
 
 <script>
-import { NcAvatar, NcPopover, Tooltip } from '@nextcloud/vue'
+import { NcAvatar, NcPopover } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 
@@ -96,9 +96,6 @@ export default {
 		NcPopover,
 		AccountMultiple,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	props: {
 		users: {
 			type: Array,

src/components/cards/CardBadges.vue

@@ -29,7 +29,7 @@
 				<CardId v-if="idBadge" class="icon-badge" :card="card" />
 
 				<div v-if="card.commentsCount > 0"
-					v-tooltip="commentsHint"
+					:title="commentsHint"
 					class="icon-badge"
 					@click.stop="openComments">
 					<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />