Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(rich-text-editor): DLT-2107 message input recipe updates #522

Merged
merged 19 commits into from
Oct 9, 2024
Merged

fix(rich-text-editor): DLT-2107 message input recipe updates #522

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
1bc9262
Modify composer spacing. Convert bottom actions to squircle buttons v…
hynes-dialpad Oct 3, 2024
de9d583
fix lint
braddialpad Oct 3, 2024
67ea19b
Adjusting padding on message rich editor. Copying over to vue2
hynes-dialpad Oct 4, 2024
81fb841
merge hell
hynes-dialpad Oct 4, 2024
1bc9a1e
Revert "merge hell"
hynes-dialpad Oct 4, 2024
f5c1980
Revert "Adjusting padding on message rich editor. Copying over to vue2"
hynes-dialpad Oct 4, 2024
36fc58e
Revert previous commits and adjust message input padding and line-hei…
hynes-dialpad Oct 4, 2024
5a13e41
rest of vue2 updates
hynes-dialpad Oct 4, 2024
03470e8
Re-adding CSS classes that I had added previously
hynes-dialpad Oct 7, 2024
bbac6ea
Resolving merge conflicts
hynes-dialpad Oct 7, 2024
15eafcb
CSS changes weren't copied over to Vue2. Misspell direction on dt-stack.
hynes-dialpad Oct 7, 2024
9ee1f96
Updates based on Nina's feedback
hynes-dialpad Oct 7, 2024
ceae597
Missed class name updates in Vue2 component.
hynes-dialpad Oct 7, 2024
ea0d746
Modify spacing between send and cancel buttons as well as button bord…
hynes-dialpad Oct 7, 2024
649e4c3
Update transition properties to use DT variables
hynes-dialpad Oct 7, 2024
0d6975d
Modifications to non-icon button
hynes-dialpad Oct 8, 2024
b91762b
Shorten transition duration.
hynes-dialpad Oct 8, 2024
7757dd5
Removing the button opacity. Not worth it in the end.
hynes-dialpad Oct 8, 2024
b332f6c
Remove remaining opacity CSS property since we're not modifying it an…
hynes-dialpad Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 106 additions & 82 deletions packages/dialtone-vue2/recipes/conversation_view/message_input/message_input.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,84 +51,90 @@
<section class="dt-message-input__bottom-section">
<!-- Left content -->
<div class="dt-message-input__bottom-section-left">
<dt-button
v-if="showImagePicker"
v-dt-tooltip:top-start="showImagePicker?.tooltipLabel"
data-qa="dt-message-input-image-btn"
size="sm"
circle
:kind="imagePickerFocus ? 'default' : 'muted'"
importance="clear"
:aria-label="showImagePicker.ariaLabel"
@click="onSelectImage"
@mouseenter="imagePickerFocus = true"
@mouseleave="imagePickerFocus = false"
@focus="imagePickerFocus = true"
@blur="imagePickerFocus = false"
>
<template #icon>
<dt-icon-image
size="300"
/>
</template>
</dt-button>
<dt-input
ref="messageInputImageUpload"
data-qa="dt-message-input-image-input"
accept="image/*, video/*"
type="file"
class="dt-message-input__image-input"
multiple
hidden
@input="onImageUpload"
/>
<dt-popover
v-if="showEmojiPicker"
data-qa="dt-message-input-emoji-picker-popover"
:open.sync="emojiPickerOpened"
initial-focus-element="#searchInput"
padding="none"
<dt-stack
direction="row"
gap="200"
>
<template #anchor="{ attrs }">
<dt-button
v-dt-tooltip="emojiTooltipMessage"
v-bind="attrs"
data-qa="dt-message-input-emoji-picker-btn"
size="sm"
circle
:kind="emojiPickerHovered ? 'default' : 'muted'"
importance="clear"
:aria-label="emojiButtonAriaLabel"
@click="toggleEmojiPicker"
@mouseenter="emojiPickerFocus = true"
@mouseleave="emojiPickerFocus = false"
@focus="emojiPickerFocus = true"
@blur="emojiPickerFocus = false"
>
<template #icon>
<dt-icon-very-satisfied
v-if="emojiPickerHovered"
size="300"
/>
<dt-icon-satisfied
v-else
size="300"
/>
</template>
</dt-button>
</template>
<template
#content="{ close }"
<dt-button
v-if="showImagePicker"
v-dt-tooltip:top-start="showImagePicker?.tooltipLabel"
data-qa="dt-message-input-image-btn"
size="sm"
class="dt-message-input__button"
:kind="imagePickerFocus ? 'muted' : 'muted'"
hynes-dialpad marked this conversation as resolved.
Show resolved Hide resolved
importance="clear"
:aria-label="showImagePicker.ariaLabel"
@click="onSelectImage"
@mouseenter="imagePickerFocus = true"
@mouseleave="imagePickerFocus = false"
@focus="imagePickerFocus = true"
@blur="imagePickerFocus = false"
>
<dt-emoji-picker
v-bind="emojiPickerProps"
@skin-tone="onSkinTone"
@selected-emoji="(emoji) => { close(); onSelectEmoji(emoji); }"
/>
</template>
</dt-popover>
<!-- @slot Slot for emojiGiphy picker -->
<slot name="emojiGiphyPicker" />
<template #icon>
<dt-icon-image size="300" />
</template>
</dt-button>
<dt-input
ref="messageInputImageUpload"
data-qa="dt-message-input-image-input"
accept="image/*, video/*"
type="file"
class="dt-message-input__image-input"
multiple
hidden
@input="onImageUpload"
/>
<dt-popover
v-if="showEmojiPicker"
v-model:open="emojiPickerOpened"
data-qa="dt-message-input-emoji-picker-popover"
initial-focus-element="#searchInput"
padding="none"
>
<template #anchor="{ attrs }">
<dt-button
v-dt-tooltip="emojiTooltipMessage"
v-bind="attrs"
data-qa="dt-message-input-emoji-picker-btn"
size="sm"
class="dt-message-input__button"
:kind="emojiPickerHovered ? 'muted' : 'muted'"
hynes-dialpad marked this conversation as resolved.
Show resolved Hide resolved
importance="clear"
:aria-label="emojiButtonAriaLabel"
@click="toggleEmojiPicker"
@mouseenter="emojiPickerFocus = true"
@mouseleave="emojiPickerFocus = false"
@focus="emojiPickerFocus = true"
@blur="emojiPickerFocus = false"
>
<template #icon>
<dt-icon-very-satisfied
v-if="emojiPickerHovered"
size="300"
/>
<dt-icon-satisfied
v-else
size="300"
/>
</template>
</dt-button>
</template>
<template #content="{ close }">
<dt-emoji-picker
v-bind="emojiPickerProps"
@skin-tone="onSkinTone"
@selected-emoji="
(emoji) => {
close();
onSelectEmoji(emoji);
}
"
/>
</template>
</dt-popover>
<!-- @slot Slot for emojiGiphy picker -->
<slot name="emojiGiphyPicker" />
</dt-stack>
</div>
<!-- Right content -->
<div class="dt-message-input__bottom-section-right">
Expand Down Expand Up @@ -161,7 +167,7 @@
<dt-button
v-if="showCancel"
data-qa="dt-message-input-cancel-button"
class="dt-message-input__cancel-button"
class="dt-message-input__cancel-button dt-message-input__button d-p8"
hynes-dialpad marked this conversation as resolved.
Show resolved Hide resolved
size="sm"
kind="muted"
importance="clear"
Expand All @@ -184,8 +190,8 @@
importance="primary"
:class="[
{
'dt-message-input__send-button--disabled': isSendDisabled,
'd-btn--circle': showSendIcon,
'dt-message-input__button dt-message-input__send-button--disabled': isSendDisabled,
'dt-message-input__button d-btn--icon-only': showSendIcon,
hynes-dialpad marked this conversation as resolved.
Show resolved Hide resolved
},
]"
:aria-label="showSend.ariaLabel"
Expand Down Expand Up @@ -231,6 +237,7 @@ import { DtEmojiPicker } from '@/components/emoji_picker';
import { DtPopover } from '@/components/popover';
import { DtInput } from '@/components/input';
import { DtTooltip } from '@/components/tooltip';
import { DtStack } from '@/components/stack';
import { DtIconImage, DtIconVerySatisfied, DtIconSatisfied, DtIconSend } from '@dialpad/dialtone-icons/vue2';

