Skip to content

Commit

Permalink
Merge pull request #9826 from dijeth/fix/9719
Browse files Browse the repository at this point in the history 
fix(styles): prevent typing indicator overlay
  • Loading branch information
@Antreesy
Antreesy authored Jun 26, 2023
2 parents a50eb19 + 3010978 commit 0134719
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 154 deletions.
2 changes: 1 addition & 1 deletion src/components/MessagesList/MessagesList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1075,7 +1075,7 @@ export default {

.scroll-to-bottom {
position: absolute !important;
bottom: 76px;
bottom: 140px;
right: 24px;
z-index: 2;
}
Expand Down
284 changes: 134 additions & 150 deletions src/components/NewMessage/NewMessage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
-->

<template>
<div class="wrapper" :class="{'wrapper--has-typing-indicator': showTypingStatus}">
<div class="wrapper">
<NewMessageTypingIndicator v-if="showTypingStatus"
:token="token" />

Expand All @@ -36,109 +36,107 @@
class="hidden-visually"
@change="handleFileInput">

<div class="new-message">
<form class="new-message-form"
@submit.prevent>
<!-- Attachments menu -->
<NewMessageAttachments v-if="showAttachmentsMenu"
:token="token"
:container="container"
:boundaries-element="containerElement"
:disabled="disabled"
:can-upload-files="canUploadFiles"
:can-share-files="canShareFiles"
:can-create-poll="canCreatePoll"
@open-file-upload="openFileUploadWindow"
@handle-file-share="handleFileShare"
@toggle-poll-editor="togglePollEditor"
@update-new-file-dialog="updateNewFileDialog" />

<!-- Input area -->
<div class="new-message-form__input">
<div class="new-message-form__emoji-picker">
<NcEmojiPicker v-if="!disabled"
:container="container"
:close-on-select="false"
@select="addEmoji">
<NcButton :disabled="disabled"
:aria-label="t('spreed', 'Add emoji')"
type="tertiary-no-background"
:aria-haspopup="true">
<template #icon>
<EmoticonOutline :size="16" />
</template>
</NcButton>
</NcEmojiPicker>
<!-- Disabled emoji picker placeholder button -->
<NcButton v-else
type="tertiary"
<form class="new-message-form"
@submit.prevent>
<!-- Attachments menu -->
<NewMessageAttachments v-if="showAttachmentsMenu"
:token="token"
:container="container"
:boundaries-element="containerElement"
:disabled="disabled"
:can-upload-files="canUploadFiles"
:can-share-files="canShareFiles"
:can-create-poll="canCreatePoll"
@open-file-upload="openFileUploadWindow"
@handle-file-share="handleFileShare"
@toggle-poll-editor="togglePollEditor"
@update-new-file-dialog="updateNewFileDialog" />

<!-- Input area -->
<div class="new-message-form__input">
<div class="new-message-form__emoji-picker">
<NcEmojiPicker v-if="!disabled"
:container="container"
:close-on-select="false"
@select="addEmoji">
<NcButton :disabled="disabled"
:aria-label="t('spreed', 'Add emoji')"
:disabled="true">
type="tertiary-no-background"
:aria-haspopup="true">
<template #icon>
<EmoticonOutline :size="16" />
</template>
</NcButton>
</div>
<div v-if="messageToBeReplied" class="new-message-form__quote">
<Quote is-new-message-quote
:parent-id="messageToBeReplied.id"
v-bind="messageToBeReplied" />
</div>
<NcRichContenteditable ref="richContenteditable"
v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
class="new-message-form__richContenteditable"
:value.sync="text"
:auto-complete="autoComplete"
:disabled="disabled"
:user-data="userData"
:menu-container="containerElement"
:placeholder="placeholderText"
:aria-label="placeholderText"
@shortkey="focusInput"
@keydown.esc="handleInputEsc"
@tribute-active-true.native="isTributePickerActive = true"
@tribute-active-false.native="isTributePickerActive = false"
@input="handleTyping"
@paste="handlePastedFiles"
@submit="handleSubmit({ silent: false })" />
</div>

<!-- Audio recorder -->
<NewMessageAudioRecorder v-if="showAudioRecorder"
:disabled="disabled"
@recording="handleRecording"
@audio-file="handleAudioFile" />

<!-- Send buttons -->
<template v-else>
<NcActions v-if="!broadcast"
:container="container"
:force-menu="true">
<!-- Silent send -->
<NcActionButton :close-after-click="true"
icon="icon-upload"
:title="t('spreed', 'Send without notification')"
@click="handleSubmit({ silent: true })">
{{ silentSendInfo }}
<template #icon>
<BellOff :size="16" />
</template>
</NcActionButton>
</NcActions>
<!-- Send -->
<NcButton :disabled="disabled"
</NcEmojiPicker>
<!-- Disabled emoji picker placeholder button -->
<NcButton v-else
type="tertiary"
native-type="submit"
:title="t('spreed', 'Send message')"
:aria-label="t('spreed', 'Send message')"
@click="handleSubmit({ silent: false })">
:aria-label="t('spreed', 'Add emoji')"
:disabled="true">
<template #icon>
<Send :size="16" />
<EmoticonOutline :size="16" />
</template>
</NcButton>
</template>
</form>
</div>
</div>
<div v-if="messageToBeReplied" class="new-message-form__quote">
<Quote is-new-message-quote
:parent-id="messageToBeReplied.id"
v-bind="messageToBeReplied" />
</div>
<NcRichContenteditable ref="richContenteditable"
v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
class="new-message-form__richContenteditable"
:value.sync="text"
:auto-complete="autoComplete"
:disabled="disabled"
:user-data="userData"
:menu-container="containerElement"
:placeholder="placeholderText"
:aria-label="placeholderText"
@shortkey="focusInput"
@keydown.esc="handleInputEsc"
@tribute-active-true.native="isTributePickerActive = true"
@tribute-active-false.native="isTributePickerActive = false"
@input="handleTyping"
@paste="handlePastedFiles"
@submit="handleSubmit({ silent: false })" />
</div>

<!-- Audio recorder -->
<NewMessageAudioRecorder v-if="showAudioRecorder"
:disabled="disabled"
@recording="handleRecording"
@audio-file="handleAudioFile" />

<!-- Send buttons -->
<template v-else>
<NcActions v-if="!broadcast"
:container="container"
:force-menu="true">
<!-- Silent send -->
<NcActionButton :close-after-click="true"
icon="icon-upload"
:title="t('spreed', 'Send without notification')"
@click="handleSubmit({ silent: true })">
{{ silentSendInfo }}
<template #icon>
<BellOff :size="16" />
</template>
</NcActionButton>
</NcActions>
<!-- Send -->
<NcButton :disabled="disabled"
type="tertiary"
native-type="submit"
:title="t('spreed', 'Send message')"
:aria-label="t('spreed', 'Send message')"
@click="handleSubmit({ silent: false })">
<template #icon>
<Send :size="16" />
</template>
</NcButton>
</template>
</form>

<!-- File upload dialog -->
<NewMessageUploadEditor />
Expand Down Expand Up @@ -803,71 +801,57 @@ export default {
@import '../../assets/variables';

.wrapper {
position: relative;
display: flex;
justify-content: center;
padding: 12px 0 12px;
padding: 12px 0;
min-height: 69px;

&--has-typing-indicator {
padding: 30px 0 12px;
}
}

.new-message {
width: 100%;
.new-message-form {
align-items: flex-end;
display: flex;
justify-content: center;

&-form {
align-items: flex-end;
display: flex;
position: relative;
flex: 0 1 700px;
margin: 0 4px;

&__emoji-picker {
position: absolute;
bottom: 1px;
z-index: 1;
}
position: relative;
max-width: 700px;
margin: 0 auto;

&__input {
flex-grow: 1;
overflow: hidden;
position: relative;
}
&__emoji-picker {
position: absolute;
bottom: 1px;
z-index: 1;
}

// Override NcRichContenteditable styles
& &__richContenteditable {
border: 1px solid var(--color-border-dark);
border-radius: calc(var(--default-clickable-area) / 2);
padding: 8px 16px 8px 44px;
max-height: 180px;

&:hover,
&:focus,
&:active {
border: 1px solid var(--color-primary-element);
}
}
&__input {
flex-grow: 1;
overflow: hidden;
position: relative;
}

&__quote {
margin: 0 16px 12px 24px;
background-color: var(--color-background-hover);
padding: 8px;
border-radius: var(--border-radius-large);
// Override NcRichContenteditable styles
& &__richContenteditable {
border: 1px solid var(--color-border-dark);
border-radius: calc(var(--default-clickable-area) / 2);
padding: 8px 16px 8px 44px;
max-height: 180px;

&:hover,
&:focus,
&:active {
border: 1px solid var(--color-primary-element);
}
}

// put a grey round background when popover is opened or hover-focused
&__icon:hover,
&__icon:focus,
&__icon:active {
opacity: $opacity_full;
// good looking on dark AND white bg
background-color: $icon-focus-bg;
}
&__quote {
margin: 0 16px 12px 24px;
background-color: var(--color-background-hover);
padding: 8px;
border-radius: var(--border-radius-large);
}

// put a grey round background when popover is opened or hover-focused
&__icon:hover,
&__icon:focus,
&__icon:active {
opacity: $opacity_full;
// good looking on dark AND white bg
background-color: $icon-focus-bg;
}
}

Expand Down
4 changes: 1 addition & 3 deletions src/components/NewMessage/NewMessageTypingIndicator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,11 +139,9 @@ export default {

<style lang="scss" scoped>
.indicator {
position: absolute;
bottom: calc(100% - 2em);
left: 0;
width: 100%;
padding-right: 12px;
margin-bottom: 4px;

&__wrapper {
max-width: 800px;
Expand Down

0 comments on commit 0134719

Please sign in to comment.