Leatherface/mastodon
0
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2026-03-29 11:11:11 +02:00
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';
interface SimpleComponentProps {
interface ModalShellProps {
className?: string;
children?: React.ReactNode;
}
interface ModalShellComponent extends React.FC<SimpleComponentProps> {
Body: React.FC<SimpleComponentProps>;
Actions: React.FC<SimpleComponentProps>;
}
export const ModalShell: ModalShellComponent = ({ children, className }) => {
export const ModalShell: React.FC<ModalShellProps> = ({
children,
className,
}) => {
return (
<div
className={classNames(
@@ -24,7 +22,7 @@ export const ModalShell: ModalShellComponent = ({ children, className }) => {
);
};
const ModalShellBody: ModalShellComponent['Body'] = ({
export const ModalShellBody: React.FC<ModalShellProps> = ({
children,
className,
}) => {
@@ -39,7 +37,7 @@ const ModalShellBody: ModalShellComponent['Body'] = ({
);
};
const ModalShellActions: ModalShellComponent['Actions'] = ({
export const ModalShellActions: React.FC<ModalShellProps> = ({
children,
className,
}) => {
@@ -51,6 +49,3 @@ const ModalShellActions: ModalShellComponent['Actions'] = ({
</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 { 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 { useFieldHtml } from '../hooks/useFieldHtml';
@@ -19,7 +23,7 @@ export const AccountFieldModal: FC<{
const handleValueElement = useFieldHtml(field.valueHasEmojis);
return (
<ModalShell>
<ModalShell.Body>
<ModalShellBody>
<EmojiHTML
as='h2'
htmlString={field.name_emojified}
@@ -31,12 +35,12 @@ export const AccountFieldModal: FC<{
onElement={handleValueElement}
className={classes.fieldValue}
/>
</ModalShell.Body>
<ModalShell.Actions>
</ModalShellBody>
<ModalShellActions>
<Button onClick={onClose} plain>
<FormattedMessage id='lightbox.close' defaultMessage='Close' />
</Button>
</ModalShell.Actions>
</ModalShellActions>
</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 { CopyLinkField } from 'flavours/glitch/components/form_fields';
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 { AuthorNote } from '.';
@@ -64,7 +68,7 @@ export const CollectionShareModal: React.FC<{
return (
<ModalShell>
<ModalShell.Body>
<ModalShellBody>
<h1 className={classes.heading}>
{isNew ? (
<FormattedMessage
@@ -112,9 +116,9 @@ export const CollectionShareModal: React.FC<{
})}
value={collectionLink}
/>
</ModalShell.Body>
</ModalShellBody>
<ModalShell.Actions className={classes.actions}>
<ModalShellActions className={classes.actions}>
<div className={classes.shareButtonWrapper}>
<Button secondary onClick={handleShareViaPost}>
<FormattedMessage
@@ -135,7 +139,7 @@ export const CollectionShareModal: React.FC<{
<Button plain onClick={onClose} className={classes.closeButtonMobile}>
<FormattedMessage id='lightbox.close' defaultMessage='Close' />
</Button>
</ModalShell.Actions>
</ModalShellActions>
</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 { 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 {
onClose: () => void;
@@ -66,14 +70,14 @@ export const ConfirmationModal: React.FC<
return (
<ModalShell>
<ModalShell.Body>
<ModalShellBody>
<h1 id={titleId}>{title}</h1>
{message && <p>{message}</p>}
{extraContent ?? children}
</ModalShell.Body>
</ModalShellBody>
<ModalShell.Actions>
<ModalShellActions>
<button onClick={onClose} className='link-button' type='button'>
{cancel ?? (
<FormattedMessage
@@ -107,7 +111,7 @@ export const ConfirmationModal: React.FC<
{confirm}
</Button>
{/* eslint-enable */}
</ModalShell.Actions>
</ModalShellActions>
</ModalShell>
);
};

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

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

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

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