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

[Glitch] Profile redesign: Profile fields feedback

Browse Source 
Port 1e5cad072e5a3785551d70d5af00282a51271c42 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Echo 2026-02-27 14:54:08 +01:00 committed by Claire
parent 398806a2b0
commit 310acf113b
4 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/flavours/glitch/features/account_timeline/components/fields.tsx
View File

@ -118,14 +118,14 @@ const RedesignAccountHeaderFields: FC<{ account: Account }> = ({ account }) => {
<CustomEmojiProvider emojis={emojis}> <CustomEmojiProvider emojis={emojis}>
<dl className={classes.fieldList} ref={wrapperRef}> <dl className={classes.fieldList} ref={wrapperRef}>
{fields.map((field, key) => ( {fields.map((field, key) => (
<FieldRow key={key} field={field} htmlHandlers={htmlHandlers} /> <FieldCard key={key} field={field} htmlHandlers={htmlHandlers} />
))} ))}
</dl> </dl>
</CustomEmojiProvider> </CustomEmojiProvider>
); );
}; };
const FieldRow: FC<{ const FieldCard: FC<{
htmlHandlers: ReturnType<typeof useElementHandledLink>; htmlHandlers: ReturnType<typeof useElementHandledLink>;
field: AccountField; field: AccountField;
}> = ({ htmlHandlers, field }) => { }> = ({ htmlHandlers, field }) => {
@ -183,15 +183,14 @@ const FieldRow: FC<{
ref={wrapperRef} ref={wrapperRef}
> >
{verified_at && ( {verified_at && (
<Icon <span
id='verified'
icon={IconVerified}
className={classes.fieldVerifiedIcon} className={classes.fieldVerifiedIcon}
aria-label={intl.formatMessage(verifyMessage, { title={intl.formatMessage(verifyMessage, {
date: intl.formatDate(verified_at, dateFormatOptions), date: intl.formatDate(verified_at, dateFormatOptions),
})} })}
noFill >
/> <Icon id='verified' icon={IconVerified} noFill />
</span>
)} )}
</MiniCard> </MiniCard>
); );

8
app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss
View File

@ -278,11 +278,17 @@ svg.badgeIcon {
} }
.fieldVerifiedIcon { .fieldVerifiedIcon {
display: block;
position: absolute;
width: 16px; width: 16px;
height: 16px; height: 16px;
position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
> svg {
width: 100%;
height: 100%;
}
} }
.fieldOverflowButton { .fieldOverflowButton {

46
app/javascript/flavours/glitch/features/account_timeline/modals/field_modal.tsx
View File

@ -2,7 +2,9 @@ import type { FC } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Button } from '@/flavours/glitch/components/button';
import { EmojiHTML } from '@/flavours/glitch/components/emoji/html'; import { EmojiHTML } from '@/flavours/glitch/components/emoji/html';
import { ModalShell } from '@/flavours/glitch/components/modal_shell';
import type { AccountField } from '../common'; import type { AccountField } from '../common';
import { useFieldHtml } from '../hooks/useFieldHtml'; import { useFieldHtml } from '../hooks/useFieldHtml';
@ -16,29 +18,25 @@ export const AccountFieldModal: FC<{
const handleLabelElement = useFieldHtml(field.nameHasEmojis); const handleLabelElement = useFieldHtml(field.nameHasEmojis);
const handleValueElement = useFieldHtml(field.valueHasEmojis); const handleValueElement = useFieldHtml(field.valueHasEmojis);
return ( return (
<div className='modal-root__modal safety-action-modal'> <ModalShell>
<div className='safety-action-modal__top'> <ModalShell.Body>
<div className='safety-action-modal__confirmation'> <EmojiHTML
<EmojiHTML as='h2'
as='p' htmlString={field.name_emojified}
htmlString={field.name_emojified} onElement={handleLabelElement}
onElement={handleLabelElement} />
/> <EmojiHTML
<EmojiHTML as='p'
as='p' htmlString={field.value_emojified}
htmlString={field.value_emojified} onElement={handleValueElement}
onElement={handleValueElement} className={classes.fieldValue}
className={classes.fieldValue} />
/> </ModalShell.Body>
</div> <ModalShell.Actions>
</div> <Button onClick={onClose} plain>
<div className='safety-action-modal__bottom'> <FormattedMessage id='lightbox.close' defaultMessage='Close' />
<div className='safety-action-modal__actions'> </Button>
<button onClick={onClose} className='link-button' type='button'> </ModalShell.Actions>
<FormattedMessage id='lightbox.close' defaultMessage='Close' /> </ModalShell>
</button>
</div>
</div>
</div>
); );
}; };

5
app/javascript/flavours/glitch/features/account_timeline/v2/styles.module.scss
View File

@ -7,6 +7,7 @@
border: none; border: none;
background: none; background: none;
padding: 8px 0; padding: 8px 0;
font-size: 15px;
font-weight: 500; font-weight: 500;
display: flex; display: flex;
align-items: center; align-items: center;
@ -41,6 +42,10 @@
align-items: center; align-items: center;
font-size: 15px; font-size: 15px;
} }
[data-color-scheme='dark'] & {
border: 1px solid var(--color-border-primary);
}
} }
.tagsWrapper { .tagsWrapper {