Merge pull request #5630 from nextcloud/enh/interactive-widget

package.json

@@ -34,6 +34,7 @@
     "@babel/runtime": "^7.24.0",
     "@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,7 +78,7 @@
 						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="">
@@ -86,24 +86,24 @@
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<div class="board-action-buttons__filter">
-					<NcPopover container=".board-action-buttons__filter"
+					<NcPopover :placement="'bottom-end'"
-						: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"
+						<template #trigger>
-							ref="filterPopover"
+							<NcButton ref="filterPopover"
-							:name="t('deck', 'Apply filter')"
+								:title="t('deck', 'Apply filter')"
-							class="filter-button"
+								:aria-label="t('deck', 'Apply filter')"
-							:type="isFilterActive ? 'primary' : 'tertiary'">
+								class="filter-button"
-							<template #icon>
+								:type="isFilterActive ? 'primary' : 'tertiary'">
-								<FilterIcon v-if="isFilterActive" :size="20" decorative />
+								<template #icon>
-								<FilterOffIcon v-else :size="20" decorative />
+									<FilterIcon v-if="isFilterActive" :size="20" decorative />
-							</template>
+									<FilterOffIcon v-else :size="20" decorative />
-						</NcButton>
+								</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' }"
+						<input :disabled="!editLabelObjValidated"
-							:disabled="!editLabelObjValidated"
 							type="submit"
 							value=""
 							class="icon-confirm">
 						<NcActions>
-							<NcActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
+							<NcActionButton :disabled="!editLabelObjValidated"
-								: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' }"
+					<input :disabled="!addLabelObjValidated"
-						: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" />

src/components/cards/CardItem.vue

