UI - ЛАУНЧЕР: КРУГЛЫЕ АВАТАРЫ КЛИЕНТОВ
This commit is contained in:
parent
f9a590dca7
commit
e8ae3b08f8
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue