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

fix: Avatar group style

Browse source 
- Match style in the mockup
This commit is contained in:
Suraj Shetty 2020-12-08 19:51:27 +05:30
parent 9cb199de30
commit 2e05b79d71
2 changed files with 23 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
// common file between desk and website
frappe.avatar = function (user, css_class, title, image_url = null, remove_color=false, filterable=false) {
frappe.avatar = function (user, css_class, title, image_url=null, remove_color=false, filterable=false) {
let user_info;
if (user) {
// desk
@ -21,11 +21,11 @@ frappe.avatar = function (user, css_class, title, image_url = null, remove_color
}
return frappe.get_avatar(
user, css_class, title, image_url || user_info.image, remove_color=remove_color, filterable=filterable
user, css_class, title, image_url || user_info.image, remove_color, filterable
);
};
frappe.get_avatar = function(user, css_class, title, image_url = null, remove_color, filterable) {
frappe.get_avatar = function(user, css_class, title, image_url=null, remove_color, filterable) {
let data_attr = '';
if (!css_class) {
@ -64,40 +64,43 @@ frappe.get_avatar = function(user, css_class, title, image_url = null, remove_co
}
}
frappe.avatar_group = function (users, limit = 4, options = {}) {
let icon_html = '';
frappe.avatar_group = function (users, limit=4, options = {}) {
let avatar_action_html = '';
const display_users = users.slice(0, limit);
const extra_users = users.slice(limit);
const css_class = options.css_class || '';
let html = display_users.map(user =>
frappe.avatar(user, 'avatar-small ' + options.css_class, null, null, false, options.filterable)
frappe.avatar(user, 'avatar-small ' + css_class, null, null, false, options.filterable)
).join('');
if (extra_users.length === 1) {
html += frappe.avatar(extra_users[0], 'avatar-small ' + options.css_class, null, null, false, options.filterable);
html += frappe.avatar(extra_users[0], 'avatar-small ' + css_class, null, null, false, options.filterable);
} else if (extra_users.length > 1) {
html = `
<span class="avatar avatar-small ${options.css_class}">
${html}
<span class="avatar avatar-small ${css_class}">
<div class="avatar-frame standard-image avatar-extra-count"
title="${extra_users.map(u => frappe.user_info(u).fullname).join(', ')}">
+${extra_users.length}
</div>
</span>
${html}
`;
}
if (options.action_icon) {
icon_html = `<span class="avatar avatar-small avatar avatar-small">
<div class="avatar-frame avatar-action">
avatar_action_html = `
<span class="avatar avatar-small">
<div class="avatar-frame avatar-action">
${frappe.utils.icon(options.action_icon, 'sm')}
</div>
</span>`;
</div>
</span>
`;
}
const $avatar_group =
$(`<div class="avatar-group ${options.align || 'right'} ${options.overlap != false ? 'overlap' : ''}">
${icon_html}
${html}
${avatar_action_html}
</div>`);
$avatar_group.find('.avatar-action').on('click', options.action);

16
frappe/public/scss/desk/avatar.scss
View file

@ -1,7 +1,7 @@
:root {
--avatar-frame-color: var(--gray-500);
--avatar-frame-bg: var(--gray-100);
--avatar-frame-border: var(--gray-100);
--avatar-frame-border: var(--gray-50);
--orange-avatar-bg: var(--orange-100);
--orange-avatar-color: var(--orange-600);
@ -157,7 +157,6 @@
.avatar-group {
display: inline-flex;
align-items: center;
flex-direction: row-reverse;
cursor: pointer;
&.right {
@ -168,12 +167,13 @@
}
.avatar-action {
width: 100%;
height: 100%;
@extend .avatar-small;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--control-bg);
border-radius: 50%;
cursor: pointer !important;
.icon {
use {
@ -187,10 +187,6 @@
.avatar-frame {
border: 1px solid var(--avatar-frame-border);
}
&:not(.avatar-extra-count):hover {
z-index: 99;
}
}
.avatar-extra-count {
@ -200,13 +196,13 @@
background-color: var(--blue-500);
}
.avatar {
.avatar:last-child {
margin-right: var(--margin-xs);
}
&.overlap {
.avatar + .avatar {
margin-right: calc(-1 * var(--margin-sm));
margin-left: calc(-1 * var(--margin-sm));
}
}
}