Use client-side Et2LAvatar for user accounts whenever possible, only using avatar.php when there's a real image.

TODO:
- Need to find a cheap way to determine if there's a real image in Api/src/Accounts.php & class.mail_compose.inc.php

- Still some work for me to do in Et2SelectEmail
This commit is contained in:
nathan 2023-01-27 10:34:40 -07:00
parent 0fc4c88aca
commit 5bab72b8be
5 changed files with 86 additions and 20 deletions

View File

@ -424,15 +424,13 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
_optionTemplate(option : SelectOption) : TemplateResult
{
let icon = option.icon ? html`
<et2-image slot="prefix" part="icon" style="width: var(--icon-width)"
src="${option.icon}"></et2-image>` : "";
// Tag used must match this.optionTag, but you can't use the variable directly.
// Pass option along so SearchMixin can grab it if needed
return html`
<sl-menu-item value="${option.value}" title="${!option.title || this.noLang ? option.title : this.egw().lang(option.title)}" class="${option.class}" .option=${option}>
${icon}
<sl-menu-item value="${option.value}"
title="${!option.title || this.noLang ? option.title : this.egw().lang(option.title)}"
class="${option.class}" .option=${option}>
${this._iconTemplate(option)}
${this.noLang ? option.label : this.egw().lang(option.label)}
</sl-menu-item>`;
}
@ -502,6 +500,24 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
return tag;
}
/**
* Get the icon for the select option
*
* @param option
* @protected
*/
protected _iconTemplate(option)
{
if(!option.icon)
{
return html``;
}
return html`
<et2-image slot="prefix" part="icon" style="width: var(--icon-width)"
src="${option.icon}"></et2-image>`
}
protected _createImage(item)
{
let image = item.querySelector("et2-image");

View File

@ -12,6 +12,7 @@ import {cleanSelectOptions, SelectOption} from "./FindSelectOptions";
import {Et2Image} from "../Et2Image/Et2Image";
import {SelectAccountMixin} from "./SelectAccountMixin";
import {Et2StaticSelectMixin} from "./StaticOptions";
import {html, nothing} from "@lion/core";
export type AccountType = 'accounts'|'groups'|'both'|'owngroups';
@ -115,6 +116,26 @@ export class Et2SelectAccount extends SelectAccountMixin(Et2StaticSelectMixin(Et
super.select_options = new_options;
}
/**
* Override icon for the select option
*
* @param option
* @protected
*/
protected _iconTemplate(option)
{
// lavatar uses a size property, not a CSS variable
let style = getComputedStyle(this);
return html`
<et2-lavatar slot="prefix" part="icon" .size=${style.getPropertyValue("--icon-width")}
lname=${option.lname || nothing}
fname=${option.fname || nothing}
image=${option.icon || nothing}
>
</et2-lavatar>`;
}
/**
* Override the prefix image for tags (multiple=true)
* The default is probably fine, but we're being explicit here.
@ -125,11 +146,23 @@ export class Et2SelectAccount extends SelectAccountMixin(Et2StaticSelectMixin(Et
*/
protected _createImage(item) : Et2Image
{
const image = super._createImage(item);
if(image)
const image = document.createElement("et2-lavatar");
image.contactId = item.value;
if(item.lname)
{
image.src = "/egroupware/api/avatar.php?account_id=" + item.value + "&etag=1";
image.lname = item.lname;
}
if(item.fname)
{
image.fname = item.fname;
}
// If there's an actual image associated with the account, use that image instead of initials
if(item.src)
{
image.src = item.src;
}
return image;
}
}

View File

@ -439,14 +439,22 @@ class Accounts
if (!empty($options['tag_list']))
{
$accounts[] = [
$result = [
'value' => $account['account_id'],
'label' => $displayName,
'icon' => Framework::link('/api/avatar.php', [
// Send what lavatar needs to skip a server-side request
'lname' => $account['account_id'] < 0 ? $account['account_lid'] : $account['account_lastname'],
'fname' => $account['account_id'] < 0 ? lang('group') : $account['account_firstname']
];
// TODO: Ralf find a cheap way to get this
if($actual_picture)
{
$result['icon'] = Framework::link('/api/avatar.php', [
'account_id' => $account['account_id'],
'modified' => $account['account_modified'],
]),
];
]);
}
$accounts[] = $result;
}
else
{

View File

@ -1705,7 +1705,9 @@ class Contacts extends Contacts\Storage
if ($contact['cat_id'] && ($color = Categories::cats2color($contact['cat_id'])))
{
$result[$contact['id']] = array(
'label' => $result[$contact['id']],
'lname' => $contact['n_family'],
'fname' => $contact['n_given'],
'label' => $result[$contact['id']],
'style.backgroundColor' => $color,
);
}

View File

@ -3692,17 +3692,24 @@ class mail_compose
$args[] = trim($contact['n_fn'] ? $contact['n_fn'] : $contact['fn']);
$completeMailString = call_user_func_array('imap_rfc822_write_address', $args);
if(!empty($email) && in_array($completeMailString ,$results) === false) {
$results[] = array(
$result = array(
'value' => $completeMailString,
'label' => $completeMailString,
// Add just name for nice display, with title for hover
'name' => $contact['n_fn'],
'name' => $contact['n_fn'],
'title' => $email,
'icon' => Egw::link('/api/avatar.php', array(
'lname' => $contact['n_family'],
'fname' => $contact['n_given']
);
// TODO: Ralf find a cheap way to get this
if($actual_picture)
{
$result['icon'] = Egw::link('/api/avatar.php', array(
'contact_id' => $contact['id'],
'etag' => $contact['etag']
))
);
'etag' => $contact['etag']
));
}
$results[] = $result;
}
}
}