tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add list semantics to main navigation

Browse Source 
Port 28849e433a4cde2037d7e719f9061e37267da3e7 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion 2026-05-22 16:25:00 +02:00 committed by Claire
parent 40aa81560d
commit 80bd05fb97
3 changed files with 130 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/flavours/glitch/features/navigation_panel/components/collapsible_panel.tsx
View File

@ -36,7 +36,7 @@ export const CollapsiblePanel: React.FC<{
}, [setExpanded]); }, [setExpanded]);
return ( return (
<div className='navigation-panel__list-panel'> <li className='navigation-panel__list-panel'>
<div className='navigation-panel__list-panel__header'> <div className='navigation-panel__list-panel__header'>
<ColumnLink <ColumnLink
transparent transparent
@ -64,7 +64,7 @@ export const CollapsiblePanel: React.FC<{
} }
title={expanded ? collapseTitle : expandTitle} title={expanded ? collapseTitle : expandTitle}
onClick={handleClick} onClick={handleClick}
aria-controls={`${accessibilityId}-content`} ariaControls={`${accessibilityId}-content`}
/> />
</> </>
)} )}
@ -80,6 +80,6 @@ export const CollapsiblePanel: React.FC<{
{children} {children}
</div> </div>
)} )}
</div> </li>
); );
}; };

222
app/javascript/flavours/glitch/features/navigation_panel/index.tsx
View File

