pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-19 05:55:34 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(guild): fit text icon initials to the icon by measured width (#3310)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-10-08 20:05:09 +02:00
1 parent 89fa895a0a
commit abfaff16c2
8 files changed
+100 -48
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/app/components/layout/GuildsLayout.module.css
+5 -7
View File
@@ -206,6 +206,7 @@
color 70ms ease-out;
container-type: size;
--initials-font-size: clamp(0.85rem, 45cqi, 1.35rem);
--initials-fit-inline-size: 92cqi;
--initials-letter-spacing: 0px;
--initials-scale: 1;
}
@@ -259,7 +260,10 @@
line-height: 1;
color: inherit;
font-weight: 600;
font-size: var(--initials-font-size);
font-size: min(
var(--initials-font-size),
calc(var(--initials-fit-inline-size) / (var(--initials-width-em, 0.01) * var(--initials-scale)))
);
letter-spacing: var(--initials-letter-spacing);
transform: scale(var(--initials-scale));
transform-origin: center;
@@ -271,12 +275,6 @@
--initials-scale: 0.92;
}
.guildIcon[data-initials-length='long'] .guildIconInitials {
--initials-font-size: clamp(0.85rem, 32cqi, 0.87rem);
--initials-letter-spacing: 0px;
--initials-scale: 0.78;
}
.guildIndicator {
position: absolute;
left: var(--guild-list-indicator-inset);
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItemPresentation.tsx
+8 -6
View File
@@ -14,6 +14,7 @@ import Guilds from '@app/features/guild/state/Guilds';
import {
type GuildInitialsLength,
getGuildIconDisplayInitials,
getGuildInitialsFitStyle,
getInitialsFromName,
getInitialsLength,
truncateInitials,
@@ -57,11 +58,11 @@ function resolveGuildListItemMotion(useReducedMotion: boolean): GuildListItemMot
return STANDARD_GUILD_LIST_ITEM_MOTION;
}
function resolveInitialsLength(rawInitials: string): GuildInitialsLength | null {
if (rawInitials.length === 0) {
function resolveInitialsLength(displayInitials: string): GuildInitialsLength | null {
if (displayInitials.length === 0) {
return null;
}
return getInitialsLength(rawInitials);
return getInitialsLength(displayInitials);
}
function resolveDraggingCursor(dragAndDrop: GuildListItemDragAndDrop | null): 'grabbing' | null {
@@ -303,8 +304,8 @@ export const GuildListItemPresentation = forwardRef<
forwardedRef,
) {
const rootRef = useMergeRefs([surfaceRef, forwardedRef]);
const rawInitials = getInitialsFromName(guild.name);
const initialsLength = resolveInitialsLength(rawInitials);
const displayInitials = getGuildIconDisplayInitials(getInitialsFromName(guild.name));
const initialsLength = resolveInitialsLength(displayInitials);
const dropIndicator = resolveDropIndicator(dragAndDrop);
const motion = resolveGuildListItemMotion(Accessibility.useReducedMotion);
const draggingCursor = resolveDraggingCursor(dragAndDrop);
@@ -378,9 +379,10 @@ export const GuildListItemPresentation = forwardRef<
{!hasPaintedIcon && (
<span
className={styles.guildIconInitials}
style={getGuildInitialsFitStyle(displayInitials)}
data-flx="app.sidebar-nav.guild-list-item-presentation.guild-icon-initials"
>
{getGuildIconDisplayInitials(rawInitials)}
{displayInitials}
</span>
)}
</GuildListItemIcon>