Max Red - Admin panel system preferences first layout WIP [skip ci]
This commit is contained in:
ivan
parent
a0d1c401b8
commit
a077a19639
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
|
||||
import i18n from 'lib-app/i18n';
|
||||
|
||||
class ToggleButton extends React.Component {
|
||||
|
||||
|
||||
static propTypes = {
|
||||
value: React.PropTypes.bool,
|
||||
onChange: React.PropTypes.func
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="toggle-button" onClick={this.onClick.bind(this)}>
|
||||
{this.props.value ? i18n('ON') : i18n('OFF')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onClick() {
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange({
|
||||
target: {
|
||||
value: !this.props.value
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ToggleButton;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
@import "../scss/vars";
|
||||
|
||||
.toggle-button {
|
||||
background-color: $light-grey;
|
||||
width: 80px;
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,14 +1,107 @@
|
|||
import React from 'react';
|
||||
|
||||
import Form from 'core-components/form';
|
||||
import FormField from 'core-components/form-field';
|
||||
import Header from 'core-components/header';
|
||||
import SubmitButton from 'core-components/submit-button';
|
||||
import Button from 'core-components/button';
|
||||
|
||||
import ToggleButton from 'app-components/toggle-button';
|
||||
import i18n from 'lib-app/i18n';
|
||||
|
||||
class AdminPanelSystemPreferences extends React.Component {
|
||||
|
||||
state = {
|
||||
values: {
|
||||
'maintenance': false
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
/admin/panel/settings/system-preferences
|
||||
<div className="admin-panel-system-preferences">
|
||||
<Header title={i18n('SYSTEM_PREFERENCES')} description="Here you can adjust your system preferences :)"/>
|
||||
<Form values={this.state.values} onChange={values => this.setState({values})} onSubmit={this.onSubmit.bind(this)}>
|
||||
<div className="admin-panel-system-preferences__maintenance">
|
||||
<span>Maintenance Mode</span>
|
||||
<FormField className="admin-panel-system-preferences__maintenance-field" name="maintenance-mode" decorator={ToggleButton}/>
|
||||
</div>
|
||||
<span className="separator" />
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<FormField label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url"/>
|
||||
<FormField label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout"/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<FormField label={i18n('SUPPORT_CENTER_TITLE')} fieldProps={{size: 'large'}} name="system-title"/>
|
||||
<FormField label={i18n('DEFAULT_TIMEZONE')} fieldProps={{size: 'large'}} name="time-zone"/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="separator" />
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
asd
|
||||
</div>
|
||||
<div className="col-md-8">
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<FormField label={i18n('NOREPLY_EMAIL')} fieldProps={{size: 'auto'}} name="email"/>
|
||||
<FormField label={i18n('SMTP_USER')} fieldProps={{size: 'auto'}} name="smtp_user"/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="row">
|
||||
<div className="col-md-9">
|
||||
<FormField label={i18n('SMTP_SERVER')} fieldProps={{size: 'auto'}} name="smtp_server"/>
|
||||
</div>
|
||||
<div className="col-md-3">
|
||||
<FormField label={i18n('PORT')} fieldProps={{size: 'auto'}} name="port"/>
|
||||
</div>
|
||||
</div>
|
||||
<FormField label={i18n('SMTP_PASSWORD')} fieldProps={{size: 'auto'}} name="smtp_password"/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="separator" />
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<FormField label={i18n('RECAPTCHA_PUBLIC_KEY')} fieldProps={{size: 'auto'}} name="public_key"/>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<FormField label={i18n('RECAPTCHA_PRIVATE_KEY')} fieldProps={{size: 'auto'}} name="private_key"/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="separator" />
|
||||
<div className="row">
|
||||
<div className="col-md-5 col-md-offset-1">
|
||||
<div className="admin-panel-system-preferences__file-attachments">
|
||||
<span>{i18n('ALLOW_FILE_ATTACHMENTS')}</span>
|
||||
<FormField className="admin-panel-system-preferences__file-attachments-field" name="file-attachments" decorator={ToggleButton}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="admin-panel-system-preferences__max-size">
|
||||
<span>{i18n('MAX_SIZE_KB')}</span>
|
||||
<FormField className="admin-panel-system-preferences__max-size-field" fieldProps={{size: 'small'}} name="max-size"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-md-4 col-md-offset-2">
|
||||
<SubmitButton type="secondary">{i18n('UPDATE_SYSTEM')}</SubmitButton>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<Button onClick={event => event.preventDefault()}>{i18n('DISCARD_CHANGES')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
alert('WESA');
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminPanelSystemPreferences;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@import "../../../../scss/vars";
|
||||
|
||||
.admin-panel-system-preferences {
|
||||
|
||||
&__maintenance {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__maintenance-field {
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
&__file-attachments {
|
||||
margin-top: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__file-attachments-field {
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
&__max-size {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__max-size-field {
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@ const Menu = require('core-components/menu');
|
|||
const Tooltip = require('core-components/tooltip');
|
||||
const Table = require('core-components/table');
|
||||
const InfoTooltip = require('core-components/info-tooltip');
|
||||
const ToggleButton = require('app-components/toggle-button');
|
||||
|
||||
let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}];
|
||||
let secondaryMenuItems = [
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ class Input extends React.Component {
|
|||
value: React.PropTypes.string,
|
||||
validation: React.PropTypes.string,
|
||||
onChange: React.PropTypes.func,
|
||||
size: React.PropTypes.oneOf(['small', 'medium', 'large']),
|
||||
size: React.PropTypes.oneOf(['small', 'medium', 'large', 'auto']),
|
||||
password: React.PropTypes.bool,
|
||||
required: React.PropTypes.bool,
|
||||
icon: React.PropTypes.string,
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
&_auto {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&_small {
|
||||
width: 200px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,6 +118,25 @@ export default {
|
|||
'COMMENTS': 'Comments',
|
||||
'DELETE_STAFF_MEMBER': 'Delete staff member',
|
||||
'MAINTENANCE_MODE': 'Maintenance mode',
|
||||
'SUPPORT_CENTER_URL': 'Support Center URL',
|
||||
'SUPPORT_CENTER_TITLE': 'Support Center Title',
|
||||
'SUPPORT_CENTER_LAYOUT': 'Support Center Layout',
|
||||
'DEFAULT_TIMEZONE': 'Default Timezone',
|
||||
'NOREPLY_EMAIL': 'Noreply Email',
|
||||
'SMTP_USER': 'SMTP User',
|
||||
'SMTP_SERVER': 'SMTP Server',
|
||||
'SMTP_PASSWORD': 'SMTP Password',
|
||||
'PORT': 'Port',
|
||||
'RECAPTCHA_PUBLIC_KEY': 'Recaptcha Public Key',
|
||||
'RECAPTCHA_PRIVATE_KEY': 'Recaptcha Private Key',
|
||||
'ALLOW_FILE_ATTACHMENTS': 'Allow file attachments',
|
||||
'MAX_SIZE_KB': 'Max Size (KB)',
|
||||
'UPDATE_SYSTEM': 'Update system',
|
||||
'DISCARD_CHANGES': 'Discard changes',
|
||||
'ON': 'On',
|
||||
'OFF': 'Off',
|
||||
'BOXED': 'Boxed',
|
||||
'FULL_WIDTH': 'Full width',
|
||||
|
||||
//VIEW DESCRIPTIONS
|
||||
'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
|
||||
|
|
|
|||
Loading…
Reference in New Issue