michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Improve jump to bottom btn

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-03-18 11:37:31 +05:30
parent 6010b4c252
commit a7034d6351
2 changed files with 30 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/app/organisms/room/RoomViewFloating.jsx
View file

@ -9,10 +9,9 @@ import { markAsRead } from '../../../client/action/notifications';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Button from '../../atoms/button/Button'; import Button from '../../atoms/button/Button';
import IconButton from '../../atoms/button/IconButton';
import MessageIC from '../../../../public/res/ic/outlined/message.svg';
import MessageUnreadIC from '../../../../public/res/ic/outlined/message-unread.svg'; import MessageUnreadIC from '../../../../public/res/ic/outlined/message-unread.svg';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg'; import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
import { getUsersActionJsx } from './common'; import { getUsersActionJsx } from './common';
@ -111,11 +110,9 @@ function RoomViewFloating({
<Text variant="b2">{getUsersActionJsx(roomId, [...typingMembers], 'typing...')}</Text> <Text variant="b2">{getUsersActionJsx(roomId, [...typingMembers], 'typing...')}</Text>
</div> </div>
<div className={`room-view__STB${isAtBottom ? '' : ' room-view__STB--open'}`}> <div className={`room-view__STB${isAtBottom ? '' : ' room-view__STB--open'}`}>
<IconButton <Button iconSrc={MessageIC} onClick={handleScrollToBottom}>
onClick={handleScrollToBottom} <Text variant="b3" weight="medium">Jump to latest</Text>
src={ChevronBottomIC} </Button>
tooltip="Scroll to Bottom"
/>
</div> </div>
</> </>
); );

48
src/app/organisms/room/RoomViewFloating.scss
View file

@ -72,51 +72,55 @@
} }
} }
&__STB,
&__unread {
opacity: 0.9;
overflow: hidden;
background-color: var(--bg-surface-low);
border-radius: var(--bo-radius);
& button {
justify-content: flex-start;
border-radius: 0;
box-shadow: none;
padding: 6px var(--sp-tight);
& .ic-raw {
width: 16px;
height: 16px;
}
}
}
&__STB { &__STB {
position: absolute; position: absolute;
@include dir.prop(right, var(--sp-normal), unset); @include dir.prop(left, 50%, unset);
@include dir.prop(left, unset, var(--sp-normal)); @include dir.prop(right, unset, 50%);
bottom: 0; bottom: 0;
border-radius: var(--bo-radius);
box-shadow: var(--bs-surface-border); box-shadow: var(--bs-surface-border);
background-color: var(--bg-surface-low);
transition: transform 200ms ease-in-out; transition: transform 200ms ease-in-out;
transform: translateY(100%) scale(0); transform: translate(-50%, 100%);
&--open { &--open {
transform: translateY(-28px) scale(1); transform: translate(-50%, -28px);
} }
} }
&__unread { &__unread {
position: absolute; position: absolute;
top: 0; top: var(--sp-extra-tight);
@include dir.prop(left, var(--sp-normal), unset); @include dir.prop(left, var(--sp-normal), unset);
@include dir.prop(right, unset, var(--sp-normal)); @include dir.prop(right, unset, var(--sp-normal));
z-index: 999; z-index: 999;
display: none; display: none;
width: calc(100% - var(--sp-extra-loose)); width: calc(100% - var(--sp-extra-loose));
background-color: var(--bg-surface); box-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%);
border-radius: 0 0 var(--bo-radius) var(--bo-radius);
box-shadow: var(--bs-primary-border);
overflow: hidden;
&--open { &--open {
display: flex; display: flex;
} }
& .btn-primary { & button:first-child {
justify-content: flex-start;
border-radius: 0;
padding: 2px var(--sp-tight);
& .ic-raw {
width: 16px;
height: 16px;
}
}
& .btn-primary:first-child {
@extend .cp-fx__item-one; @extend .cp-fx__item-one;
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
} }
} }
} }