Fix styling of custom tags

client/src/app/admin/panel/admin-panel-menu.js

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

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

@@ -27,8 +27,8 @@ class AdminPanelCustomTagsModal extends React.Component {
 
     render() {
         return (
-            <div>
+            <div className='admin-panel-custom-tags-modal'>
-                <Header title={'new tags'} description={i18n('Here you can add a topic that works as a category for articles.')} />
+                <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} />
-
+                    <div className='admin-panel-custom-tags-modal__actions'>
-                    <SubmitButton className="topic-edit-modal__save-button" type="secondary" size="small">
+                        <SubmitButton  type="secondary" size="small">
-                        {i18n('SAVE')}
+                            {i18n('SAVE')}
-                    </SubmitButton>
+                        </SubmitButton>
-                    <Button className="topic-edit-modal__discard-button" onClick={this.onDiscardClick.bind(this)} size="small">
+                        <Button onClick={this.onDiscardClick.bind(this)} size="small">
-                        {i18n('CANCEL')}
+                            {i18n('CANCEL')}
-                    </Button>
+                        </Button>
+                    </div>
                 </Form>
             </div>
         );

client/src/app/admin/panel/tickets/admin-panel-custom-tags-modal.scss

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

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

@@ -41,19 +41,27 @@ class AdminPanelCustomTags extends React.Component {
 
     renderContent() {
         return (
-            <div className="row">
+            <div className="admin-panel-custom-tags__content">
-                <div className="col-md-3">
+                <div>
-                    <Button onClick={this.openTagModal.bind(this)} type="secondary" ><Icon name="pencil"/>'NUEVO TAGi18n'</Button>
+                    <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)}/>

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

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

client/src/core-components/tag.js

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

client/src/core-components/tag.scss

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

client/src/data/fixtures/system-fixtures.js

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

client/src/data/fixtures/ticket-fixtures.js

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

client/src/data/languages/en.js

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

tests/system/custom-field-test.rb

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