fix: blocked list layout and list rendering overflow

pull/3083/head
William Grant 8 months ago
parent 1802a4438c
commit 5a68985f4a

@ -53,13 +53,14 @@ const StyledInfo = styled.div`
min-width: 0;
`;
const StyledName = styled.span`
const StyledName = styled.span<{ maxNameWidth?: string }>`
font-weight: bold;
margin-inline-start: var(--margins-md);
margin-inline-end: var(--margins-md);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
${props => props.maxNameWidth && `max-width: ${props.maxNameWidth};`}
`;
const StyledCheckContainer = styled.div`
@ -74,6 +75,7 @@ export const MemberListItem = (props: {
isZombie?: boolean;
inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker
disableBg?: boolean;
maxNameWidth?: string;
isAdmin?: boolean; // if true, we add a small crown on top of their avatar
onSelect?: (pubkey: string) => void;
onUnselect?: (pubkey: string) => void;
@ -89,6 +91,7 @@ export const MemberListItem = (props: {
onUnselect,
inMentions,
disableBg,
maxNameWidth,
disabled,
dataTestId,
} = props;
@ -117,7 +120,7 @@ export const MemberListItem = (props: {
>
<StyledInfo>
<AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />
<StyledName>{memberName}</StyledName>
<StyledName maxNameWidth={maxNameWidth}>{memberName}</StyledName>
</StyledInfo>
{!inMentions && (

@ -7,19 +7,18 @@ import { ToastUtils } from '../../session/utils';
import { BlockedNumberController } from '../../util';
import { MemberListItem } from '../MemberListItem';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SpacerLG } from '../basic/Text';
import { SpacerLG, SpacerSM } from '../basic/Text';
import { SessionIconButton } from '../icon';
import { SettingsTitleAndDescription } from './SessionSettingListItem';
import { SessionSettingsItemWrapper, SettingsTitleAndDescription } from './SessionSettingListItem';
const BlockedEntriesContainer = styled.div`
flex-shrink: 1;
overflow: auto;
min-height: 40px;
max-height: 100%;
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
`;
const BlockedEntriesRoundedContainer = styled.div`
overflow: hidden;
background: var(--background-secondary-color);
border: 1px solid var(--border-color);
border-radius: 16px;
@ -27,36 +26,22 @@ const BlockedEntriesRoundedContainer = styled.div`
margin: 0 var(--margins-lg);
`;
const BlockedContactsSection = styled.div`
display: flex;
flex-direction: column;
min-height: 80px;
background: var(--settings-tab-background-color);
color: var(--settings-tab-text-color);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
margin-bottom: var(--margins-lg);
`;
const BlockedContactListTitle = styled.div`
display: flex;
justify-content: space-between;
min-height: 45px;
align-items: center;
`;
const BlockedContactListTitleButtons = styled.div`
display: flex;
align-items: center;
min-height: 34px; // height of the unblock button
`;
export const StyledBlockedSettingItem = styled.div<{ clickable: boolean }>`
export const StyledBlockedSettingItem = styled.div<{ clickable: boolean; expanded: boolean }>`
font-size: var(--font-size-md);
padding: var(--margins-lg);
cursor: ${props => (props.clickable ? 'pointer' : 'unset')};
${props => props.expanded && 'padding-bottom: var(--margins-lg);'}
`;
const BlockedEntries = (props: {
@ -72,12 +57,13 @@ const BlockedEntries = (props: {
{blockedNumbers.map(blockedEntry => {
return (
<MemberListItem
key={`blocked-list-item-${blockedEntry}`}
pubkey={blockedEntry}
isSelected={selectedIds.includes(blockedEntry)}
key={blockedEntry}
onSelect={addToSelected}
onUnselect={removeFromSelected}
disableBg={true}
maxNameWidth={'33vw'}
/>
);
})}
@ -121,8 +107,11 @@ export const BlockedContactsList = () => {
}
return (
<BlockedContactsSection>
<StyledBlockedSettingItem clickable={!noBlockedNumbers}>
<SessionSettingsItemWrapper inline={false}>
<StyledBlockedSettingItem
clickable={!noBlockedNumbers}
expanded={!noBlockedNumbers && expanded}
>
<BlockedContactListTitle onClick={toggleUnblockList}>
<SettingsTitleAndDescription title={window.i18n('blockedSettingsTitle')} />
{noBlockedNumbers ? (
@ -157,9 +146,9 @@ export const BlockedContactsList = () => {
addToSelected={addToSelected}
removeFromSelected={removeFromSelected}
/>
<SpacerLG />
<SpacerSM />
</>
) : null}
</BlockedContactsSection>
</SessionSettingsItemWrapper>
);
};

Loading…
Cancel
Save