add NewMessageAbsenceInfo.vue for showing absence status

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Nov 15, 2023 · 612063a · 612063a
1 parent a1bd512
commit 612063a
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 0 deletions.
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -23,6 +23,10 @@
 
 <template>
 	<div class="wrapper">
+		<NewMessageAbsenceInfo v-if="userAbsence"
+			:user-absence="userAbsence"
+			:display-name="conversation.displayName" />
+
 		<NewMessageTypingIndicator v-if="showTypingStatus"
 			:token="token" />
 
@@ -167,6 +171,7 @@ import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 
 import Quote from '../Quote.vue'
+import NewMessageAbsenceInfo from './NewMessageAbsenceInfo.vue'
 import NewMessageAttachments from './NewMessageAttachments.vue'
 import NewMessageAudioRecorder from './NewMessageAudioRecorder.vue'
 import NewMessageNewFileDialog from './NewMessageNewFileDialog.vue'
@@ -177,6 +182,7 @@ import { CONVERSATION, PARTICIPANT, PRIVACY } from '../../constants.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile } from '../../services/filesSharingServices.js'
 import { searchPossibleMentions } from '../../services/mentionsService.js'
+import { useAbsenceStore } from '../../stores/absence.js'
 import { useSettingsStore } from '../../stores/settings.js'
 import { fetchClipboardContent } from '../../utils/clipboard.js'
 import { isDarkTheme } from '../../utils/isDarkTheme.js'
@@ -201,6 +207,7 @@ export default {
 		NcButton,
 		NcEmojiPicker,
 		NcRichContenteditable,
+		NewMessageAbsenceInfo,
 		NewMessageAttachments,
 		NewMessageAudioRecorder,
 		NewMessageNewFileDialog,
@@ -261,9 +268,11 @@ export default {
 	expose: ['focusInput'],
 
 	setup() {
+		const absenceStore = useAbsenceStore()
 		const settingsStore = useSettingsStore()
 
 		return {
+			absenceStore,
 			settingsStore,
 			supportTypingStatus,
 		}
@@ -372,10 +381,15 @@ export default {
 		showAudioRecorder() {
 			return !this.hasText && this.canUploadFiles && !this.broadcast && !this.upload
 		},
+
 		showTypingStatus() {
 			return this.hasTypingIndicator && this.supportTypingStatus
 				&& this.settingsStore.typingStatusPrivacy === PRIVACY.PUBLIC
 		},
+
+		userAbsence() {
+			return this.absenceStore.absence[this.token]
+		},
 	},
 
 	watch: {

diff --git a/src/components/NewMessage/NewMessageAbsenceInfo.vue b/src/components/NewMessage/NewMessageAbsenceInfo.vue
@@ -0,0 +1,149 @@
+<!--
+  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>
+  -
+  - @author Marco Ambrosini <marcoambrosini@icloud.com>
+  - @author Grigorii Shartsev <me@shgk.me>
+  - @author Maksim Sukharev <antreesy.web@gmail.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<NcNoteCard type="info" class="absence-reminder">
+		<div class="absence-reminder__content">
+			<AvatarWrapper :id="userAbsence.userId"
+				:name="displayName"
+				:size="AVATAR.SIZE.SMALL"
+				source="users"
+				disable-menu
+				disable-tooltip />
+			<h4 class="absence-reminder__caption">
+				{{ userAbsenceCaption }}
+			</h4>
+			<NcButton class="absence-reminder__button" @click="toggleCollapsed">
+				<template #icon>
+					<ChevronDown class="icon" :class="{'icon--reverted': !collapsed}" :size="20" />
+				</template>
+			</NcButton>
+		</div>
+		<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+		<p v-if="!collapsed">{{ userAbsence.message }}</p>
+	</NcNoteCard>
+</template>
+
+<script>
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+
+import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
+
+import { AVATAR } from '../../constants.js'
+
+export default {
+	name: 'NewMessageAbsenceInfo',
+
+	components: {
+		AvatarWrapper,
+		ChevronDown,
+		NcButton,
+		NcNoteCard,
+	},
+
+	props: {
+		userAbsence: {
+			type: Object,
+			required: true,
+		},
+
+		displayName: {
+			type: String,
+			required: true,
+		},
+	},
+
+	setup() {
+		return { AVATAR }
+	},
+
+	data() {
+		return {
+			collapsed: true,
+		}
+	},
+
+	computed: {
+		userAbsenceCaption() {
+			return t('spreed', '{user} is out of office and might not respond.', { user: this.displayName })
+		}
+	},
+
+	methods: {
+		toggleCollapsed() {
+			this.collapsed = !this.collapsed
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/variables';
+
+.absence-reminder {
+  margin: 0.5rem auto;
+  padding: 10px 10px 10px 6px;
+  width: 100%;
+  max-width: 800px;
+
+  // FIXME upstream: allow to hide or replace NoteCard default icon
+  & :deep(.notecard__icon) {
+	display: none;
+  }
+
+  & > :deep(div) {
+	flex-grow: 1;
+  }
+
+  &__content {
+	display: flex;
+	align-items: center;
+	width: 100%;
+  }
+
+  &__caption {
+	padding-left: calc(10px + 8px);
+	margin-bottom: 4px;
+	font-weight: bold;
+  }
+
+  &__button {
+	margin-left: auto;
+
+	& .icon {
+	  transition: $transition;
+	  &--reverted {
+		transform: rotate(180deg);
+	  }
+	}
+  }
+
+  p {
+	padding-left: calc(32px + 10px + 8px);
+	white-space: pre-wrap;
+  }
+}
+</style>