stevenoh0908/mastodon-sakyey
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Collection share modal cleanup

Browse Source 
Port 03b2f77ad2 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2026-03-02 17:19:13 +01:00
committed by Claire
parent 26ce025df1
commit fe7dc293c4
7 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/flavours/glitch/components/modal_shell/index.tsx
View File

@@ -1,16 +1,14 @@
import classNames from 'classnames'; import classNames from 'classnames';
interface SimpleComponentProps { interface ModalShellProps {
className?: string; className?: string;
children?: React.ReactNode; children?: React.ReactNode;
} }
interface ModalShellComponent extends React.FC<SimpleComponentProps> { export const ModalShell: React.FC<ModalShellProps> = ({
Body: React.FC<SimpleComponentProps>; children,
Actions: React.FC<SimpleComponentProps>; className,
} }) => {
export const ModalShell: ModalShellComponent = ({ children, className }) => {
return ( return (
<div <div
className={classNames( className={classNames(
@@ -24,7 +22,7 @@ export const ModalShell: ModalShellComponent = ({ children, className }) => {
); );
}; };
const ModalShellBody: ModalShellComponent['Body'] = ({ export const ModalShellBody: React.FC<ModalShellProps> = ({
children, children,
className, className,
}) => { }) => {
@@ -39,7 +37,7 @@ const ModalShellBody: ModalShellComponent['Body'] = ({
); );
}; };
const ModalShellActions: ModalShellComponent['Actions'] = ({ export const ModalShellActions: React.FC<ModalShellProps> = ({
children, children,
className, className,
}) => { }) => {
@@ -51,6 +49,3 @@ const ModalShellActions: ModalShellComponent['Actions'] = ({
</div> </div>
); );
}; };
ModalShell.Body = ModalShellBody;
ModalShell.Actions = ModalShellActions;

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

@@ -4,7 +4,11 @@ import { FormattedMessage } from 'react-intl';
import { Button } from '@/flavours/glitch/components/button'; 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 {
ModalShell,
ModalShellActions,
ModalShellBody,
} 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';
@@ -19,7 +23,7 @@ export const AccountFieldModal: FC<{
const handleValueElement = useFieldHtml(field.valueHasEmojis); const handleValueElement = useFieldHtml(field.valueHasEmojis);
return ( return (
<ModalShell> <ModalShell>
<ModalShell.Body> <ModalShellBody>
<EmojiHTML <EmojiHTML
as='h2' as='h2'
htmlString={field.name_emojified} htmlString={field.name_emojified}
@@ -31,12 +35,12 @@ export const AccountFieldModal: FC<{
onElement={handleValueElement} onElement={handleValueElement}
className={classes.fieldValue} className={classes.fieldValue}
/> />
</ModalShell.Body> </ModalShellBody>
<ModalShell.Actions> <ModalShellActions>
<Button onClick={onClose} plain> <Button onClick={onClose} plain>
<FormattedMessage id='lightbox.close' defaultMessage='Close' /> <FormattedMessage id='lightbox.close' defaultMessage='Close' />
</Button> </Button>
</ModalShell.Actions> </ModalShellActions>
</ModalShell> </ModalShell>
); );
}; };

14
app/javascript/flavours/glitch/features/collections/detail/share_modal.tsx
View File

@@ -13,7 +13,11 @@ import { AvatarGroup } from 'flavours/glitch/components/avatar_group';
import { Button } from 'flavours/glitch/components/button'; import { Button } from 'flavours/glitch/components/button';
import { CopyLinkField } from 'flavours/glitch/components/form_fields'; import { CopyLinkField } from 'flavours/glitch/components/form_fields';
import { IconButton } from 'flavours/glitch/components/icon_button'; import { IconButton } from 'flavours/glitch/components/icon_button';
import { ModalShell } from 'flavours/glitch/components/modal_shell'; import {
ModalShell,
ModalShellActions,
ModalShellBody,
} from 'flavours/glitch/components/modal_shell';
import { useAppDispatch } from 'flavours/glitch/store'; import { useAppDispatch } from 'flavours/glitch/store';
import { AuthorNote } from '.'; import { AuthorNote } from '.';
@@ -64,7 +68,7 @@ export const CollectionShareModal: React.FC<{
return ( return (
<ModalShell> <ModalShell>
<ModalShell.Body> <ModalShellBody>
<h1 className={classes.heading}> <h1 className={classes.heading}>
{isNew ? ( {isNew ? (
<FormattedMessage <FormattedMessage
@@ -112,9 +116,9 @@ export const CollectionShareModal: React.FC<{
})} })}
value={collectionLink} value={collectionLink}
/> />
</ModalShell.Body> </ModalShellBody>
<ModalShell.Actions className={classes.actions}> <ModalShellActions className={classes.actions}>
<div className={classes.shareButtonWrapper}> <div className={classes.shareButtonWrapper}>
<Button secondary onClick={handleShareViaPost}> <Button secondary onClick={handleShareViaPost}>
<FormattedMessage <FormattedMessage
@@ -135,7 +139,7 @@ export const CollectionShareModal: React.FC<{
<Button plain onClick={onClose} className={classes.closeButtonMobile}> <Button plain onClick={onClose} className={classes.closeButtonMobile}>
<FormattedMessage id='lightbox.close' defaultMessage='Close' /> <FormattedMessage id='lightbox.close' defaultMessage='Close' />
</Button> </Button>
</ModalShell.Actions> </ModalShellActions>
</ModalShell> </ModalShell>
); );
}; };

14
app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
View File

@@ -3,7 +3,11 @@ import { useCallback } from 'react';
import { FormattedMessage, defineMessages } from 'react-intl'; import { FormattedMessage, defineMessages } from 'react-intl';
import { Button } from 'flavours/glitch/components/button'; import { Button } from 'flavours/glitch/components/button';
import { ModalShell } from 'flavours/glitch/components/modal_shell'; import {
ModalShell,
ModalShellActions,
ModalShellBody,
} from 'flavours/glitch/components/modal_shell';
export interface BaseConfirmationModalProps { export interface BaseConfirmationModalProps {
onClose: () => void; onClose: () => void;
@@ -66,14 +70,14 @@ export const ConfirmationModal: React.FC<
return ( return (
<ModalShell> <ModalShell>
<ModalShell.Body> <ModalShellBody>
<h1 id={titleId}>{title}</h1> <h1 id={titleId}>{title}</h1>
{message && <p>{message}</p>} {message && <p>{message}</p>}
{extraContent ?? children} {extraContent ?? children}
</ModalShell.Body> </ModalShellBody>
<ModalShell.Actions> <ModalShellActions>
<button onClick={onClose} className='link-button' type='button'> <button onClick={onClose} className='link-button' type='button'>
{cancel ?? ( {cancel ?? (
<FormattedMessage <FormattedMessage
@@ -107,7 +111,7 @@ export const ConfirmationModal: React.FC<
{confirm} {confirm}
</Button> </Button>
{/* eslint-enable */} {/* eslint-enable */}
</ModalShell.Actions> </ModalShellActions>
</ModalShell> </ModalShell>
); );
}; };

3
app/javascript/flavours/glitch/features/ui/components/modal_root.jsx
View File

@@ -11,7 +11,6 @@ import {
DomainBlockModal, DomainBlockModal,
ReportModal, ReportModal,
ReportCollectionModal, ReportCollectionModal,
ShareCollectionModal,
SettingsModal, SettingsModal,
EmbedModal, EmbedModal,
ListAdder, ListAdder,
@@ -86,7 +85,7 @@ export const MODAL_COMPONENTS = {
'DOMAIN_BLOCK': DomainBlockModal, 'DOMAIN_BLOCK': DomainBlockModal,
'REPORT': ReportModal, 'REPORT': ReportModal,
'REPORT_COLLECTION': ReportCollectionModal, 'REPORT_COLLECTION': ReportCollectionModal,
'SHARE_COLLECTION': ShareCollectionModal, 'SHARE_COLLECTION': () => import('@/flavours/glitch/features/collections/detail/share_modal').then(module => ({ default: module.CollectionShareModal })),
'SETTINGS': SettingsModal, 'SETTINGS': SettingsModal,
'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }), 'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }),
'ACTIONS': () => Promise.resolve({ default: ActionsModal }), 'ACTIONS': () => Promise.resolve({ default: ActionsModal }),

6
app/javascript/flavours/glitch/features/ui/util/async-components.js
View File

@@ -62,12 +62,6 @@ export function CollectionsEditor() {
); );
} }
export function ShareCollectionModal() {
return import('../../collections/detail/share_modal').then(
module => ({default: module.CollectionShareModal})
);
}
export function Status () { export function Status () {
return import('../../status'); return import('../../status');
} }

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

@@ -6656,6 +6656,10 @@ a.status-card {
line-height: 20px; line-height: 20px;
color: var(--color-text-secondary); color: var(--color-text-secondary);
/*
* Using the :where selector to lower specificity and allow for
* easy customisation of modal heading styles
*/
:where(h1) { :where(h1) {
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;