@ -271,135 +271,163 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
{banner && <div className='navigation-panel__banner'>{banner}</div>} {banner && <div className='navigation-panel__banner'>{banner}</div>}
<div className='navigation-panel__menu'> <ul className='navigation-panel__menu'>
{signedIn && ( {signedIn && (
<> <>
{!multiColumn && ( {!multiColumn && (
<li>
<ColumnLink
to='/publish'
icon='plus'
iconComponent={AddIcon}
activeIconComponent={AddIcon}
text={intl.formatMessage(messages.compose)}
className='button navigation-panel__compose-button'
id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined}
/>
</li>
)}
<li>
<ColumnLink <ColumnLink
to='/publish' transparent
icon='plus' to='/home'
iconComponent={AddIcon} icon='home'
activeIconComponent={AddIcon} iconComponent={HomeIcon}
text={intl.formatMessage(messages.compose)} activeIconComponent={HomeActiveIcon}
className='button navigation-panel__compose-button' text={intl.formatMessage(messages.home)}
id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined} id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined}
/> />
)} </li>
<ColumnLink
transparent
to='/home'
icon='home'
iconComponent={HomeIcon}
activeIconComponent={HomeActiveIcon}
text={intl.formatMessage(messages.home)}
id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined}
/>
</> </>
)} )}
{trendsEnabled && ( {trendsEnabled && (
<ColumnLink <li>
transparent <ColumnLink
to='/explore' transparent
icon='explore' to='/explore'
iconComponent={TrendingUpIcon} icon='explore'
text={intl.formatMessage(messages.explore)} iconComponent={TrendingUpIcon}
id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined} text={intl.formatMessage(messages.explore)}
/> id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined}
/>
</li>
)} )}
{(canViewFeed(signedIn, permissions, localLiveFeedAccess) || {(canViewFeed(signedIn, permissions, localLiveFeedAccess) ||
canViewFeed(signedIn, permissions, remoteLiveFeedAccess)) && ( canViewFeed(signedIn, permissions, remoteLiveFeedAccess)) && (
<ColumnLink <li>
transparent <ColumnLink
to={ transparent
canViewFeed(signedIn, permissions, localLiveFeedAccess) to={
? '/public/local' canViewFeed(signedIn, permissions, localLiveFeedAccess)
: '/public/remote' ? '/public/local'
} : '/public/remote'
icon='globe' }
iconComponent={PublicIcon} icon='globe'
isActive={isFirehoseActive} iconComponent={PublicIcon}
text={intl.formatMessage( isActive={isFirehoseActive}
canViewFeed(signedIn, permissions, localLiveFeedAccess) && text={intl.formatMessage(
canViewFeed(signedIn, permissions, remoteLiveFeedAccess) canViewFeed(signedIn, permissions, localLiveFeedAccess) &&
? messages.firehose canViewFeed(signedIn, permissions, remoteLiveFeedAccess)
: messages.firehose_singular, ? messages.firehose
)} : messages.firehose_singular,
id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined} )}
/> id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined}
/>
</li>
)} )}
{signedIn && ( {signedIn && (
<> <>
<NotificationsLink /> <li>
<NotificationsLink />
</li>
<FollowRequestsLink /> <li>
<FollowRequestsLink />
</li>
<AnnualReportNavItem /> <li>
<AnnualReportNavItem />
</li>
<hr /> <li role='separator' />
<ListPanel /> <ListPanel />
<FollowedTagsPanel /> <FollowedTagsPanel />
<ColumnLink <li>
transparent
to='/favourites'
icon='star'
iconComponent={StarIcon}
activeIconComponent={StarActiveIcon}
text={intl.formatMessage(messages.favourites)}
/>
<ColumnLink
transparent
to='/bookmarks'
icon='bookmarks'
iconComponent={BookmarksIcon}
activeIconComponent={BookmarksActiveIcon}
text={intl.formatMessage(messages.bookmarks)}
/>
{areCollectionsEnabled() && (
<ColumnLink <ColumnLink
transparent transparent
to={`/@${account?.acct}/collections`} to='/favourites'
icon='collections' icon='star'
iconComponent={CollectionsIcon} iconComponent={StarIcon}
activeIconComponent={CollectionsActiveIcon} activeIconComponent={StarActiveIcon}
text={intl.formatMessage(messages.collections)} text={intl.formatMessage(messages.favourites)}
/> />
</li>
<li>
<ColumnLink
transparent
to='/bookmarks'
icon='bookmarks'
iconComponent={BookmarksIcon}
activeIconComponent={BookmarksActiveIcon}
text={intl.formatMessage(messages.bookmarks)}
/>
</li>
{areCollectionsEnabled() && (
<li>
<ColumnLink
transparent
to={`/@${account?.acct}/collections`}
icon='collections'
iconComponent={CollectionsIcon}
activeIconComponent={CollectionsActiveIcon}
text={intl.formatMessage(messages.collections)}
/>
</li>
)} )}
<ColumnLink <li>
transparent <ColumnLink
to='/conversations' transparent
icon='at' to='/conversations'
iconComponent={AlternateEmailIcon} icon='at'
text={intl.formatMessage(messages.direct)} iconComponent={AlternateEmailIcon}
/> text={intl.formatMessage(messages.direct)}
/>
</li>
<hr /> <li role='separator' />
<ColumnLink <li>
transparent <ColumnLink
href='/settings/preferences' transparent
icon='cog' href='/settings/preferences'
iconComponent={SettingsIcon} icon='cog'
text={intl.formatMessage(messages.preferences)} iconComponent={SettingsIcon}
/> text={intl.formatMessage(messages.preferences)}
<ColumnLink />
transparent </li>
onClick={handleOpenSettings} <li>
icon='cogs' <ColumnLink
iconComponent={AdministrationIcon} transparent
text={intl.formatMessage(messages.app_settings)} onClick={handleOpenSettings}
/> icon='cogs'
iconComponent={AdministrationIcon}
text={intl.formatMessage(messages.app_settings)}
/>
</li>
<MoreLink /> <li>
<MoreLink />
</li>
</> </>
)} )}
<div className='navigation-panel__legal'> <li className='navigation-panel__legal'>
<ColumnLink <ColumnLink
transparent transparent
to='/about' to='/about'
@ -408,16 +436,16 @@ export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
text={intl.formatMessage(messages.about)} text={intl.formatMessage(messages.about)}
id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined} id={linknum++ === 0 ? getNavigationSkipLinkId() : undefined}
/> />
</div> </li>
{!signedIn && ( {!signedIn && (
<div className='navigation-panel__sign-in-banner'> <li className='navigation-panel__sign-in-banner'>
<hr /> <hr />
{disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner />} {disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner />}
</div> </li>
)} )}
</div> </ul>
<div className='flex-spacer' /> <div className='flex-spacer' />

3
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@ -3866,7 +3866,8 @@ a.account__display-name {
.navigation-panel, .navigation-panel,
.compose-panel { .compose-panel {
hr { hr,
li[role='separator'] {
flex: 0 0 auto; flex: 0 0 auto;
border: 0; border: 0;
background: transparent; background: transparent;