export default {
Expand All @@ -243,6 +250,7 @@ export default {
DtPopover,
DtRichTextEditor,
DtTooltip,
DtStack,
DtIconImage,
DtIconVerySatisfied,
DtIconSatisfied,
Expand Down Expand Up @@ -775,15 +783,24 @@ export default {
border-radius: var(--dt-size-radius-400);
border: var(--dt-size-border-100) solid;
border-color: var(--dt-color-border-default);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0%);
hynes-dialpad marked this conversation as resolved.
Show resolved Hide resolved
line-height: var(--dt-font-line-height-400);
cursor: text;
transition: all 100ms cubic-bezier(0.22, 1, 0.36, 1);

&:focus-within {
border-color: var(--dt-color-border-bold);
box-shadow: var(--dt-shadow-small);
box-shadow: 0 0 var(--dt-size-300) 0 var(--dt-color-surface-moderate-opaque);
transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

&:not(:hover):not(:focus-within) .dt-message-input__button {
opacity: 0.75;
transition: all 250ms cubic-bezier(0.22, 1, 0.36, 1);
hynes-dialpad marked this conversation as resolved.
Show resolved Hide resolved
}

&__editor-wrapper {
padding: var(--dt-space-400) var(--dt-space-500) var(--dt-space-300);
padding: var(--dt-space-450) var(--dt-space-500) var(--dt-space-300);
}

&__remaining-char-tooltip {
Expand All @@ -797,20 +814,27 @@ export default {
margin-right: var(--dt-space-500);
}

&__button {
max-height: 2.8rem;
max-width: 2.8rem;
hynes-dialpad marked this conversation as resolved.
Show resolved Hide resolved
border-radius: var(--dt-size-radius-400);
}

&__send-button--disabled {
background-color: unset;
color: var(--dt-color-foreground-muted);
cursor: default;
}

&__cancel-button {
max-width: unset;
margin-right: var(--dt-space-300);
}

&__bottom-section {
display: flex;
justify-content: space-between;
padding: var(--dt-space-300) var(--dt-space-400);
padding: var(--dt-space-300) var(--dt-space-400) var(--dt-space-400);
}

&__bottom-section-left {
Expand Down
Loading
Loading