Update collapsed left pane designs to minimize empty space
This commit is contained in:
Evan Hahn
GitHub
parent
00fa07a070
commit
7abe36a166
3 changed files with 106 additions and 36 deletions
|
|
@ -4574,8 +4574,8 @@ button.module-image__border-overlay:focus {
|
|||
padding-right: 10px;
|
||||
|
||||
&--width-narrow {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
&--scroll-behavior {
|
||||
|
|
@ -4681,6 +4681,9 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
|
||||
&--contact-or-conversation {
|
||||
$unread-indicator-selector: '#{&}__unread-indicator';
|
||||
$avatar-container-unread-indicator-selector: '#{&}__avatar-container #{$unread-indicator-selector}';
|
||||
|
||||
@include button-reset;
|
||||
|
||||
align-items: center;
|
||||
|
|
@ -4695,7 +4698,7 @@ button.module-image__border-overlay:focus {
|
|||
width: 100%;
|
||||
|
||||
.module-conversation-list--width-narrow & {
|
||||
padding-left: 18px;
|
||||
padding-left: 14px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
|
@ -4738,14 +4741,58 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
&--is-selected {
|
||||
@include light-theme {
|
||||
background-color: $color-gray-15;
|
||||
$background-color: $color-gray-15;
|
||||
background-color: $background-color;
|
||||
'#{$avatar-container-unread-indicator-selector}' {
|
||||
border-color: $background-color;
|
||||
}
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-white-alpha-12;
|
||||
$background-color: $color-gray-65;
|
||||
background-color: $background-color;
|
||||
'#{$avatar-container-unread-indicator-selector}' {
|
||||
border-color: $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__unread-indicator {
|
||||
&__avatar-container {
|
||||
position: relative;
|
||||
|
||||
'#{$unread-indicator-selector}' {
|
||||
$border-width: 3px;
|
||||
$size: 21px + $border-width;
|
||||
|
||||
@include rounded-corners;
|
||||
border: $border-width solid transparent;
|
||||
display: none;
|
||||
height: $size;
|
||||
margin: 0;
|
||||
min-width: $size;
|
||||
position: absolute;
|
||||
right: -(5px + $border-width);
|
||||
top: -(1px + $border-width);
|
||||
|
||||
.module-conversation-list--width-narrow & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include light-theme {
|
||||
border-color: $color-gray-02;
|
||||
}
|
||||
@include dark-theme {
|
||||
border-color: $color-gray-80;
|
||||
}
|
||||
|
||||
&--two-digits,
|
||||
&--many {
|
||||
right: -(7px + $border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We want this to just be the unread indicator selector, not a child of the parent.
|
||||
@at-root '#{$unread-indicator-selector}' {
|
||||
$size: 18px;
|
||||
|
||||
@include font-caption-bold;
|
||||
|
|
@ -4766,8 +4813,7 @@ button.module-image__border-overlay:focus {
|
|||
align-items: center;
|
||||
|
||||
.module-conversation-list--width-narrow & {
|
||||
margin-left: 6px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include light-theme {
|
||||
|
|
@ -4779,7 +4825,6 @@ button.module-image__border-overlay:focus {
|
|||
|
||||
&--two-digits,
|
||||
&--many {
|
||||
box-sizing: content-box;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
|
@ -5141,7 +5186,7 @@ button.module-image__border-overlay:focus {
|
|||
@include rounded-corners;
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin: 19px 0 19px 17px;
|
||||
margin: 19px 0 19px 14px;
|
||||
padding-bottom: 0;
|
||||
width: 48px;
|
||||
|
||||
|
|
@ -5180,21 +5225,35 @@ button.module-image__border-overlay:focus {
|
|||
position: relative;
|
||||
|
||||
@include light-theme {
|
||||
$background-color: $color-gray-02;
|
||||
|
||||
border-color: $color-gray-15;
|
||||
background-color: $color-gray-02;
|
||||
background-color: $background-color;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid $color-gray-02;
|
||||
}
|
||||
|
||||
.module-conversation-list__item--contact-or-conversation:hover
|
||||
.module-conversation-list__item--contact-or-conversation__unread-indicator {
|
||||
border-color: mix($color-black, $background-color, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
$background-color: $color-gray-80;
|
||||
|
||||
border-color: $color-gray-65;
|
||||
background-color: $color-gray-80;
|
||||
background-color: $background-color;
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 2px solid $color-gray-80;
|
||||
}
|
||||
|
||||
.module-conversation-list__item--contact-or-conversation:hover
|
||||
.module-conversation-list__item--contact-or-conversation__unread-indicator {
|
||||
border-color: mix($color-white, $background-color, 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ import type {
|
|||
SaveAvatarToDiskActionType,
|
||||
} from '../types/Avatar';
|
||||
|
||||
const MIN_WIDTH = 109;
|
||||
const MIN_WIDTH = 97;
|
||||
const SNAP_WIDTH = 200;
|
||||
const MIN_FULL_WIDTH = 280;
|
||||
const MAX_WIDTH = 380;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { Spinner } from '../Spinner';
|
|||
|
||||
const BASE_CLASS_NAME =
|
||||
'module-conversation-list__item--contact-or-conversation';
|
||||
const AVATAR_CONTAINER_CLASS_NAME = `${BASE_CLASS_NAME}__avatar-container`;
|
||||
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
|
||||
const HEADER_CLASS_NAME = `${CONTENT_CLASS_NAME}__header`;
|
||||
export const HEADER_NAME_CLASS_NAME = `${HEADER_CLASS_NAME}__name`;
|
||||
|
|
@ -142,27 +143,30 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
|
|||
|
||||
const contents = (
|
||||
<>
|
||||
<Avatar
|
||||
acceptedMessageRequest={acceptedMessageRequest}
|
||||
avatarPath={avatarPath}
|
||||
color={color}
|
||||
conversationType={conversationType}
|
||||
noteToSelf={isAvatarNoteToSelf}
|
||||
searchResult={isUsernameSearchResult}
|
||||
i18n={i18n}
|
||||
isMe={isMe}
|
||||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
sharedGroupNames={sharedGroupNames}
|
||||
size={AvatarSize.FORTY_EIGHT}
|
||||
unblurredAvatarPath={unblurredAvatarPath}
|
||||
// This is here to appease the type checker.
|
||||
{...(props.badge
|
||||
? { badge: props.badge, theme: props.theme }
|
||||
: { badge: undefined })}
|
||||
/>
|
||||
<div className={AVATAR_CONTAINER_CLASS_NAME}>
|
||||
<Avatar
|
||||
acceptedMessageRequest={acceptedMessageRequest}
|
||||
avatarPath={avatarPath}
|
||||
color={color}
|
||||
conversationType={conversationType}
|
||||
noteToSelf={isAvatarNoteToSelf}
|
||||
searchResult={isUsernameSearchResult}
|
||||
i18n={i18n}
|
||||
isMe={isMe}
|
||||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
title={title}
|
||||
sharedGroupNames={sharedGroupNames}
|
||||
size={AvatarSize.FORTY_EIGHT}
|
||||
unblurredAvatarPath={unblurredAvatarPath}
|
||||
// This is here to appease the type checker.
|
||||
{...(props.badge
|
||||
? { badge: props.badge, theme: props.theme }
|
||||
: { badge: undefined })}
|
||||
/>
|
||||
<UnreadIndicator count={unreadCount} isUnread={isUnread} />
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
CONTENT_CLASS_NAME,
|
||||
|
|
@ -197,7 +201,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
|
|||
</div>
|
||||
)}
|
||||
{messageStatusIcon}
|
||||
{isUnread && <UnreadIndicator count={unreadCount} />}
|
||||
<UnreadIndicator count={unreadCount} isUnread={isUnread} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -254,7 +258,14 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
|
|||
);
|
||||
});
|
||||
|
||||
function UnreadIndicator({ count = 0 }: Readonly<{ count?: number }>) {
|
||||
function UnreadIndicator({
|
||||
count = 0,
|
||||
isUnread,
|
||||
}: Readonly<{ count?: number; isUnread: boolean }>) {
|
||||
if (!isUnread) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let classModifier: undefined | string;
|
||||
if (count > 99) {
|
||||
classModifier = 'many';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue