Fix minor UI issues
This commit is contained in:
Fedor Indutny
GitHub
parent
0b4121528a
commit
f2af71f8b5
14 changed files with 216 additions and 174 deletions
|
|
@ -1163,7 +1163,7 @@
|
|||
"description": "Label for the time a message was received"
|
||||
},
|
||||
"sendMessage": {
|
||||
"message": "Send a message",
|
||||
"message": "Message",
|
||||
"description": "Placeholder text in the message entry field"
|
||||
},
|
||||
"groupMembers": {
|
||||
|
|
|
|||
1
images/icons/v2/chevron-down-20.svg
Normal file
1
images/icons/v2/chevron-down-20.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 15.5 2 7.521l1.059-1.062L10 13.382l6.941-6.923L18 7.521 10 15.5Z" fill="#3B3B3B"/></svg>
|
||||
|
After Width: | Height: | Size: 176 B |
|
|
@ -1 +1 @@
|
|||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.21 22a8.084 8.084 0 0 1-2.66-.51 20.791 20.791 0 0 1-7.3-4.73 21 21 0 0 1-4.74-7.3c-.78-2.22-.67-4 .35-5.45a5 5 0 0 1 2-1.67 2.72 2.72 0 0 1 3.51.81l2.11 3a2.69 2.69 0 0 1-.35 3.49c-.37.34-.62.58-.93.85-.09.08-.15.22-.08.31A20.015 20.015 0 0 0 11 13c.69.69 1.428 1.328 2.21 1.91a.24.24 0 0 0 .3-.08c.28-.32.51-.57.85-.93a2.68 2.68 0 0 1 3.49-.35l3 2.11a2.679 2.679 0 0 1 .85 3.43 5.22 5.22 0 0 1-1.71 2 4.69 4.69 0 0 1-2.78.91ZM4.09 4.87c-.46.64-1 1.77-.16 4.08a19.28 19.28 0 0 0 4.38 6.74A19.493 19.493 0 0 0 15 20.07c2.31.81 3.44.3 4.09-.16a3.55 3.55 0 0 0 1.2-1.42A1.21 1.21 0 0 0 20 16.9l-3-2.12a1.18 1.18 0 0 0-1.53.15c-.33.36-.56.6-.82.9a1.72 1.72 0 0 1-2.33.29 21.914 21.914 0 0 1-2.37-2.05 22.204 22.204 0 0 1-2-2.37 1.71 1.71 0 0 1 .3-2.32l.89-.82A1.19 1.19 0 0 0 9.21 7L7.1 4a1.19 1.19 0 0 0-1.51-.38 3.72 3.72 0 0 0-1.5 1.25Z" fill="#000"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M17.21 22a8.08 8.08 0 0 1-2.66-.51 20.79 20.79 0 0 1-7.3-4.73 21 21 0 0 1-4.74-7.3c-.78-2.22-.67-4 .35-5.45a5 5 0 0 1 2-1.67 2.72 2.72 0 0 1 3.51.81l2.11 3a2.69 2.69 0 0 1-.35 3.49c-.37.34-.62.58-.93.85-.09.08-.15.22-.08.31A20 20 0 0 0 11 13a20 20 0 0 0 2.21 1.91.24.24 0 0 0 .3-.08c.28-.32.51-.57.85-.93a2.68 2.68 0 0 1 3.49-.35l3 2.11a2.68 2.68 0 0 1 .85 3.43 5.22 5.22 0 0 1-1.71 2 4.69 4.69 0 0 1-2.78.91ZM4.09 4.87c-.46.64-1 1.77-.16 4.08a19.28 19.28 0 0 0 4.38 6.74A19.49 19.49 0 0 0 15 20.07c2.31.81 3.44.3 4.09-.16a3.55 3.55 0 0 0 1.2-1.42A1.21 1.21 0 0 0 20 16.9l-3-2.12a1.18 1.18 0 0 0-1.53.15c-.33.36-.56.6-.82.9a1.72 1.72 0 0 1-2.33.29 21.9 21.9 0 0 1-2.37-2.05 22.2 22.2 0 0 1-2-2.37 1.71 1.71 0 0 1 .3-2.32l.89-.82A1.19 1.19 0 0 0 9.21 7L7.1 4a1.19 1.19 0 0 0-1.51-.38 3.72 3.72 0 0 0-1.5 1.25Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 945 B After Width: | Height: | Size: 889 B |
|
|
@ -3950,7 +3950,7 @@ button.module-image__border-overlay:focus {
|
|||
&__button {
|
||||
&::before {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/arrow-down-24.svg',
|
||||
'../images/icons/v2/chevron-down-24.svg',
|
||||
$color-white
|
||||
);
|
||||
|
||||
|
|
@ -6181,15 +6181,14 @@ button.module-image__border-overlay:focus {
|
|||
background: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.5;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
outline: 1px solid $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
outline: none;
|
||||
|
|
@ -6209,7 +6208,7 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/sticker-solid-24.svg',
|
||||
'../images/icons/v2/sticker-outline-24.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
|
|
@ -6686,15 +6685,14 @@ button.module-image__border-overlay:focus {
|
|||
background: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.5;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
outline: 1px solid $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
outline: none;
|
||||
|
|
@ -6714,7 +6712,7 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/emoji-smiley-solid-24.svg',
|
||||
'../images/icons/v2/emoji-smiley-outline-24.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
|
|
@ -6796,6 +6794,7 @@ button.module-image__border-overlay:focus {
|
|||
padding: 0;
|
||||
text-align: start;
|
||||
white-space: break-spaces;
|
||||
line-height: inherit;
|
||||
|
||||
&--loaded {
|
||||
caret-color: auto;
|
||||
|
|
@ -6830,7 +6829,6 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
|
||||
&__input {
|
||||
border: none;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
|
|
@ -6838,28 +6836,34 @@ button.module-image__border-overlay:focus {
|
|||
// Override Quill styles
|
||||
.ql-container {
|
||||
@include font-body-1;
|
||||
line-height: 21px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ql-blank::before {
|
||||
color: $color-gray-45;
|
||||
@include light-theme() {
|
||||
color: $color-gray-45;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
@include light-theme() {
|
||||
// Same as background color
|
||||
border: 1px solid $color-white;
|
||||
background-color: $color-gray-05;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
// Same as background color
|
||||
border: 1px solid $color-gray-95;
|
||||
background-color: $color-gray-75;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&__scroller {
|
||||
padding: 7px 12px;
|
||||
padding: 5px 11px 6px 11px;
|
||||
min-height: 32px;
|
||||
max-height: 80px;
|
||||
overflow: auto;
|
||||
|
|
@ -6885,11 +6889,11 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
&:focus-within {
|
||||
@include light-theme() {
|
||||
border: 1px solid $color-ultramarine;
|
||||
outline: 1px solid $color-ultramarine;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
border: 1px solid $color-ultramarine;
|
||||
outline: 1px solid $color-ultramarine;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7000,57 +7004,6 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
}
|
||||
|
||||
// Module: Scroll Down Button
|
||||
|
||||
.module-scroll-down {
|
||||
z-index: $z-index-scroll-down-button;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.module-scroll-down__button {
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-25;
|
||||
&:hover {
|
||||
background-color: $color-gray-45;
|
||||
}
|
||||
|
||||
box-shadow: 0px 3px 5px 0px $color-black-alpha-20;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-45;
|
||||
&:hover {
|
||||
background-color: $color-gray-25;
|
||||
}
|
||||
|
||||
box-shadow: 0px 3px 5px 0px $color-white-alpha-20;
|
||||
}
|
||||
}
|
||||
|
||||
.module-scroll-down__button--new-messages {
|
||||
background-color: $color-ultramarine;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-ultramarine-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.module-scroll-down__icon {
|
||||
@include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white);
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
margin-left: -3px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
// Module: Avatar Popup
|
||||
|
||||
.module-avatar-popup {
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ $color-black-alpha-08: rgba($color-black, 0.08);
|
|||
$color-black-alpha-12: rgba($color-black, 0.12);
|
||||
$color-black-alpha-16: rgba($color-black, 0.16);
|
||||
$color-black-alpha-20: rgba($color-black, 0.2);
|
||||
$color-black-alpha-24: rgba($color-black, 0.24);
|
||||
$color-black-alpha-30: rgba($color-black, 0.3);
|
||||
$color-black-alpha-40: rgba($color-black, 0.4);
|
||||
$color-black-alpha-50: rgba($color-black, 0.5);
|
||||
|
|
|
|||
|
|
@ -8,21 +8,23 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
background: none;
|
||||
padding: 0 5px;
|
||||
|
||||
&__microphone {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
outline: 1px solid $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
outline: none;
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
}
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/mic-solid-24.svg',
|
||||
'../images/icons/v2/mic-outline-24.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
&__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&--center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -31,28 +33,22 @@
|
|||
}
|
||||
|
||||
&__button-cell {
|
||||
margin-top: 2px;
|
||||
margin: 0 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
&--mic-active {
|
||||
width: 150px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 12px;
|
||||
}
|
||||
&--large-right {
|
||||
margin-left: auto;
|
||||
margin-right: 4px;
|
||||
}
|
||||
&--large-right-mic-active {
|
||||
margin-left: auto;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
&__send-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -69,6 +65,11 @@
|
|||
}
|
||||
&__input {
|
||||
flex-grow: 1;
|
||||
margin: 0 6px;
|
||||
|
||||
&--large {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
$comp-area: &;
|
||||
&__toggle-large {
|
||||
|
|
@ -76,7 +77,7 @@
|
|||
height: 24px;
|
||||
position: absolute;
|
||||
left: calc(50% - 24px);
|
||||
top: -18px;
|
||||
top: -19px;
|
||||
border-radius: 12px 12px 0 0;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -188,13 +189,16 @@
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
opacity: 0.5;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
outline: 1px solid $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -185,7 +185,8 @@
|
|||
|
||||
-webkit-app-region: no-drag;
|
||||
@include button-reset;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
display: flex;
|
||||
|
|
@ -240,56 +241,49 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin normal-button($light-icon, $dark-icon) {
|
||||
@mixin normal-button($icon, $size) {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
@include light-theme {
|
||||
@include color-svg($light-icon, $color-gray-75);
|
||||
@include color-svg($icon, $color-gray-75);
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include color-svg($light-icon, $color-gray-90);
|
||||
@include color-svg($icon, $color-gray-90);
|
||||
}
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg($dark-icon, $color-gray-15);
|
||||
@include color-svg($icon, $color-gray-15);
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include color-svg($dark-icon, $color-gray-02);
|
||||
@include color-svg($icon, $color-gray-02);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--video {
|
||||
@include normal-button(
|
||||
'../images/icons/v2/video-outline-24.svg',
|
||||
'../images/icons/v2/video-solid-24.svg'
|
||||
);
|
||||
@include normal-button('../images/icons/v2/video-outline-24.svg', 24px);
|
||||
}
|
||||
|
||||
&--audio {
|
||||
@include normal-button(
|
||||
'../images/icons/v2/phone-right-outline-24.svg',
|
||||
'../images/icons/v2/phone-right-solid-24.svg'
|
||||
24px
|
||||
);
|
||||
}
|
||||
|
||||
&--search {
|
||||
@include normal-button(
|
||||
'../images/icons/v2/search-24.svg',
|
||||
'../images/icons/v2/search-24.svg'
|
||||
);
|
||||
@include normal-button('../images/icons/v2/search-24.svg', 24px);
|
||||
}
|
||||
|
||||
&--more {
|
||||
@include normal-button(
|
||||
'../images/icons/v2/chevron-down-24.svg',
|
||||
'../images/icons/v2/chevron-down-24.svg'
|
||||
);
|
||||
@include normal-button('../images/icons/v2/chevron-down-20.svg', 20px);
|
||||
}
|
||||
|
||||
&--join-call {
|
||||
|
|
|
|||
68
stylesheets/components/ScrollDownButton.scss
Normal file
68
stylesheets/components/ScrollDownButton.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
// Copyright 2018-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.ScrollDownButton {
|
||||
z-index: $z-index-scroll-down-button;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 12px;
|
||||
|
||||
&__button {
|
||||
position: relative;
|
||||
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
|
||||
display: flex;
|
||||
border-radius: 18px;
|
||||
border: none;
|
||||
outline: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
box-shadow: 0px 0px 2px $color-black-alpha-20,
|
||||
0px 2px 6px $color-black-alpha-12;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-white;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-75;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
@include light-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/chevron-down-20.svg',
|
||||
$color-gray-75
|
||||
);
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/chevron-down-20.svg',
|
||||
$color-gray-15
|
||||
);
|
||||
}
|
||||
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
border-radius: 8px;
|
||||
padding: 1px 4px;
|
||||
background-color: $color-ultramarine;
|
||||
color: $color-white;
|
||||
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
|
||||
box-shadow: 0px 1px 4px $color-black-alpha-24;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -96,6 +96,7 @@
|
|||
@import './components/ReactionPickerPicker.scss';
|
||||
@import './components/SafetyNumberChangeDialog.scss';
|
||||
@import './components/SafetyNumberViewer.scss';
|
||||
@import './components/ScrollDownButton.scss';
|
||||
@import './components/SearchInput.scss';
|
||||
@import './components/SearchResultsLoadingFakeHeader.scss';
|
||||
@import './components/SearchResultsLoadingFakeRow.scss';
|
||||
|
|
|
|||
|
|
@ -380,22 +380,24 @@ export const CompositionArea = ({
|
|||
);
|
||||
|
||||
const micButtonFragment = shouldShowMicrophone ? (
|
||||
<AudioCapture
|
||||
cancelRecording={cancelRecording}
|
||||
completeRecording={completeRecording}
|
||||
conversationId={conversationId}
|
||||
draftAttachments={draftAttachments}
|
||||
errorDialogAudioRecorderType={errorDialogAudioRecorderType}
|
||||
errorRecording={errorRecording}
|
||||
i18n={i18n}
|
||||
recordingState={recordingState}
|
||||
onSendAudioRecording={(
|
||||
voiceNoteAttachment: InMemoryAttachmentDraftType
|
||||
) => {
|
||||
onSendMessage({ voiceNoteAttachment });
|
||||
}}
|
||||
startRecording={startRecording}
|
||||
/>
|
||||
<div className="CompositionArea__button-cell">
|
||||
<AudioCapture
|
||||
cancelRecording={cancelRecording}
|
||||
completeRecording={completeRecording}
|
||||
conversationId={conversationId}
|
||||
draftAttachments={draftAttachments}
|
||||
errorDialogAudioRecorderType={errorDialogAudioRecorderType}
|
||||
errorRecording={errorRecording}
|
||||
i18n={i18n}
|
||||
recordingState={recordingState}
|
||||
onSendAudioRecording={(
|
||||
voiceNoteAttachment: InMemoryAttachmentDraftType
|
||||
) => {
|
||||
onSendMessage({ voiceNoteAttachment });
|
||||
}}
|
||||
startRecording={startRecording}
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
const isRecording = recordingState === RecordingState.Recording;
|
||||
|
|
@ -412,19 +414,17 @@ export const CompositionArea = ({
|
|||
);
|
||||
|
||||
const sendButtonFragment = (
|
||||
<div
|
||||
className={classNames(
|
||||
'CompositionArea__button-cell',
|
||||
large ? 'CompositionArea__button-cell--large-right' : null
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="CompositionArea__send-button"
|
||||
onClick={handleForceSend}
|
||||
aria-label={i18n('sendMessageToContact')}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className="CompositionArea__placeholder" />
|
||||
<div className="CompositionArea__button-cell">
|
||||
<button
|
||||
type="button"
|
||||
className="CompositionArea__send-button"
|
||||
onClick={handleForceSend}
|
||||
aria-label={i18n('sendMessageToContact')}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
const stickerButtonPlacement = large ? 'top-start' : 'top-end';
|
||||
|
|
@ -664,7 +664,12 @@ export const CompositionArea = ({
|
|||
)}
|
||||
>
|
||||
{!large ? leftHandSideButtonsFragment : null}
|
||||
<div className="CompositionArea__input">
|
||||
<div
|
||||
className={classNames(
|
||||
'CompositionArea__input',
|
||||
large ? 'CompositionArea__input--padded' : null
|
||||
)}
|
||||
>
|
||||
<CompositionInput
|
||||
clearQuotedMessage={clearQuotedMessage}
|
||||
disabled={disabled}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
import type { Meta, Story } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
|
||||
import { setupI18n } from '../../util/setupI18n';
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
|
|
@ -14,26 +14,31 @@ const i18n = setupI18n('en', enMessages);
|
|||
|
||||
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
||||
i18n,
|
||||
withNewMessages: boolean(
|
||||
'withNewMessages',
|
||||
overrideProps.withNewMessages || false
|
||||
),
|
||||
scrollDown: action('scrollDown'),
|
||||
conversationId: 'fake-conversation-id',
|
||||
...overrideProps,
|
||||
});
|
||||
|
||||
export default {
|
||||
title: 'Components/Conversation/ScrollDownButton',
|
||||
};
|
||||
|
||||
export const NoNewMessages = (): JSX.Element => {
|
||||
const props = createProps();
|
||||
|
||||
return <ScrollDownButton {...props} />;
|
||||
};
|
||||
|
||||
export const NewMessages = (): JSX.Element => {
|
||||
const props = createProps({ withNewMessages: true });
|
||||
|
||||
return <ScrollDownButton {...props} />;
|
||||
component: ScrollDownButton,
|
||||
argTypes: {
|
||||
unreadCount: {
|
||||
control: { type: 'radio' },
|
||||
options: {
|
||||
None: undefined,
|
||||
Some: 5,
|
||||
Plenty: 85,
|
||||
'Please Stop': 1000,
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<Props> = args => <ScrollDownButton {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = createProps({});
|
||||
Default.story = {
|
||||
name: 'Default',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
|
||||
export type Props = {
|
||||
withNewMessages: boolean;
|
||||
unreadCount?: number;
|
||||
conversationId: string;
|
||||
|
||||
scrollDown: (conversationId: string) => void;
|
||||
|
|
@ -17,26 +16,35 @@ export type Props = {
|
|||
|
||||
export const ScrollDownButton = ({
|
||||
conversationId,
|
||||
withNewMessages,
|
||||
unreadCount,
|
||||
i18n,
|
||||
scrollDown,
|
||||
}: Props): JSX.Element => {
|
||||
const altText = withNewMessages ? i18n('messagesBelow') : i18n('scrollDown');
|
||||
const altText = unreadCount ? i18n('messagesBelow') : i18n('scrollDown');
|
||||
|
||||
let badgeText: string | undefined;
|
||||
if (unreadCount) {
|
||||
if (unreadCount < 100) {
|
||||
badgeText = unreadCount.toString();
|
||||
} else {
|
||||
badgeText = '99+';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="module-scroll-down">
|
||||
<div className="ScrollDownButton">
|
||||
<button
|
||||
type="button"
|
||||
className={classNames(
|
||||
'module-scroll-down__button',
|
||||
withNewMessages ? 'module-scroll-down__button--new-messages' : null
|
||||
)}
|
||||
className="ScrollDownButton__button"
|
||||
onClick={() => {
|
||||
scrollDown(conversationId);
|
||||
}}
|
||||
title={altText}
|
||||
>
|
||||
<div className="module-scroll-down__icon" />
|
||||
{badgeText ? (
|
||||
<div className="ScrollDownButton__button__badge">{badgeText}</div>
|
||||
) : null}
|
||||
<div className="ScrollDownButton__button__icon" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1185,7 +1185,7 @@ export class Timeline extends React.Component<
|
|||
{shouldShowScrollDownButton ? (
|
||||
<ScrollDownButton
|
||||
conversationId={id}
|
||||
withNewMessages={areUnreadBelowCurrentPosition}
|
||||
unreadCount={areUnreadBelowCurrentPosition ? unreadCount : 0}
|
||||
scrollDown={this.onClickScrollDownButton}
|
||||
i18n={i18n}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue