Fix padding of conversation list

This commit is contained in:
Fedor Indutny 2025-01-28 11:15:34 -08:00 committed by GitHub
parent 7575bda35b
commit fbdf589f13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 12 additions and 6 deletions

View file

@ -4916,6 +4916,10 @@ button.module-calling-participants-list__contact {
scrollbar-gutter: stable; scrollbar-gutter: stable;
} }
&--has-dialog-padding {
padding-block-start: 8px;
}
&__item { &__item {
&--archive-button { &--archive-button {
@include mixins.button-reset; @include mixins.button-reset;
@ -5614,10 +5618,6 @@ button.module-calling-participants-list__contact {
} }
} }
.module-left-pane__dialogs {
margin-bottom: 8px;
}
.module-left-pane__header { .module-left-pane__header {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;

View file

@ -194,6 +194,7 @@ export type PropsType = {
scrollToRowIndex?: number; scrollToRowIndex?: number;
shouldRecomputeRowHeights: boolean; shouldRecomputeRowHeights: boolean;
scrollable?: boolean; scrollable?: boolean;
hasDialogPadding?: boolean;
getPreferredBadge: PreferredBadgeSelectorType; getPreferredBadge: PreferredBadgeSelectorType;
i18n: LocalizerType; i18n: LocalizerType;
@ -241,6 +242,7 @@ export function ConversationList({
scrollBehavior = ScrollBehavior.Default, scrollBehavior = ScrollBehavior.Default,
scrollToRowIndex, scrollToRowIndex,
scrollable = true, scrollable = true,
hasDialogPadding = false,
shouldRecomputeRowHeights, shouldRecomputeRowHeights,
showChooseGroupMembers, showChooseGroupMembers,
showFindByUsername, showFindByUsername,
@ -583,7 +585,8 @@ export function ConversationList({
<ListView <ListView
className={classNames( className={classNames(
'module-conversation-list', 'module-conversation-list',
`module-conversation-list--width-${widthBreakpoint}` `module-conversation-list--width-${widthBreakpoint}`,
hasDialogPadding && 'module-conversation-list--has-dialog-padding'
)} )}
width={dimensions.width} width={dimensions.width}
height={dimensions.height} height={dimensions.height}

View file

@ -687,6 +687,8 @@ export function LeftPane({
const showBackupMediaDownloadProgress = const showBackupMediaDownloadProgress =
!hideHeader && !backupMediaDownloadProgress.downloadBannerDismissed; !hideHeader && !backupMediaDownloadProgress.downloadBannerDismissed;
const hasDialogs = dialogs.length ? !hideHeader : false;
return ( return (
<NavSidebar <NavSidebar
title={i18n('icu:LeftPane--chats')} title={i18n('icu:LeftPane--chats')}
@ -779,7 +781,7 @@ export function LeftPane({
</NavSidebarSearchHeader> </NavSidebarSearchHeader>
)} )}
{dialogs.length && !hideHeader ? ( {hasDialogs ? (
<div className="module-left-pane__dialogs"> <div className="module-left-pane__dialogs">
{dialogs.map(({ key, dialog }) => ( {dialogs.map(({ key, dialog }) => (
<React.Fragment key={key}>{dialog}</React.Fragment> <React.Fragment key={key}>{dialog}</React.Fragment>
@ -812,6 +814,7 @@ export function LeftPane({
getPreferredBadge={getPreferredBadge} getPreferredBadge={getPreferredBadge}
getRow={getRow} getRow={getRow}
i18n={i18n} i18n={i18n}
hasDialogPadding={hasDialogs}
onClickArchiveButton={showArchivedConversations} onClickArchiveButton={showArchivedConversations}
onClickContactCheckbox={( onClickContactCheckbox={(
conversationId: string, conversationId: string,