techhub/mastodon
2
0
Fork 0
Code Activity

Add icon to header of pinned posts carousel in web UI (#34869)

Browse Source
This commit is contained in:
Eugen Rochko
2025-05-31 00:24:34 +02:00
committed by GitHub
parent 1cc853059f
commit 44d71d59ef
2 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/mastodon/components/featured_carousel.tsx
View File

@@ -5,6 +5,7 @@ import {
useLayoutEffect, useLayoutEffect,
useRef, useRef,
useState, useState,
useId,
} from 'react'; } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -17,12 +18,14 @@ import { animated, useSpring } from '@react-spring/web';
import { useDrag } from '@use-gesture/react'; import { useDrag } from '@use-gesture/react';
import { expandAccountFeaturedTimeline } from '@/mastodon/actions/timelines'; import { expandAccountFeaturedTimeline } from '@/mastodon/actions/timelines';
import { Icon } from '@/mastodon/components/icon';
import { IconButton } from '@/mastodon/components/icon_button'; import { IconButton } from '@/mastodon/components/icon_button';
import StatusContainer from '@/mastodon/containers/status_container'; import StatusContainer from '@/mastodon/containers/status_container';
import { usePrevious } from '@/mastodon/hooks/usePrevious'; import { usePrevious } from '@/mastodon/hooks/usePrevious';
import { useAppDispatch, useAppSelector } from '@/mastodon/store'; import { useAppDispatch, useAppSelector } from '@/mastodon/store';
import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react'; import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react'; import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
const messages = defineMessages({ const messages = defineMessages({
previous: { id: 'featured_carousel.previous', defaultMessage: 'Previous' }, previous: { id: 'featured_carousel.previous', defaultMessage: 'Previous' },
@@ -38,6 +41,7 @@ export const FeaturedCarousel: React.FC<{
tagged?: string; tagged?: string;
}> = ({ accountId, tagged }) => { }> = ({ accountId, tagged }) => {
const intl = useIntl(); const intl = useIntl();
const accessibilityId = useId();
// Load pinned statuses // Load pinned statuses
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@@ -120,11 +124,15 @@ export const FeaturedCarousel: React.FC<{
className='featured-carousel' className='featured-carousel'
{...bind()} {...bind()}
aria-roledescription='carousel' aria-roledescription='carousel'
aria-labelledby='featured-carousel-title' aria-labelledby={`${accessibilityId}-title`}
role='region' role='region'
> >
<div className='featured-carousel__header'> <div className='featured-carousel__header'>
<h4 className='featured-carousel__title' id='featured-carousel-title'> <h4
className='featured-carousel__title'
id={`${accessibilityId}-title`}
>
<Icon id='thumb-tack' icon={PushPinIcon} />
<FormattedMessage <FormattedMessage
id='featured_carousel.header' id='featured_carousel.header'
defaultMessage='{count, plural, one {Pinned Post} other {Pinned Posts}}' defaultMessage='{count, plural, one {Pinned Post} other {Pinned Posts}}'

8
app/javascript/styles/mastodon/components.scss
View File

@@ -11074,5 +11074,13 @@ noscript {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
display: flex;
align-items: center;
gap: 4px;
.icon {
width: 16px;
height: 16px;
}
} }
} }