Merge pull request #4075 from nextcloud/backport/4069/stable25

[stable25] Reference widget adjustments for Text

src/init-card-reference.js

@@ -36,7 +36,6 @@ registerWidget('deck-card', (el, { richObjectType, richObject, accessible }) =>
 	// 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['min-width'] = '200px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
 

src/views/CardReferenceWidget.vue

@@ -62,9 +62,14 @@
 		<div class="line description-assignees">
 			<TextIcon v-if="card.description" :size="20" class="icon" />
 			<div v-if="card.description"
-				class="description"
-				:title="card.description">
-				{{ card.description }}
+				:class="{
+					'description': true,
+					'short-description': shortDescription,
+				}">
+				<RichText v-tooltip.top="{ content: shortDescription ? t('deck', 'Click to expand description') : undefined }"
+					:text="card.description"
+					:use-markdown="true"
+					@click.native="shortDescription = !shortDescription" />
 			</div>
 			<div v-if="card.assignedUsers .length > 0"
 				class="spacer" />
@@ -83,6 +88,7 @@ import DeckIcon from '../components/icons/DeckIcon.vue'
 import AvatarList from '../components/cards/AvatarList.vue'
 import labelStyle from '../mixins/labelStyle.js'
 
+import { RichText } from '@nextcloud/vue-richtext'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 
@@ -94,6 +100,7 @@ export default {
 		DeckIcon,
 		CalendarBlankIcon,
 		TextIcon,
+		RichText,
 	},
 
 	mixins: [labelStyle],
@@ -115,6 +122,7 @@ export default {
 
 	data() {
 		return {
+			shortDescription: true,
 		}
 	},
 
@@ -171,11 +179,17 @@ export default {
 
 .deck-card-reference {
 	width: 100%;
+	// needed for the specific case of Text
+	.editor__content & {
+		width: calc(100% - 24px);
+	}
 	white-space: normal;
 	padding: 12px;
 
 	.link {
 		text-decoration: underline;
+		color: var(--color-main-text) !important;
+		padding: 0 !important;
 	}
 
 	.line {
@@ -201,13 +215,22 @@ export default {
 	.description-assignees {
 		width: 100%;
 		display: flex;
-		align-items: center;
+		align-items: start;
+
+		.icon {
+			align-self: start;
+			margin-top: 8px;
+		}
 
 		.description {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
 			margin-right: 8px;
+			padding-top: 6px;
+			max-height: 250px;
+			overflow: scroll;
+			&.short-description {
+				max-height: 25px;
+				overflow: hidden;
+			}
 		}
 
 		.card-assignees {