Add tooltips

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

1 files changed, 33 insertions, 1 deletions

diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
index 5a4119e95..800a618b7 100644
--- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
+++ b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
@@ -24,6 +24,10 @@
 		class="audio-recorder">
 		<button
 			v-if="!isRecording"
+			v-tooltip.auto="{
+				content: startRecordingTooltip,
+				delay: tooltipDelay,
+			}"
 			class="audio-recorder__trigger nc-button nc-button__main"
 			@click="start">
 			<Microphone
@@ -33,6 +37,10 @@
 		</button>
 		<div v-else class="wrapper">
 			<button
+				v-tooltip.auto="{
+					content: abortRecordingTooltip,
+					delay: tooltipDelay,
+				}"
 				class="audio-recorder__stop nc-button nc-button__main"
 				@click="abortRecording">
 				<Close
@@ -47,6 +55,10 @@
 					{{ parsedRecordTime }}</span>
 			</div>
 			<button
+				v-tooltip.auto="{
+					content: stopRecordingTooltip,
+					delay: tooltipDelay,
+				}"
 				class="audio-recorder__trigger nc-button nc-button__main"
 				:class="{'audio-recorder__trigger--recording': isRecording}"
 				@click="stop">
@@ -63,7 +75,7 @@
 import Microphone from 'vue-material-design-icons/Microphone'
 import Close from 'vue-material-design-icons/Close'
 import Check from 'vue-material-design-icons/Check'
-
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { mediaDevicesManager } from '../../../utils/webrtc/index'
 
 export default {
@@ -75,6 +87,10 @@ export default {
 		Check,
 	},
 
+	directives: {
+		tooltip: Tooltip,
+	},
+
 	data() {
 		return {
 			// The audio stream object
@@ -114,6 +130,22 @@ export default {
 			const minutes = this.recordTime.minutes.toString().length === 2 ? this.recordTime.minutes : `0${this.recordTime.minutes}`
 			return `${minutes}:${seconds}`
 		},
+
+		tooltipDelay() {
+			return { show: 500, hide: 200 }
+		},
+
+		startRecordingTooltip() {
+			return t('spreed', 'Record voice message')
+		},
+
+		stopRecordingTooltip() {
+			return t('spreed', 'End recording and send')
+		},
+
+		abortRecordingTooltip() {
+			return t('spreed', 'Dismiss recording')
+		},
 	},
 
 	watch: {