fix messenger scroll

This commit is contained in:
dank074 2022-11-18 21:27:55 -06:00
parent c46dc66b4c
commit 40c1490394
2 changed files with 41 additions and 39 deletions

View File

@ -5,27 +5,27 @@
width: 21px; height: 21px;
background-position: -38px -5px;
}
&.icon-heart {
width: 16px; height: 14px;
background-position: -5px -67px;
}
&.icon-new-message {
width: 14px; height: 14px;
background-position: -96px -53px;
}
&.icon-none {
width: 16px; height: 14px;
background-position: -31px -67px;
}
&.icon-profile {
width: 21px; height: 21px;
background-position: -5px -36px;
}
&.icon-profile-sm {
width: 13px; height: 11px;
background-position: -51px -91px;
@ -35,47 +35,47 @@
background-position: -74px -91px;
}
}
&.icon-smile {
width: 16px; height: 14px;
background-position: -57px -67px;
}
&.icon-warning {
width: 23px; height: 21px;
background-position: -5px -5px;
}
&.icon-accept {
width: 13px; height: 14px;
background-position: -5px -91px;
}
&.icon-add {
width: 16px; height: 15px;
background-position: -69px -31px;
}
&.icon-bobba {
width: 16px; height: 14px;
background-position: -96px -5px;
}
&.icon-chat {
width: 17px; height: 16px;
background-position: -69px -5px;
}
&.icon-deny {
width: 13px; height: 14px;
background-position: -28px -91px;
}
&.icon-follow {
width: 16px; height: 14px;
background-position: -96px -29px;
}
&.icon-friendbar-chat {
width: 20px; height: 21px;
background-position: -36px -36px;
@ -118,11 +118,11 @@
position: relative;
padding-left:38px;
text-align: left;
&.friend-bar-item-active {
margin-bottom:21px;
}
.friend-bar-item-head {
&.avatar {
top: -30px;
@ -132,10 +132,10 @@
top: -5px;
left: -5px;
}
pointer-events: none;
}
&.friend-bar-search {
.friend-bar-item-head {
top: -3px;
@ -143,7 +143,7 @@
width: 31px;
height: 34px;
background-image: url('../../assets/images/toolbar/friend-search.png');
}
}
}
}
}
@ -153,7 +153,7 @@
height: $messenger-height;
.layout-grid-item {
height: 50px;
min-height: 50px;
}
.friend-head {
@ -180,7 +180,7 @@
width: 45px;
height: 45px;
overflow: hidden;
.avatar-image {
position: absolute;
margin-left: -27px;
@ -211,7 +211,7 @@
.messages-group-left {
position: relative;
&:before {
position: absolute;
content: ' ';
@ -227,7 +227,7 @@
.messages-group-right {
position: relative;
&:before {
position: absolute;
content: ' ';

View File

@ -110,27 +110,29 @@ export const FriendsMessengerView: FC<{}> = props =>
<NitroCardHeaderView headerText={ LocalizeText('messenger.window.title', [ 'OPEN_CHAT_COUNT' ], [ visibleThreads.length.toString() ]) } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView>
<Grid overflow="hidden">
<Column size={ 4 }>
<Column size={ 4 } overflow="hidden">
<Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text>
<Column fullHeight overflow="auto">
{ visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread =>
{
return (
<LayoutGridItem key={ thread.threadId } itemActive={ (activeThread === thread) } onClick={ event => setActiveThreadId(thread.threadId) }>
{ thread.unread &&
<Column fit overflow="auto">
<Column>
{ visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread =>
{
return (
<LayoutGridItem key={ thread.threadId } itemActive={ (activeThread === thread) } onClick={ event => setActiveThreadId(thread.threadId) }>
{ thread.unread &&
<LayoutItemCountView count={ thread.unreadCount } /> }
<Flex fullWidth alignItems="center" gap={ 1 }>
<Flex alignItems="center" className="friend-head px-1">
{ (thread.participant.id > 0) &&
<Flex fullWidth alignItems="center" gap={ 1 }>
<Flex alignItems="center" className="friend-head px-1">
{ (thread.participant.id > 0) &&
<LayoutAvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } /> }
{ (thread.participant.id <= 0) &&
{ (thread.participant.id <= 0) &&
<LayoutBadgeImageView isGroup={ true } badgeCode={ thread.participant.figure } /> }
</Flex>
<Text truncate grow>{ thread.participant.name }</Text>
</Flex>
<Text truncate grow>{ thread.participant.name }</Text>
</Flex>
</LayoutGridItem>
);
}) }
</LayoutGridItem>
);
}) }
</Column>
</Column>
</Column>
<Column size={ 8 } overflow="hidden">