UI - ЛАУНЧЕР: КРУГЛЫЕ АВАТАРЫ КЛИЕНТОВ

This commit is contained in:
DCCONSTRUCTIONS 2026-05-08 19:06:26 +03:00
parent f9a590dca7
commit e8ae3b08f8
2 changed files with 40 additions and 8 deletions

View File

@ -411,20 +411,25 @@ code {
position: relative; position: relative;
display: flex; display: flex;
width: 3rem; width: 3rem;
min-width: 3rem;
max-width: 3rem;
height: 3rem; height: 3rem;
min-height: 3rem;
max-height: 3rem;
flex: 0 0 3rem;
aspect-ratio: 1;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
border: 0; border: 0;
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.04); background: transparent;
backdrop-filter: blur(18px); padding: 0;
-webkit-backdrop-filter: blur(18px);
transition: background-color 160ms ease; transition: background-color 160ms ease;
} }
.nodedc-expanded-workspace-button:hover { .nodedc-expanded-workspace-button:hover {
background: rgba(255, 255, 255, 0.07); background: transparent;
} }
.nodedc-expanded-workspace-button select, .nodedc-expanded-workspace-button select,
@ -450,6 +455,7 @@ code {
} }
.nodedc-expanded-workspace-avatar { .nodedc-expanded-workspace-avatar {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;
@ -3053,7 +3059,10 @@ code {
.client-avatar-preview { .client-avatar-preview {
display: grid; display: grid;
width: 3.1rem; width: 3.1rem;
min-width: 3.1rem;
height: 3.1rem; height: 3.1rem;
min-height: 3.1rem;
aspect-ratio: 1;
place-items: center; place-items: center;
overflow: hidden; overflow: hidden;
border-radius: var(--launcher-radius-circle); border-radius: var(--launcher-radius-circle);
@ -3061,6 +3070,7 @@ code {
} }
.client-avatar-preview img { .client-avatar-preview img {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;

View File

@ -1705,6 +1705,7 @@ function ClientEditorModal({
canDelete: boolean; canDelete: boolean;
}) { }) {
const [draft, setDraft] = useState<Client>(client); const [draft, setDraft] = useState<Client>(client);
const [avatarPreviewUrl, setAvatarPreviewUrl] = useState<string | null>(client.avatarUrl ?? null);
const [uploadingAvatar, setUploadingAvatar] = useState(false); const [uploadingAvatar, setUploadingAvatar] = useState(false);
const [storageError, setStorageError] = useState<string | null>(null); const [storageError, setStorageError] = useState<string | null>(null);
const taskManagerWorkspaceBindings = getClientTaskManagerWorkspaces(draft); const taskManagerWorkspaceBindings = getClientTaskManagerWorkspaces(draft);
@ -1713,10 +1714,19 @@ function ClientEditorModal({
useEffect(() => { useEffect(() => {
setDraft(client); setDraft(client);
setAvatarPreviewUrl(client.avatarUrl ?? null);
setUploadingAvatar(false); setUploadingAvatar(false);
setStorageError(null); setStorageError(null);
}, [client]); }, [client]);
useEffect(() => {
return () => {
if (avatarPreviewUrl?.startsWith("blob:")) {
URL.revokeObjectURL(avatarPreviewUrl);
}
};
}, [avatarPreviewUrl]);
function update<K extends keyof Client>(key: K, value: Client[K]) { function update<K extends keyof Client>(key: K, value: Client[K]) {
setDraft((current) => ({ ...current, [key]: value })); setDraft((current) => ({ ...current, [key]: value }));
} }
@ -1765,14 +1775,18 @@ function ClientEditorModal({
async function handleAvatarUpload(file?: File) { async function handleAvatarUpload(file?: File) {
if (!file) return; if (!file) return;
const localPreviewUrl = URL.createObjectURL(file);
setAvatarPreviewUrl(localPreviewUrl);
setUploadingAvatar(true); setUploadingAvatar(true);
setStorageError(null); setStorageError(null);
try { try {
const storedFile = await uploadStorageFile(file); const storedFile = await uploadStorageFile(file);
update("avatarUrl", storedFile.url); update("avatarUrl", storedFile.url);
setAvatarPreviewUrl(storedFile.url);
} catch (error) { } catch (error) {
setStorageError(error instanceof Error ? error.message : "Не удалось сохранить аватар компании"); setStorageError(error instanceof Error ? error.message : "Не удалось сохранить аватар компании");
setAvatarPreviewUrl(draft.avatarUrl ?? null);
} finally { } finally {
setUploadingAvatar(false); setUploadingAvatar(false);
} }
@ -1829,10 +1843,10 @@ function ClientEditorModal({
<span>Аватар компании</span> <span>Аватар компании</span>
<div className="client-avatar-control"> <div className="client-avatar-control">
<div className="client-avatar-preview" aria-hidden="true"> <div className="client-avatar-preview" aria-hidden="true">
{draft.avatarUrl ? <img src={draft.avatarUrl} alt="" /> : null} {avatarPreviewUrl ? <img src={avatarPreviewUrl} alt="" /> : null}
</div> </div>
<div className="client-avatar-control__copy"> <div className="client-avatar-control__copy">
<strong>{draft.avatarUrl ? "Аватар подключён" : "Аватар не задан"}</strong> <strong>{avatarPreviewUrl ? "Аватар подключён" : "Аватар не задан"}</strong>
<small>Показывается в верхнем переключателе компании.</small> <small>Показывается в верхнем переключателе компании.</small>
</div> </div>
<label className="service-media-file-button client-avatar-upload-button"> <label className="service-media-file-button client-avatar-upload-button">
@ -1847,8 +1861,16 @@ function ClientEditorModal({
}} }}
/> />
</label> </label>
{draft.avatarUrl ? ( {avatarPreviewUrl ? (
<button className="admin-icon-action client-avatar-clear-action" type="button" onClick={() => update("avatarUrl", null)} aria-label="Убрать аватар"> <button
className="admin-icon-action client-avatar-clear-action"
type="button"
onClick={() => {
update("avatarUrl", null);
setAvatarPreviewUrl(null);
}}
aria-label="Убрать аватар"
>
<X size={11} /> <X size={11} />
</button> </button>
) : null} ) : null}