Merge pull request #11545 from nextcloud/chore/noid/use-custom-icon-slot

chore(NcNoteCard): use custom icon slot
nextcloud · Feb 9, 2024 · 357aeb0 · 357aeb0
2 parents b68444c + 5da4fa5
commit 357aeb0
Showing 1 changed file with 36 additions and 35 deletions.
diff --git a/src/components/NewMessage/NewMessageAbsenceInfo.vue b/src/components/NewMessage/NewMessageAbsenceInfo.vue
@@ -22,29 +22,28 @@
 <!-- eslint-disable vue/singleline-html-element-content-newline -->
 <template>
 	<NcNoteCard type="info" class="absence-reminder">
-		<div class="absence-reminder__content">
+		<template #icon>
 			<AvatarWrapper :id="userAbsence.userId"
 				:name="displayName"
-				:size="AVATAR.SIZE.EXTRA_SMALL"
 				source="users"
 				disable-menu
 				disable-tooltip />
-			<h4 class="absence-reminder__caption">{{ userAbsenceCaption }}</h4>
-			<NcButton v-if="userAbsenceMessage"
-				class="absence-reminder__button"
-				type="tertiary"
-				@click="toggleCollapsed">
-				<template #icon>
-					<ChevronDown class="icon" :class="{'icon--reverted': !collapsed}" :size="20" />
-				</template>
-			</NcButton>
-		</div>
-		<p class="absence-reminder__message" :class="{'absence-reminder__message--collapsed': collapsed}">{{ userAbsenceMessage }}</p>
+		</template>
+		<h4 class="absence-reminder__caption">{{ userAbsenceCaption }}</h4>
+		<NcButton v-if="userAbsenceMessage && isTextMoreThanOneLine"
+			class="absence-reminder__button"
+			type="tertiary"
+			@click="toggleCollapsed">
+			<template #icon>
+				<ChevronUp class="icon" :class="{'icon--reverted': !collapsed}" :size="20" />
+			</template>
+		</NcButton>
+		<p ref="absenceMessage" class="absence-reminder__message" :class="{'absence-reminder__message--collapsed': collapsed}">{{ userAbsenceMessage }}</p>
 	</NcNoteCard>
 </template>
 
 <script>
-import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
@@ -58,7 +57,7 @@ export default {
 
 	components: {
 		AvatarWrapper,
-		ChevronDown,
+		ChevronUp,
 		NcButton,
 		NcNoteCard,
 	},
@@ -82,6 +81,7 @@ export default {
 	data() {
 		return {
 			collapsed: true,
+			isTextMoreThanOneLine: false,
 		}
 	},
 
@@ -91,14 +91,30 @@ export default {
 		},
 
 		userAbsenceMessage() {
-			return this.userAbsence.message || this.userAbsence.status
+			return this.userAbsence.message || this.userAbsence.shortMessage
 		},
 	},
 
+	watch: {
+		userAbsenceMessage() {
+			this.$nextTick(() => {
+				this.setIsTextMoreThanOneLine()
+			})
+		},
+	},
+
+	mounted() {
+		this.setIsTextMoreThanOneLine()
+	},
+
 	methods: {
 		toggleCollapsed() {
 			this.collapsed = !this.collapsed
 		},
+
+		setIsTextMoreThanOneLine() {
+			this.isTextMoreThanOneLine = this.$refs.absenceMessage?.scrollHeight > this.$refs.absenceMessage?.clientHeight
+		},
 	},
 }
 </script>
@@ -109,30 +125,13 @@ export default {
 .absence-reminder {
 	margin: 0 16px 12px;
 	padding: 10px 10px 10px 6px;
-	border-radius: var(--border-radius-large);
-
-	// FIXME upstream: allow to hide or replace NoteCard default icon
-	& :deep(.notecard__icon) {
-		display: none;
-	}
-
-	& > :deep(div) {
-		width: 100%;
-	}
-
-	&__content {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		width: 100%;
-	}
 
 	&__caption {
 		font-weight: bold;
+		margin: 5px 44px 5px 0;
 	}
 
 	&__message {
-		padding-left: 26px;
 		white-space: pre-line;
 		word-wrap: break-word;
 
@@ -146,7 +145,9 @@ export default {
 	}
 
 	&__button {
-		margin-left: auto;
+		position: absolute !important;
+		top: 4px;
+		right: 20px;
 
 		& .icon {
 			transition: $transition;