jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Left pane spacing tweaks

This commit is contained in:
Evan Hahn 2021-10-14 15:21:10 -05:00 committed by GitHub
parent da9df293c6
commit 29e6ba8f10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
stylesheets/_modules.scss
View File

@ -5628,6 +5628,11 @@ button.module-image__border-overlay:focus {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
&--width-narrow {
padding-left: 6px;
padding-right: 6px;
}
&--scroll-behavior { &--scroll-behavior {
&-default { &-default {
@include smooth-scroll; @include smooth-scroll;
@ -5646,8 +5651,8 @@ button.module-image__border-overlay:focus {
line-height: $normal-row-height; line-height: $normal-row-height;
text-align: center; text-align: center;
width: 100%; width: 100%;
padding-left: 14px; padding-left: 18px;
padding-right: 14px; padding-right: 18px;
display: flex; display: flex;
@include light-theme { @include light-theme {
@ -5745,7 +5750,8 @@ button.module-image__border-overlay:focus {
width: 100%; width: 100%;
.module-conversation-list--width-narrow & { .module-conversation-list--width-narrow & {
padding-right: 8px; padding-left: 18px;
padding-right: 0;
} }
&--is-button { &--is-button {
@ -5795,11 +5801,13 @@ button.module-image__border-overlay:focus {
} }
&__unread-count { &__unread-count {
$size: 18px; $size: 16px;
@include font-caption-bold; @include font-caption-bold;
border-radius: 10px; border-radius: 10px;
color: $color-white; color: $color-white;
font-size: 10px;
font-weight: 500;
height: $size; height: $size;
line-height: $size; line-height: $size;
margin-left: 10px; margin-left: 10px;
@ -5809,9 +5817,12 @@ button.module-image__border-overlay:focus {
padding-right: 3px; padding-right: 3px;
text-align: center; text-align: center;
word-break: normal; word-break: normal;
display: flex;
justify-content: center;
align-items: center;
.module-conversation-list--width-narrow & { .module-conversation-list--width-narrow & {
margin-left: 0; margin-left: 6px;
} }
@include light-theme { @include light-theme {
@ -5820,6 +5831,18 @@ button.module-image__border-overlay:focus {
@include dark-theme { @include dark-theme {
background-color: $color-ultramarine-light; background-color: $color-ultramarine-light;
} }
&--big {
font-size: 9px;
padding-right: 2px;
&::after {
content: '+';
display: inline-block;
font-size: 8px;
margin-bottom: 3px;
}
}
} }
&__content { &__content {
@ -5926,6 +5949,7 @@ button.module-image__border-overlay:focus {
.module-conversation-list--width-narrow & { .module-conversation-list--width-narrow & {
align-items: center; align-items: center;
justify-content: flex-start;
} }
&__text { &__text {
@ -6167,9 +6191,9 @@ button.module-image__border-overlay:focus {
@include rounded-corners; @include rounded-corners;
display: block; display: block;
height: 2px; height: 2px;
margin: 19px 0 19px 10px; margin: 19px 0 19px 17px;
padding-bottom: 0; padding-bottom: 0;
width: 56px; width: 48px;
// Hide the text, but keep it for screen readers. // Hide the text, but keep it for screen readers.
color: transparent; color: transparent;

2
ts/components/LeftPane.tsx
View File

@ -51,7 +51,7 @@ import {
SaveAvatarToDiskActionType, SaveAvatarToDiskActionType,
} from '../types/Avatar'; } from '../types/Avatar';
const MIN_WIDTH = 119; const MIN_WIDTH = 109;
const MIN_SNAP_WIDTH = 280; const MIN_SNAP_WIDTH = 280;
const MIN_FULL_WIDTH = 320; const MIN_FULL_WIDTH = 320;
const MAX_WIDTH = 380; const MAX_WIDTH = 380;

25
ts/components/conversationList/BaseConversationListItem.tsx
View File

@ -173,11 +173,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
</div> </div>
)} )}
{messageStatusIcon} {messageStatusIcon}
{isUnread && ( {isUnread && <UnreadCount count={unreadCount} />}
<div className={`${BASE_CLASS_NAME}__unread-count`}>
{formatUnreadCount(unreadCount)}
</div>
)}
</div> </div>
) : null} ) : null}
</div> </div>
@ -235,12 +231,15 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
} }
); );
function formatUnreadCount(count: undefined | number): string { function UnreadCount({ count = 0 }: Readonly<{ count?: number }>) {
if (!count) { return (
return ''; <div
} className={classNames(
if (count >= 99) { `${BASE_CLASS_NAME}__unread-count`,
return '99+'; count > 99 && `${BASE_CLASS_NAME}__unread-count--big`
} )}
return String(count); >
{Boolean(count) && Math.min(count, 99)}
</div>
);
} }