nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-17 01:12:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix messenger scroll

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/friends/FriendsView.scss
View File

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

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