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

fix(app): draw the mention badge cutout from the badge itself (#1868)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:34:37 +02:00
1 parent 677e6e5d6e
commit 5b8a46d087
7 files changed
+69 -73
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
+3 -8
View File
@@ -306,14 +306,9 @@
isolation: isolate;
}
.guildBadgeActive::before,
.guildBadge:not(:empty)::before {
content: '';
position: absolute;
inset: -0.1875rem;
z-index: -1;
border-radius: calc(var(--radius-md) + 0.1875rem);
background-color: var(--guild-badge-surface);
.guildBadgeActive,
.guildBadge:not(:empty) {
--mention-badge-cutout-surface: var(--guild-badge-surface);
}
.guildVoiceBadge {
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.module.css
+3 -8
View File
@@ -145,14 +145,9 @@
isolation: isolate;
}
.folderBadgeActive::before,
.folderBadge:not(:empty)::before {
content: '';
position: absolute;
inset: -0.1875rem;
z-index: -1;
border-radius: calc(var(--radius-md) + 0.1875rem);
background-color: var(--guild-badge-surface);
.folderBadgeActive,
.folderBadge:not(:empty) {
--mention-badge-cutout-surface: var(--guild-badge-surface);
}
.expandedFolderBackground {
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.tsx
+3 -3
View File
@@ -759,14 +759,14 @@ export const GuildFolderItem = observer((props: GuildFolderItemProps) => {
);
});
const MINI_GUILD_INITIALS_MAX_LENGTH = 2;
interface MiniGuildIconProps {
readonly guild: Guild;
}
const MiniGuildIcon = observer(({guild}: MiniGuildIconProps) => {
const iconURL = AvatarSourceUtils.getGuildIconURL(guild, false);
const initials = getInitialsFromName(guild.name);
const displayInitials = truncateInitials(initials, 2);
if (iconURL !== '') {
return (
<flx-app-mini-guild-icon
@@ -785,7 +785,7 @@ const MiniGuildIcon = observer(({guild}: MiniGuildIconProps) => {
className={styles.miniGuildInitials}
data-flx="app.sidebar-nav.guild-folder-item.mini-guild-icon.mini-guild-initials"
>
{displayInitials}
{truncateInitials(getInitialsFromName(guild.name), MINI_GUILD_INITIALS_MAX_LENGTH)}
</span>
</flx-app-mini-guild-icon>
);
fluxer_app/src/features/app/components/skeleton/GuildRailSkeleton.module.css
-13
View File
@@ -59,7 +59,6 @@
}
.itemSlot {
--guild-rail-skeleton-badge-size: var(--mention-badge-small-size);
position: relative;
display: flex;
align-items: center;
@@ -82,18 +81,6 @@
min-height: var(--guild-list-item-box-size);
}
.mentionBadge {
position: absolute;
right: calc(50% - var(--guild-icon-size) / 2 - 0.25rem);
bottom: calc(50% - var(--guild-icon-size) / 2 - 0.25rem);
box-shadow: 0 0 0 0.1875rem var(--guild-badge-surface);
}
.folderSlot .mentionBadge {
right: -0.25rem;
bottom: -0.25rem;
}
.itemsTrailingGapCancel {
margin-bottom: calc(-1 * var(--guild-list-item-gap));
}
fluxer_app/src/features/app/components/skeleton/GuildRailSkeleton.tsx
-21
View File
@@ -34,7 +34,6 @@ import {useState} from 'react';
const GUILD_ICON_SIZE = skeletonSurfaceVar('--guild-icon-size');
const FOLDER_ICON_SIZE = skeletonSurfaceVar('--guild-list-item-box-size');
const MENTION_BADGE_SIZE = 'var(--guild-rail-skeleton-badge-size)';
const GUILD_PLACEHOLDER_COUNT = 6;
const SHOWS_DOWNLOAD_ACTION = !Platform.isElectron && !Platform.isPWA;
const FALLBACK_ORGANIZED_ITEMS: ReadonlyArray<RememberedSkeletonGuildRailItem> = Object.freeze(
@@ -190,17 +189,6 @@ function showsSkeletonIndicator({indicator, selected}: SkeletonIndicatorVisibili
return indicator !== SkeletonGuildRailItemIndicator.NONE;
}
const MentionBadgePlaceholder = () => (
<SkeletonBlock
width={MENTION_BADGE_SIZE}
height={MENTION_BADGE_SIZE}
radius={SkeletonRadius.MEDIUM}
emphasis={SkeletonEmphasis.MUTED}
className={styles.mentionBadge}
data-flx="app.skeleton.guild-rail-skeleton.mention-badge-placeholder.mention-badge"
/>
);
const GuildPlaceholder = ({
indicator,
selected,
@@ -223,9 +211,6 @@ const GuildPlaceholder = ({
size={GUILD_ICON_SIZE}
data-flx="app.skeleton.guild-rail-skeleton.guild-placeholder.skeleton-circle"
/>
{indicator === SkeletonGuildRailItemIndicator.MENTION && (
<MentionBadgePlaceholder data-flx="app.skeleton.guild-rail-skeleton.guild-placeholder.mention-badge-placeholder" />
)}
</flx-app-guild-rail-skeleton-item-slot>
);
@@ -326,9 +311,6 @@ const CollapsedFolderPlaceholder = ({
</flx-app-guild-rail-skeleton-collapsed-folder-grid>
)}
</flx-app-guild-rail-skeleton-collapsed-folder>
{indicator === SkeletonGuildRailItemIndicator.MENTION && (
<MentionBadgePlaceholder data-flx="app.skeleton.guild-rail-skeleton.collapsed-folder-placeholder.mention-badge-placeholder" />
)}
</flx-app-guild-rail-skeleton-item-slot>
);
@@ -354,9 +336,6 @@ const ExpandedFolderGuildPlaceholder = ({
size={GUILD_ICON_SIZE}
data-flx="app.skeleton.guild-rail-skeleton.expanded-folder-guild-placeholder.skeleton-circle"
/>
{indicator === SkeletonGuildRailItemIndicator.MENTION && (
<MentionBadgePlaceholder data-flx="app.skeleton.guild-rail-skeleton.expanded-folder-guild-placeholder.mention-badge-placeholder" />
)}
</flx-app-guild-rail-skeleton-expanded-folder-guild>
);