bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restyle hotkeys modal

Browse source
This commit is contained in:
marcin mikołajczak 2022-05-17 15:45:38 +00:00
parent b8bcd53d49
commit 417ac96ffb
4 changed files with 85 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
app/soapbox/components/ui/modal/modal.tsx
View file

@ -10,6 +10,19 @@ const messages = defineMessages({
confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' }, confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
}); });
type Widths = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
const widths = {
xs: 'max-w-xs',
sm: 'max-w-sm',
md: 'max-w-base',
lg: 'max-w-lg',
xl: 'max-w-xl',
'2xl': 'max-w-2xl',
'3xl': 'max-w-3xl',
'4xl': 'max-w-4xl',
};
interface IModal { interface IModal {
/** Callback when the modal is cancelled. */ /** Callback when the modal is cancelled. */
cancelAction?: () => void, cancelAction?: () => void,
@ -37,6 +50,7 @@ interface IModal {
skipFocus?: boolean, skipFocus?: boolean,
/** Title text for the modal. */ /** Title text for the modal. */
title: string | React.ReactNode, title: string | React.ReactNode,
width?: Widths,
} }
/** Displays a modal dialog box. */ /** Displays a modal dialog box. */
@ -55,6 +69,7 @@ const Modal: React.FC<IModal> = ({
secondaryText, secondaryText,
skipFocus = false, skipFocus = false,
title, title,
width = 'xl',
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const buttonRef = React.useRef<HTMLButtonElement>(null); const buttonRef = React.useRef<HTMLButtonElement>(null);
@ -66,7 +81,7 @@ const Modal: React.FC<IModal> = ({
}, [skipFocus, buttonRef]); }, [skipFocus, buttonRef]);
return ( return (
<div data-testid='modal' className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto'> <div data-testid='modal' className={classNames('block w-full p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
<div className='sm:flex sm:items-start w-full justify-between'> <div className='sm:flex sm:items-start w-full justify-between'>
<div className='w-full'> <div className='w-full'>
<div <div

125
app/soapbox/features/ui/components/hotkeys_modal.tsx
View file

@ -9,6 +9,18 @@ interface IHotkeysModal {
onClose: () => void, onClose: () => void,
} }
const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<kbd className='px-1.5 py-1 bg-primary-50 dark:bg-slate-700 border border-solid border-primary-200 rounded-md dark:border-slate-500 text-xs font-sans'>
{children}
</kbd>
);
const TableCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<td className='pb-3 px-2'>
{children}
</td>
);
const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => { const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
const features = useAppSelector((state) => getFeatures(state.instance)); const features = useAppSelector((state) => getFeatures(state.instance));
@ -16,142 +28,143 @@ const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
<Modal <Modal
title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />} title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />}
onClose={onClose} onClose={onClose}
width='4xl'
> >
<div className='compose-modal__content'> <div className='flex flex-col lg:flex-row text-xs'>
<table> <table>
<thead> <thead>
<tr> <tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th> <th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><kbd>r</kbd></td> <TableCell><Hotkey>r</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>m</kbd></td> <TableCell><Hotkey>m</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>p</kbd></td> <TableCell><Hotkey>p</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>f</kbd></td> <TableCell><Hotkey>f</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></TableCell>
</tr> </tr>
{features.emojiReacts && ( {features.emojiReacts && (
<tr> <tr>
<td><kbd>e</kbd></td> <TableCell><Hotkey>e</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></TableCell>
</tr> </tr>
)} )}
<tr> <tr>
<td><kbd>b</kbd></td> <TableCell><Hotkey>b</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>enter</kbd>, <kbd>o</kbd></td> <TableCell><Hotkey>enter</Hotkey>, <Hotkey>o</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>a</kbd></td> <TableCell><Hotkey>a</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' /></TableCell>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table> <table>
<thead> <thead>
<tr> <tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th> <th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{features.spoilers && ( {features.spoilers && (
<tr> <tr>
<td><kbd>x</kbd></td> <TableCell><Hotkey>x</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></TableCell>
</tr> </tr>
)} )}
{features.spoilers && ( {features.spoilers && (
<tr> <tr>
<td><kbd>h</kbd></td> <TableCell><Hotkey>h</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></TableCell>
</tr> </tr>
)} )}
<tr> <tr>
<td><kbd>up</kbd>, <kbd>k</kbd></td> <TableCell><Hotkey>up</Hotkey>, <Hotkey>k</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>down</kbd>, <kbd>j</kbd></td> <TableCell><Hotkey>down</Hotkey>, <Hotkey>j</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>n</kbd></td> <TableCell><Hotkey>n</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>alt</kbd> + <kbd>n</kbd></td> <TableCell><Hotkey>alt</Hotkey> + <Hotkey>n</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>backspace</kbd></td> <TableCell><Hotkey>backspace</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>s</kbd></td> <TableCell><Hotkey>s</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>esc</kbd></td> <TableCell><Hotkey>esc</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></TableCell>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<table> <table>
<thead> <thead>
<tr> <tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th> <th className='pb-2 font-bold'><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><kbd>g</kbd> + <kbd>h</kbd></td> <TableCell><Hotkey>g</Hotkey> + <Hotkey>h</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>g</kbd> + <kbd>n</kbd></td> <TableCell><Hotkey>g</Hotkey> + <Hotkey>n</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>g</kbd> + <kbd>f</kbd></td> <TableCell><Hotkey>g</Hotkey> + <Hotkey>f</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>g</kbd> + <kbd>p</kbd></td> <TableCell><Hotkey>g</Hotkey> + <Hotkey>p</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>g</kbd> + <kbd>u</kbd></td> <TableCell><Hotkey>g</Hotkey> + <Hotkey>u</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>g</kbd> + <kbd>b</kbd></td> <TableCell><Hotkey>g</Hotkey> + <Hotkey>b</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>g</kbd> + <kbd>m</kbd></td> <TableCell><Hotkey>g</Hotkey> + <Hotkey>m</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>g</kbd> + <kbd>r</kbd></td> <TableCell><Hotkey>g</Hotkey> + <Hotkey>r</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></TableCell>
</tr> </tr>
<tr> <tr>
<td><kbd>?</kbd></td> <TableCell><Hotkey>?</Hotkey></TableCell>
<td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td> <TableCell><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></TableCell>
</tr> </tr>
</tbody> </tbody>
</table> </table>

