aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Стандартизировали размеры аватаров в UI

Browse Source
This commit is contained in:
AidarKC
2026-08-26 12:33:18 +04:00
parent 83f87ba22c
commit 2a65e6d359
15 changed files with 134 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/js/components/avatar-image.js
+7 -4
View File
@@ -8,9 +8,12 @@ function normalizeLogin(value) {
function pickSizeClass(size) {
const raw = String(size || '').trim().toLowerCase();
if (raw === 'large') return 'large';
if (raw === 'node') return 'node-dot';
if (raw === 'small') return '';
if (raw === 'xs' || raw === 'xsmall' || raw === 'tiny') return 'avatar-xs';
if (raw === 'sm' || raw === 'small') return 'avatar-sm';
if (raw === 'md' || raw === 'medium' || raw === '') return 'avatar-md';
if (raw === 'lg' || raw === 'big') return 'avatar-lg';
if (raw === 'xl' || raw === 'xlarge' || raw === 'large' || raw === 'very-large') return 'avatar-xl';
return raw || '';
}
@@ -28,7 +31,7 @@ export function buildAvatarInitials({ login, firstName = '', lastName = '' } = {
export function renderAvatar({
initials = '?',
avatar = null,
size = 'large',
size = 'xl',
className = '',
title = '',
alt = 'Аватар',
@@ -139,7 +142,7 @@ export function renderUserAvatar({
firstName = '',
lastName = '',
avatar = null,
size = 'large',
size = 'xl',
className = '',
title = '',
glow = false,
shine-UI/js/pages/add-channel-view.js
+2 -2
View File
@@ -44,12 +44,12 @@ function renderAvatarPreview(slot, avatar, title) {
const wrap = renderAvatar({
initials: label.slice(0, 1).toUpperCase() || 'К',
avatar,
size: 'small',
size: 'xl',
className: 'channel-profile-avatar',
title: label,
alt: 'Аватар канала',
});
wrap.style.setProperty('--channel-avatar-size', '104px');
wrap.style.setProperty('--channel-avatar-size', '96px');
slot.append(wrap);
}
shine-UI/js/pages/channel-thread-view.js
+2 -2
View File
@@ -62,7 +62,7 @@ function createThreadAvatar(login) {
const title = cleanLogin ? `Профиль ${cleanLogin}` : '';
const avatarEl = renderUserAvatar({
login: cleanLogin || 'unknown',
size: 'small',
size: 'sm',
className: 'channel-message-avatar',
title,
});
@@ -77,7 +77,7 @@ function createThreadAvatar(login) {
sha256Hex: String(snapshot?.avatar?.sha256Hex || '').trim().toLowerCase(),
}
: null,
size: 'small',
size: 'sm',
className: 'channel-message-avatar',
title,
});
shine-UI/js/pages/channel-view.js
+5 -5
View File
@@ -86,7 +86,7 @@ function createMessageAvatar(login) {
const title = cleanLogin ? `Профиль ${cleanLogin}` : '';
const avatarEl = renderUserAvatar({
login: cleanLogin || 'unknown',
size: 'small',
size: 'sm',
className: 'channel-message-avatar',
title,
});
@@ -101,7 +101,7 @@ function createMessageAvatar(login) {
sha256Hex: String(snapshot?.avatar?.sha256Hex || '').trim().toLowerCase(),
}
: null,
size: 'small',
size: 'sm',
className: 'channel-message-avatar',
title,
});
@@ -577,13 +577,13 @@ function getStatusActionOptionsForTarget(targetMsgSubType) {
}
}
function createChannelAvatarElement(channel, size = 72) {
function createChannelAvatarElement(channel, size = 96) {
const txId = String(channel?.avaAr || '').trim();
const title = String(channel?.displayTitle || channel?.name || 'К').trim() || 'К';
const wrap = renderAvatar({
initials: title.slice(0, 1).toUpperCase() || 'К',
avatar: txId ? { ar: txId } : null,
size: 'small',
size: 'xl',
className: 'channel-profile-avatar',
title,
alt: 'Аватар канала',
@@ -626,7 +626,7 @@ function openChannelMetaDetailsModal({
</div>
</div>
`;
root.querySelector('#about-channel-avatar-slot')?.append(createChannelAvatarElement(channel, 86));
root.querySelector('#about-channel-avatar-slot')?.append(createChannelAvatarElement(channel, 96));
root.querySelector('#about-channel-close')?.addEventListener('click', () => {
root.innerHTML = '';
shine-UI/js/pages/channels-list.js
+1 -1
View File
@@ -94,7 +94,7 @@ function createChannelAvatar(channel = {}) {
return renderAvatar({
initials: channel.avatar || channel.initials || avatarLetterFromName(channel.displayTitle || channel.title || channel.name),
avatar: channel.avaAr ? { ar: String(channel.avaAr || '').trim() } : null,
size: 'small',
size: 'md',
title: channel.displayTitle || channel.title || channel.name || 'Канал',
alt: 'Аватар канала',
});
shine-UI/js/pages/chat-view.js
+2 -2
View File
@@ -43,7 +43,7 @@ function createChatHeaderParts(login, navigate) {
avatarSlot.className = 'chat-header-avatar-slot chat-header-avatar-slot--left';
const initialAvatar = renderUserAvatar({
login: cleanLogin,
size: 'small',
size: 'md',
className: 'chat-header-avatar',
title: cleanLogin,
});
@@ -76,7 +76,7 @@ function createChatHeaderParts(login, navigate) {
sha256Hex: String(snapshot?.avatar?.sha256Hex || '').trim().toLowerCase(),
}
: null,
size: 'small',
size: 'md',
className: 'chat-header-avatar',
title: cleanLogin,
});
shine-UI/js/pages/contact-search-view.js
+2 -2
View File
@@ -34,7 +34,7 @@ function createSearchAvatar(login) {
const title = cleanLogin ? `Профиль ${cleanLogin}` : '';
const avatarEl = renderUserAvatar({
login: cleanLogin || 'unknown',
size: 'small',
size: 'md',
className: 'avatar',
title,
});
@@ -49,7 +49,7 @@ function createSearchAvatar(login) {
sha256Hex: String(snapshot?.avatar?.sha256Hex || '').trim().toLowerCase(),
}
: null,
size: 'small',
size: 'md',
className: 'avatar',
title,
});
shine-UI/js/pages/messages-list.js
+2 -2
View File
@@ -52,7 +52,7 @@ function createDmAvatar(login, { className = '' } = {}) {
const title = cleanLogin ? `Профиль ${cleanLogin}` : '';
const avatarEl = renderUserAvatar({
login: cleanLogin || 'unknown',
size: 'small',
size: 'md',
title,
className,
});
@@ -67,7 +67,7 @@ function createDmAvatar(login, { className = '' } = {}) {
sha256Hex: String(snapshot?.avatar?.sha256Hex || '').trim().toLowerCase(),
}
: null,
size: 'small',
size: 'md',
title,
className,
});
shine-UI/js/pages/notifications-view.js
+1 -1
View File
@@ -165,7 +165,7 @@ function renderIdentity(item) {
firstName,
lastName,
avatar,
size: 'small',
size: 'md',
className: 'notification-avatar',
}));
shine-UI/js/pages/profile-edit-view.js
+1 -1
View File
@@ -229,7 +229,7 @@ export function render({ navigate, chrome }) {
avatar: currentAvatar?.txId
? { ar: currentAvatar.txId, sha256Hex: String(currentAvatar?.sha256Hex || '').trim().toLowerCase() }
: null,
size: 'large',
size: 'xl',
className: 'profile-avatar',
}));
}
shine-UI/js/pages/profile-view.js
+1 -1
View File
@@ -252,7 +252,7 @@ export function render({ navigate, chrome }) {
avatar: currentAvatar?.txId
? { ar: currentAvatar.txId, sha256Hex: String(currentAvatar?.sha256Hex || '').trim().toLowerCase() }
: null,
size: 'large',
size: 'xl',
className: 'profile-avatar',
}));
}
shine-UI/js/pages/user-profile-view.js
+1 -1
View File
@@ -156,7 +156,7 @@ function renderIdentity(card) {
firstName: card.firstName,
lastName: card.lastName,
avatar: card.avatar,
size: 'large',
size: 'xl',
className: 'profile-avatar',
}));
shine-UI/js/services/call-ui-service.js
+1 -1
View File
@@ -114,7 +114,7 @@ function renderPeerAvatar(login, avatar = null) {
const avatarEl = renderUserAvatar({
login: String(login || '').trim() || 'unknown',
avatar,
size: 'large',
size: 'xl',
className: 'call-peer-avatar',
title: login ? `Профиль ${login}` : 'Профиль собеседника',
});
shine-UI/styles/components.css
+105 -58
View File
@@ -1430,10 +1430,10 @@
}
.avatar {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
flex: 0 0 auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
@@ -1442,11 +1442,52 @@
place-items: center;
font-weight: 700;
color: #e5ebff;
font-size: 14px;
}
.avatar.large {
width: 82px;
height: 82px;
.avatar.avatar-xs,
.avatar.xs {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
font-size: 9px;
}
.avatar.avatar-sm,
.avatar.small {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 10px;
}
.avatar.avatar-md,
.avatar.medium {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 14px;
}
.avatar.avatar-lg,
.avatar.big {
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
font-size: 18px;
}
.avatar.avatar-xl,
.avatar.large,
.avatar.xlarge {
width: 96px;
height: 96px;
min-width: 96px;
min-height: 96px;
font-size: 26px;
}
@@ -4143,10 +4184,10 @@ textarea.input {
}
.channel-row .avatar {
width: 58px;
height: 58px;
min-width: 58px;
min-height: 58px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
background: linear-gradient(138deg, #efd193, #c18c42);
color: #17233f;
@@ -4390,15 +4431,15 @@ textarea.input {
}
.channel-message-avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: 10px;
font-weight: 700;
color: #f4f6ff;
background: radial-gradient(circle at 30% 30%, #8a73ff, #4f4bda 58%, #3b2b89);
@@ -5010,10 +5051,10 @@ textarea.input {
}
.channel-row .avatar {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
.channel-row-title {
@@ -5754,10 +5795,10 @@ textarea.input {
}
.channel-row .avatar {
width: 68px;
height: 68px;
min-width: 68px;
min-height: 68px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
overflow: hidden;
color: #ffffff;
@@ -6155,10 +6196,10 @@ textarea.input {
.dm-card--shining { border-color: rgba(104, 216, 255, 0.45); } /* линия связи: cyan (сияющий) */
.dm-screen .list-item .avatar {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.45);
background:
@@ -6255,8 +6296,8 @@ textarea.input {
.dm-name-check svg { width: 16px; height: 16px; }
/* AvatarRing — обод/свечение по тону (адаптация орбов «Связей», без тяжёлой магии) */
.dm-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.dm-av .avatar { width: 50px; height: 50px; min-width: 50px; min-height: 50px; border: none; box-shadow: none; }
.dm-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.dm-av .avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border: none; box-shadow: none; }
/* Цветные обводки вокруг аватаров (violet/gold) убраны по просьбе. Свечение оставляем только у сияющих (ниже). */
.dm-av--default { box-shadow: none; }
.dm-av--family { box-shadow: none; }
@@ -7196,6 +7237,7 @@ html, body { overflow-x: hidden; }
/* ===== Targeted UI touchups (requested) ===== */
.channels-screen--list .channel-row .avatar,
.profile-screen .avatar-xl,
.profile-screen .avatar.large {
position: relative;
border-radius: 50%;
@@ -7212,6 +7254,7 @@ html, body { overflow-x: hidden; }
}
.channels-screen--list .channel-row .avatar::after,
.profile-screen .avatar-xl::after,
.profile-screen .avatar.large::after {
content: "";
position: absolute;
@@ -8156,6 +8199,10 @@ html, body { overflow-x: hidden; }
}
.notification-avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
flex: 0 0 auto;
}
@@ -8481,10 +8528,10 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
}
.chat-header-avatar-slot {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -8492,11 +8539,11 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
.chat-header-avatar.avatar,
.chat-header-avatar.avatar-image {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 11px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 14px;
border: 0;
box-shadow: none;
}
@@ -8989,10 +9036,10 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
/* «Личные»: вместо жёлтого шестиугольника — текущий аватар пользователя. */
.dm-head-avatar-slot {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
@@ -9000,11 +9047,11 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
.dm-head-avatar.avatar,
.dm-head-avatar.avatar-image {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
font-size: 12px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 14px;
}
/* Список личных чатов: без цветной границы карточки, компактная ава как в шапке
@@ -9036,11 +9083,11 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
.dm-list-screen .dm-av .avatar,
.dm-list-screen .list-item .avatar {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
font-size: 10px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
font-size: 14px;
border: 0;
box-shadow: none;
}
@@ -9242,15 +9289,15 @@ body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
.dm-head-avatar-slot,
.dm-head-avatar.avatar,
.dm-head-avatar.avatar-image {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
.dm-head-avatar.avatar,
.dm-head-avatar.avatar-image {
font-size: 11px;
font-size: 14px;
}
/* Composer должен быть продолжением основного фона: без верхнего разделителя