@@ -212,8 +212,14 @@ export default {
 			if (this.dragging) {
 			  return
 			}
-			const boardId = this.card && this.card.boardId ? this.card.boardId : this.$route.params.id
+			const boardId = this.card && this.card.boardId ? this.card.boardId : (this.$route?.params.id ?? this.currentBoard.id)
-			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
+
+			if (this.$router) {
+				this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
+				return
+			}
+
+			this.$root.$emit('open-card', this.card.id)
 		},
 		onTitleBlur(e) {
 			// TODO Handle empty title

src/components/cards/CardMenuEntries.vue

@@ -144,8 +144,14 @@ export default {
 	},
 	methods: {
 		openCard() {
-			const boardId = this.card?.boardId ? this.card.boardId : this.$route.params.id
+			const boardId = this.card?.boardId ? this.card.boardId : this.$route?.params.id ?? this.currentBoard.id
-			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
+
+			if (this.$router) {
+				this.$router?.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
+				return
+			}
+
+			this.$root.$emit('open-card', this.card.id)
 		},
 		deleteCard() {
 			this.$store.dispatch('deleteCard', this.card)

src/init-reference.js

@@ -20,34 +20,39 @@
  */
 
 import { registerWidget, registerCustomPickerElement, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Functions/registerReference.js'
-
 import { translate, translatePlural } from '@nextcloud/l10n'
 
 import './shared-init.js'
 
-const prepareVue = (Vue) => {
+const prepareVue = async (Component = null) => {
+	const { default: Vue } = await import('vue')
+	const { default: ClickOutside } = await import('vue-click-outside')
+
 	Vue.prototype.t = translate
 	Vue.prototype.n = translatePlural
 	Vue.prototype.OC = window.OC
 	Vue.prototype.OCA = window.OCA
+	Vue.directive('click-outside', ClickOutside)
 	Vue.directive('focus', {
 		inserted(el) {
 			el.focus()
 		},
 	})
+	if (!Component) {
+		return Vue
+	}
+
+	return Vue.extend(Component)
 }
 
 registerWidget('deck-card', async (el, { richObjectType, richObject, accessible }) => {
-	const { default: Vue } = await import('vue')
-	prepareVue(Vue)
 	const { default: CardReferenceWidget } = await import('./views/CardReferenceWidget.vue')
+	const Widget = await prepareVue(CardReferenceWidget)
 	// trick to change the wrapper element size, otherwise it always is 100%
 	// which is not very nice with a simple card
 	el.parentNode.style['max-width'] = '400px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
-
-	const Widget = Vue.extend(CardReferenceWidget)
 	new Widget({
 		propsData: {
 			richObjectType,
@@ -57,34 +62,33 @@ registerWidget('deck-card', async (el, { richObjectType, richObject, accessible
 	}).$mount(el)
 })
 
-registerWidget('deck-board', async (el, { richObjectType, richObject, accessible }) => {
+const boardWidgets = {}
-	const { default: Vue } = await import('vue')
+registerWidget('deck-board', async (el, { richObjectType, richObject, accessible, interactive }) => {
-	prepareVue(Vue)
 	const { default: BoardReferenceWidget } = await import('./views/BoardReferenceWidget.vue')
-	el.parentNode.style['max-width'] = '400px'
+	const Widget = await prepareVue(BoardReferenceWidget)
-	el.parentNode.style['margin-left'] = '0'
+	boardWidgets[el] = new Widget({
-	el.parentNode.style['margin-right'] = '0'
-
-	const Widget = Vue.extend(BoardReferenceWidget)
-	new Widget({
 		propsData: {
 			richObjectType,
 			richObject,
 			accessible,
+			interactive,
 		},
 	}).$mount(el)
+}, (el) => {
+	boardWidgets[el].$destroy()
+	delete boardWidgets[el]
+}, {
+	fullWidth: true,
 })
 
 registerWidget('deck-comment', async (el, { richObjectType, richObject, accessible }) => {
-	const { default: Vue } = await import('vue')
-	prepareVue(Vue)
 	const { default: CommentReferenceWidget } = await import('./views/CommentReferenceWidget.vue')
+	const Widget = await prepareVue(CommentReferenceWidget)
 
 	el.parentNode.style['max-width'] = '400px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
 
-	const Widget = Vue.extend(CommentReferenceWidget)
 	new Widget({
 		propsData: {
 			richObjectType,
@@ -95,10 +99,8 @@ registerWidget('deck-comment', async (el, { richObjectType, richObject, accessib
 })
 
 registerCustomPickerElement('create-new-deck-card', async (el, { providerId, accessible }) => {
-	const { default: Vue } = await import('vue')
-	Vue.mixin({ methods: { t, n } })
 	const { default: CreateNewCardCustomPicker } = await import('./views/CreateNewCardCustomPicker.vue')
-	const Element = Vue.extend(CreateNewCardCustomPicker)
+	const Element = await prepareVue(CreateNewCardCustomPicker)
 	const vueElement = new Element({
 		propsData: {
 			providerId,

src/main.js

@@ -27,7 +27,6 @@ import { sync } from 'vuex-router-sync'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { showError } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
-import { Tooltip } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import './shared-init.js'
 import './models/index.js'
@@ -41,7 +40,6 @@ sync(store, router)
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
 
-Vue.directive('tooltip', Tooltip)
 Vue.directive('click-outside', ClickOutside)
 
 Vue.directive('focus', {

src/store/main.js

@@ -58,6 +58,7 @@ export default new Vuex.Store({
 	},
 	strict: debug,
 	state: {
+		isFullApp: true,
 		config: loadState('deck', 'config', {}),
 		showArchived: false,
 		navShown: localStorage.getItem('deck.navShown') === null || localStorage.getItem('deck.navShown') === 'true',
@@ -78,6 +79,10 @@ export default new Vuex.Store({
 	},
 	getters: {
 		config: state => (key) => {
+			if (!state.isFullApp && key === 'cardDetailsInModal') {
+				return true
+			}
+
 			return state.config[key]
 		},
 		getSearchQuery: state => {
@@ -140,6 +145,9 @@ export default new Vuex.Store({
 		},
 	},
 	mutations: {
+		setFullApp(state, isFullApp) {
+			Vue.set(state, 'isFullApp', isFullApp)
+		},
 		SET_CONFIG(state, { key, value }) {
 			const [scope, id, configKey] = key.split(':', 3)
 			let indexExisting = -1
@@ -313,6 +321,9 @@ export default new Vuex.Store({
 		},
 	},
 	actions: {
+		setFullApp({ commit }, isFullApp) {
+			commit('setFullApp', isFullApp)
+		},
 		async setConfig({ commit }, config) {
 			for (const key in config) {
 				try {

src/views/BoardReferenceWidget.vue

@@ -20,7 +20,10 @@
   -->
 
 <template>
-	<div class="deck-board-reference">
+	<div v-if="interactive" class="deck-board-reference-interactive">
+		<Board :id="board.id" />
+	</div>
+	<div v-else class="deck-board-reference">
 		<div class="line">
 			<DeckIcon :size="20" class="title-icon" />
 			<strong>
@@ -41,19 +44,33 @@
 </template>
 
 <script>
+import Board from '../components/board/Board.vue'
 import DeckIcon from '../components/icons/DeckIcon.vue'
+import { BoardApi } from './../services/BoardApi.js'
+import store from './../store/main.js'
 
 import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 
+const boardApi = new BoardApi()
+
 export default {
 	name: 'BoardReferenceWidget',
 
+	store,
+
 	components: {
 		DeckIcon,
 		NcUserBubble,
+		Board,
+	},
+
+	provide() {
+		return {
+			boardApi,
+		}
 	},
 
 	props: {
@@ -69,6 +86,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		interactive: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
@@ -92,8 +113,10 @@ export default {
 		},
 	},
 
-	methods: {
+	created() {
+		this.$store.commit('setFullApp', false)
 	},
+
 }
 </script>
 
@@ -123,6 +146,22 @@ export default {
 			margin-right: 8px;
 		}
 	}
+}
 
+.deck-board-reference-interactive {
+	width: 100%;
+	min-height: min(50vh, calc(100vh - 100px));
+	max-height: calc(100vh - 120px);
+	&:deep(.controls) {
+		padding-left: 12px;
+	}
+	&:deep(.board) {
+		padding-left: 0;
+	}
+	&:deep(*) {
+		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
+		box-sizing: border-box;         /* Opera/IE 8+ */
+	}
 }
 </style>

src/views/CardReferenceWidget.vue

@@ -33,7 +33,7 @@
 			</strong>
 			<div v-if="dueDate" class="spacer" />
 			<span v-if="dueDate"
-				v-tooltip.top="{ content: formattedDueDate }"
+				:title="t('Due date') + ': ' + formattedDueDate"
 				class="due-date">
 				<CalendarBlankIcon :size="20"
 					class="icon" />
@@ -42,7 +42,7 @@
 		</div>
 		<div class="line">
 			<DeckIcon :size="20" class="title-icon" />
-			<a v-tooltip.top="{ content: stackTooltip }"
+			<a :title="stackTooltip"
 				:href="boardLink"
 				target="_blank"
 				class="link">
@@ -67,7 +67,7 @@
 					'description': true,
 					'short-description': shortDescription,
 				}">
-				<NcRichText v-tooltip.top="{ content: shortDescription ? t('deck', 'Click to expand description') : undefined }"
+				<NcRichText :title="shortDescription ? t('deck', 'Click to expand description') : undefined"
 					:text="card.description"
 					:use-markdown="true"
 					@click.native="shortDescription = !shortDescription" />

src/views/CommentReferenceWidget.vue

@@ -33,7 +33,7 @@
 			</strong>
 			<div v-if="dueDate" class="spacer" />
 			<span v-if="dueDate"
-				v-tooltip.top="{ content: formattedDueDate }"
+				:title="t('Due date') + ': ' + formattedDueDate"
 				class="due-date">
 				<CalendarBlankIcon :size="20"
 					class="icon" />
@@ -42,7 +42,7 @@
 		</div>
 		<div class="line">
 			<DeckIcon :size="20" class="title-icon" />
-			<a v-tooltip.top="{ content: stackTooltip }"
+			<a :title="stackTooltip"
 				:href="boardLink"
 				target="_blank"
 				class="link">
@@ -67,7 +67,7 @@
 					'description': true,
 					'short-description': shortDescription,
 				}">
-				<NcRichText v-tooltip.top="{ content: shortDescription ? t('deck', 'Click to expand description') : undefined }"
+				<NcRichText :title="shortDescription ? t('deck', 'Click to expand description') : undefined"
 					:text="card.description"
 					:use-markdown="true"
 					@click.native="shortDescription = !shortDescription" />
@@ -84,7 +84,7 @@
 				'comment': true,
 				'short-comment': shortComment,
 			}">
-				<NcRichText v-tooltip.top="{ content: shortComment ? t('deck', 'Click to expand comment') : undefined }"
+				<NcRichText :title="shortComment ? t('deck', 'Click to expand comment') : undefined"
 					:text="commentMessageText"
 					:use-markdown="false"
 					@click.native="shortComment = !shortComment" />