vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: avatar group style

Browse source
This commit is contained in:
prssanna 2020-07-08 14:33:14 +05:30
parent c101114d3a
commit 64c15bec19
3 changed files with 27 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frappe/public/css/avatar.css
View file

@ -1,4 +1,4 @@
.avatar {
/* .avatar {
display: inline-block;
vertical-align: middle;
width: 50px;
@ -88,4 +88,4 @@
border: 1px solid #d1d8dd;
font-weight: normal;
margin-top: -1px;
}
} */

13
frappe/public/js/frappe/utils/common.js
View file

@ -39,7 +39,7 @@ frappe.avatar = function (user, css_class, title, image_url = null) {
abbr = abbr.substr(0, 1);
}
return `<span class="avatar ${css_class}" title="${title}">
<div class="standard-image" style="background-color: ${user_info.color};">
<div class="avatar-frame standard-image" style="background-color: ${user_info.color};">
${abbr}</div>
</span>`;
}
@ -47,10 +47,15 @@ frappe.avatar = function (user, css_class, title, image_url = null) {
frappe.avatar_group = function(users, limit=4, css_class="avatar avatar-small") {
let extra_count = users.length - limit;
let html = users.splice(0, limit).map((user) => frappe.avatar(user, css_class)).join('')
let html = users.slice(0, limit).map((user) => frappe.avatar(user, css_class)).join('')
if (extra_count > 0) {
return `<div class="avatar-group small">${html}
<span class="extra-count">${__(' and {} others', [extra_count])}</span>
return `<div class="avatar-group small">
<span class="avatar avatar avatar-small">
<div class="avatar-frame standard-image avatar-extra-count">
+${extra_count}
</div>
</span>
${html}
</div>`;
} else {
return `<div class="avatar-group">${html}</div>`;

75
frappe/public/scss/avatar.scss
View file

@ -6,9 +6,9 @@
.avatar-frame {
display: inline-block;
width: 100%;
padding: 50% 0px;
padding: 50%;
// TODO: Remove
background-color: var(--pink-200);
// background-color: var(--pink-200);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
@ -21,32 +21,13 @@
border-radius: 50%;
}
// .avatar-empty {
// border: 1px dashed #d1d8dd;
// border-radius: 50%;
// }
// .avatar-small {
// width: 36px;
// height: 36px;
// .standard-image {
// font-size: 14px;
// }
// }
.avatar-small {
width: 24px;
height: 24px;
text-align: center;
.avatar-frame {
padding: 12px;
}
.standard-image {
font-size: $font-size-sm;
width: 24px;
height: 24px;
font-size: $font-size-xs;
}
.avatar-empty::after {
@ -59,10 +40,6 @@
width: 36px;
height: 36px;
.avatar-frame {
padding: 18px;
}
.standard-image {
font-size: 18px;
}
@ -72,10 +49,6 @@
width: 72px;
height: 72px;
.avatar-frame {
padding: 36px;
}
.standard-image {
font-size: 36px;
@ -86,10 +59,6 @@
width: 108px;
height: 108px;
.avatar-frame {
padding: 54px;
}
.standard-image {
font-size: 36px;
}
@ -99,10 +68,6 @@
width: 16px;
height: 16px;
.avatar-frame {
padding: 8px;
}
.standard-image {
font-size: 9px;
}
@ -110,49 +75,41 @@
.avatar .standard-image {
border-radius: 50%;
padding: 2px;
width: 100%;
height: 100%;
// padding: 2px;
// width: 100%;
// height: 100%;
}
.standard-image {
width: 100%;
height: 0;
padding: 50% 0;
display: inline-block;
text-align: center;
border-radius: 50%;
font-size: 14px;
line-height: 0px;
//color: #fff;
color: $text-muted;
border: 1px solid $border-color;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--blue-50) !important;
color: var(--blue-500);
font-weight: normal;
}
.avatar-group {
display: flex;
align-items: center;
flex-direction: row-reverse;
.avatar {
position: relative;
z-index: 2;
.avatar-frame {
border: 2px solid $white;
}
&:hover {
z-index: 3;
z-index: 1;
}
}
.extra-count {
margin-left: 8px;
margin-top: 2px;
}
.avatar+.avatar {
margin-left: -0.5rem;
margin-right: -0.3rem;
}
}