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

SoapboxConfig: put theme items into List

Browse source
This commit is contained in:
Alex Gleason 2022-05-05 18:36:27 -05:00
parent 758b14fd68
commit c14c68cfce
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 28 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/soapbox/features/soapbox_config/components/color-with-picker.tsx
View file

@ -10,12 +10,11 @@ import type { ColorChangeHandler } from 'react-color';
interface IColorWithPicker {
buttonId: string,
label: React.ReactNode,
value: string,
onChange: ColorChangeHandler,
}
const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, label, value, onChange }) => {
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);
@ -39,8 +38,6 @@ const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, label, value, o
return (
<div>
<label>{label}</label>
<div
ref={node}
id={buttonId}

61
app/soapbox/features/soapbox_config/index.tsx
View file

@ -8,8 +8,6 @@ import { uploadMedia } from 'soapbox/actions/media';
import snackbar from 'soapbox/actions/snackbar';
import List, { ListItem } from 'soapbox/components/list';
import { Column, Form, FormActions, FormGroup, Input, Textarea, Button } from 'soapbox/components/ui';
import HStack from 'soapbox/components/ui/hstack/hstack';
import Stack from 'soapbox/components/ui/stack/stack';
import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
@ -187,47 +185,42 @@ const SoapboxConfig: React.FC = () => {
<fieldset className='space-y-6' disabled={isLoading}>
<SitePreview soapbox={soapbox} />
<HStack space={2}>
<Stack space={2} className='w-1/2'>
<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>
<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='brand_color'
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
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='accent_color'
label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
buttonId='accentColor'
value={soapbox.accentColor}
onChange={handleColorChange(['accentColor'], (color) => color.hex)}
/>
<div className='input with_label toggle'>
<div className='label_input'>
<label><FormattedMessage id='soapbox_config.fields.theme_label' defaultMessage='Default theme' /></label>
<ThemeSelector
value={soapbox.defaultSettings.get('themeMode')}
onChange={handleThemeChange(['defaultSettings', 'themeMode'])}
/>
</div>
</div>
</Stack>
<Stack className='w-1/2'>
<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>
</Stack>
</HStack>
</ListItem>
</List>
<FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
<Input