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

fix(app): unify guild acronyms and shrink them to fit (#3462)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-10-14 16:02:18 +02:00
1 parent 069b13c382
commit d7bbe933fa
22 files changed
+267 -311
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/app/components/dialogs/shared/GuildComboboxRenderers.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
import {getInitialsFromName, truncateInitials} from '@app/features/guild/utils/GuildInitialsUtils';
import {GuildAcronym} from '@app/features/guild/components/GuildAcronym';
import type {ComboboxOption} from '@app/features/ui/components/form/FormCombobox';
import {clsx} from 'clsx';
import type React from 'react';
@@ -26,8 +26,6 @@ export interface GuildComboboxRenderersConfig<T extends GuildComboboxOption> {
getNotice?: (option: T, disabled: boolean) => React.ReactNode;
}
const ROW_INITIALS_MAX_LENGTH = 1;
const renderRow = <T extends GuildComboboxOption>(
option: T,
disabled: boolean,
@@ -37,7 +35,6 @@ const renderRow = <T extends GuildComboboxOption>(
) => {
const isGlobal = !option.value;
const iconUrl = option.iconUrl ?? null;
const initial = truncateInitials(getInitialsFromName(option.label), ROW_INITIALS_MAX_LENGTH).toUpperCase();
const notice = getNotice?.(option, disabled);
return (
<div
@@ -58,7 +55,10 @@ const renderRow = <T extends GuildComboboxOption>(
aria-hidden
data-flx="app.guild-combobox-renderers.render-row.avatar-placeholder"
>
{initial}
<GuildAcronym
name={option.label}
data-flx="app.guild-combobox-renderers.render-row.avatar-placeholder-acronym"
/>
</div>
))}
<span className={styles.label} data-flx="app.guild-combobox-renderers.render-row.label">
fluxer_app/src/features/app/components/layout/GuildsLayout.module.css
-32
View File
@@ -185,19 +185,12 @@
background-color: transparent;
background-size: cover;
background-position: center;
font-weight: 600;
font-size: 1.25rem;
color: var(--text-primary);
overflow: hidden;
transition:
border-radius 70ms ease-out,
background-color 70ms ease-out,
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;
}
.guildIconSelected:not(.guildIconNoImage) {
@@ -242,28 +235,6 @@
}
}
.guildIconInitials {
white-space: nowrap;
display: inline-block;
text-align: center;
line-height: 1;
color: inherit;
font-weight: 600;
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;
}
.guildIcon[data-initials-length='medium'] .guildIconInitials {
--initials-font-size: clamp(0.85rem, 38cqi, 1.11rem);
--initials-letter-spacing: 0px;
--initials-scale: 0.92;
}
.guildIndicator {
position: absolute;
left: var(--guild-list-indicator-inset);
@@ -765,10 +736,7 @@
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 0.5rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1;
}
.combinePreviewIconInitials {
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.module.css
-8
View File
@@ -124,15 +124,7 @@
.miniGuildIconWithInitials {
background-color: var(--folder-mini-surface);
}
.miniGuildInitials {
font-size: 0.5rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1;
text-align: center;
white-space: nowrap;
}
.folderBadge {
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.tsx
+2 -9
View File
@@ -23,10 +23,10 @@ import {
import {useContextMenuHoverState} from '@app/features/app/hooks/useContextMenuHoverState';
import {useHover} from '@app/features/app/hooks/useHover';
import {useMergeRefs} from '@app/features/app/hooks/useMergeRefs';
import {GuildAcronym} from '@app/features/guild/components/GuildAcronym';
import type {Guild} from '@app/features/guild/models/Guild';
import GuildFolderExpanded from '@app/features/guild/state/GuildFolderExpanded';
import GuildReadState from '@app/features/guild/state/GuildReadState';
import {getInitialsFromName, truncateInitials} from '@app/features/guild/utils/GuildInitialsUtils';
import {MENTION_COUNT_ARIA_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
import {isKeyboardActivationKey} from '@app/features/input/utils/KeyboardUtils';
import {useRecoveringBackgroundImageURL} from '@app/features/messaging/hooks/useImageRecovery';
@@ -760,8 +760,6 @@ export const GuildFolderItem = observer((props: GuildFolderItemProps) => {
);
});
const MINI_GUILD_INITIALS_MAX_LENGTH = 2;
interface MiniGuildIconProps {
readonly guild: Guild;
}
@@ -782,12 +780,7 @@ const MiniGuildIcon = observer(({guild}: MiniGuildIconProps) => {
className={flxElementClassName(styles.miniGuildIcon, styles.miniGuildIconWithInitials)}
data-flx="app.sidebar-nav.guild-folder-item.mini-guild-icon.mini-guild-icon--2"
>
<span
className={styles.miniGuildInitials}
data-flx="app.sidebar-nav.guild-folder-item.mini-guild-icon.mini-guild-initials"
>
{truncateInitials(getInitialsFromName(guild.name), MINI_GUILD_INITIALS_MAX_LENGTH)}
</span>
<GuildAcronym name={guild.name} data-flx="app.sidebar-nav.guild-folder-item.mini-guild-icon.acronym" />
</flx-app-mini-guild-icon>
);
});
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItemPresentation.tsx
+9 -27
View File
@@ -9,16 +9,9 @@ import type {GuildListItemDragAndDrop} from '@app/features/app/components/layout
import {VoiceBadge, type VoiceBadgeActivity} from '@app/features/app/components/layout/sidebar_nav/VoiceBadge';
import {DropPlacement} from '@app/features/app/components/layout/types/DndTypes';
import {useMergeRefs} from '@app/features/app/hooks/useMergeRefs';
import {GuildAcronym} from '@app/features/guild/components/GuildAcronym';
import type {Guild} from '@app/features/guild/models/Guild';
import Guilds from '@app/features/guild/state/Guilds';
import {
type GuildInitialsLength,
getGuildIconDisplayInitials,
getGuildInitialsFitStyle,
getInitialsFromName,
getInitialsLength,
truncateInitials,
} from '@app/features/guild/utils/GuildInitialsUtils';
import {ariaCurrentPage} from '@app/features/platform/ARIAProps';
import {Edge} from '@app/features/ui/AxisOrientation';
import {MentionBadgeAnimated} from '@app/features/ui/components/MentionBadge';
@@ -58,13 +51,6 @@ function resolveGuildListItemMotion(useReducedMotion: boolean): GuildListItemMot
return STANDARD_GUILD_LIST_ITEM_MOTION;
}
function resolveInitialsLength(displayInitials: string): GuildInitialsLength | null {
if (displayInitials.length === 0) {
return null;
}
return getInitialsLength(displayInitials);
}
function resolveDraggingCursor(dragAndDrop: GuildListItemDragAndDrop | null): 'grabbing' | null {
if (dragAndDrop == null) {
return null;
@@ -164,7 +150,6 @@ function GuildListItemBadges({
function CombinePreviewIcon({guild}: {readonly guild: Guild}) {
const url = AvatarSourceUtils.getGuildIconURL(guild, false);
const initials = truncateInitials(getInitialsFromName(guild.name), 2);
const backgroundStyle: React.CSSProperties = {};
if (url.length > 0) {
backgroundStyle.backgroundImage = `url(${url})`;
@@ -176,7 +161,10 @@ function CombinePreviewIcon({guild}: {readonly guild: Guild}) {
data-flx="app.sidebar-nav.guild-list-item-presentation.combine-preview-icon.combine-preview-icon"
>
{url.length === 0 && (
<span data-flx="app.sidebar-nav.guild-list-item-presentation.combine-preview-icon.span">{initials}</span>
<GuildAcronym
name={guild.name}
data-flx="app.sidebar-nav.guild-list-item-presentation.combine-preview-icon.acronym"
/>
)}
</flx-app-combine-preview-icon>
);
@@ -304,8 +292,6 @@ export const GuildListItemPresentation = forwardRef<
forwardedRef,
) {
const rootRef = useMergeRefs([surfaceRef, forwardedRef]);
const displayInitials = getGuildIconDisplayInitials(getInitialsFromName(guild.name));
const initialsLength = resolveInitialsLength(displayInitials);
const dropIndicator = resolveDropIndicator(dragAndDrop);
const motion = resolveGuildListItemMotion(Accessibility.useReducedMotion);
const draggingCursor = resolveDraggingCursor(dragAndDrop);
@@ -372,18 +358,14 @@ export const GuildListItemPresentation = forwardRef<
to={guildIconTarget}
from={false}
tween={{duration: motion.iconTweenDuration, ease: 'easeOut'}}
data-initials-length={initialsLength}
style={guildIconStyle}
data-flx="app.sidebar-nav.guild-list-item-presentation.guild-icon"
>
{!hasPaintedIcon && (
<span
className={styles.guildIconInitials}
style={getGuildInitialsFitStyle(displayInitials)}
data-flx="app.sidebar-nav.guild-list-item-presentation.guild-icon-initials"
>
{displayInitials}
</span>
<GuildAcronym
name={guild.name}
data-flx="app.sidebar-nav.guild-list-item-presentation.guild-icon-acronym"
/>
)}
</GuildListItemIcon>
<GuildListItemBadges