diff options
author | Marco Ambrosini <marcoambrosini@pm.me> | 2021-05-26 15:21:34 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2021-06-11 10:24:43 +0300 |
commit | 8395bd8a3e36a3dfd29ce20e3448de4cc9c70c17 (patch) | |
tree | 45263252ca7630048eef1cbe75be5de04d4641d0 /src | |
parent | b7ec08402a6093db1d03d26cec7b2b105bfae2f1 (diff) |
Add tooltips
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue | 34 |
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: { |