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 { interface IColorWithPicker {
buttonId: string, buttonId: string,
label: React.ReactNode,
value: string, value: string,
onChange: ColorChangeHandler, 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 node = useRef<HTMLDivElement>(null);
const [active, setActive] = useState(false); const [active, setActive] = useState(false);
const [placement, setPlacement] = useState<string | null>(null); const [placement, setPlacement] = useState<string | null>(null);
@ -39,8 +38,6 @@ const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, label, value, o
return ( return (
<div> <div>
<label>{label}</label>
<div <div
ref={node} ref={node}
id={buttonId} 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 snackbar from 'soapbox/actions/snackbar';
import List, { ListItem } from 'soapbox/components/list'; import List, { ListItem } from 'soapbox/components/list';
import { Column, Form, FormActions, FormGroup, Input, Textarea, Button } from 'soapbox/components/ui'; 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 Streamfield from 'soapbox/components/ui/streamfield/streamfield';
import ThemeSelector from 'soapbox/features/ui/components/theme-selector'; import ThemeSelector from 'soapbox/features/ui/components/theme-selector';
import { useAppSelector, useAppDispatch } from 'soapbox/hooks'; import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
@ -187,47 +185,42 @@ const SoapboxConfig: React.FC = () => {
<fieldset className='space-y-6' disabled={isLoading}> <fieldset className='space-y-6' disabled={isLoading}>
<SitePreview soapbox={soapbox} /> <SitePreview soapbox={soapbox} />
<HStack space={2}> <FormGroup
<Stack space={2} className='w-1/2'> 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 <ColorWithPicker
buttonId='brand_color' buttonId='brandColor'
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
value={soapbox.brandColor} value={soapbox.brandColor}
onChange={handleColorChange(['brandColor'], (color) => color.hex)} onChange={handleColorChange(['brandColor'], (color) => color.hex)}
/> />
</ListItem>
<ListItem label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}>
<ColorWithPicker <ColorWithPicker
buttonId='accent_color' buttonId='accentColor'
label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}
value={soapbox.accentColor} value={soapbox.accentColor}
onChange={handleColorChange(['accentColor'], (color) => color.hex)} onChange={handleColorChange(['accentColor'], (color) => color.hex)}
/> />
</ListItem>
<div className='input with_label toggle'> </List>
<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>
<FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}> <FormGroup labelText={intl.formatMessage(messages.copyrightFooterLabel)}>
<Input <Input