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

Fix styling of custom tags

This commit is contained in:
Ivan Diaz 2019-03-01 01:15:03 -03:00
parent d96e8b44b1
commit 5d3a805285
11 changed files with 69 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/admin/panel/admin-panel-menu.js
View File

@ -137,7 +137,7 @@ class AdminPanelMenu extends React.Component {
level: 2
},
{
name: 'Customtags i18n',
name: i18n('CUSTOM_TAGS'),
path: '/admin/panel/tickets/custom-tags',
level: 1
}

19
client/src/app/admin/panel/tickets/admin-panel-custom-tags-modal.js
View File

@ -27,8 +27,8 @@ class AdminPanelCustomTagsModal extends React.Component {
render() {
return (
<div>
<Header title={'new tags'} description={i18n('Here you can add a topic that works as a category for articles.')} />
<div className='admin-panel-custom-tags-modal'>
<Header title={i18n('ADD_CUSTOM_TAG')} description={i18n('DESCRIPTION_ADD_CUSTOM_TAG')} />
<Form
values={this.state.form}
onChange={this.onFormChange.bind(this)}
@ -38,13 +38,14 @@ class AdminPanelCustomTagsModal extends React.Component {
loading={this.state.loading}>
<FormField name="name" label={i18n('NAME')} fieldProps={{size: 'large'}} required />
<FormField name="color" label={i18n('COLOR')} decorator={ColorSelector} />
<SubmitButton className="topic-edit-modal__save-button" type="secondary" size="small">
{i18n('SAVE')}
</SubmitButton>
<Button className="topic-edit-modal__discard-button" onClick={this.onDiscardClick.bind(this)} size="small">
{i18n('CANCEL')}
</Button>
<div className='admin-panel-custom-tags-modal__actions'>
<SubmitButton type="secondary" size="small">
{i18n('SAVE')}
</SubmitButton>
<Button onClick={this.onDiscardClick.bind(this)} size="small">
{i18n('CANCEL')}
</Button>
</div>
</Form>
</div>
);

7
client/src/app/admin/panel/tickets/admin-panel-custom-tags-modal.scss Normal file
View File

@ -0,0 +1,7 @@
.admin-panel-custom-tags-modal {
&__actions{
display: flex;
justify-content: space-between;
}
}

24
client/src/app/admin/panel/tickets/admin-panel-custom-tags.js
View File

@ -41,19 +41,27 @@ class AdminPanelCustomTags extends React.Component {
renderContent() {
return (
<div className="row">
<div className="col-md-3">
<Button onClick={this.openTagModal.bind(this)} type="secondary" ><Icon name="pencil"/>'NUEVO TAGi18n'</Button>
<div className="admin-panel-custom-tags__content">
<div>
<Button onClick={this.openTagModal.bind(this)} type="secondary">
{i18n('CREATE_CUSTOM_TAG')}<Icon className="admin-panel-custom-tags__add-button-icon" name="plus"/>
</Button>
</div>
<div className="admin-panel-custom-tags__tag-list">
{this.props.tags.map(this.renderTag.bind(this))}
</div>
{this.props.tags.map((tag) => {
return(
<Tag color={tag.color} name={tag.name} onRemoveClick={this.onDeleteClick.bind(this, tag.id)} showDeleteButton />
)
})}
</div>
);
}
renderTag(tag, index) {
return(
<div key={index} className="admin-panel-custom-tags__tag-container" >
<Tag color={tag.color} name={tag.name} onRemoveClick={this.onDeleteClick.bind(this, tag.id)} size='large' showDeleteButton />
</div>
)
}
openTagModal() {
ModalContainer.openModal(
<AdminPanelCustomTagsModal onTagCreated={this.retrieveCustomTags.bind(this)}/>

27
client/src/app/admin/panel/tickets/admin-panel-custom-tags.scss
View File

@ -1,31 +1,18 @@
.admin-panel-custom-tags {
&__loading {
height: 300px;
}
&__item-flag {
float: right;
}
&__actions {
&__content {
text-align: left;
}
&__save-button {
display: inline-block;
margin-right: 30px;
&__add-button-icon{
margin-left: 5px;
}
&__optional-buttons {
display: inline;
&__tag-list{
margin-top: 15px;
}
&__discard-button {
display: inline-block;
}
&__delete-button {
display: inline-block;
float: right;
&__tag-container{
margin-top:5px ;
}
}

5
client/src/core-components/tag.js
View File

@ -9,7 +9,7 @@ class Tag extends React.Component {
color: React.PropTypes.string,
showDeleteButton: React.PropTypes.bool,
onRemoveClick: React.PropTypes.func,
size: React.PropTypes.oneOf(['small','medium'])
size: React.PropTypes.oneOf(['small','medium','large'])
};
render() {
@ -33,7 +33,8 @@ class Tag extends React.Component {
let classes = {
'tag': true,
'tag_small': this.props.size === 'small',
'tag_medium': this.props.size === 'medium'
'tag_medium': this.props.size === 'medium',
'tag_large': this.props.size === 'large',
};
return classNames(classes);

9
client/src/core-components/tag.scss
View File

@ -21,4 +21,11 @@
&_small {
font-size: 11px;
}
}
&_large {
width: 220px;
display: flex;
justify-content: space-between;
padding: 3px 8px;
}
}

6
client/src/data/fixtures/system-fixtures.js
View File

@ -30,7 +30,8 @@ module.exports = [
'allowedLanguages': ['en', 'es', 'de', 'fr', 'pt', 'jp', 'ru', 'cn', 'in', 'tr'],
'supportedLanguages': ['en', 'es', 'de'],
'registration': true,
'user-system-enabled': true
'user-system-enabled': true,
'tags': [{id:1,name:'bug', color:'#eb144c'},{id: 2,name:'suggestion',color:'#ff6900'}]
}
};
@ -51,7 +52,8 @@ module.exports = [
'allowedLanguages': ['en', 'es', 'de', 'fr', 'pt', 'jp', 'ru', 'cn', 'in', 'tr'],
'supportedLanguages': ['en', 'es', 'de'],
'registration': true,
'user-system-enabled': true
'user-system-enabled': true,
'tags': [{id:1,name:'bug', color:'#eb144c'},{id: 2,name:'suggestion',color:'#ff6900'}]
}
};
}

1
client/src/data/fixtures/ticket-fixtures.js
View File

@ -109,6 +109,7 @@ module.exports = [
unreadStaff: true,
closed: false,
priority: 'medium',
tags: [],
author: {
id: '3',
name: 'Haskell Curry',

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

@ -48,6 +48,7 @@ export default {
'ALL_TICKETS': 'All Tickets',
'CUSTOM_RESPONSES': 'Custom Responses',
'CUSTOM_TAGS': 'Custom Tags',
'CREATE_CUSTOM_TAG': 'Create custom tag',
'LIST_USERS': 'List Users',
'BAN_USERS': 'Ban Users',
'LIST_ARTICLES': 'Article List',
@ -103,6 +104,7 @@ export default {
'COLOR': 'Color',
'ADD_NEW_ARTICLE': 'Add new article',
'ADD_ARTICLE': 'Add article',
'ADD_CUSTOM_TAG': 'Add custom tag',
'LAST_EDITED_IN': 'Last edited in {date}',
'EDIT': 'Edit',
'NO_RESULTS': 'No results',
@ -207,6 +209,7 @@ export default {
'OPTION': 'Option {index}',
'OPTIONS': 'Options',
'FIELD_DESCRIPTION': 'Field description (Optional)',
'DESCRIPTION_ADD_CUSTOM_TAG': 'here you can add a new custom tag',
'CUSTOM_FIELDS': 'Custom fields',
'CHART_CREATE_TICKET': 'Tickets created',

9
tests/system/custom-field-test.rb Normal file
View File

@ -0,0 +1,9 @@
describe 'CustomField' do
request('/user/logout')
Scripts.login($staff[:email], $staff[:password], true)
describe '/system/add-custom field' do
it 'should add custom field with departments' do
end
end
end