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

cleanup avatar rendering and add a 64px size

Browse Source
pull/1336/head
Audric Ackermann 5 years ago
parent b845ba9642
commit 217cc04ad1
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4
5 changed files with 18 additions and 159 deletions
Show Stats Download Patch File Download Diff File

22
images/profile-group.svg
Unescape Escape View File

@ -1,22 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>Group/group-28</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M18.7272727,13.2857143 C20.6890909,13.2857143 22.2609091,11.6585714 22.2609091,9.64285714 C22.2609091,7.62714286 20.6890909,6 18.7272727,6 C16.7654545,6 15.1818182,7.62714286 15.1818182,9.64285714 C15.1818182,11.6585714 16.7654545,13.2857143 18.7272727,13.2857143 Z M9.27272727,13.2857143 C11.2345455,13.2857143 12.8063636,11.6585714 12.8063636,9.64285714 C12.8063636,7.62714286 11.2345455,6 9.27272727,6 C7.31090909,6 5.72727273,7.62714286 5.72727273,9.64285714 C5.72727273,11.6585714 7.31090909,13.2857143 9.27272727,13.2857143 Z M9.27272727,15.7142857 C6.51909091,15.7142857 1,17.135 1,19.9642857 L1,23 L17.5454545,23 L17.5454545,19.9642857 C17.5454545,17.135 12.0263636,15.7142857 9.27272727,15.7142857 Z M18.7272727,15.7142857 C18.3845455,15.7142857 17.9945455,15.7385714 17.5809091,15.775 C18.9518182,16.795 19.9090909,18.1671429 19.9090909,19.9642857 L19.9090909,23 L27,23 L27,19.9642857 C27,17.135 21.4809091,15.7142857 18.7272727,15.7142857 Z" id="path-1"></path>
<rect id="path-3" x="0" y="0" width="28" height="28"></rect>
</defs>
<g id="Group/group-28" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Shape" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Color/UI/Black" mask="url(#mask-2)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="fill" fill="#000000" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

22
images/profile-individual.svg
Unescape Escape View File

@ -1,22 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>Profile/profile-28</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M14,14 C16.7625,14 19,11.7625 19,9 C19,6.2375 16.7625,4 14,4 C11.2375,4 9,6.2375 9,9 C9,11.7625 11.2375,14 14,14 Z M14,16.5 C10.6625,16.5 4,18.175 4,21.5 L4,24 L24,24 L24,21.5 C24,18.175 17.3375,16.5 14,16.5 Z" id="path-1"></path>
<rect id="path-3" x="0" y="0" width="28" height="28"></rect>
</defs>
<g id="Profile/profile-28" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Shape" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Color/UI/Black" mask="url(#mask-2)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="fill" fill="#000000" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

95
stylesheets/_avatar.scss
Unescape Escape View File

@ -47,14 +47,6 @@
width: 100%;
}
.module-avatar__icon--group {
@include color-svg('../images/profile-group.svg', $color-white);
}
.module-avatar__icon--direct {
@include color-svg('../images/profile-individual.svg', $color-white);
}
.module-avatar__icon-closed .module-avatar--28,
.module-avatar--28 {
height: 28px;
@ -66,16 +58,7 @@
}
}
.module-avatar__label--28 {
font-size: 14px;
line-height: 28px;
}
.module-avatar__icon--28 {
height: 16px;
width: 16px;
}
.module-avatar__icon-closed .module-avatar--36,
.module-avatar--36 {
height: 36px;
width: 36px;
@ -86,19 +69,7 @@
}
}
.module-avatar__label--36 {
margin-top: 1px;
width: 36px;
font-size: 16px;
letter-spacing: 0.19px;
line-height: 36px;
}
.module-avatar__icon--36 {
height: 20px;
width: 20px;
}
.module-avatar__icon-closed .module-avatar--48,
.module-avatar--48 {
height: 48px;
width: 48px;
@ -109,18 +80,18 @@
}
}
.module-avatar__label--48 {
width: 48px;
font-size: 20px;
letter-spacing: 0.19px;
line-height: 48px;
}
.module-avatar__icon-closed .module-avatar--64,
.module-avatar--64 {
height: 64px;
width: 64px;
.module-avatar__icon--48 {
height: 26px;
width: 26px;
img {
height: 64px;
width: 64px;
}
}
.module-avatar__icon-closed .module-avatar--80,
.module-avatar--80 {
height: 80px;
width: 80px;
@ -131,17 +102,6 @@
}
}
.module-avatar__label--80 {
width: 80px;
font-size: 40px;
line-height: 82px;
}
.module-avatar__icon--80 {
height: 42px;
width: 42px;
}
.module-avatar--300 {
height: 300px;
width: 300px;
@ -152,39 +112,6 @@
}
}
.module-avatar__label--300 {
width: 300px;
font-size: 150px;
line-height: 302px;
}
.module-avatar__icon--300 {
height: 158px;
width: 158px;
}
.module-avatar__icon--note-to-self {
width: 70%;
height: 70%;
@include color-svg('../images/note-28.svg', $color-white);
}
.module-avatar__label {
color: $color-gray-05;
}
.module-avatar__icon--group {
background-color: $color-gray-05;
}
.module-avatar__icon--direct {
background-color: $color-gray-05;
}
.module-avatar__icon--note-to-self {
background-color: $color-gray-05;
}
.module-avatar__icon--crown-wrapper {
background-color: $color-gray-75;
}

32
ts/components/Avatar.tsx
Unescape Escape View File

@ -95,40 +95,12 @@ export class Avatar extends React.PureComponent<Props, State> {
conversationType,
closedMemberConversations,
isPublic,
name,
noteToSelf,
size,
i18n,
} = this.props;
const initials = getInitials(name);
const isGroup = conversationType === 'group';
if (noteToSelf) {
return (
<div
className={classNames(
'module-avatar__icon',
'module-avatar__icon--note-to-self',
`module-avatar__icon--${size}`
)}
/>
);
}
if (!isGroup && initials) {
return (
<div
className={classNames(
'module-avatar__label',
`module-avatar__label--${size}`
)}
>
{initials}
</div>
);
}
if (isGroup && !isPublic && closedMemberConversations) {
const forcedI18n = i18n || window.i18n;
return (
@ -144,8 +116,7 @@ export class Avatar extends React.PureComponent<Props, State> {
<div
className={classNames(
'module-avatar__icon',
`module-avatar__icon--${conversationType}`,
`module-avatar__icon--${size}`
`module-avatar__icon--${conversationType}`
)}
/>
);
@ -163,6 +134,7 @@ export class Avatar extends React.PureComponent<Props, State> {
size !== 28 &&
size !== 36 &&
size !== 48 &&
size !== 64 &&
size !== 80 &&
size !== 300
) {

6
ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx
Unescape Escape View File

@ -41,10 +41,14 @@ export class ClosedGroupAvatar extends React.PureComponent<Props> {
avatarsDiameter = 36;
break;
}
case 80: {
case 64: {
avatarsDiameter = 48;
break;
}
case 80: {
avatarsDiameter = 64;
break;
}
case 300: {
avatarsDiameter = 80;
break;

Write Preview
Loading…
Cancel
Save