From d550e01358039d62298c6cab509f158529635ee6 Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Thu, 5 Jan 2017 14:49:10 -0300 Subject: [PATCH] Ivan - Add formfield infotooltip and staff editor level info [skip ci] --- .../src/app/admin/panel/staff/staff-editor.js | 21 ++++++++++++++++++- .../app/admin/panel/staff/staff-editor.scss | 17 +++++++++++++++ client/src/core-components/form-field.js | 14 ++++++++++++- client/src/core-components/form-field.scss | 6 ++++++ client/src/core-components/info-tooltip.js | 5 ++++- client/src/core-components/info-tooltip.scss | 5 +++++ client/src/data/languages/en.js | 3 +++ 7 files changed, 68 insertions(+), 3 deletions(-) diff --git a/client/src/app/admin/panel/staff/staff-editor.js b/client/src/app/admin/panel/staff/staff-editor.js index e5513e41..fdca49f0 100644 --- a/client/src/app/admin/panel/staff/staff-editor.js +++ b/client/src/app/admin/panel/staff/staff-editor.js @@ -137,7 +137,7 @@ class StaffEditor extends React.Component {
this.setState({level: form.level})} onSubmit={this.onSubmit.bind(this, 'LEVEL')}> - @@ -219,6 +219,25 @@ class StaffEditor extends React.Component { return SessionStore.getDepartments().map(department => department.name); } + getStaffLevelInfo() { + return ( +
+
+ {i18n('LEVEL')} 1 + {i18n('LEVEL_1_DESCRIPTION')} +
+
+ {i18n('LEVEL')} 2 + {i18n('LEVEL_2_DESCRIPTION')} +
+
+ {i18n('LEVEL')} 3 + {i18n('LEVEL_3_DESCRIPTION')} +
+
+ ); + } + onSubmit(eventType, form) { let departments; diff --git a/client/src/app/admin/panel/staff/staff-editor.scss b/client/src/app/admin/panel/staff/staff-editor.scss index aaf998d5..8e29ab3c 100644 --- a/client/src/app/admin/panel/staff/staff-editor.scss +++ b/client/src/app/admin/panel/staff/staff-editor.scss @@ -139,4 +139,21 @@ float: left; margin-top: 11px; } + + &__level-info { + width: 360px; + font-size: $font-size--sm; + + &-box { + margin-top: 5px; + } + + &-title { + color: $secondary-blue; + } + + &-description { + color: $dark-grey; + } + } } \ No newline at end of file diff --git a/client/src/core-components/form-field.js b/client/src/core-components/form-field.js index 78cb9dad..ff5e08b8 100644 --- a/client/src/core-components/form-field.js +++ b/client/src/core-components/form-field.js @@ -8,6 +8,7 @@ import DropDown from 'core-components/drop-down'; import Checkbox from 'core-components/checkbox'; import CheckboxGroup from 'core-components/checkbox-group'; import TextEditor from 'core-components/text-editor'; +import InfoTooltip from 'core-components/info-tooltip'; class FormField extends React.Component { static contextTypes = { @@ -21,6 +22,7 @@ class FormField extends React.Component { onBlur: React.PropTypes.func, required: React.PropTypes.bool, error: React.PropTypes.string, + infoMessage: React.PropTypes.string, value: React.PropTypes.any, field: React.PropTypes.oneOf(['input', 'textarea', 'select', 'checkbox', 'checkbox-group']), fieldProps: React.PropTypes.object @@ -51,7 +53,7 @@ class FormField extends React.Component { render() { const Wrapper = (_.includes(this.getDivTypes(), this.props.field)) ? 'div' : 'label'; const fieldContent = [ - {this.props.label}, + this.renderLabel(), this.renderField(), this.renderError() ]; @@ -59,6 +61,7 @@ class FormField extends React.Component { if (this.props.field === 'checkbox') { fieldContent.swap(0, 1); } + return ( {fieldContent} @@ -66,6 +69,15 @@ class FormField extends React.Component { ); } + renderLabel() { + return ( + + {this.props.label} + {(this.props.infoMessage) ? : null} + + ) + } + renderField() { let Field = { 'input': Input, diff --git a/client/src/core-components/form-field.scss b/client/src/core-components/form-field.scss index e818fcaf..28a3d6df 100644 --- a/client/src/core-components/form-field.scss +++ b/client/src/core-components/form-field.scss @@ -12,6 +12,12 @@ text-align: left; } + &__info { + position: relative; + top: -1px; + left: 5px; + } + &_errored { .form-field__error { color: $primary-red; diff --git a/client/src/core-components/info-tooltip.js b/client/src/core-components/info-tooltip.js index 92c6ca24..47f2c1da 100644 --- a/client/src/core-components/info-tooltip.js +++ b/client/src/core-components/info-tooltip.js @@ -8,7 +8,7 @@ import Tooltip from 'core-components/tooltip'; class InfoTooltip extends React.Component { static propTypes = { type: React.PropTypes.oneOf(['default', 'warning']), - text: React.PropTypes.string.isRequired + text: React.PropTypes.node.isRequired }; static defaultProps = { @@ -31,6 +31,7 @@ class InfoTooltip extends React.Component { renderText() { let message = (this.props.type === 'default') ? i18n('INFO') : i18n('WARNING'); + return (
@@ -47,6 +48,8 @@ class InfoTooltip extends React.Component { 'info-tooltip_warning': (this.props.type === 'warning') }; + classes[this.props.className] = (this.props.className); + return classNames(classes); } } diff --git a/client/src/core-components/info-tooltip.scss b/client/src/core-components/info-tooltip.scss index 63691bad..b73f08b1 100644 --- a/client/src/core-components/info-tooltip.scss +++ b/client/src/core-components/info-tooltip.scss @@ -1,7 +1,10 @@ @import "../scss/vars"; .info-tooltip { + display: inline-block; + &__text { + &-title { color: $secondary-blue; font-size: $font-size--md; @@ -10,9 +13,11 @@ &__icon { color: $secondary-blue; + font-size: $font-size--sm; } &_warning { + .info-tooltip__icon { color: $primary-red; } diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index b1472eee..a6eb88b9 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -107,6 +107,9 @@ export default { 'LEVEL_1': 'Level 1 (Tickets)', 'LEVEL_2': 'Level 2 (Tickets + Articles)', 'LEVEL_3': 'Level 3 (Tickets + Articles + Staff)', + 'LEVEL_1_DESCRIPTION': 'can only respond tickets and manage users.', + 'LEVEL_2_DESCRIPTION': 'can do every Level 1 does, can create or edit articles and it can create custom responses.', + 'LEVEL_3_DESCRIPTION': 'can do every Level 2 does, can create or edit staff members and can manage the whole system.', 'UPDATE_EMAIL': 'Update email', 'UPDATE_PASSWORD': 'Update password', 'UPDATE_LEVEL': 'Update level',