From a077a196398e6770cf97e46f8fe561f99a81bab2 Mon Sep 17 00:00:00 2001 From: ivan Date: Wed, 4 Jan 2017 15:27:16 -0300 Subject: [PATCH] Max Red - Admin panel system preferences first layout WIP [skip ci] --- client/src/app-components/toggle-button.js | 32 ++++++ client/src/app-components/toggle-button.scss | 9 ++ .../admin-panel-system-preferences.js | 97 ++++++++++++++++++- .../admin-panel-system-preferences.scss | 32 ++++++ client/src/app/demo/components-demo-page.js | 1 + client/src/core-components/input.js | 2 +- client/src/core-components/input.scss | 4 + client/src/data/languages/en.js | 19 ++++ 8 files changed, 193 insertions(+), 3 deletions(-) create mode 100644 client/src/app-components/toggle-button.js create mode 100644 client/src/app-components/toggle-button.scss create mode 100644 client/src/app/admin/panel/settings/admin-panel-system-preferences.scss diff --git a/client/src/app-components/toggle-button.js b/client/src/app-components/toggle-button.js new file mode 100644 index 00000000..dda2a00d --- /dev/null +++ b/client/src/app-components/toggle-button.js @@ -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 ( +
+ {this.props.value ? i18n('ON') : i18n('OFF')} +
+ ); + } + + onClick() { + if (this.props.onChange) { + this.props.onChange({ + target: { + value: !this.props.value + } + }); + } + } +} + +export default ToggleButton; \ No newline at end of file diff --git a/client/src/app-components/toggle-button.scss b/client/src/app-components/toggle-button.scss new file mode 100644 index 00000000..4711e8fe --- /dev/null +++ b/client/src/app-components/toggle-button.scss @@ -0,0 +1,9 @@ +@import "../scss/vars"; + +.toggle-button { + background-color: $light-grey; + width: 80px; + padding: 2px; + border-radius: 4px; + text-align: center; +} \ No newline at end of file diff --git a/client/src/app/admin/panel/settings/admin-panel-system-preferences.js b/client/src/app/admin/panel/settings/admin-panel-system-preferences.js index cbeafabe..fa083b59 100644 --- a/client/src/app/admin/panel/settings/admin-panel-system-preferences.js +++ b/client/src/app/admin/panel/settings/admin-panel-system-preferences.js @@ -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 ( -
- /admin/panel/settings/system-preferences +
+
+
this.setState({values})} onSubmit={this.onSubmit.bind(this)}> +
+ Maintenance Mode + +
+ +
+
+ + +
+
+ + +
+
+ +
+
+asd +
+
+
+
+ + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ {i18n('ALLOW_FILE_ATTACHMENTS')} + +
+
+
+
+ {i18n('MAX_SIZE_KB')} + +
+
+
+
+
+
+
+ {i18n('UPDATE_SYSTEM')} +
+
+ +
+
+
); } + + onSubmit() { + alert('WESA'); + } } export default AdminPanelSystemPreferences; \ No newline at end of file diff --git a/client/src/app/admin/panel/settings/admin-panel-system-preferences.scss b/client/src/app/admin/panel/settings/admin-panel-system-preferences.scss new file mode 100644 index 00000000..ae2962fc --- /dev/null +++ b/client/src/app/admin/panel/settings/admin-panel-system-preferences.scss @@ -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; + } +} \ No newline at end of file diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index e3f68b67..5244975c 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/client/src/app/demo/components-demo-page.js @@ -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 = [ diff --git a/client/src/core-components/input.js b/client/src/core-components/input.js index d1a01476..8d9271d4 100644 --- a/client/src/core-components/input.js +++ b/client/src/core-components/input.js @@ -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, diff --git a/client/src/core-components/input.scss b/client/src/core-components/input.scss index 2bcb1f54..f312de99 100644 --- a/client/src/core-components/input.scss +++ b/client/src/core-components/input.scss @@ -19,6 +19,10 @@ } } + &_auto { + width: 100%; + } + &_small { width: 200px; } diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index b1472eee..cdf88c81 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -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.',