Merge branch 'soapbox-config' into 'develop'
Overhaul SoapboxConfig See merge request soapbox-pub/soapbox-fe!1315
This commit is contained in:
Alex Gleason
commit
e734c7c967
27 changed files with 939 additions and 168 deletions
|
|
@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
|
|||
|
||||
interface IFormGroup {
|
||||
/** Input label message. */
|
||||
labelText: React.ReactNode,
|
||||
labelText?: React.ReactNode,
|
||||
/** Input hint message. */
|
||||
hintText?: React.ReactNode,
|
||||
/** Input errors. */
|
||||
|
|
@ -26,13 +26,15 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<label
|
||||
htmlFor={formFieldId}
|
||||
data-testid='form-group-label'
|
||||
className='block text-sm font-medium text-gray-700 dark:text-gray-400'
|
||||
>
|
||||
{labelText}
|
||||
</label>
|
||||
{labelText && (
|
||||
<label
|
||||
htmlFor={formFieldId}
|
||||
data-testid='form-group-label'
|
||||
className='block text-sm font-medium text-gray-700 dark:text-gray-400'
|
||||
>
|
||||
{labelText}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className='mt-1 dark:text-white'>
|
||||
{firstChild}
|
||||
|
|
@ -47,11 +49,11 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
|
|||
</p>
|
||||
)}
|
||||
|
||||
{hintText ? (
|
||||
{hintText && (
|
||||
<p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-400'>
|
||||
{hintText}
|
||||
</p>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const messages = defineMessages({
|
|||
hidePassword: { id: 'input.password.hide_password', defaultMessage: 'Hide password' },
|
||||
});
|
||||
|
||||
interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly'> {
|
||||
interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onChange' | 'type' | 'autoComplete' | 'autoCorrect' | 'autoCapitalize' | 'required' | 'disabled' | 'onClick' | 'readOnly' | 'min' | 'pattern'> {
|
||||
/** Put the cursor into the input on mount. */
|
||||
autoFocus?: boolean,
|
||||
/** The initial text in the input. */
|
||||
|
|
@ -27,11 +27,11 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
|
|||
/** Text to display before a value is entered. */
|
||||
placeholder?: string,
|
||||
/** Text in the input. */
|
||||
value?: string,
|
||||
value?: string | number,
|
||||
/** Change event handler for the input. */
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
|
||||
/** HTML input type. */
|
||||
type: 'text' | 'email' | 'tel' | 'password',
|
||||
type: 'text' | 'number' | 'email' | 'tel' | 'password',
|
||||
}
|
||||
|
||||
/** Form input element. */
|
||||
|
|
|
|||
|
|
@ -12,13 +12,19 @@ const messages = defineMessages({
|
|||
remove: { id: 'streamfield.remove', defaultMessage: 'Remove' },
|
||||
});
|
||||
|
||||
/** Type of the inner Streamfield input component. */
|
||||
export type StreamfieldComponent<T> = React.ComponentType<{
|
||||
value: T,
|
||||
onChange: (value: T) => void,
|
||||
}>;
|
||||
|
||||
interface IStreamfield {
|
||||
/** Array of values for the streamfield. */
|
||||
values: any[],
|
||||
/** Input label message. */
|
||||
labelText?: React.ReactNode,
|
||||
label?: React.ReactNode,
|
||||
/** Input hint message. */
|
||||
hintText?: React.ReactNode,
|
||||
hint?: React.ReactNode,
|
||||
/** Callback to add an item. */
|
||||
onAddItem?: () => void,
|
||||
/** Callback to remove an item by index. */
|
||||
|
|
@ -26,7 +32,7 @@ interface IStreamfield {
|
|||
/** Callback when values are changed. */
|
||||
onChange: (values: any[]) => void,
|
||||
/** Input to render for each value. */
|
||||
component: React.ComponentType<{ onChange: (value: any) => void, value: any }>,
|
||||
component: StreamfieldComponent<any>,
|
||||
/** Maximum number of allowed inputs. */
|
||||
maxItems?: number,
|
||||
}
|
||||
|
|
@ -34,8 +40,8 @@ interface IStreamfield {
|
|||
/** List of inputs that can be added or removed. */
|
||||
const Streamfield: React.FC<IStreamfield> = ({
|
||||
values,
|
||||
labelText,
|
||||
hintText,
|
||||
label,
|
||||
hint,
|
||||
onAddItem,
|
||||
onRemoveItem,
|
||||
onChange,
|
||||
|
|
@ -55,26 +61,28 @@ const Streamfield: React.FC<IStreamfield> = ({
|
|||
return (
|
||||
<Stack space={4}>
|
||||
<Stack>
|
||||
{labelText && <Text size='sm' weight='medium'>{labelText}</Text>}
|
||||
{hintText && <Text size='xs' theme='muted'>{hintText}</Text>}
|
||||
{label && <Text size='sm' weight='medium'>{label}</Text>}
|
||||
{hint && <Text size='xs' theme='muted'>{hint}</Text>}
|
||||
</Stack>
|
||||
|
||||
<Stack>
|
||||
{values.map((value, i) => (
|
||||
<HStack space={2} alignItems='center'>
|
||||
<Component key={i} onChange={handleChange(i)} value={value} />
|
||||
{onRemoveItem && (
|
||||
<IconButton
|
||||
iconClassName='w-4 h-4'
|
||||
className='bg-transparent text-gray-400 hover:text-gray-600'
|
||||
src={require('@tabler/icons/icons/x.svg')}
|
||||
onClick={() => onRemoveItem(i)}
|
||||
title={intl.formatMessage(messages.remove)}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
))}
|
||||
</Stack>
|
||||
{(values.length > 0) && (
|
||||
<Stack>
|
||||
{values.map((value, i) => (
|
||||
<HStack space={2} alignItems='center'>
|
||||
<Component key={i} onChange={handleChange(i)} value={value} />
|
||||
{onRemoveItem && (
|
||||
<IconButton
|
||||
iconClassName='w-4 h-4'
|
||||
className='bg-transparent text-gray-400 hover:text-gray-600'
|
||||
src={require('@tabler/icons/icons/x.svg')}
|
||||
onClick={() => onRemoveItem(i)}
|
||||
title={intl.formatMessage(messages.remove)}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{onAddItem && (
|
||||
<Button
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
|
||||
interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled'> {
|
||||
interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows'> {
|
||||
/** Put the cursor into the input on mount. */
|
||||
autoFocus?: boolean,
|
||||
/** The initial text in the input. */
|
||||
|
|
@ -16,11 +16,13 @@ interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElemen
|
|||
value?: string,
|
||||
/** Whether the device should autocomplete text in this textarea. */
|
||||
autoComplete?: string,
|
||||
/** Whether to display the textarea in red. */
|
||||
hasError?: boolean,
|
||||
}
|
||||
|
||||
/** Textarea with custom styles. */
|
||||
const Textarea = React.forwardRef(
|
||||
({ isCodeEditor = false, ...props }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
|
||||
({ isCodeEditor = false, hasError = false, ...props }: ITextarea, ref: React.ForwardedRef<HTMLTextAreaElement>) => {
|
||||
return (
|
||||
<textarea
|
||||
{...props}
|
||||
|
|
@ -29,6 +31,7 @@ const Textarea = React.forwardRef(
|
|||
'dark:bg-slate-800 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md':
|
||||
true,
|
||||
'font-mono': isCodeEditor,
|
||||
'text-red-600 border-red-600': hasError,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,8 +11,10 @@ import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soap
|
|||
import { normalizeAccount } from 'soapbox/normalizers';
|
||||
import resizeImage from 'soapbox/utils/resize_image';
|
||||
|
||||
import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
|
||||
import Streamfield from '../../components/ui/streamfield/streamfield';
|
||||
import { Button, Column, Form, FormActions, FormGroup, Input, Textarea } from '../../components/ui';
|
||||
import HStack from '../../components/ui/hstack/hstack';
|
||||
import Stack from '../../components/ui/stack/stack';
|
||||
import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
|
||||
|
||||
import ProfilePreview from './components/profile-preview';
|
||||
|
||||
|
|
@ -147,12 +149,7 @@ const accountToCredentials = (account: Account): AccountCredentials => {
|
|||
};
|
||||
};
|
||||
|
||||
interface IProfileField {
|
||||
value: AccountCredentialsField,
|
||||
onChange: (field: AccountCredentialsField) => void,
|
||||
}
|
||||
|
||||
const ProfileField: React.FC<IProfileField> = ({ value, onChange }) => {
|
||||
const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({ value, onChange }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> => {
|
||||
|
|
@ -399,7 +396,7 @@ const EditProfile: React.FC = () => {
|
|||
|
||||
{/* HACK: wrap these checkboxes in a .simple_form container so they get styled (for now) */}
|
||||
{/* Need a either move, replace, or refactor these checkboxes. */}
|
||||
<div className='simple_form'>
|
||||
<Stack space={2} className='simple_form'>
|
||||
{features.followRequests && (
|
||||
<Checkbox
|
||||
label={<FormattedMessage id='edit_profile.fields.locked_label' defaultMessage='Lock account' />}
|
||||
|
|
@ -453,12 +450,12 @@ const EditProfile: React.FC = () => {
|
|||
onChange={handleCheckboxChange('accepts_email_list')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
{features.profileFields && (
|
||||
<Streamfield
|
||||
labelText={<FormattedMessage id='edit_profile.fields.meta_fields_label' defaultMessage='Profile fields' />}
|
||||
hintText={<FormattedMessage id='edit_profile.hints.meta_fields' defaultMessage='You can have up to {count, plural, one {# custom field} other {# custom fields}} displayed on your profile.' values={{ count: maxFields }} />}
|
||||
label={<FormattedMessage id='edit_profile.fields.meta_fields_label' defaultMessage='Profile fields' />}
|
||||
hint={<FormattedMessage id='edit_profile.hints.meta_fields' defaultMessage='You can have up to {count, plural, one {# custom field} other {# custom fields}} displayed on your profile.' values={{ count: maxFields }} />}
|
||||
values={data.fields_attributes || []}
|
||||
onChange={handleFieldsChange}
|
||||
onAddItem={handleAddField}
|
||||
|
|
|
|||
|
|
@ -79,6 +79,12 @@ interface ISimpleInput {
|
|||
hint?: React.ReactNode,
|
||||
error?: boolean,
|
||||
onChange?: React.ChangeEventHandler,
|
||||
min?: number,
|
||||
max?: number,
|
||||
pattern?: string,
|
||||
name?: string,
|
||||
placeholder?: string,
|
||||
value?: string | number,
|
||||
}
|
||||
|
||||
export const SimpleInput: React.FC<ISimpleInput> = (props) => {
|
||||
|
|
@ -95,6 +101,9 @@ export const SimpleInput: React.FC<ISimpleInput> = (props) => {
|
|||
interface ISimpleTextarea {
|
||||
label?: React.ReactNode,
|
||||
hint?: React.ReactNode,
|
||||
value?: string,
|
||||
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,
|
||||
rows?: number,
|
||||
}
|
||||
|
||||
export const SimpleTextarea: React.FC<ISimpleTextarea> = (props) => {
|
||||
|
|
@ -149,6 +158,7 @@ export const FieldsGroup: React.FC = ({ children }) => (
|
|||
interface ICheckbox {
|
||||
label?: React.ReactNode,
|
||||
hint?: React.ReactNode,
|
||||
name?: string,
|
||||
checked?: boolean,
|
||||
onChange?: React.ChangeEventHandler<HTMLInputElement>,
|
||||
}
|
||||
|
|
@ -227,8 +237,11 @@ export const SelectDropdown: React.FC<ISelectDropdown> = (props) => {
|
|||
};
|
||||
|
||||
interface ITextInput {
|
||||
name?: string,
|
||||
onChange?: React.ChangeEventHandler,
|
||||
label?: React.ReactNode,
|
||||
placeholder?: string,
|
||||
value?: string,
|
||||
}
|
||||
|
||||
export const TextInput: React.FC<ITextInput> = props => (
|
||||
|
|
@ -243,7 +256,15 @@ FileChooser.defaultProps = {
|
|||
accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
|
||||
};
|
||||
|
||||
export const FileChooserLogo: React.FC = props => (
|
||||
interface IFileChooserLogo {
|
||||
label?: React.ReactNode,
|
||||
hint?: React.ReactNode,
|
||||
name?: string,
|
||||
accept?: string[],
|
||||
onChange: React.ChangeEventHandler<HTMLInputElement>,
|
||||
}
|
||||
|
||||
export const FileChooserLogo: React.FC<IFileChooserLogo> = props => (
|
||||
<SimpleInput type='file' {...props} />
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { SketchPicker, ColorChangeHandler } from 'react-color';
|
||||
|
||||
import { isMobile } from 'soapbox/is_mobile';
|
||||
|
||||
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
||||
|
||||
interface IColorPicker {
|
||||
style?: React.CSSProperties,
|
||||
value: string,
|
||||
onChange: ColorChangeHandler,
|
||||
onClose: () => void,
|
||||
}
|
||||
|
||||
const ColorPicker: React.FC<IColorPicker> = ({ style, value, onClose, onChange }) => {
|
||||
const node = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleDocumentClick = (e: MouseEvent | TouchEvent) => {
|
||||
if (node.current && !node.current.contains(e.target as HTMLElement)) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('click', handleDocumentClick, false);
|
||||
document.addEventListener('touchend', handleDocumentClick, listenerOptions);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', handleDocumentClick);
|
||||
};
|
||||
});
|
||||
|
||||
const pickerStyle: React.CSSProperties = {
|
||||
...style,
|
||||
marginLeft: isMobile(window.innerWidth) ? '20px' : '12px',
|
||||
position: 'absolute',
|
||||
zIndex: 1000,
|
||||
};
|
||||
|
||||
return (
|
||||
<div id='SketchPickerContainer' ref={node} style={pickerStyle}>
|
||||
<SketchPicker color={value} disableAlpha onChange={onChange} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorPicker;
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
// @ts-ignore: TODO: upgrade react-overlays. v3.1 and above have TS definitions
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
|
||||
import { isMobile } from 'soapbox/is_mobile';
|
||||
|
||||
import ColorPicker from './color-picker';
|
||||
|
||||
import type { ColorChangeHandler } from 'react-color';
|
||||
|
||||
interface IColorWithPicker {
|
||||
buttonId: string,
|
||||
value: string,
|
||||
onChange: ColorChangeHandler,
|
||||
}
|
||||
|
||||
const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, value, onChange }) => {
|
||||
const node = useRef<HTMLDivElement>(null);
|
||||
const [active, setActive] = useState(false);
|
||||
const [placement, setPlacement] = useState<string | null>(null);
|
||||
|
||||
const hidePicker = () => {
|
||||
setActive(false);
|
||||
};
|
||||
|
||||
const showPicker = () => {
|
||||
setActive(true);
|
||||
setPlacement(isMobile(window.innerWidth) ? 'bottom' : 'right');
|
||||
};
|
||||
|
||||
const onToggle: React.MouseEventHandler = () => {
|
||||
if (active) {
|
||||
hidePicker();
|
||||
} else {
|
||||
showPicker();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
ref={node}
|
||||
id={buttonId}
|
||||
className='w-8 h-8 rounded-md'
|
||||
role='presentation'
|
||||
style={{ background: value }}
|
||||
title={value}
|
||||
onClick={onToggle}
|
||||
/>
|
||||
|
||||
<Overlay show={active} placement={placement} target={node.current}>
|
||||
<ColorPicker value={value} onChange={onChange} onClose={hidePicker} />
|
||||
</Overlay>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColorWithPicker;
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import { useIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import { HStack, Input } from 'soapbox/components/ui';
|
||||
import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
|
||||
|
||||
import type { CryptoAddress } from 'soapbox/types/soapbox';
|
||||
|
||||
const messages = defineMessages({
|
||||
ticker: { id: 'soapbox_config.crypto_address.meta_fields.ticker_placeholder', defaultMessage: 'Ticker' },
|
||||
address: { id: 'soapbox_config.crypto_address.meta_fields.address_placeholder', defaultMessage: 'Address' },
|
||||
note: { id: 'soapbox_config.crypto_address.meta_fields.note_placeholder', defaultMessage: 'Note (optional)' },
|
||||
});
|
||||
|
||||
const CryptoAddressInput: StreamfieldComponent<CryptoAddress> = ({ value, onChange }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleChange = (key: 'ticker' | 'address' | 'note'): React.ChangeEventHandler<HTMLInputElement> => {
|
||||
return e => {
|
||||
onChange(value.set(key, e.currentTarget.value));
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<HStack space={2} grow>
|
||||
<Input
|
||||
type='text'
|
||||
outerClassName='w-1/6 flex-grow'
|
||||
value={value.ticker}
|
||||
onChange={handleChange('ticker')}
|
||||
placeholder={intl.formatMessage(messages.ticker)}
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
outerClassName='w-3/6 flex-grow'
|
||||
value={value.address}
|
||||
onChange={handleChange('address')}
|
||||
placeholder={intl.formatMessage(messages.address)}
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
outerClassName='w-2/6 flex-grow'
|
||||
value={value.note}
|
||||
onChange={handleChange('note')}
|
||||
placeholder={intl.formatMessage(messages.note)}
|
||||
/>
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default CryptoAddressInput;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import React from 'react';
|
||||
import { useIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import { HStack, Input } from 'soapbox/components/ui';
|
||||
import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
|
||||
|
||||
import type { FooterItem } from 'soapbox/types/soapbox';
|
||||
|
||||
const messages = defineMessages({
|
||||
label: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
|
||||
url: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||
});
|
||||
|
||||
const PromoPanelInput: StreamfieldComponent<FooterItem> = ({ value, onChange }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleChange = (key: 'title' | 'url'): React.ChangeEventHandler<HTMLInputElement> => {
|
||||
return e => {
|
||||
onChange(value.set(key, e.currentTarget.value));
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<HStack space={2} grow>
|
||||
<Input
|
||||
type='text'
|
||||
outerClassName='w-full flex-grow'
|
||||
placeholder={intl.formatMessage(messages.label)}
|
||||
value={value.title}
|
||||
onChange={handleChange('title')}
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
outerClassName='w-full flex-grow'
|
||||
placeholder={intl.formatMessage(messages.url)}
|
||||
value={value.url}
|
||||
onChange={handleChange('url')}
|
||||
/>
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromoPanelInput;
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
|
||||
import IconPickerDropdown from './icon_picker_dropdown';
|
||||
|
||||
interface IIconPicker {
|
||||
value: string,
|
||||
onChange: React.ChangeEventHandler,
|
||||
}
|
||||
|
||||
const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
|
||||
return (
|
||||
<div className='mt-1 relative rounded-md shadow-sm dark:bg-slate-800 border border-solid border-gray-300 dark:border-gray-600 rounded-md'>
|
||||
<IconPickerDropdown value={value} onPickEmoji={onChange} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconPicker;
|
||||
Binary file not shown.
|
|
@ -0,0 +1,55 @@
|
|||
import React from 'react';
|
||||
import { useIntl, defineMessages } from 'react-intl';
|
||||
|
||||
import { HStack, Input } from 'soapbox/components/ui';
|
||||
import { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
|
||||
|
||||
import IconPicker from './icon-picker';
|
||||
|
||||
import type { PromoPanelItem } from 'soapbox/types/soapbox';
|
||||
|
||||
const messages = defineMessages({
|
||||
icon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
|
||||
label: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
|
||||
url: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||
});
|
||||
|
||||
const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const handleIconChange = (icon: any) => {
|
||||
onChange(value.set('icon', icon.id));
|
||||
};
|
||||
|
||||
const handleChange = (key: 'text' | 'url'): React.ChangeEventHandler<HTMLInputElement> => {
|
||||
return e => {
|
||||
onChange(value.set(key, e.currentTarget.value));
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<HStack space={2} alignItems='center' grow>
|
||||
<IconPicker
|
||||
value={value.icon}
|
||||
onChange={handleIconChange}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type='text'
|
||||
outerClassName='w-full flex-grow'
|
||||
placeholder={intl.formatMessage(messages.label)}
|
||||
value={value.text}
|
||||
onChange={handleChange('text')}
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
outerClassName='w-full flex-grow'
|
||||
placeholder={intl.formatMessage(messages.url)}
|
||||
value={value.url}
|
||||
onChange={handleChange('url')}
|
||||
/>
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromoPanelInput;
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import classNames from 'classnames';
|
||||
import React, { useMemo } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { defaultSettings } from 'soapbox/actions/settings';
|
||||
import BackgroundShapes from 'soapbox/features/ui/components/background_shapes';
|
||||
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
|
||||
import { generateThemeCss } from 'soapbox/utils/theme';
|
||||
|
||||
interface ISitePreview {
|
||||
/** Raw Soapbox configuration. */
|
||||
soapbox: any,
|
||||
}
|
||||
|
||||
/** Renders a preview of the website's style with the configuration applied. */
|
||||
const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
|
||||
const soapboxConfig = useMemo(() => normalizeSoapboxConfig(soapbox), [soapbox]);
|
||||
const settings = defaultSettings.mergeDeep(soapboxConfig.defaultSettings);
|
||||
|
||||
const dark = settings.get('themeMode') === 'dark';
|
||||
|
||||
const bodyClass = classNames(
|
||||
'site-preview',
|
||||
'relative flex justify-center align-center text-base',
|
||||
'border border-solid border-gray-200 dark:border-slate-600',
|
||||
'h-40 rounded-lg overflow-hidden',
|
||||
{
|
||||
'bg-white': !dark,
|
||||
'bg-slate-900': dark,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={bodyClass}>
|
||||
<style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
|
||||
<BackgroundShapes position='absolute' />
|
||||
|
||||
<div className='absolute p-2 rounded-lg overflow-hidden bg-accent-500 text-white self-center z-20'>
|
||||
<FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
|
||||
</div>
|
||||
|
||||
<div className={classNames('flex absolute inset-0 shadow z-10 h-12 lg:h-16', {
|
||||
'bg-white': !dark,
|
||||
'bg-slate-800': dark,
|
||||
})}
|
||||
>
|
||||
<img alt='Logo' className='h-5 lg:h-6 self-center px-2' src={soapboxConfig.logo} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default SitePreview;
|
||||
Binary file not shown.
Binary file not shown.
386
app/soapbox/features/soapbox_config/index.tsx
Normal file
386
app/soapbox/features/soapbox_config/index.tsx
Normal file
|
|
@ -0,0 +1,386 @@
|
|||
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
import Toggle from 'react-toggle';
|
||||
|
||||
import { updateConfig } from 'soapbox/actions/admin';
|
||||
import { uploadMedia } from 'soapbox/actions/media';
|
||||
import snackbar from 'soapbox/actions/snackbar';
|
||||
import List, { ListItem } from 'soapbox/components/list';
|
||||
import {
|
||||
Column,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Form,
|
||||
FormActions,
|
||||
FormGroup,
|
||||
Input,
|
||||
Textarea,
|
||||
Button,
|
||||
} from 'soapbox/components/ui';
|
||||
import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
|
||||
import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
|
||||
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
|
||||
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
|
||||
|
||||
import Accordion from '../ui/components/accordion';
|
||||
|
||||
import ColorWithPicker from './components/color-with-picker';
|
||||
import CryptoAddressInput from './components/crypto-address-input';
|
||||
import FooterLinkInput from './components/footer-link-input';
|
||||
import PromoPanelInput from './components/promo-panel-input';
|
||||
import SitePreview from './components/site-preview';
|
||||
|
||||
import type { ColorChangeHandler, ColorResult } from 'react-color';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
|
||||
saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
|
||||
copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
|
||||
cryptoDonatePanelLimitLabel: { id: 'soapbox_config.crypto_donate_panel_limit.meta_fields.limit_placeholder', defaultMessage: 'Number of items to display in the crypto homepage widget' },
|
||||
customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||
rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Advanced: Edit raw JSON data' },
|
||||
rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Edit the settings data directly. Changes made directly to the JSON file will override the form fields above. Click "Save" to apply your changes.' },
|
||||
verifiedCanEditNameLabel: { id: 'soapbox_config.verified_can_edit_name_label', defaultMessage: 'Allow verified users to edit their own display name.' },
|
||||
displayFqnLabel: { id: 'soapbox_config.display_fqn_label', defaultMessage: 'Display domain (eg @user@domain) for local accounts.' },
|
||||
greentextLabel: { id: 'soapbox_config.greentext_label', defaultMessage: 'Enable greentext support' },
|
||||
promoPanelIconsLink: { id: 'soapbox_config.hints.promo_panel_icons.link', defaultMessage: 'Soapbox Icons List' },
|
||||
authenticatedProfileLabel: { id: 'soapbox_config.authenticated_profile_label', defaultMessage: 'Profiles require authentication' },
|
||||
authenticatedProfileHint: { id: 'soapbox_config.authenticated_profile_hint', defaultMessage: 'Users must be logged-in to view replies and media on user profiles.' },
|
||||
singleUserModeLabel: { id: 'soapbox_config.single_user_mode_label', defaultMessage: 'Single user mode' },
|
||||
singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
|
||||
singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
|
||||
singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
|
||||
});
|
||||
|
||||
type ValueGetter<T = Element> = (e: React.ChangeEvent<T>) => any;
|
||||
type ColorValueGetter = (color: ColorResult, event: React.ChangeEvent<HTMLInputElement>) => any;
|
||||
type Template = ImmutableMap<string, any>;
|
||||
type ConfigPath = Array<string | number>;
|
||||
type ThemeChangeHandler = (theme: string) => void;
|
||||
|
||||
const templates: Record<string, Template> = {
|
||||
promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
|
||||
footerItem: ImmutableMap({ title: '', url: '' }),
|
||||
cryptoAddress: ImmutableMap({ ticker: '', address: '', note: '' }),
|
||||
};
|
||||
|
||||
const SoapboxConfig: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const initialData = useAppSelector(state => state.soapbox);
|
||||
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
const [data, setData] = useState(initialData);
|
||||
const [jsonEditorExpanded, setJsonEditorExpanded] = useState(false);
|
||||
const [rawJSON, setRawJSON] = useState<string>(JSON.stringify(initialData, null, 2));
|
||||
const [jsonValid, setJsonValid] = useState(true);
|
||||
|
||||
const soapbox = useMemo(() => {
|
||||
return normalizeSoapboxConfig(data);
|
||||
}, [data]);
|
||||
|
||||
const setConfig = (path: ConfigPath, value: any) => {
|
||||
const newData = data.setIn(path, value);
|
||||
setData(newData);
|
||||
setJsonValid(true);
|
||||
};
|
||||
|
||||
const putConfig = (newData: any) => {
|
||||
setData(newData);
|
||||
setJsonValid(true);
|
||||
};
|
||||
|
||||
const getParams = () => {
|
||||
return [{
|
||||
group: ':pleroma',
|
||||
key: ':frontend_configurations',
|
||||
value: [{
|
||||
tuple: [':soapbox_fe', data.toJS()],
|
||||
}],
|
||||
}];
|
||||
};
|
||||
|
||||
const handleSubmit: React.FormEventHandler = (e) => {
|
||||
dispatch(updateConfig(getParams())).then(() => {
|
||||
setLoading(false);
|
||||
dispatch(snackbar.success(intl.formatMessage(messages.saved)));
|
||||
}).catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
setLoading(true);
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleChange = (path: ConfigPath, getValue: ValueGetter<any>): React.ChangeEventHandler => {
|
||||
return e => {
|
||||
setConfig(path, getValue(e));
|
||||
};
|
||||
};
|
||||
|
||||
const handleThemeChange = (path: ConfigPath): ThemeChangeHandler => {
|
||||
return theme => {
|
||||
setConfig(path, theme);
|
||||
};
|
||||
};
|
||||
|
||||
const handleColorChange = (path: ConfigPath, getValue: ColorValueGetter): ColorChangeHandler => {
|
||||
return (color, event) => {
|
||||
setConfig(path, getValue(color, event));
|
||||
};
|
||||
};
|
||||
|
||||
const handleFileChange = (path: ConfigPath): React.ChangeEventHandler<HTMLInputElement> => {
|
||||
return e => {
|
||||
const data = new FormData();
|
||||
const file = e.target.files?.item(0);
|
||||
|
||||
if (file) {
|
||||
data.append('file', file);
|
||||
|
||||
dispatch(uploadMedia(data)).then(({ data }: any) => {
|
||||
handleChange(path, () => data.url)(e);
|
||||
}).catch(console.error);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const handleStreamItemChange = (path: ConfigPath) => {
|
||||
return (values: any[]) => {
|
||||
setConfig(path, ImmutableList(values));
|
||||
};
|
||||
};
|
||||
|
||||
const addStreamItem = (path: ConfigPath, template: Template) => {
|
||||
return () => {
|
||||
const items = data.getIn(path);
|
||||
setConfig(path, items.push(template));
|
||||
};
|
||||
};
|
||||
|
||||
const deleteStreamItem = (path: ConfigPath) => {
|
||||
return (i: number) => {
|
||||
const newData = data.deleteIn([...path, i]);
|
||||
setData(newData);
|
||||
};
|
||||
};
|
||||
|
||||
const handleEditJSON: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
|
||||
setRawJSON(e.target.value);
|
||||
};
|
||||
|
||||
const toggleJSONEditor = (expanded: boolean) => setJsonEditorExpanded(expanded);
|
||||
|
||||
useEffect(() => {
|
||||
putConfig(initialData);
|
||||
}, [initialData]);
|
||||
|
||||
useEffect(() => {
|
||||
setRawJSON(JSON.stringify(data, null, 2));
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const data = fromJS(JSON.parse(rawJSON));
|
||||
putConfig(data);
|
||||
} catch {
|
||||
setJsonValid(false);
|
||||
}
|
||||
}, [rawJSON]);
|
||||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.heading)}>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<fieldset className='space-y-6' disabled={isLoading}>
|
||||
<SitePreview soapbox={soapbox} />
|
||||
|
||||
<FormGroup
|
||||
labelText={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
|
||||
hintText={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
|
||||
>
|
||||
<input
|
||||
type='file'
|
||||
onChange={handleFileChange(['logo'])}
|
||||
className='text-sm'
|
||||
accept='image/svg,image/png'
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle title={<FormattedMessage id='soapbox_config.headings.theme' defaultMessage='Theme' />} />
|
||||
</CardHeader>
|
||||
|
||||
<List>
|
||||
<ListItem label={<FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' />}>
|
||||
<ThemeSelector
|
||||
value={soapbox.defaultSettings.get('themeMode')}
|
||||
onChange={handleThemeChange(['defaultSettings', 'themeMode'])}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}>
|
||||
<ColorWithPicker
|
||||
buttonId='brandColor'
|
||||
value={soapbox.brandColor}
|
||||
onChange={handleColorChange(['brandColor'], (color) => color.hex)}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}>
|
||||
<ColorWithPicker
|
||||
buttonId='accentColor'
|
||||
value={soapbox.accentColor}
|
||||
onChange={handleColorChange(['accentColor'], (color) => color.hex)}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle title={<FormattedMessage id='soapbox_config.headings.options' defaultMessage='Options' />} />
|
||||
</CardHeader>
|
||||
|
||||
<List>
|
||||
<ListItem label={intl.formatMessage(messages.verifiedCanEditNameLabel)}>
|
||||
<Toggle
|
||||
checked={soapbox.verifiedCanEditName === true}
|
||||
onChange={handleChange(['verifiedCanEditName'], (e) => e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={intl.formatMessage(messages.displayFqnLabel)}>
|
||||
<Toggle
|
||||
checked={soapbox.displayFqn === true}
|
||||
onChange={handleChange(['displayFqn'], (e) => e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem label={intl.formatMessage(messages.greentextLabel)}>
|
||||
<Toggle
|
||||
checked={soapbox.greentext === true}
|
||||
onChange={handleChange(['greentext'], (e) => e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
label={intl.formatMessage(messages.authenticatedProfileLabel)}
|
||||
hint={intl.formatMessage(messages.authenticatedProfileHint)}
|
||||
>
|
||||
<Toggle
|
||||
checked={soapbox.authenticatedProfile === true}
|
||||
onChange={handleChange(['authenticatedProfile'], (e) => e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem
|
||||
label={intl.formatMessage(messages.singleUserModeLabel)}
|
||||
hint={intl.formatMessage(messages.singleUserModeHint)}
|
||||
>
|
||||
<Toggle
|
||||
checked={soapbox.singleUserMode === true}
|
||||
onChange={handleChange(['singleUserMode'], (e) => e.target.checked)}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
{soapbox.get('singleUserMode') && (
|
||||
<ListItem label={intl.formatMessage(messages.singleUserModeProfileLabel)}>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder={intl.formatMessage(messages.singleUserModeProfileHint)}
|
||||
value={soapbox.singleUserModeProfile}
|
||||
onChange={handleChange(['singleUserModeProfile'], (e) => e.target.value)}
|
||||
/>
|
||||
</ListItem>
|
||||
)}
|
||||
</List>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle title={<FormattedMessage id='soapbox_config.headings.navigation' defaultMessage='Navigation' />} />
|
||||
</CardHeader>
|
||||
|
||||
<Streamfield
|
||||
label={<FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' />}
|
||||
hint={<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the right panel of the timelines page.' />}
|
||||
component={PromoPanelInput}
|
||||
values={soapbox.promoPanel.items.toArray()}
|
||||
onChange={handleStreamItemChange(['promoPanel', 'items'])}
|
||||
onAddItem={addStreamItem(['promoPanel', 'items'], templates.promoPanel)}
|
||||
onRemoveItem={deleteStreamItem(['promoPanel', 'items'])}
|
||||
/>
|
||||
|
||||
<Streamfield
|
||||
label={<FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' />}
|
||||
hint={<FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />}
|
||||
component={FooterLinkInput}
|
||||
values={soapbox.navlinks.get('homeFooter')?.toArray() || []}
|
||||
onChange={handleStreamItemChange(['navlinks', 'homeFooter'])}
|
||||
onAddItem={addStreamItem(['navlinks', 'homeFooter'], templates.footerItem)}
|
||||
onRemoveItem={deleteStreamItem(['navlinks', 'homeFooter'])}
|
||||
/>
|
||||
|
||||
<FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
|
||||
value={soapbox.copyright}
|
||||
onChange={handleChange(['copyright'], (e) => e.target.value)}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle title={<FormattedMessage id='soapbox_config.headings.cryptocurrency' defaultMessage='Cryptocurrency' />} />
|
||||
</CardHeader>
|
||||
|
||||
<Streamfield
|
||||
label={<FormattedMessage id='soapbox_config.fields.crypto_addresses_label' defaultMessage='Cryptocurrency addresses' />}
|
||||
hint={<FormattedMessage id='soapbox_config.hints.crypto_addresses' defaultMessage='Add cryptocurrency addresses so users of your site can donate to you. Order matters, and you must use lowercase ticker values.' />}
|
||||
component={CryptoAddressInput}
|
||||
values={soapbox.cryptoAddresses.toArray()}
|
||||
onChange={handleStreamItemChange(['cryptoAddresses'])}
|
||||
onAddItem={addStreamItem(['cryptoAddresses'], templates.cryptoAddress)}
|
||||
onRemoveItem={deleteStreamItem(['cryptoAddresses'])}
|
||||
/>
|
||||
|
||||
<FormGroup labelText={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}>
|
||||
<Input
|
||||
type='number'
|
||||
min={0}
|
||||
pattern='[0-9]+'
|
||||
placeholder={intl.formatMessage(messages.cryptoDonatePanelLimitLabel)}
|
||||
value={soapbox.cryptoDonatePanel.get('limit')}
|
||||
onChange={handleChange(['cryptoDonatePanel', 'limit'], (e) => Number(e.target.value))}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
||||
<CardHeader>
|
||||
<CardTitle title={<FormattedMessage id='soapbox_config.headings.advanced' defaultMessage='Advanced' />} />
|
||||
</CardHeader>
|
||||
|
||||
<Accordion
|
||||
headline={intl.formatMessage(messages.rawJSONLabel)}
|
||||
expanded={jsonEditorExpanded}
|
||||
onToggle={toggleJSONEditor}
|
||||
>
|
||||
<FormGroup hintText={intl.formatMessage(messages.rawJSONHint)}>
|
||||
<Textarea
|
||||
value={rawJSON}
|
||||
onChange={handleEditJSON}
|
||||
hasError={!jsonValid}
|
||||
isCodeEditor
|
||||
rows={12}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Accordion>
|
||||
</fieldset>
|
||||
|
||||
<FormActions>
|
||||
<Button type='submit'>
|
||||
<FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
|
||||
</Button>
|
||||
</FormActions>
|
||||
</Form>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
export default SoapboxConfig;
|
||||
|
|
@ -1,8 +1,14 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
|
||||
interface IBackgroundShapes {
|
||||
/** Whether the shapes should be absolute positioned or fixed. */
|
||||
position?: 'fixed' | 'absolute',
|
||||
}
|
||||
|
||||
/** Gradient that appears in the background of the UI. */
|
||||
const BackgroundShapes: React.FC = () => (
|
||||
<div className='fixed top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none'>
|
||||
const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
|
||||
<div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
|
||||
<div className='flex-none flex justify-center'>
|
||||
<svg width='1754' height='1336' xmlns='http://www.w3.org/2000/svg'>
|
||||
<defs>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,9 @@ const LinkFooter: React.FC = (): JSX.Element => {
|
|||
{features.federating && (
|
||||
<FooterLink to='/domain_blocks'><FormattedMessage id='navigation_bar.domain_blocks' defaultMessage='Domain blocks' /></FooterLink>
|
||||
)}
|
||||
{account.admin && (
|
||||
<FooterLink to='/soapbox/config'><FormattedMessage id='navigation_bar.soapbox_config' defaultMessage='Soapbox config' /></FooterLink>
|
||||
)}
|
||||
{account.locked && (
|
||||
<FooterLink to='/follow_requests'><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></FooterLink>
|
||||
)}
|
||||
|
|
|
|||
63
app/soapbox/features/ui/components/theme-selector.tsx
Normal file
63
app/soapbox/features/ui/components/theme-selector.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import { Icon } from 'soapbox/components/ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
|
||||
dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
|
||||
system: { id: 'theme_toggle.system', defaultMessage: 'System' },
|
||||
});
|
||||
|
||||
interface IThemeSelector {
|
||||
value: string,
|
||||
onChange: (value: string) => void,
|
||||
}
|
||||
|
||||
/** Pure theme selector. */
|
||||
const ThemeSelector: React.FC<IThemeSelector> = ({ value, onChange }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
const themeIconSrc = useMemo(() => {
|
||||
switch (value) {
|
||||
case 'system':
|
||||
return require('@tabler/icons/icons/device-desktop.svg');
|
||||
case 'light':
|
||||
return require('@tabler/icons/icons/sun.svg');
|
||||
case 'dark':
|
||||
return require('@tabler/icons/icons/moon.svg');
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
const handleChange: React.ChangeEventHandler<HTMLSelectElement> = e => {
|
||||
onChange(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<label>
|
||||
<div className='relative rounded-md shadow-sm'>
|
||||
<div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
|
||||
<Icon src={themeIconSrc} className='h-4 w-4 text-gray-400' />
|
||||
</div>
|
||||
|
||||
<select
|
||||
onChange={handleChange}
|
||||
defaultValue={value}
|
||||
className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
|
||||
>
|
||||
<option value='system'>{intl.formatMessage(messages.system)}</option>
|
||||
<option value='light'>{intl.formatMessage(messages.light)}</option>
|
||||
<option value='dark'>{intl.formatMessage(messages.dark)}</option>
|
||||
</select>
|
||||
|
||||
<div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
|
||||
<Icon src={require('@tabler/icons/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThemeSelector;
|
||||
|
|
@ -1,65 +1,25 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import React from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { changeSetting } from 'soapbox/actions/settings';
|
||||
import { Icon } from 'soapbox/components/ui';
|
||||
import { useSettings } from 'soapbox/hooks';
|
||||
|
||||
const messages = defineMessages({
|
||||
light: { id: 'theme_toggle.light', defaultMessage: 'Light' },
|
||||
dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
|
||||
system: { id: 'theme_toggle.system', defaultMessage: 'System' },
|
||||
});
|
||||
import ThemeSelector from './theme-selector';
|
||||
|
||||
interface IThemeToggle {
|
||||
showLabel?: boolean,
|
||||
}
|
||||
|
||||
const ThemeToggle = ({ showLabel }: IThemeToggle) => {
|
||||
const intl = useIntl();
|
||||
/** Stateful theme selector. */
|
||||
const ThemeToggle: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const themeMode = useSettings().get('themeMode');
|
||||
|
||||
const onToggle = (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
dispatch(changeSetting(['themeMode'], event.target.value));
|
||||
const handleChange = (themeMode: string) => {
|
||||
dispatch(changeSetting(['themeMode'], themeMode));
|
||||
};
|
||||
|
||||
const themeIconSrc = useMemo(() => {
|
||||
switch (themeMode) {
|
||||
case 'system':
|
||||
return require('@tabler/icons/icons/device-desktop.svg');
|
||||
case 'light':
|
||||
return require('@tabler/icons/icons/sun.svg');
|
||||
case 'dark':
|
||||
return require('@tabler/icons/icons/moon.svg');
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}, [themeMode]);
|
||||
|
||||
return (
|
||||
<label>
|
||||
<div className='relative rounded-md shadow-sm'>
|
||||
<div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
|
||||
<Icon src={themeIconSrc} className='h-4 w-4 text-gray-400' />
|
||||
</div>
|
||||
|
||||
<select
|
||||
onChange={onToggle}
|
||||
defaultValue={themeMode}
|
||||
className='focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-800 dark:border-gray-600 block w-full pl-8 pr-12 sm:text-sm border-gray-300 rounded-md'
|
||||
>
|
||||
<option value='system'>{intl.formatMessage(messages.system)}</option>
|
||||
<option value='light'>{intl.formatMessage(messages.light)}</option>
|
||||
<option value='dark'>{intl.formatMessage(messages.dark)}</option>
|
||||
</select>
|
||||
|
||||
<div className='absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none'>
|
||||
<Icon src={require('@tabler/icons/icons/chevron-down.svg')} className='h-4 w-4 text-gray-400' />
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<ThemeSelector
|
||||
value={themeMode}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export const SoapboxConfigRecord = ImmutableRecord({
|
|||
colors: ImmutableMap(),
|
||||
copyright: `♥${new Date().getFullYear()}. Copying is an act of love. Please copy and share.`,
|
||||
customCss: ImmutableList<string>(),
|
||||
defaultSettings: ImmutableMap(),
|
||||
defaultSettings: ImmutableMap<string, any>(),
|
||||
extensions: ImmutableMap(),
|
||||
greentext: false,
|
||||
promoPanel: PromoPanelRecord(),
|
||||
|
|
@ -171,6 +171,12 @@ const normalizePromoPanel = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap
|
|||
return soapboxConfig.set('promoPanel', promoPanel.set('items', items));
|
||||
};
|
||||
|
||||
const normalizeFooterLinks = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
|
||||
const path = ['navlinks', 'homeFooter'];
|
||||
const items = (soapboxConfig.getIn(path, ImmutableList()) as ImmutableList<any>).map(FooterItemRecord);
|
||||
return soapboxConfig.setIn(path, items);
|
||||
};
|
||||
|
||||
export const normalizeSoapboxConfig = (soapboxConfig: Record<string, any>) => {
|
||||
return SoapboxConfigRecord(
|
||||
ImmutableMap(fromJS(soapboxConfig)).withMutations(soapboxConfig => {
|
||||
|
|
@ -178,6 +184,7 @@ export const normalizeSoapboxConfig = (soapboxConfig: Record<string, any>) => {
|
|||
normalizeAccentColor(soapboxConfig);
|
||||
normalizeColors(soapboxConfig);
|
||||
normalizePromoPanel(soapboxConfig);
|
||||
normalizeFooterLinks(soapboxConfig);
|
||||
maybeAddMissingColors(soapboxConfig);
|
||||
normalizeCryptoAddresses(soapboxConfig);
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
}
|
||||
|
||||
.emoji-mart-emoji-native {
|
||||
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
|
||||
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji", sans-serif;
|
||||
}
|
||||
|
||||
.emoji-mart-no-results {
|
||||
|
|
@ -260,3 +260,38 @@
|
|||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.font-icon-picker {
|
||||
.emoji-mart-search {
|
||||
// Search doesn't work. Hide it for now.
|
||||
display: none;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.emoji-mart-category-label > span {
|
||||
padding: 9px 6px 5px;
|
||||
}
|
||||
|
||||
.emoji-mart-scroll {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.emoji-mart-search-icon {
|
||||
right: 18px;
|
||||
}
|
||||
|
||||
.emoji-mart-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 18px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fa-hack {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,10 +36,6 @@ code {
|
|||
|
||||
.simple_form {
|
||||
.input {
|
||||
+ .input {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -546,28 +542,6 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
&__font_icon_picker {
|
||||
font-size: 14px;
|
||||
|
||||
.font-icon-button {
|
||||
padding: 9px;
|
||||
border: 1px solid var(--highlight-text-color);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 38px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.fa {
|
||||
font-size: 18px;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -802,36 +776,6 @@ code {
|
|||
transform: translateY(7px);
|
||||
}
|
||||
|
||||
.site-preview {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
height: 164px;
|
||||
border: 1px solid;
|
||||
margin-bottom: 40px;
|
||||
background: var(--background-color);
|
||||
|
||||
* {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.input.with_label.toggle .label_input {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -34,13 +34,6 @@
|
|||
background-color: var(--brand-color) !important;
|
||||
}
|
||||
|
||||
body,
|
||||
.site-preview {
|
||||
--accent-color_h: 345;
|
||||
--accent-color_s: 100%;
|
||||
--accent-color_l: 64%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.tabs-bar__link--logo {
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@
|
|||
"@types/object-assign": "^4.0.30",
|
||||
"@types/object-fit-images": "^3.2.3",
|
||||
"@types/qrcode.react": "^1.0.2",
|
||||
"@types/react-color": "^3.0.6",
|
||||
"@types/react-datepicker": "^4.4.0",
|
||||
"@types/react-helmet": "^6.1.5",
|
||||
"@types/react-motion": "^0.0.32",
|
||||
|
|
|
|||
15
yarn.lock
15
yarn.lock
|
|
@ -2184,6 +2184,14 @@
|
|||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-color@^3.0.6":
|
||||
version "3.0.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
|
||||
integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
"@types/reactcss" "*"
|
||||
|
||||
"@types/react-datepicker@^4.4.0":
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.4.0.tgz#0072e18536ad305fd57786f9b6f9e499eed2b475"
|
||||
|
|
@ -2272,6 +2280,13 @@
|
|||
"@types/scheduler" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/reactcss@*":
|
||||
version "1.2.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
|
||||
integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/redux-mock-store@^1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.3.tgz#895de4a364bc4836661570aec82f2eef5989d1fb"
|
||||
|
|
|
|||
Loading…
Reference in a new issue