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

Merge branch 'next_' into 'next'

Browse source 
next

See merge request soapbox-pub/soapbox-fe!1175
This commit is contained in:
Alex Gleason 2022-04-03 18:09:01 +00:00
commit dc28e61d17
14 changed files with 220 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/soapbox/components/ui/column/column.tsx
View file

@ -1,3 +1,4 @@
import classNames from 'classnames';
import React from 'react';
import { useHistory } from 'react-router-dom';
@ -10,10 +11,11 @@ interface IColumn {
label?: string,
transparent?: boolean,
withHeader?: boolean,
className?: string,
}
const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
const { backHref, children, label, transparent = false, withHeader = true } = props;
const { backHref, children, label, transparent = false, withHeader = true, className } = props;
const history = useHistory();
@ -32,11 +34,11 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
const renderChildren = () => {
if (transparent) {
return <div className='bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent'>{children}</div>;
return <div className={classNames('bg-white dark:bg-slate-800 sm:bg-transparent sm:dark:bg-transparent', className)}>{children}</div>;
}
return (
<Card variant='rounded'>
<Card variant='rounded' className={className}>
{withHeader ? (
<CardHeader onBackClick={handleBackClick}>
<CardTitle title={label} />

BIN
app/soapbox/features/directory/components/account_card.js
View file

Binary file not shown.

BIN
app/soapbox/features/export_data/components/csv_exporter.js
View file

Binary file not shown.

BIN
app/soapbox/features/filters/index.js
View file

Binary file not shown.

BIN
app/soapbox/features/import_data/components/csv_importer.js
View file

Binary file not shown.

BIN
app/soapbox/features/ui/components/hotkeys_modal.js
View file

Binary file not shown.

163
app/soapbox/features/ui/components/hotkeys_modal.tsx Normal file
View file

@ -0,0 +1,163 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Modal } from 'soapbox/components/ui';
import { useAppSelector } from 'soapbox/hooks';
import { getFeatures } from 'soapbox/utils/features';
interface IHotkeysModal {
onClose: () => void,
}
const HotkeysModal: React.FC<IHotkeysModal> = ({ onClose }) => {
const features = useAppSelector((state) => getFeatures(state.instance));
return (
<Modal
title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />}
onClose={onClose}
>
<div className='compose-modal__content'>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>r</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td>
</tr>
<tr>
<td><kbd>m</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td>
</tr>
<tr>
<td><kbd>p</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></td>
</tr>
<tr>
<td><kbd>f</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></td>
</tr>
{features.emojiReacts && (
<tr>
<td><kbd>e</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></td>
</tr>
)}
<tr>
<td><kbd>b</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></td>
</tr>
<tr>
<td><kbd>enter</kbd>, <kbd>o</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></td>
</tr>
<tr>
<td><kbd>a</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
{features.spoilers && (
<tr>
<td><kbd>x</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></td>
</tr>
)}
{features.spoilers && (
<tr>
<td><kbd>h</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></td>
</tr>
)}
<tr>
<td><kbd>up</kbd>, <kbd>k</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td>
</tr>
<tr>
<td><kbd>down</kbd>, <kbd>j</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td>
</tr>
<tr>
<td><kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td>
</tr>
<tr>
<td><kbd>alt</kbd> + <kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></td>
</tr>
<tr>
<td><kbd>backspace</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td>
</tr>
<tr>
<td><kbd>s</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td>
</tr>
<tr>
<td><kbd>esc</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>g</kbd> + <kbd>h</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>n</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications column' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>f</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>p</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.pinned' defaultMessage='to open pinned posts list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>u</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>b</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>m</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></td>
</tr>
<tr>
<td><kbd>g</kbd> + <kbd>r</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></td>
</tr>
<tr>
<td><kbd>?</kbd></td>
<td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td>
</tr>
</tbody>
</table>
</div>
</Modal>
);
};
export default HotkeysModal;

BIN
app/soapbox/features/ui/index.js
View file

Binary file not shown.

2
app/styles/about.scss
View file

@ -1105,9 +1105,9 @@ $fluid-breakpoint: $maximum-width + 20px;
}
.brand__tagline {
@apply text-black dark:text-white;
display: block;
width: 470px;
color: var(--primary-text-color);
font-size: 24px;
line-height: 1.4;
margin-top: 25px;

9
app/styles/components/directory.scss
View file

@ -1,10 +1,11 @@
.directory {
&__filter-form {
display: flex;
gap: 30px;
background: var(--foreground-color);
&__column {
padding: 10px 15px;
padding-bottom: 10px;
}
.radio-button {
@ -17,7 +18,6 @@
grid-gap: 10px;
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
width: 100%;
padding: 10px;
transition: opacity 100ms ease-in;
box-sizing: border-box;
@ -118,6 +118,11 @@
overflow: hidden;
text-overflow: ellipsis;
}
.verified-icon div,
.verified-icon svg {
@apply inline;
}
}
}

69
app/styles/components/filters.scss
View file

@ -1,12 +1,4 @@
.filter-settings-panel {
h1 {
font-size: 18px;
line-height: 1.25;
color: var(--primary-text-color);
font-weight: 400;
margin: 20px auto;
}
.item-list article {
border-bottom: 1px solid var(--primary-text-color--faint);
@ -43,62 +35,67 @@
}
}
.input.boolean {
.label_input {
@apply relative pl-7 text-black dark:text-white;
label {
@apply text-sm;
}
&__wrapper {
@apply static;
}
input[type="checkbox"] {
position: absolute;
top: 3px;
left: 0;
}
}
.hint {
@apply block pl-7 text-xs text-gray-500 dark:text-gray-400;
}
}
.filter__container {
padding: 20px;
display: flex;
justify-content: space-between;
font-size: 14px;
@apply flex justify-between py-5 px-2 text-sm text-black dark:text-white;
.filter__phrase,
.filter__contexts,
.filter__details {
padding: 5px 0;
@apply py-1;
}
span.filter__list-label {
padding-right: 5px;
color: var(--primary-text-color--faint);
@apply pr-1 text-gray-500 dark:text-gray-400;
}
span.filter__list-value span {
padding-right: 5px;
text-transform: capitalize;
@apply pr-1 capitalize;
&::after {
content: ',';
content: ",";
}
&:last-of-type {
&::after {
content: '';
content: "";
}
}
}
.filter__delete {
display: flex;
margin: 10px;
align-items: baseline;
cursor: pointer;
height: 20px;
@apply flex items-baseline h-5 m-2.5 cursor-pointer;
span.filter__delete-label {
color: var(--primary-text-color--faint);
font-size: 14px;
font-weight: 800;
@apply text-gray-500 dark:text-gray-400 font-semibold;
}
.filter__delete-icon {
background: none;
color: var(--primary-text-color--faint);
padding: 0 5px;
margin: 0 auto;
font-size: 16px;
@apply px-1 mx-auto text-base text-gray-500 dark:text-gray-400;
}
}
}
// .simple_form select {
// margin-top: 0;
// }
}

15
app/styles/components/radio-button.scss
View file

@ -1,4 +1,5 @@
.radio-button {
@apply text-black dark:text-white;
font-size: 14px;
position: relative;
display: inline-block;
@ -15,10 +16,7 @@
}
&__input {
display: inline-block;
position: relative;
border: 1px solid var(--primary-text-color--faint);
box-sizing: border-box;
@apply inline-block relative box-border border border-solid border-primary-600;
width: 18px;
height: 18px;
flex: 0 0 auto;
@ -28,8 +26,13 @@
vertical-align: middle;
&.checked {
border-color: var(--brand-color);
background: var(--brand-color);
@apply bg-primary-600;
}
&:active,
&:focus,
&:hover {
@apply border-4;
}
}
}

3
app/styles/components/server-info.scss
View file

@ -10,8 +10,7 @@
.info__brand {
.brand h1 {
color: var(--primary-text-color);
font-size: 26px;
@apply text-2xl text-black dark:text-white;
}
.brand__tagline {

8
app/styles/components/status.scss
View file

@ -406,15 +406,9 @@
}
.status__content__spoiler-link {
background: var(--brand-color--med);
@apply bg-primary-100 dark:bg-primary-900 hover:bg-primary-300 dark:hover:bg-primary-600 focus:bg-primary-200 dark:focus:bg-primary-600 text-black dark:text-white hover:no-underline;
transition: 0.2s;
&:hover,
&:focus {
background: hsla(var(--brand-color_hsl), 0.5);
text-decoration: none;
}
&::-moz-focus-inner {
border: 0;
}