oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Unread badge is now attached to avatar in left pane

This commit is contained in:
Scott Nonnenberg 2018-09-26 15:55:13 -07:00
parent 10c53bddb0
commit cf16ced91c
3 changed files with 62 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
stylesheets/_modules.scss
View File

@ -2011,6 +2011,9 @@
background-color: $color-gray-05;
}
.module-conversation-list-item__avatar-container {
position: relative;
}
.module-conversation-list-item__avatar {
margin-top: 8px;
margin-bottom: 8px;
@ -2064,6 +2067,31 @@
background-color: $color-conversation-blue_grey;
}
.module-conversation-list-item__unread-count {
color: $color-white;
background-color: $color-signal-blue;
text-align: center;
padding-top: 1px;
padding-left: 2px;
padding-right: 2px;
position: absolute;
right: -6px;
top: 6px;
font-weight: 300;
font-size: 11px;
letter-spacing: 0.25px;
height: 16px;
min-width: 16px;
line-height: 16px;
border-radius: 8px;
box-shadow: 0px 0px 1px 2px $color-white-05;
}
.module-conversation-list-item__content {
flex-grow: 1;
margin-left: 12px;
@ -2142,23 +2170,6 @@
font-weight: 300;
}
.module-conversation-list-item__unread-count {
color: $color-white;
background-color: $color-signal-blue;
text-align: center;
// For alignment with the message text
margin-top: 1px;
font-size: 10px;
margin-left: 5px;
min-width: 20px;
height: 20px;
width: 20px;
line-height: 20px;
border-radius: 10px;
}
.module-conversation-list-item__message__status-icon {
flex-shrink: 0;

1
stylesheets/_variables.scss
View File

@ -89,6 +89,7 @@ $color-steel-shade: #5a5a63;
$color-white-015: rgba($color-white, 0.15);
$color-white-02: rgba($color-white, 0.2);
$color-white-04: rgba($color-white, 0.4);
$color-white-05: rgba($color-white, 0.5);
$color-white-06: rgba($color-white, 0.6);
$color-white-07: rgba($color-white, 0.7);
$color-white-075: rgba($color-white, 0.75);

61
ts/components/ConversationListItem.tsx
View File

@ -45,14 +45,17 @@ export class ConversationListItem extends React.Component<Props> {
const initial = getInitial(name || '');
return (
<div
className={classNames(
'module-conversation-list-item__avatar',
'module-conversation-list-item__default-avatar',
`module-conversation-list-item__default-avatar--${color}`
)}
>
{initial}
<div className="module-conversation-list-item__avatar-container">
<div
className={classNames(
'module-conversation-list-item__avatar',
'module-conversation-list-item__default-avatar',
`module-conversation-list-item__default-avatar--${color}`
)}
>
{initial}
</div>
{this.renderUnread()}
</div>
);
}
@ -62,14 +65,31 @@ export class ConversationListItem extends React.Component<Props> {
}`;
return (
<img
className="module-conversation-list-item__avatar"
alt={i18n('contactAvatarAlt', [title])}
src={avatarPath}
/>
<div className="module-conversation-list-item__avatar-container">
<img
className="module-conversation-list-item__avatar"
alt={i18n('contactAvatarAlt', [title])}
src={avatarPath}
/>
{this.renderUnread()}
</div>
);
}
public renderUnread() {
const { unreadCount } = this.props;
if (unreadCount > 0) {
return (
<div className="module-conversation-list-item__unread-count">
{unreadCount}
</div>
);
}
return null;
}
public renderHeader() {
const {
unreadCount,
@ -116,20 +136,6 @@ export class ConversationListItem extends React.Component<Props> {
);
}
public renderUnread() {
const { unreadCount } = this.props;
if (unreadCount > 0) {
return (
<div className="module-conversation-list-item__unread-count">
{unreadCount}
</div>
);
}
return null;
}
public renderMessage() {
const { lastMessage, unreadCount, i18n } = this.props;
@ -164,7 +170,6 @@ export class ConversationListItem extends React.Component<Props> {
)}
/>
) : null}
{this.renderUnread()}
</div>
);
}