1
app/styles/application.scss
View file

@ -43,7 +43,6 @@
@import 'components/user-panel'; @import 'components/user-panel';
@import 'components/compose-form'; @import 'components/compose-form';
@import 'components/sidebar-menu'; @import 'components/sidebar-menu';
@import 'components/hotkeys-modal';
@import 'components/emoji-reacts'; @import 'components/emoji-reacts';
@import 'components/status'; @import 'components/status';
@import 'components/reply-indicator'; @import 'components/reply-indicator';

51
app/styles/components/hotkeys-modal.scss
View file

@ -1,51 +0,0 @@
.hotkeys-modal {
padding: 8px 0 0;
overflow: hidden;
background-color: var(--background-color);
border-radius: 6px;
flex-direction: column;
@media screen and (max-width: 960px) {
height: 90vh;
}
.compose-modal__content {
background-color: var(--background-color);
margin: 5px;
@media screen and (max-width: 960px) {
flex-direction: column;
overflow: hidden;
overflow-y: scroll;
height: calc(100% - 80px);
-webkit-overflow-scrolling: touch;
}
}
table {
thead {
display: block;
padding-left: 10px;
margin-bottom: 10px;
color: var(--primary-text-color);
font-size: 16px;
font-weight: 600;
}
tr {
font-size: 12px;
}
td {
padding: 0 10px 8px;
}
kbd {
display: inline-block;
padding: 2px 8px;
background-color: var(--brand-color--med);
border: 1px solid var(--brand-color--med);
border-radius: 4px;
}
}
}