tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Add formfield infotooltip and staff editor level info [skip ci]

This commit is contained in:
Ivan Diaz 2017-01-05 14:49:10 -03:00
parent f9194b1b03
commit d550e01358
7 changed files with 68 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/app/admin/panel/staff/staff-editor.js
View File

@ -137,7 +137,7 @@ class StaffEditor extends React.Component {
<div>
<span className="separator staff-editor__separator"/>
<Form className="staff-editor__update-level" values={{level: this.state.level}} onChange={form => this.setState({level: form.level})} onSubmit={this.onSubmit.bind(this, 'LEVEL')}>
<FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
<FormField name="level" label={i18n('LEVEL')} field="select" infoMessage={this.getStaffLevelInfo()} fieldProps={{
items: [{content: i18n('LEVEL_1')}, {content: i18n('LEVEL_2')}, {content: i18n('LEVEL_3')}],
size: 'large'
}} />
@ -219,6 +219,25 @@ class StaffEditor extends React.Component {
return SessionStore.getDepartments().map(department => department.name);
}
getStaffLevelInfo() {
return (
<div className="staff-editor__level-info">
<div className="staff-editor__level-info-box">
<span className="staff-editor__level-info-title">{i18n('LEVEL')} 1 </span>
<span className="staff-editor__level-info-description">{i18n('LEVEL_1_DESCRIPTION')}</span>
</div>
<div className="staff-editor__level-info-box">
<span className="staff-editor__level-info-title">{i18n('LEVEL')} 2 </span>
<span className="staff-editor__level-info-description">{i18n('LEVEL_2_DESCRIPTION')}</span>
</div>
<div className="staff-editor__level-info-box">
<span className="staff-editor__level-info-title">{i18n('LEVEL')} 3 </span>
<span className="staff-editor__level-info-description">{i18n('LEVEL_3_DESCRIPTION')}</span>
</div>
</div>
);
}
onSubmit(eventType, form) {
let departments;

17
client/src/app/admin/panel/staff/staff-editor.scss
View File

@ -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;
}
}
}

14
client/src/core-components/form-field.js
View File

@ -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 = [
<span className="form-field__label" key="label">{this.props.label}</span>,
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 (
<Wrapper className={this.getClass()}>
{fieldContent}
@ -66,6 +69,15 @@ class FormField extends React.Component {
);
}
renderLabel() {
return (
<span className="form-field__label" key="label">
{this.props.label}
{(this.props.infoMessage) ? <InfoTooltip text={this.props.infoMessage} className="form-field__info" /> : null}
</span>
)
}
renderField() {
let Field = {
'input': Input,

6
client/src/core-components/form-field.scss
View File

@ -12,6 +12,12 @@
text-align: left;
}
&__info {
position: relative;
top: -1px;
left: 5px;
}
&_errored {
.form-field__error {
color: $primary-red;

5
client/src/core-components/info-tooltip.js
View File

@ -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 (
<div className="info-tooltip__text">
<div className="info-tooltip__text-title">
@ -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);
}
}

5
client/src/core-components/info-tooltip.scss
View File

@ -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;
}

3
client/src/data/languages/en.js
View File

@ -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',