diff options
Diffstat (limited to 'src/client/pages')
| -rw-r--r-- | src/client/pages/messaging/messaging-room.form.vue | 10 | ||||
| -rw-r--r-- | src/client/pages/messaging/messaging-room.vue | 32 | ||||
| -rw-r--r-- | src/client/pages/settings/email-address.vue | 2 | ||||
| -rw-r--r-- | src/client/pages/settings/general.vue | 2 |
4 files changed, 45 insertions, 1 deletions
diff --git a/src/client/pages/messaging/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue index e561cb3db5..258300dc52 100644 --- a/src/client/pages/messaging/messaging-room.form.vue +++ b/src/client/pages/messaging/messaging-room.form.vue @@ -7,6 +7,7 @@ v-model="text" ref="text" @keypress="onKeypress" + @compositionupdate="onCompositionUpdate" @paste="onPaste" :placeholder="$ts.inputMessageHere" ></textarea> @@ -29,6 +30,7 @@ import { formatTimeString } from '../../../misc/format-time-string'; import { selectFile } from '@/scripts/select-file'; import * as os from '@/os'; import { Autocomplete } from '@/scripts/autocomplete'; +import { throttle } from 'throttle-debounce'; export default defineComponent({ props: { @@ -46,6 +48,9 @@ export default defineComponent({ text: null, file: null, sending: false, + typing: throttle(3000, () => { + os.stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id }); + }), faPaperPlane, faPhotoVideo, faLaughSquint }; }, @@ -147,11 +152,16 @@ export default defineComponent({ }, onKeypress(e) { + this.typing(); if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canSend) { this.send(); } }, + onCompositionUpdate() { + this.typing(); + }, + chooseFile(e) { selectFile(e.currentTarget || e.target, this.$ts.selectFile, false).then(file => { this.file = file; diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue index 7fdd0a201b..3921a081d1 100644 --- a/src/client/pages/messaging/messaging-room.vue +++ b/src/client/pages/messaging/messaging-room.vue @@ -16,6 +16,14 @@ </XList> </div> <footer> + <div class="typers" v-if="typers.length > 0"> + <I18n :src="$ts.typingUsers" text-tag="span" class="users"> + <template #users> + <b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b> + </template> + </I18n> + <MkEllipsis/> + </div> <transition name="fade"> <div class="new-message" v-show="showIndicator"> <button class="_buttonPrimary" @click="onIndicatorClick"><i><Fa :icon="faArrowCircleDown"/></i>{{ $ts.newMessageExists }}</button> @@ -86,6 +94,7 @@ const Component = defineComponent({ connection: null, showIndicator: false, timer: null, + typers: [], ilObserver: new IntersectionObserver( (entries) => entries.some((entry) => entry.isIntersecting) && !this.fetching @@ -142,6 +151,9 @@ const Component = defineComponent({ this.connection.on('message', this.onMessage); this.connection.on('read', this.onRead); this.connection.on('deleted', this.onDeleted); + this.connection.on('typers', typers => { + this.typers = typers.filter(u => u.id !== this.$i.id); + }); document.addEventListener('visibilitychange', this.onVisibilitychange); @@ -397,6 +409,7 @@ export default Component; > footer { width: 100%; + position: relative; > .new-message { position: absolute; @@ -422,6 +435,25 @@ export default Component; } } } + + > .typers { + position: absolute; + bottom: 100%; + padding: 0 8px 0 8px; + font-size: 0.9em; + color: var(--fgTransparentWeak); + + > .users { + > .user + .user:before { + content: ", "; + font-weight: normal; + } + + > .user:last-of-type:after { + content: " "; + } + } + } } } diff --git a/src/client/pages/settings/email-address.vue b/src/client/pages/settings/email-address.vue index 4aed9bf4c7..8ca0f119c5 100644 --- a/src/client/pages/settings/email-address.vue +++ b/src/client/pages/settings/email-address.vue @@ -60,7 +60,7 @@ export default defineComponent({ } }).then(({ canceled, result: password }) => { if (canceled) return; - os.api('i/update-email', { + os.apiWithDialog('i/update-email', { password: password, email: this.emailAddress, }); diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue index 0e741d474c..90ff3e2c20 100644 --- a/src/client/pages/settings/general.vue +++ b/src/client/pages/settings/general.vue @@ -19,6 +19,7 @@ <template #label>{{ $ts.behavior }}</template> <FormSwitch v-model:value="imageNewTab">{{ $ts.openImageInNewTab }}</FormSwitch> <FormSwitch v-model:value="enableInfiniteScroll">{{ $ts.enableInfiniteScroll }}</FormSwitch> + <FormSwitch v-model:value="useReactionPickerForContextMenu">{{ $ts.useReactionPickerForContextMenu }}</FormSwitch> <FormSwitch v-model:value="disablePagesScript">{{ $ts.disablePagesScript }}</FormSwitch> </FormGroup> @@ -144,6 +145,7 @@ export default defineComponent({ chatOpenBehavior: ColdDeviceStorage.makeGetterSetter('chatOpenBehavior'), instanceTicker: defaultStore.makeGetterSetter('instanceTicker'), enableInfiniteScroll: defaultStore.makeGetterSetter('enableInfiniteScroll'), + useReactionPickerForContextMenu: defaultStore.makeGetterSetter('useReactionPickerForContextMenu'), }, watch: { |