Merge branch 'admin_cfg' into 'develop'
Create frontend settings dashboard. Fixes #259 Closes #259 See merge request soapbox-pub/soapbox-fe!118
This commit is contained in:
Alex Gleason
commit
1f5f2e4c8f
|
|
@ -0,0 +1,55 @@
|
|||
{
|
||||
"configs": [
|
||||
{
|
||||
"group": ":pleroma",
|
||||
"key": ":frontend_configurations",
|
||||
"value": [
|
||||
{
|
||||
"tuple": [
|
||||
":soapbox_fe",
|
||||
{
|
||||
"logo": "blob:http://localhost:3036/0cdfa863-6889-4199-b870-4942cedd364f",
|
||||
"banner": "blob:http://localhost:3036/a835afed-6078-45bd-92b4-7ffd858c3eca",
|
||||
"brandColor": "#254f92",
|
||||
"customCss": [
|
||||
"/instance/static/custom.css"
|
||||
],
|
||||
"promoPanel": {
|
||||
"items": [
|
||||
{
|
||||
"icon": "globe",
|
||||
"text": "blog",
|
||||
"url": "https://teci.world/blog"
|
||||
},
|
||||
{
|
||||
"icon": "globe",
|
||||
"text": "book",
|
||||
"url": "https://teci.world/book"
|
||||
}
|
||||
]
|
||||
},
|
||||
"extensions": {
|
||||
"patron": false
|
||||
},
|
||||
"defaultSettings": {
|
||||
"autoPlayGif": false
|
||||
},
|
||||
"navlinks": {
|
||||
"homeFooter": [
|
||||
{
|
||||
"title": "about",
|
||||
"url": "/instance/about/index.html"
|
||||
},
|
||||
{
|
||||
"title": "tos",
|
||||
"url": "/instance/about/tos.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -261,6 +261,7 @@
|
|||
"morefollows.following_label": "…and {count} more {count, plural, one {follow} other {follows}} on remote sites.",
|
||||
"mute_modal.hide_notifications": "Hide notifications from this user?",
|
||||
"navigation_bar.admin_settings": "Admin settings",
|
||||
"navigation_bar.soapbox_config": "Soapbox config",
|
||||
"navigation_bar.blocks": "Blocked users",
|
||||
"navigation_bar.community_timeline": "Local timeline",
|
||||
"navigation_bar.compose": "Compose new post",
|
||||
|
|
@ -738,6 +739,7 @@
|
|||
"morefollows.following_label": "…and {count} more {count, plural, one {follow} other {follows}} on remote sites.",
|
||||
"mute_modal.hide_notifications": "Hide notifications from this user?",
|
||||
"navigation_bar.admin_settings": "Admin settings",
|
||||
"navigation_bar.soapbox_config": "Soapbox config",
|
||||
"navigation_bar.blocks": "Blocked users",
|
||||
"navigation_bar.community_timeline": "Local timeline",
|
||||
"navigation_bar.compose": "Compose new post",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"logo": "blob:http://localhost:3036/0cdfa863-6889-4199-b870-4942cedd364f",
|
||||
"banner": "blob:http://localhost:3036/a835afed-6078-45bd-92b4-7ffd858c3eca",
|
||||
"brandColor": "#254f92",
|
||||
"customCss": [
|
||||
"/instance/static/custom.css"
|
||||
],
|
||||
"promoPanel": {
|
||||
"items": [
|
||||
{
|
||||
"icon": "globe",
|
||||
"text": "blog",
|
||||
"url": "https://teci.world/blog"
|
||||
},
|
||||
{
|
||||
"icon": "globe",
|
||||
"text": "book",
|
||||
"url": "https://teci.world/book"
|
||||
}
|
||||
]
|
||||
},
|
||||
"extensions": {
|
||||
"patron": false
|
||||
},
|
||||
"defaultSettings": {
|
||||
"autoPlayGif": false
|
||||
},
|
||||
"navlinks": {
|
||||
"homeFooter": [
|
||||
{
|
||||
"title": "about",
|
||||
"url": "/instance/about/index.html"
|
||||
},
|
||||
{
|
||||
"title": "tos",
|
||||
"url": "/instance/about/tos.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import api from '../api';
|
||||
|
||||
export const ADMIN_CONFIG_UPDATE_REQUEST = 'ADMIN_CONFIG_UPDATE_REQUEST';
|
||||
export const ADMIN_CONFIG_UPDATE_SUCCESS = 'ADMIN_CONFIG_UPDATE_SUCCESS';
|
||||
export const ADMIN_CONFIG_UPDATE_FAIL = 'ADMIN_CONFIG_UPDATE_FAIL';
|
||||
|
||||
export function updateAdminConfig(params) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch({ type: ADMIN_CONFIG_UPDATE_REQUEST });
|
||||
return api(getState)
|
||||
.post('/api/pleroma/admin/config', params)
|
||||
.then(response => {
|
||||
dispatch({ type: ADMIN_CONFIG_UPDATE_SUCCESS, config: response.data });
|
||||
}).catch(error => {
|
||||
dispatch({ type: ADMIN_CONFIG_UPDATE_FAIL, error });
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
@ -7,12 +7,12 @@ import { useEmoji } from './emojis';
|
|||
import resizeImage from '../utils/resize_image';
|
||||
import { importFetchedAccounts } from './importer';
|
||||
import { updateTimeline, dequeueTimeline } from './timelines';
|
||||
import { showAlertForError } from './alerts';
|
||||
import { showAlert } from './alerts';
|
||||
import { showAlert, showAlertForError } from './alerts';
|
||||
import { defineMessages } from 'react-intl';
|
||||
import { openModal, closeModal } from './modal';
|
||||
import { getSettings } from './settings';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
import { uploadMedia } from './media';
|
||||
|
||||
let cancelFetchComposeSuggestionsAccounts;
|
||||
|
||||
|
|
@ -239,12 +239,14 @@ export function uploadCompose(files) {
|
|||
// Account for disparity in size of original image and resized data
|
||||
total += file.size - f.size;
|
||||
|
||||
return api(getState).post('/api/v1/media', data, {
|
||||
onUploadProgress: function({ loaded }){
|
||||
const onUploadProgress = function({ loaded }) {
|
||||
progress[i] = loaded;
|
||||
dispatch(uploadComposeProgress(progress.reduce((a, v) => a + v, 0), total));
|
||||
},
|
||||
}).then(({ data }) => dispatch(uploadComposeSuccess(data)));
|
||||
};
|
||||
|
||||
return dispatch(uploadMedia(data, onUploadProgress))
|
||||
.then(({ data }) => dispatch(uploadComposeSuccess(data)));
|
||||
|
||||
}).catch(error => dispatch(uploadComposeFail(error)));
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import api from '../api';
|
||||
|
||||
const noOp = () => {};
|
||||
|
||||
export function uploadMedia(data, onUploadProgress = noOp) {
|
||||
return function(dispatch, getState) {
|
||||
return api(getState).post('/api/v1/media', data, {
|
||||
onUploadProgress: onUploadProgress,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
@ -1,9 +1,44 @@
|
|||
import api from '../api';
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
|
||||
export const SOAPBOX_CONFIG_REQUEST_SUCCESS = 'SOAPBOX_CONFIG_REQUEST_SUCCESS';
|
||||
export const SOAPBOX_CONFIG_REQUEST_FAIL = 'SOAPBOX_CONFIG_REQUEST_FAIL';
|
||||
|
||||
export const defaultConfig = ImmutableMap({
|
||||
logo: '',
|
||||
banner: '',
|
||||
brandColor: '#0482d8', // Azure
|
||||
customCss: ImmutableList(),
|
||||
promoPanel: ImmutableMap({
|
||||
items: ImmutableList(),
|
||||
}),
|
||||
extensions: ImmutableMap(),
|
||||
defaultSettings: ImmutableMap(),
|
||||
copyright: '♥2020. Copying is an act of love. Please copy and share.',
|
||||
navlinks: ImmutableMap({
|
||||
homeFooter: ImmutableList(),
|
||||
}),
|
||||
});
|
||||
|
||||
export function getSoapboxConfig(state) {
|
||||
return defaultConfig.mergeDeep(state.get('soapbox'));
|
||||
}
|
||||
|
||||
export function fetchSoapboxConfig() {
|
||||
return (dispatch, getState) => {
|
||||
api(getState).get('/api/pleroma/frontend_configurations').then(response => {
|
||||
if (response.data.soapbox_fe) {
|
||||
dispatch(importSoapboxConfig(response.data.soapbox_fe));
|
||||
} else {
|
||||
dispatch(fetchSoapboxJson());
|
||||
}
|
||||
}).catch(error => {
|
||||
dispatch(fetchSoapboxJson());
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function fetchSoapboxJson() {
|
||||
return (dispatch, getState) => {
|
||||
api(getState).get('/instance/soapbox.json').then(response => {
|
||||
dispatch(importSoapboxConfig(response.data));
|
||||
|
|
@ -22,7 +57,7 @@ export function importSoapboxConfig(soapboxConfig) {
|
|||
|
||||
export function soapboxConfigFail(error) {
|
||||
if (!error.response) {
|
||||
console.error('soapbox.json parsing error: ' + error);
|
||||
console.error('Unable to obtain soapbox configuration: ' + error);
|
||||
}
|
||||
return {
|
||||
type: SOAPBOX_CONFIG_REQUEST_FAIL,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
|||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { changeSetting } from 'soapbox/actions/settings';
|
||||
import { Checkbox } from '../../forms';
|
||||
import { Checkbox } from 'soapbox/features/forms';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
settings: state.get('settings'),
|
||||
|
|
@ -29,6 +29,7 @@ const messages = defineMessages({
|
|||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
|
||||
admin_settings: { id: 'navigation_bar.admin_settings', defaultMessage: 'Admin settings' },
|
||||
soapbox_config: { id: 'navigation_bar.soapbox_config', defaultMessage: 'Soapbox config' },
|
||||
security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
|
||||
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
|
||||
lists: { id: 'column.lists', defaultMessage: 'Lists' },
|
||||
|
|
@ -172,10 +173,14 @@ class SidebarMenu extends ImmutablePureComponent {
|
|||
<Icon id='filter' />
|
||||
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.filters)}</span>
|
||||
</NavLink>
|
||||
{ isStaff && <a className='sidebar-menu-item' href={'/pleroma/admin/'} target='_blank' onClick={onClose}>
|
||||
{ isStaff && <a className='sidebar-menu-item' href='/pleroma/admin' target='_blank' onClick={onClose}>
|
||||
<Icon id='shield' />
|
||||
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.admin_settings)}</span>
|
||||
</a> }
|
||||
{ isStaff && <NavLink className='sidebar-menu-item' to='/soapbox/config' onClick={onClose}>
|
||||
<Icon id='cog' />
|
||||
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.soapbox_config)}</span>
|
||||
</NavLink> }
|
||||
<NavLink className='sidebar-menu-item' to='/settings/preferences' onClick={onClose}>
|
||||
<Icon id='cog' />
|
||||
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.preferences)}</span>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import { fetchSoapboxConfig } from 'soapbox/actions/soapbox';
|
|||
import { fetchMe } from 'soapbox/actions/me';
|
||||
import PublicLayout from 'soapbox/features/public_layout';
|
||||
import { getSettings } from 'soapbox/actions/settings';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
import { generateThemeCss } from 'soapbox/utils/theme';
|
||||
import messages from 'soapbox/locales/messages';
|
||||
|
||||
|
|
@ -42,6 +43,7 @@ const mapStateToProps = (state) => {
|
|||
const account = state.getIn(['accounts', me]);
|
||||
const showIntroduction = account ? state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION : false;
|
||||
const settings = getSettings(state);
|
||||
const soapboxConfig = getSoapboxConfig(state);
|
||||
const locale = settings.get('locale');
|
||||
|
||||
return {
|
||||
|
|
@ -52,9 +54,9 @@ const mapStateToProps = (state) => {
|
|||
dyslexicFont: settings.get('dyslexicFont'),
|
||||
demetricator: settings.get('demetricator'),
|
||||
locale: validLocale(locale) ? locale : 'en',
|
||||
themeCss: generateThemeCss(state.getIn(['soapbox', 'brandColor'])),
|
||||
themeCss: generateThemeCss(soapboxConfig.get('brandColor')),
|
||||
themeMode: settings.get('themeMode'),
|
||||
customCss: state.getIn(['soapbox', 'customCss']),
|
||||
customCss: soapboxConfig.get('customCss'),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { fetchAccountIdentityProofs } from '../../actions/identity_proofs';
|
|||
import MissingIndicator from 'soapbox/components/missing_indicator';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { fetchPatronAccount } from '../../actions/patron';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
const emptyList = ImmutableList();
|
||||
|
||||
|
|
@ -21,6 +22,7 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) =
|
|||
const me = state.get('me');
|
||||
const accounts = state.getIn(['accounts']);
|
||||
const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() === username.toLowerCase());
|
||||
const soapboxConfig = getSoapboxConfig(state);
|
||||
|
||||
let accountId = -1;
|
||||
let accountUsername = username;
|
||||
|
|
@ -50,7 +52,7 @@ const mapStateToProps = (state, { params: { username }, withReplies = false }) =
|
|||
isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
|
||||
hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
|
||||
me,
|
||||
patronEnabled: state.getIn(['soapbox', 'extensions', 'patron', 'enabled']),
|
||||
patronEnabled: soapboxConfig.getIn(['extensions', 'patron', 'enabled']),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const messages = defineMessages({
|
|||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
|
||||
admin_settings: { id: 'navigation_bar.admin_settings', defaultMessage: 'Admin settings' },
|
||||
soapbox_config: { id: 'navigation_bar.soapbox_config', defaultMessage: 'Soapbox config' },
|
||||
security: { id: 'navigation_bar.security', defaultMessage: 'Security' },
|
||||
logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
|
||||
keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Hotkeys' },
|
||||
|
|
@ -80,7 +81,8 @@ class ActionBar extends React.PureComponent {
|
|||
menu.push(null);
|
||||
menu.push({ text: intl.formatMessage(messages.keyboard_shortcuts), action: this.handleHotkeyClick });
|
||||
if (isStaff) {
|
||||
menu.push({ text: intl.formatMessage(messages.admin_settings), href: '/pleroma/admin/', newTab: true });
|
||||
menu.push({ text: intl.formatMessage(messages.admin_settings), href: '/pleroma/admin', newTab: true });
|
||||
menu.push({ text: intl.formatMessage(messages.soapbox_config), to: '/soapbox/config' });
|
||||
}
|
||||
menu.push({ text: intl.formatMessage(messages.preferences), to: '/settings/preferences' });
|
||||
menu.push({ text: intl.formatMessage(messages.security), to: '/auth/edit' });
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
|||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { SketchPicker } from 'react-color';
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
import { isMobile } from '../../is_mobile';
|
||||
import detectPassiveEvents from 'detect-passive-events';
|
||||
|
||||
const FormPropTypes = {
|
||||
label: PropTypes.oneOfType([
|
||||
|
|
@ -12,6 +16,8 @@ const FormPropTypes = {
|
|||
]),
|
||||
};
|
||||
|
||||
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
|
||||
|
||||
export const InputContainer = (props) => {
|
||||
const containerClass = classNames('input', {
|
||||
'with_label': props.label,
|
||||
|
|
@ -186,6 +192,98 @@ export class RadioGroup extends ImmutablePureComponent {
|
|||
|
||||
}
|
||||
|
||||
export class ColorPicker extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
style: PropTypes.object,
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func,
|
||||
}
|
||||
|
||||
handleDocumentClick = e => {
|
||||
if (this.node && !this.node.contains(e.target)) {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('click', this.handleDocumentClick, false);
|
||||
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('click', this.handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { style, value, onChange } = this.props;
|
||||
let margin_left_picker = isMobile(window.innerWidth) ? '20px' : '12px';
|
||||
|
||||
return (
|
||||
<div id='SketchPickerContainer' ref={this.setRef} style={{ ...style, marginLeft: margin_left_picker, position: 'absolute', zIndex: 1000 }}>
|
||||
<SketchPicker color={value} disableAlpha onChange={onChange} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class ColorWithPicker extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
buttonId: PropTypes.string.isRequired,
|
||||
label: FormPropTypes.label,
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
onToggle = (e) => {
|
||||
if (!e.key || e.key === 'Enter') {
|
||||
if (this.state.active) {
|
||||
this.onHidePicker();
|
||||
} else {
|
||||
this.onShowPicker(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
state = {
|
||||
active: false,
|
||||
placement: null,
|
||||
}
|
||||
|
||||
onHidePicker = () => {
|
||||
this.setState({ active: false });
|
||||
}
|
||||
|
||||
onShowPicker = ({ target }) => {
|
||||
this.setState({ active: true });
|
||||
this.setState({ placement: isMobile(window.innerWidth) ? 'bottom' : 'right' });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { buttonId, label, value, onChange } = this.props;
|
||||
const { active, placement } = this.state;
|
||||
|
||||
return (
|
||||
<div className='label_input__color'>
|
||||
<label>{label}</label>
|
||||
<div id={buttonId} className='color-swatch' role='presentation' style={{ background: value }} title={value} value={value} onClick={this.onToggle} />
|
||||
<Overlay show={active} placement={placement} target={this}>
|
||||
<ColorPicker value={value} onChange={onChange} onClose={this.onHidePicker} />
|
||||
</Overlay>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export class RadioItem extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
|
|
@ -256,3 +354,11 @@ export const FileChooser = props => (
|
|||
FileChooser.defaultProps = {
|
||||
accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
|
||||
};
|
||||
|
||||
export const FileChooserLogo = props => (
|
||||
<SimpleInput type='file' {...props} />
|
||||
);
|
||||
|
||||
FileChooserLogo.defaultProps = {
|
||||
accept: ['image/svg', 'image/png'],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import {
|
|||
RadioItem,
|
||||
SelectDropdown,
|
||||
} from 'soapbox/features/forms';
|
||||
import SettingsCheckbox from './components/settings_checkbox';
|
||||
import SettingsCheckbox from 'soapbox/components/settings_checkbox';
|
||||
|
||||
const languages = {
|
||||
en: 'English',
|
||||
|
|
|
|||
|
|
@ -5,11 +5,16 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
copyright: state.getIn(['soapbox', 'copyright']),
|
||||
navlinks: state.getIn(['soapbox', 'navlinks', 'homeFooter'], ImmutableList()),
|
||||
});
|
||||
const mapStateToProps = (state, props) => {
|
||||
const soapboxConfig = getSoapboxConfig(state);
|
||||
|
||||
return {
|
||||
copyright: soapboxConfig.get('copyright'),
|
||||
navlinks: soapboxConfig.getIn(['navlinks', 'homeFooter'], ImmutableList()),
|
||||
};
|
||||
};
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
class Footer extends ImmutablePureComponent {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
instance: state.get('instance'),
|
||||
soapbox: state.get('soapbox'),
|
||||
soapbox: getSoapboxConfig(state),
|
||||
});
|
||||
|
||||
class SiteBanner extends ImmutablePureComponent {
|
||||
|
|
@ -15,7 +16,7 @@ class SiteBanner extends ImmutablePureComponent {
|
|||
imgLogo: (<img alt={instance.get('title')} src={soapbox.get('banner')} />),
|
||||
textLogo: (<h1>{instance.get('title')}</h1>),
|
||||
};
|
||||
return soapbox.has('banner') ? logos.imgLogo : logos.textLogo;
|
||||
return soapbox.getIn(['banner']) ? logos.imgLogo : logos.textLogo;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
instance: state.get('instance'),
|
||||
soapbox: state.get('soapbox'),
|
||||
soapbox: getSoapboxConfig(state),
|
||||
});
|
||||
|
||||
class SiteLogo extends ImmutablePureComponent {
|
||||
|
|
@ -15,7 +16,7 @@ class SiteLogo extends ImmutablePureComponent {
|
|||
imgLogo: (<img alt={instance.get('title')} src={soapbox.get('logo')} />),
|
||||
textLogo: (<h1>{instance.get('title')}</h1>),
|
||||
};
|
||||
return soapbox.has('logo') ? logos.imgLogo : logos.textLogo;
|
||||
return soapbox.getIn(['logo']) ? logos.imgLogo : logos.textLogo;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,11 @@ import Header from './components/header';
|
|||
import Footer from './components/footer';
|
||||
import LandingPage from '../landing_page';
|
||||
import AboutPage from '../about';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
instance: state.get('instance'),
|
||||
soapbox: state.get('soapbox'),
|
||||
soapbox: getSoapboxConfig(state),
|
||||
});
|
||||
|
||||
const wave = (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,365 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import Column from '../ui/components/column';
|
||||
import {
|
||||
SimpleForm,
|
||||
FieldsGroup,
|
||||
TextInput,
|
||||
Checkbox,
|
||||
FileChooser,
|
||||
SimpleTextarea,
|
||||
ColorWithPicker,
|
||||
FileChooserLogo,
|
||||
} from 'soapbox/features/forms';
|
||||
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
||||
import { updateAdminConfig } from 'soapbox/actions/admin';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { defaultConfig } from 'soapbox/actions/soapbox';
|
||||
import { uploadMedia } from 'soapbox/actions/media';
|
||||
|
||||
const messages = defineMessages({
|
||||
heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
|
||||
copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
|
||||
promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
|
||||
promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
|
||||
promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||
homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
|
||||
homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||
customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
|
||||
rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Raw JSON data' },
|
||||
rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly.' },
|
||||
});
|
||||
|
||||
const templates = {
|
||||
promoPanelItem: ImmutableMap({ icon: '', text: '', url: '' }),
|
||||
footerItem: ImmutableMap({ title: '', url: '' }),
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
soapbox: state.get('soapbox'),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
@injectIntl
|
||||
class SoapboxConfig extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
soapbox: ImmutablePropTypes.map.isRequired,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
isLoading: false,
|
||||
soapbox: this.props.soapbox,
|
||||
rawJSON: JSON.stringify(this.props.soapbox, null, 2),
|
||||
jsonValid: true,
|
||||
}
|
||||
|
||||
setConfig = (path, value) => {
|
||||
const { soapbox } = this.state;
|
||||
const config = soapbox.setIn(path, value);
|
||||
this.setState({ soapbox: config, jsonValid: true });
|
||||
};
|
||||
|
||||
putConfig = config => {
|
||||
this.setState({ soapbox: config, jsonValid: true });
|
||||
};
|
||||
|
||||
getParams = () => {
|
||||
const { soapbox } = this.state;
|
||||
return {
|
||||
configs: [{
|
||||
group: ':pleroma',
|
||||
key: ':frontend_configurations',
|
||||
value: [{
|
||||
tuple: [':soapbox_fe', soapbox.toJSON()],
|
||||
}],
|
||||
}],
|
||||
};
|
||||
}
|
||||
|
||||
handleSubmit = (event) => {
|
||||
const { dispatch } = this.props;
|
||||
dispatch(updateAdminConfig(this.getParams())).then(() => {
|
||||
this.setState({ isLoading: false });
|
||||
}).catch((error) => {
|
||||
this.setState({ isLoading: false });
|
||||
});
|
||||
this.setState({ isLoading: true });
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
handleChange = (path, getValue) => {
|
||||
return e => {
|
||||
this.setConfig(path, getValue(e));
|
||||
};
|
||||
};
|
||||
|
||||
handleFileChange = path => {
|
||||
return e => {
|
||||
const data = new FormData();
|
||||
data.append('file', e.target.files[0]);
|
||||
this.props.dispatch(uploadMedia(data)).then(({ data }) => {
|
||||
this.handleChange(path, e => data.url)(e);
|
||||
}).catch(() => {});
|
||||
};
|
||||
};
|
||||
|
||||
handleAddItem = (path, template) => {
|
||||
return e => {
|
||||
this.setConfig(
|
||||
path,
|
||||
this.getSoapboxConfig().getIn(path, ImmutableList()).push(template),
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
handleDeleteItem = path => {
|
||||
return e => {
|
||||
const soapbox = this.state.soapbox.deleteIn(path);
|
||||
this.setState({ soapbox });
|
||||
};
|
||||
};
|
||||
|
||||
handleItemChange = (path, key, field, template) => {
|
||||
return this.handleChange(
|
||||
path, (e) =>
|
||||
template
|
||||
.merge(field)
|
||||
.set(key, e.target.value)
|
||||
);
|
||||
};
|
||||
|
||||
handlePromoItemChange = (index, key, field) => {
|
||||
return this.handleItemChange(
|
||||
['promoPanel', 'items', index], key, field, templates.promoPanelItem
|
||||
);
|
||||
};
|
||||
|
||||
handleHomeFooterItemChange = (index, key, field) => {
|
||||
return this.handleItemChange(
|
||||
['navlinks', 'homeFooter', index], key, field, templates.footerItem
|
||||
);
|
||||
};
|
||||
|
||||
handleEditJSON = e => {
|
||||
this.setState({ rawJSON: e.target.value });
|
||||
}
|
||||
|
||||
getSoapboxConfig = () => {
|
||||
return defaultConfig.mergeDeep(this.state.soapbox);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevProps.soapbox !== this.props.soapbox) {
|
||||
this.putConfig(this.props.soapbox);
|
||||
}
|
||||
|
||||
if (prevState.soapbox !== this.state.soapbox) {
|
||||
this.setState({ rawJSON: JSON.stringify(this.state.soapbox, null, 2) });
|
||||
}
|
||||
|
||||
if (prevState.rawJSON !== this.state.rawJSON) {
|
||||
try {
|
||||
const data = fromJS(JSON.parse(this.state.rawJSON));
|
||||
this.putConfig(data);
|
||||
} catch {
|
||||
this.setState({ jsonValid: false });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
const soapbox = this.getSoapboxConfig();
|
||||
|
||||
return (
|
||||
<Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
|
||||
<SimpleForm onSubmit={this.handleSubmit}>
|
||||
<fieldset disabled={this.state.isLoading}>
|
||||
<FieldsGroup>
|
||||
<div className='fields-row file-picker'>
|
||||
<div className='fields-row__column fields-row__column-6'>
|
||||
<img src={soapbox.get('logo')} />
|
||||
</div>
|
||||
<div className='fields-row__column fields-group fields-row__column-6'>
|
||||
<FileChooserLogo
|
||||
label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
|
||||
name='logo'
|
||||
hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
|
||||
onChange={this.handleFileChange(['logo'])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='fields-row file-picker'>
|
||||
<div className='fields-row__column fields-row__column-6'>
|
||||
<img src={soapbox.get('banner')} />
|
||||
</div>
|
||||
<div className='fields-row__column fields-group fields-row__column-6'>
|
||||
<FileChooser
|
||||
label={<FormattedMessage id='soapbox_config.fields.banner_label' defaultMessage='Banner' />}
|
||||
name='banner'
|
||||
hint={<FormattedMessage id='soapbox_config.hints.banner' defaultMessage='PNG, GIF or JPG. At most 2 MB. Will be displayed to 400x400px' />}
|
||||
onChange={this.handleFileChange(['banner'])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FieldsGroup>
|
||||
<FieldsGroup>
|
||||
<div className='fields-row__column fields-group'>
|
||||
<ColorWithPicker
|
||||
buttonId='brand_color'
|
||||
label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}
|
||||
value={soapbox.get('brandColor')}
|
||||
onChange={this.handleChange(['brandColor'], (e) => e.hex)}
|
||||
/>
|
||||
</div>
|
||||
</FieldsGroup>
|
||||
<FieldsGroup>
|
||||
<Checkbox
|
||||
label={<FormattedMessage id='soapbox_config.fields.patron_enabled_label' defaultMessage='Patron module' />}
|
||||
hint={<FormattedMessage id='soapbox_config.hints.patron_enabled' defaultMessage='Enables display of Patron module. Requires installation of Patron module.' />}
|
||||
name='patron'
|
||||
checked={soapbox.getIn(['extensions', 'patron', 'enabled'])}
|
||||
onChange={this.handleChange(
|
||||
['extensions', 'patron', 'enabled'], (e) => e.checked,
|
||||
)}
|
||||
/>
|
||||
</FieldsGroup>
|
||||
<FieldsGroup>
|
||||
<TextInput
|
||||
name='copyright'
|
||||
label={intl.formatMessage(messages.copyrightFooterLabel)}
|
||||
placeholder={intl.formatMessage(messages.copyrightFooterLabel)}
|
||||
value={soapbox.get('copyright')}
|
||||
onChange={this.handleChange(['copyright'], (e) => e.target.value)}
|
||||
/>
|
||||
</FieldsGroup>
|
||||
<FieldsGroup>
|
||||
<div className='fields-row__column fields-group'>
|
||||
<div className='input with_block_label'>
|
||||
<label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
|
||||
<span className='hint'>
|
||||
<FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
|
||||
</span>
|
||||
<span className='hint'>
|
||||
<FormattedMessage id='soapbox_config.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
|
||||
</span>
|
||||
{
|
||||
soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
|
||||
<div className='row' key={i}>
|
||||
<TextInput
|
||||
label={intl.formatMessage(messages.promoItemIcon)}
|
||||
placeholder={intl.formatMessage(messages.promoItemIcon)}
|
||||
value={field.get('icon')}
|
||||
onChange={this.handlePromoItemChange(i, 'icon', field)}
|
||||
/>
|
||||
<TextInput
|
||||
label={intl.formatMessage(messages.promoItemLabel)}
|
||||
placeholder={intl.formatMessage(messages.promoItemLabel)}
|
||||
value={field.get('text')}
|
||||
onChange={this.handlePromoItemChange(i, 'text', field)}
|
||||
/>
|
||||
<TextInput
|
||||
label={intl.formatMessage(messages.promoItemURL)}
|
||||
placeholder={intl.formatMessage(messages.promoItemURL)}
|
||||
value={field.get('url')}
|
||||
onChange={this.handlePromoItemChange(i, 'url', field)}
|
||||
/>
|
||||
<Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div className='actions'>
|
||||
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
|
||||
<Icon id='plus-circle' />
|
||||
<FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='input with_block_label'>
|
||||
<label><FormattedMessage id='soapbox_config.fields.home_footer_fields_label' defaultMessage='Home footer items' /></label>
|
||||
<span className='hint'>
|
||||
<FormattedMessage id='soapbox_config.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
|
||||
</span>
|
||||
{
|
||||
soapbox.getIn(['navlinks', 'homeFooter']).map((field, i) => (
|
||||
<div className='row' key={i}>
|
||||
<TextInput
|
||||
label={intl.formatMessage(messages.homeFooterItemLabel)}
|
||||
placeholder={intl.formatMessage(messages.homeFooterItemLabel)}
|
||||
value={field.get('title')}
|
||||
onChange={this.handleHomeFooterItemChange(i, 'title', field)}
|
||||
/>
|
||||
<TextInput
|
||||
label={intl.formatMessage(messages.homeFooterItemURL)}
|
||||
placeholder={intl.formatMessage(messages.homeFooterItemURL)}
|
||||
value={field.get('url')}
|
||||
onChange={this.handleHomeFooterItemChange(i, 'url', field)}
|
||||
/>
|
||||
<Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div className='actions'>
|
||||
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
|
||||
<Icon id='plus-circle' />
|
||||
<FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='input with_block_label'>
|
||||
<label><FormattedMessage id='soapbox_config.fields.custom_css_fields_label' defaultMessage='Custom CSS' /></label>
|
||||
<span className='hint'>
|
||||
<FormattedMessage id='soapbox_config.hints.custom_css_fields' defaultMessage='Insert a URL to a CSS file like `https://mysite.com/instance/custom.css`, or simply `/instance/custom.css`' />
|
||||
</span>
|
||||
{
|
||||
soapbox.get('customCss').map((field, i) => (
|
||||
<div className='row' key={i}>
|
||||
<TextInput
|
||||
label={intl.formatMessage(messages.customCssLabel)}
|
||||
placeholder={intl.formatMessage(messages.customCssLabel)}
|
||||
value={field}
|
||||
onChange={this.handleChange(['customCss', i], (e) => e.target.value)}
|
||||
/>
|
||||
<Icon id='times-circle' onClick={this.handleDeleteItem(['customCss', i])} />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<div className='actions'>
|
||||
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['customCss'], '')}>
|
||||
<Icon id='plus-circle' />
|
||||
<FormattedMessage id='soapbox_config.fields.custom_css.add' defaultMessage='Add another custom CSS URL' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FieldsGroup>
|
||||
<FieldsGroup>
|
||||
<div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
|
||||
<SimpleTextarea
|
||||
label={intl.formatMessage(messages.rawJSONLabel)}
|
||||
hint={intl.formatMessage(messages.rawJSONHint)}
|
||||
value={this.state.rawJSON}
|
||||
onChange={this.handleEditJSON}
|
||||
rows={12}
|
||||
/>
|
||||
</div>
|
||||
</FieldsGroup>
|
||||
</fieldset>
|
||||
<div className='actions'>
|
||||
<button name='button' type='submit' className='btn button button-primary'>
|
||||
<FormattedMessage id='soapbox_config.save' defaultMessage='Save' />
|
||||
</button>
|
||||
</div>
|
||||
</SimpleForm>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,9 +2,10 @@ import React from 'react';
|
|||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { connect } from 'react-redux';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
promoItems: state.getIn(['soapbox', 'promoPanel', 'items']),
|
||||
promoItems: getSoapboxConfig(state).getIn(['promoPanel', 'items']),
|
||||
});
|
||||
|
||||
export default @connect(mapStateToProps)
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { openModal } from '../../../actions/modal';
|
|||
import { openSidebar } from '../../../actions/sidebar';
|
||||
import Icon from '../../../components/icon';
|
||||
import ThemeToggle from '../../ui/components/theme_toggle';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
const messages = defineMessages({
|
||||
post: { id: 'tabs_bar.post', defaultMessage: 'Post' },
|
||||
|
|
@ -133,7 +134,7 @@ const mapStateToProps = state => {
|
|||
const me = state.get('me');
|
||||
return {
|
||||
account: state.getIn(['accounts', me]),
|
||||
logo: state.getIn(['soapbox', 'logo']),
|
||||
logo: getSoapboxConfig(state).get('logo'),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ import {
|
|||
LoginPage,
|
||||
Preferences,
|
||||
EditProfile,
|
||||
SoapboxConfig,
|
||||
PasswordReset,
|
||||
SecurityForm,
|
||||
MfaForm,
|
||||
|
|
@ -254,6 +255,7 @@ class SwitchingColumnsArea extends React.PureComponent {
|
|||
<Redirect exact from='/settings' to='/settings/preferences' />
|
||||
<WrappedRoute path='/settings/preferences' layout={LAYOUT.DEFAULT} component={Preferences} content={children} />
|
||||
<WrappedRoute path='/settings/profile' layout={LAYOUT.DEFAULT} component={EditProfile} content={children} />
|
||||
<WrappedRoute path='/soapbox/config' layout={LAYOUT.DEFAULT} component={SoapboxConfig} content={children} />
|
||||
|
||||
<WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -182,6 +182,10 @@ export function EditProfile() {
|
|||
return import(/* webpackChunkName: "features/edit_profile" */'../../edit_profile');
|
||||
}
|
||||
|
||||
export function SoapboxConfig() {
|
||||
return import(/* webpackChunkName: "features/soapbox_config" */'../../soapbox_config');
|
||||
}
|
||||
|
||||
export function PasswordReset() {
|
||||
return import(/* webpackChunkName: "features/auth_login" */'../../auth_login/components/password_reset');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,14 @@ import ComposeFormContainer from '../features/compose/containers/compose_form_co
|
|||
import Avatar from '../components/avatar';
|
||||
import { getFeatures } from 'soapbox/utils/features';
|
||||
// import GroupSidebarPanel from '../features/groups/sidebar_panel';
|
||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const me = state.get('me');
|
||||
return {
|
||||
me,
|
||||
account: state.getIn(['accounts', me]),
|
||||
hasPatron: state.getIn(['soapbox', 'extensions', 'patron', 'enabled']),
|
||||
hasPatron: getSoapboxConfig(state).getIn(['extensions', 'patron', 'enabled']),
|
||||
features: getFeatures(state.get('instance')),
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,47 @@
|
|||
import reducer from '../soapbox';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import * as actions from 'soapbox/actions/soapbox';
|
||||
import { ADMIN_CONFIG_UPDATE_SUCCESS } from 'soapbox/actions/admin';
|
||||
import soapbox from 'soapbox/__fixtures__/soapbox.json';
|
||||
import soapboxConfig from 'soapbox/__fixtures__/admin_api_frontend_config.json';
|
||||
|
||||
describe('soapbox reducer', () => {
|
||||
it('should return the initial state', () => {
|
||||
expect(reducer(undefined, {})).toEqual(ImmutableMap());
|
||||
});
|
||||
|
||||
it('should handle SOAPBOX_CONFIG_REQUEST_SUCCESS', () => {
|
||||
const state = ImmutableMap({ brandColor: '#354e91' });
|
||||
const action = {
|
||||
type: actions.SOAPBOX_CONFIG_REQUEST_SUCCESS,
|
||||
soapboxConfig: soapbox,
|
||||
};
|
||||
expect(reducer(state, action).toJS()).toMatchObject({
|
||||
brandColor: '#254f92',
|
||||
});
|
||||
});
|
||||
|
||||
// it('should handle SOAPBOX_CONFIG_REQUEST_FAIL', () => {
|
||||
// const state = ImmutableMap({ skipAlert: false, brandColor: '#354e91' });
|
||||
// const action = {
|
||||
// type: actions.SOAPBOX_CONFIG_REQUEST_FAIL,
|
||||
// skipAlert: true,
|
||||
// };
|
||||
// expect(reducer(state, action).toJS()).toMatchObject({
|
||||
// skipAlert: true,
|
||||
// brandColor: '#354e91',
|
||||
// });
|
||||
// });
|
||||
|
||||
it('should handle ADMIN_CONFIG_UPDATE_SUCCESS', () => {
|
||||
const state = ImmutableMap({ brandColor: '#354e91' });
|
||||
const action = {
|
||||
type: ADMIN_CONFIG_UPDATE_SUCCESS,
|
||||
config: soapboxConfig,
|
||||
};
|
||||
expect(reducer(state, action).toJS()).toMatchObject({
|
||||
brandColor: '#254f92',
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,21 +1,29 @@
|
|||
import {
|
||||
SOAPBOX_CONFIG_REQUEST_SUCCESS,
|
||||
SOAPBOX_CONFIG_REQUEST_FAIL,
|
||||
} from '../actions/soapbox';
|
||||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||
import { ADMIN_CONFIG_UPDATE_SUCCESS } from '../actions/admin';
|
||||
import { SOAPBOX_CONFIG_REQUEST_SUCCESS } from '../actions/soapbox';
|
||||
import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
|
||||
import { ConfigDB } from 'soapbox/utils/config_db';
|
||||
|
||||
const initialState = ImmutableMap();
|
||||
|
||||
const defaultState = ImmutableMap({
|
||||
brandColor: '#0482d8', // Azure
|
||||
});
|
||||
const updateFromAdmin = (state, config) => {
|
||||
const configs = config.get('configs', ImmutableList());
|
||||
|
||||
try {
|
||||
return ConfigDB.find(configs, ':pleroma', ':frontend_configurations')
|
||||
.get('value')
|
||||
.find(value => value.getIn(['tuple', 0]) === ':soapbox_fe')
|
||||
.getIn(['tuple', 1]);
|
||||
} catch {
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
export default function soapbox(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case SOAPBOX_CONFIG_REQUEST_SUCCESS:
|
||||
return defaultState.merge(ImmutableMap(fromJS(action.soapboxConfig)));
|
||||
case SOAPBOX_CONFIG_REQUEST_FAIL:
|
||||
return defaultState;
|
||||
return fromJS(action.soapboxConfig);
|
||||
case ADMIN_CONFIG_UPDATE_SUCCESS:
|
||||
return updateFromAdmin(state, fromJS(action.config));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import { ConfigDB } from '../config_db';
|
||||
import config_db from 'soapbox/__fixtures__/config_db.json';
|
||||
import { fromJS } from 'immutable';
|
||||
|
||||
test('find', () => {
|
||||
const configs = fromJS(config_db).get('configs');
|
||||
expect(ConfigDB.find(configs, ':phoenix', ':json_library')).toEqual(fromJS({
|
||||
group: ':phoenix',
|
||||
key: ':json_library',
|
||||
value: 'Jason',
|
||||
}));
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export const ConfigDB = {
|
||||
find: (configs, group, key) => {
|
||||
return configs.find(config =>
|
||||
config.isSuperset({ group, key })
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default ConfigDB;
|
||||
|
|
@ -108,6 +108,10 @@ button {
|
|||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.button--block {
|
||||
|
|
|
|||
|
|
@ -389,7 +389,8 @@ code {
|
|||
|
||||
button,
|
||||
.button,
|
||||
.block-button {
|
||||
.block-button,
|
||||
.color-swatch {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
|
|
@ -453,6 +454,18 @@ code {
|
|||
}
|
||||
|
||||
.label_input {
|
||||
|
||||
&__color {
|
||||
display: inline-flex;
|
||||
font-size: 14px;
|
||||
|
||||
.color-swatch {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -971,3 +984,25 @@ code {
|
|||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-picker img {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.code-editor textarea {
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.code-editor--invalid textarea {
|
||||
border-color: $error-red !important;
|
||||
color: $error-red;
|
||||
}
|
||||
|
||||
.input .row .fa-times-circle {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
cursor: pointer;
|
||||
color: $error-red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@
|
|||
"qrcode.react": "^1.0.0",
|
||||
"rails-ujs": "^5.2.3",
|
||||
"react": "^16.13.1",
|
||||
"react-color": "^2.18.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-helmet": "^6.0.0",
|
||||
"react-hotkeys": "^1.1.4",
|
||||
|
|
|
|||
39
yarn.lock
39
yarn.lock
|
|
@ -1229,6 +1229,11 @@
|
|||
dependencies:
|
||||
emojis-list "^3.0.0"
|
||||
|
||||
"@icons/material@^0.2.4":
|
||||
version "0.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
|
||||
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
|
||||
|
||||
"@istanbuljs/load-nyc-config@^1.0.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
|
||||
|
|
@ -7411,6 +7416,11 @@ lodash@^4.0.0, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.1
|
|||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
|
||||
integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
|
||||
|
||||
lodash@^4.0.1:
|
||||
version "4.17.19"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
|
||||
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
|
||||
|
||||
lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5, lodash@^4.7.11:
|
||||
version "4.17.11"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
|
||||
|
|
@ -7510,6 +7520,11 @@ marky@^1.2.1:
|
|||
resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.1.tgz#a3fcf82ffd357756b8b8affec9fdbf3a30dc1b02"
|
||||
integrity sha512-md9k+Gxa3qLH6sUKpeC2CNkJK/Ld+bEz5X96nYwloqphQE0CKCVEKco/6jxEZixinqNdz5RFi/KaCyfbMDMAXQ==
|
||||
|
||||
material-colors@^1.2.1:
|
||||
version "1.2.6"
|
||||
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
|
||||
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
|
||||
|
||||
md5.js@^1.3.4:
|
||||
version "1.3.5"
|
||||
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
|
||||
|
|
@ -9437,6 +9452,18 @@ rc@^1.2.7:
|
|||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
react-color@^2.18.1:
|
||||
version "2.18.1"
|
||||
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.1.tgz#2cda8cc8e06a9e2c52ad391a30ddad31972472f4"
|
||||
integrity sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==
|
||||
dependencies:
|
||||
"@icons/material" "^0.2.4"
|
||||
lodash "^4.17.11"
|
||||
material-colors "^1.2.1"
|
||||
prop-types "^15.5.10"
|
||||
reactcss "^1.2.0"
|
||||
tinycolor2 "^1.4.1"
|
||||
|
||||
react-dom@^16.13.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
|
||||
|
|
@ -9752,6 +9779,13 @@ react@^16.13.1:
|
|||
object-assign "^4.1.1"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
reactcss@^1.2.0:
|
||||
version "1.2.3"
|
||||
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
|
||||
integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
|
||||
dependencies:
|
||||
lodash "^4.0.1"
|
||||
|
||||
read-pkg-up@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
|
||||
|
|
@ -11344,6 +11378,11 @@ tiny-warning@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
||||
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
|
||||
|
||||
tinycolor2@^1.4.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
|
||||
integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
|
||||
|
||||
tmp@^0.0.33:
|
||||
version "0.0.33"
|
||||
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
|
||||
|
|
|
|||
Loading…
Reference in New Issue