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

fix(app): scale guild list selection pill with app zoom (#1670)

Browse Source
This commit is contained in:
Hampus
2026-08-16 01:36:16 +02:00
committed by GitHub
parent 410fa2dba9
commit 7a45d5844d
5 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_app/src/features/app/components/layout/sidebar_nav/FavoritesButton.tsx
+4 -3
View File
@@ -10,12 +10,12 @@ import {FAVORITES_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescri
import * as NavigationCommands from '@app/features/navigation/commands/NavigationCommands';
import SelectedChannel from '@app/features/navigation/state/SelectedChannel';
import {useLocation} from '@app/features/platform/components/router/RouterReact';
import {remFromPx} from '@app/features/theme/layout/RemFromPx';
import {FavoritesGuildContextMenu} from '@app/features/ui/action_menu/FavoritesGuildContextMenu';
import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands';
import FocusRing from '@app/features/ui/focus_ring/FocusRing';
import MobileLayout from '@app/features/ui/state/MobileLayout';
import {Tooltip} from '@app/features/ui/tooltip/Tooltip';
import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils';
import {FAVORITES_GUILD_ID} from '@fluxer/constants/src/AppConstants';
import {useLingui} from '@lingui/react/macro';
import {StarIcon} from '@phosphor-icons/react';
@@ -63,12 +63,13 @@ export const FavoritesButton = observer(({className}: FavoritesButtonProps = {})
));
};
const shouldShowHoverState = isHovering || contextMenuOpen;
const indicatorHeight =
const indicatorHeight = remFromPx(
(() => {
if (isSelected) return 40;
if (shouldShowHoverState) return 20;
return 8;
})() * getAppZoomFactor();
})(),
);
const isActive = shouldShowHoverState || isSelected;
if (!Accessibility.showFavorites) {
return null;
fluxer_app/src/features/app/components/layout/sidebar_nav/FluxerButton.tsx
+4 -3
View File
@@ -13,6 +13,7 @@ import * as RouterUtils from '@app/features/navigation/utils/RouterUtils';
import {useLocation} from '@app/features/platform/components/router/RouterReact';
import ReadStates from '@app/features/read_state/state/ReadStates';
import Relationships from '@app/features/relationship/state/Relationships';
import {remFromPx} from '@app/features/theme/layout/RemFromPx';
import {FluxerButtonContextMenu} from '@app/features/ui/action_menu/FluxerButtonContextMenu';
import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands';
import {FluxerSymbol} from '@app/features/ui/components/icons/FluxerSymbol';
@@ -21,7 +22,6 @@ import FocusRing from '@app/features/ui/focus_ring/FocusRing';
import MobileLayout from '@app/features/ui/state/MobileLayout';
import SidebarPreferences from '@app/features/ui/state/SidebarPreferences';
import {Tooltip} from '@app/features/ui/tooltip/Tooltip';
import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils';
import {ME} from '@fluxer/constants/src/AppConstants';
import {RelationshipTypes} from '@fluxer/constants/src/UserConstants';
import {msg} from '@lingui/core/macro';
@@ -117,12 +117,13 @@ export const FluxerButton = observer(() => {
/>
));
}, []);
const indicatorHeight =
const indicatorHeight = remFromPx(
(() => {
if (isSelected) return 40;
if (isHovering) return 20;
return 8;
})() * getAppZoomFactor();
})(),
);
const isActive = isHovering || isSelected;
if (RuntimeConfig.directMessagesDisabled) {
return null;
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildFolderItem.tsx
+4 -3
View File
@@ -21,6 +21,7 @@ import GuildReadState from '@app/features/guild/state/GuildReadState';
import {truncateInitials} from '@app/features/guild/utils/GuildInitialsUtils';
import {isKeyboardActivationKey} from '@app/features/input/utils/KeyboardUtils';
import {useLocation} from '@app/features/platform/components/router/RouterReact';
import {remFromPx} from '@app/features/theme/layout/RemFromPx';
import Theme from '@app/features/theme/state/Theme';
import {GuildFolderContextMenu} from '@app/features/ui/action_menu/GuildFolderContextMenu';
import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands';
@@ -28,7 +29,6 @@ import {MentionBadgeAnimated} from '@app/features/ui/components/MentionBadge';
import FocusRing from '@app/features/ui/focus_ring/FocusRing';
import MobileLayout from '@app/features/ui/state/MobileLayout';
import {Tooltip} from '@app/features/ui/tooltip/Tooltip';
import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils';
import * as AvatarUtils from '@app/features/user/utils/AvatarUtils';
import MediaEngine from '@app/features/voice/engine/MediaEngineFacade';
import {useVoiceGatewayStateVersion} from '@app/features/voice/engine/v2/VoiceEngineV2AppVoiceStateAdapter';
@@ -408,12 +408,13 @@ export const GuildFolderItem = observer((props: GuildFolderItemProps) => {
[folder, guilds],
);
const shouldShowHoverState = isHovering;
const indicatorHeight =
const indicatorHeight = remFromPx(
(() => {
if (isSelected) return 40;
if (shouldShowHoverState) return 20;
return 8;
})() * getAppZoomFactor();
})(),
);
const prefersReducedMotion = Accessibility.useReducedMotion;
const firstFourGuilds = guilds.slice(0, 4);
const showCollapsedIcon = shouldShowCollapsedFolderIcon(folder.flags);
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListDMItem.tsx
+4 -3
View File
@@ -16,6 +16,7 @@ import * as ChannelUtils from '@app/features/channel/utils/ChannelUtils';
import {MENTION_COUNT_ARIA_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
import * as NavigationCommands from '@app/features/navigation/commands/NavigationCommands';
import ReadStates from '@app/features/read_state/state/ReadStates';
import {remFromPx} from '@app/features/theme/layout/RemFromPx';
import {DMContextMenu} from '@app/features/ui/action_menu/DMContextMenu';
import {GroupDMContextMenu} from '@app/features/ui/action_menu/GroupDMContextMenu';
import {AvatarStack} from '@app/features/ui/avatars/AvatarStack';
@@ -25,7 +26,6 @@ import {StatusAwareAvatar} from '@app/features/ui/components/StatusAwareAvatar';
import FocusRing from '@app/features/ui/focus_ring/FocusRing';
import KeyboardMode from '@app/features/ui/state/KeyboardMode';
import {Tooltip} from '@app/features/ui/tooltip/Tooltip';
import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils';
import {isMobileExperienceEnabled} from '@app/features/ui/utils/MobileExperience';
import type {User} from '@app/features/user/models/User';
import UserGuildSettings from '@app/features/user/state/UserGuildSettings';
@@ -270,12 +270,13 @@ const ResolvedDMListItem = observer(function ResolvedDMListItem({
},
[channel, isGroupDM, recipient, isMobileExperience],
);
const indicatorHeight =
const indicatorHeight = remFromPx(
(() => {
if (isSelected) return 40;
if (isHovering) return 20;
return 8;
})() * getAppZoomFactor();
})(),
);
const tooltipContent = useMemo<string | (() => React.ReactNode)>(() => {
if (!hasVoiceActivity) {
return displayName;
fluxer_app/src/features/app/components/layout/sidebar_nav/GuildListItem.tsx
+4 -3
View File
@@ -37,6 +37,7 @@ import * as ImageCacheUtils from '@app/features/messaging/utils/ImageCacheUtils'
import * as NavigationCommands from '@app/features/navigation/commands/NavigationCommands';
import SelectedChannel from '@app/features/navigation/state/SelectedChannel';
import Permission from '@app/features/permissions/state/Permission';
import {remFromPx} from '@app/features/theme/layout/RemFromPx';
import {GuildContextMenu} from '@app/features/ui/action_menu/GuildContextMenu';
import {AvatarStack} from '@app/features/ui/avatars/AvatarStack';
import * as ContextMenuCommands from '@app/features/ui/commands/ContextMenuCommands';
@@ -45,7 +46,6 @@ import FocusRing from '@app/features/ui/focus_ring/FocusRing';
import {KeybindHint} from '@app/features/ui/keybind_hint/KeybindHint';
import MobileLayout from '@app/features/ui/state/MobileLayout';
import {Tooltip} from '@app/features/ui/tooltip/Tooltip';
import {getAppZoomFactor} from '@app/features/ui/utils/AppZoomUtils';
import {isMobileExperienceEnabled} from '@app/features/ui/utils/MobileExperience';
import type {User} from '@app/features/user/models/User';
import UserGuildSettings from '@app/features/user/state/UserGuildSettings';
@@ -519,12 +519,13 @@ export const GuildListItem = observer(
}
}, [handleOpenBottomSheet, isMobileExperience, isSortingList]);
const shouldShowHoverState = isHovering || contextMenuOpen;
const indicatorHeight =
const indicatorHeight = remFromPx(
(() => {
if (isSelected) return 40;
if (shouldShowHoverState) return 20;
return 8;
})() * getAppZoomFactor();
})(),
);
const isActive = isSelected || shouldShowHoverState;
const focusableRef = useRef<HTMLDivElement | null>(null);
const focusRingTargetRef = useRef<HTMLDivElement | null>(null);