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 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 ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
import { getUsersActionJsx } from './common';
@ -111,11 +110,9 @@ function RoomViewFloating({
<Text variant="b2">{getUsersActionJsx(roomId, [...typingMembers], 'typing...')}</Text>
</div>
<div className={`room-view__STB${isAtBottom ? '' : ' room-view__STB--open'}`}>
<IconButton
onClick={handleScrollToBottom}
src={ChevronBottomIC}
tooltip="Scroll to Bottom"
/>
<Button iconSrc={MessageIC} onClick={handleScrollToBottom}>
<Text variant="b3" weight="medium">Jump to latest</Text>
</Button>
</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 {
position: absolute;
@include dir.prop(right, var(--sp-normal), unset);
@include dir.prop(left, unset, var(--sp-normal));
@include dir.prop(left, 50%, unset);
@include dir.prop(right, unset, 50%);
bottom: 0;
border-radius: var(--bo-radius);
box-shadow: var(--bs-surface-border);
background-color: var(--bg-surface-low);
transition: transform 200ms ease-in-out;
transform: translateY(100%) scale(0);
transform: translate(-50%, 100%);
&--open {
transform: translateY(-28px) scale(1);
transform: translate(-50%, -28px);
}
}
&__unread {
position: absolute;
top: 0;
top: var(--sp-extra-tight);
@include dir.prop(left, var(--sp-normal), unset);
@include dir.prop(right, unset, var(--sp-normal));
z-index: 999;
display: none;
width: calc(100% - var(--sp-extra-loose));
background-color: var(--bg-surface);
border-radius: 0 0 var(--bo-radius) var(--bo-radius);
box-shadow: var(--bs-primary-border);
overflow: hidden;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%);
&--open {
display: flex;
}
& .btn-primary {
justify-content: flex-start;
border-radius: 0;
padding: 2px var(--sp-tight);
& .ic-raw {
width: 16px;
height: 16px;
}
}
& .btn-primary:first-child {
& button:first-child {
@extend .cp-fx__item-one;
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
}
}
}