Merge pull request #689 from huridocs/407-settings-btn

#407 - Fix edit/delete buttons position on Settings
huridocs · Nov 29, 2016 · ce48c32 · ce48c32
2 parents 64c974c + f4d4591
commit ce48c32
Show file tree

Hide file tree

Showing 22 changed files with 83 additions and 77 deletions.
diff --git a/app/react/App/scss/Vars.scss b/app/react/App/scss/Vars.scss
diff --git a/app/react/App/scss/elements/_panel.scss b/app/react/App/scss/elements/_panel.scss
@@ -10,7 +10,12 @@
 }
 
 .panel > .list-group .list-group-item {
-    //border-width: 1px 0 1px 3px;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
     line-height: 23px;
     border-color: $c-grey-light;
     border-left-color: transparent;
@@ -42,13 +47,18 @@
     }
 
     .form-group {
-      margin: 0 0 5px;
+      width: 100%;
+      margin: 3px 0;
     }
     .form-control {
       margin: 0;
     }
 }
 
+.list-group-item-actions {
+  white-space: nowrap;
+}
+
 .panel {
   .list-group {
     .list-group-item {
@@ -96,10 +106,5 @@
         opacity: 0;
       }
     }
-    .list-group-item-actions {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-    }
   }
 }
diff --git a/app/react/App/scss/modules/_settings-nav.scss b/app/react/App/scss/modules/_settings-nav.scss
@@ -1,3 +1,20 @@
 .navLinks {
   @include draggable;
 }
+
+.NavlinksSettings {
+  .panel-heading {
+    height: 50px;
+    padding: 0 15px;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+  }
+  .list-group-item {
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+  }
+}
diff --git a/app/react/App/scss/modules/_settings-translations.scss b/app/react/App/scss/modules/_settings-translations.scss
@@ -0,0 +1,6 @@
+.EditTranslationForm {
+  .list-group-item {
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+  }
+}
diff --git a/app/react/App/scss/styles.scss b/app/react/App/scss/styles.scss
@@ -30,6 +30,7 @@
 @import "modules/settings-nav";
 @import "modules/settings-metadata";
 @import "modules/settings-filters";
+@import "modules/settings-translations";
 @import "modules/uploads";
 @import "modules/login";
 @import "modules/markdown";
@@ -38,4 +39,3 @@
 @import "../../Timeline/scss/timeline";
 @import "utilities/utilities";
 
-@import "transitions/transitions";
diff --git a/app/react/App/scss/transitions/_transitions.scss b/app/react/App/scss/transitions/_transitions.scss
diff --git a/app/react/I18N/components/EditTranslationForm.js b/app/react/I18N/components/EditTranslationForm.js
@@ -63,7 +63,7 @@ export class EditTranslationForm extends Component {
 
     let contextName = defaultTranslationContext.label;
     return (
-      <div className="relationType">
+      <div className="EditTranslationForm">
           <Form
             model="translationsForm"
             onSubmit={this.props.saveTranslations}>

diff --git a/app/react/Pages/components/PagesList.js b/app/react/Pages/components/PagesList.js
@@ -29,7 +29,7 @@ export class PagesList extends Component {
           {pages.map((page, index) =>
             <li key={index} className="list-group-item">
               <I18NLink to={'/settings/pages/edit/' + page.get('sharedId')}>{page.get('title')}</I18NLink>
-              <div className="pull-right">
+              <div className="list-group-item-actions">
                 <I18NLink to={'/settings/pages/edit/' + page.get('sharedId')} className="btn btn-default btn-xs">
                   <i className="fa fa-pencil"></i>&nbsp;
                   <span>{t('System', 'Edit')}</span>

diff --git a/app/react/Settings/components/DocumentTypesList.js b/app/react/Settings/components/DocumentTypesList.js
@@ -39,7 +39,7 @@ export class DocumentTypesList extends Component {
           }
           return <li key={index} className="list-group-item">
               <I18NLink to={'/settings/documents/edit/' + template._id}>{template.name}</I18NLink>
-              <div className="pull-right">
+              <div className="list-group-item-actions">
                 <I18NLink to={'/settings/documents/edit/' + template._id} className="btn btn-default btn-xs">
                   <i className="fa fa-pencil"></i>&nbsp;
                   <span>{t('System', 'Edit')}</span>

diff --git a/app/react/Settings/components/EntityTypesList.js b/app/react/Settings/components/EntityTypesList.js
@@ -40,7 +40,7 @@ export class EntityTypesList extends Component {
           }
           return <li key={index} className="list-group-item">
               <Link to={'/settings/entities/edit/' + template._id}>{template.name}</Link>
-              <div className="pull-right">
+              <div className="list-group-item-actions">
                 <Link to={'/settings/entities/edit/' + template._id} className="btn btn-default btn-xs">
                   <i className="fa fa-pencil"></i>&nbsp;
                   <span>{t('System', 'Edit')}</span>

diff --git a/app/react/Settings/components/NavlinkForm.js b/app/react/Settings/components/NavlinkForm.js
@@ -86,17 +86,18 @@ export class NavlinkForm extends Component {
             <i className="fa fa-reorder"></i>&nbsp;
             <i className="fa fa-link"></i>&nbsp;&nbsp;{link.title && link.title.trim().length ? link.title : <em>no title</em>}
           </span>
+        </div>
+        <div>
           <button type="button"
-                  className="btn btn-danger btn-xs pull-right property-remove"
-                  onClick={() => this.props.removeLink(index)}>
-            <i className="fa fa-trash"></i> Delete
-          </button>
-          &nbsp;
-          <button type="button"
-                  className="btn btn-default btn-xs pull-right property-edit"
+                  className="btn btn-default btn-xs property-edit"
                   onClick={() => this.props.editLink(link.localID)}>
             <i className="fa fa-pencil"></i> Edit
           </button>
+          <button type="button"
+                  className="btn btn-danger btn-xs property-remove"
+                  onClick={() => this.props.removeLink(index)}>
+            <i className="fa fa-trash"></i> Delete
+          </button>
         </div>
 
         <ShowIf if={uiState.get('editingLink') === link.localID}>

diff --git a/app/react/Settings/components/NavlinksSettings.js b/app/react/Settings/components/NavlinksSettings.js
@@ -20,12 +20,12 @@ export class NavlinksSettings extends Component {
 
   render() {
     const {collection, links} = this.props;
-    const nameGroupClass = 'template-name form-group';
+    const nameGroupClass = 'template-name';
 
     const payload = {_id: collection.get('_id'), _rev: collection.get('_rev'), links};
 
     return (
-      <div className="relationType">
+      <div className="NavlinksSettings">
         <div className="col-xs-12">
           <Form model="settings.navlinksData"
                 onSubmit={this.props.saveLinks.bind(this, payload)}

diff --git a/app/react/Settings/components/RelationTypesList.js b/app/react/Settings/components/RelationTypesList.js
@@ -36,7 +36,7 @@ export class RelationTypesList extends Component {
         {this.props.relationTypes.toJS().map((relationType, index) => {
           return <li key={index} className="list-group-item">
               <I18NLink to={'/settings/connections/edit/' + relationType._id}>{relationType.name}</I18NLink>
-              <div className="pull-right">
+              <div className="list-group-item-actions">
                 <I18NLink to={'/settings/connections/edit/' + relationType._id} className="btn btn-default btn-xs">
                   <i className="fa fa-pencil"></i>&nbsp;
                   <span>{t('System', 'Edit')}</span>

diff --git a/app/react/Settings/components/ThesaurisList.js b/app/react/Settings/components/ThesaurisList.js
@@ -36,7 +36,7 @@ export class ThesaurisList extends Component {
         {this.props.dictionaries.toJS().map((dictionary, index) => {
           return <li key={index} className="list-group-item">
               <I18NLink to={'/settings/dictionaries/edit/' + dictionary._id}>{dictionary.name}</I18NLink>
-              <div className="pull-right">
+              <div className="list-group-item-actions">
                 <I18NLink to={'/settings/dictionaries/edit/' + dictionary._id} className="btn btn-default btn-xs">
                   <i className="fa fa-pencil"></i>&nbsp;
                   <span>{t('System', 'Edit')}</span>

diff --git a/app/react/Settings/components/TranslationsList.js b/app/react/Settings/components/TranslationsList.js
@@ -17,7 +17,7 @@ export class TranslationsList extends Component {
         {defaultTranslation.contexts.map((context, index) => {
           return <li key={index} className="list-group-item">
               <I18NLink to={'/settings/translations/edit/' + encodeURIComponent(context.id)}>{context.label}</I18NLink>
-              <div className="pull-right">
+              <div className="list-group-item-actions">
                 <I18NLink to={'/settings/translations/edit/' + encodeURIComponent(context.id)} className="btn btn-default btn-xs">
                   <i className="fa fa-language"></i>
                   <span>{t('System', 'Translate')}</span>

diff --git a/app/react/Settings/components/specs/NavlinkForm.spec.js b/app/react/Settings/components/specs/NavlinkForm.spec.js
@@ -86,12 +86,12 @@ describe('NavlinkForm', () => {
   });
 
   it('should have an edit button to activate editing link mode', () => {
-    component.find('button').last().props().onClick();
+    component.find('button').first().props().onClick();
     expect(props.editLink).toHaveBeenCalledWith('newLink1');
   });
 
   it('should have a remove button to remove a link', () => {
-    component.find('button').first().props().onClick();
+    component.find('button').last().props().onClick();
     expect(props.removeLink).toHaveBeenCalledWith(1);
   });
 

diff --git a/app/react/Templates/components/MetadataProperty.js b/app/react/Templates/components/MetadataProperty.js
@@ -46,28 +46,26 @@ export class MetadataProperty extends Component {
 
     return connectDragSource(connectDropTarget(
       <li className={propertyClass}>
-        <div>
-          <span className="property-name"><i className="fa fa-reorder"></i>&nbsp;<i className={iconClass}></i>&nbsp;{label}</span>
-          <div className="pull-right">
-            <ShowIf if={formState.errors[`properties.${index}.label.duplicated`]}>
-              <span className="validation-error">
-                <i className="fa fa-exclamation-triangle"></i>&nbsp;Duplicated label&nbsp;
-              </span>
-            </ShowIf>
-            <button type="button" className="btn btn-default btn-xs property-edit" onClick={() => this.props.editProperty(localID)}>
-              <i className="fa fa-pencil"></i> Edit
-            </button>
-            <button type="button" className="btn btn-danger btn-xs property-remove"
-              onClick={() => this.props.removeProperty('RemovePropertyModal', index)} >
-              <i className="fa fa-trash"></i> Delete
-            </button>
+        <span className="property-name"><i className="fa fa-reorder"></i>&nbsp;<i className={iconClass}></i>&nbsp;{label}</span>
+        <div className="list-group-item-actions">
+          <ShowIf if={formState.errors[`properties.${index}.label.duplicated`]}>
+            <span className="validation-error">
+              <i className="fa fa-exclamation-triangle"></i>&nbsp;Duplicated label&nbsp;
+            </span>
+          </ShowIf>
+          <button type="button" className="btn btn-default btn-xs property-edit" onClick={() => this.props.editProperty(localID)}>
+            <i className="fa fa-pencil"></i> Edit
+          </button>
+          <button type="button" className="btn btn-danger btn-xs property-remove"
+            onClick={() => this.props.removeProperty('RemovePropertyModal', index)} >
+            <i className="fa fa-trash"></i> Delete
+          </button>
+         </div>
+         <ShowIf if={editingProperty === localID}>
+           <div className={'propery-form' + (editingProperty === localID ? ' expand' : '') }>
+             {this.renderForm()}
            </div>
-        </div>
-        <ShowIf if={editingProperty === localID}>
-          <div className={'propery-form' + (editingProperty === localID ? ' expand' : '') }>
-            {this.renderForm()}
-          </div>
-        </ShowIf>
+         </ShowIf>
       </li>
     ));
   }

diff --git a/app/react/Templates/components/PropertyOption.js b/app/react/Templates/components/PropertyOption.js
@@ -14,9 +14,11 @@ export class PropertyOption extends Component {
 
     return (
       connectDragSource(
-        <li className="list-group-item" >
-          <i className="fa fa-clone"></i>&nbsp;
-          <i className={iconClass}></i>&nbsp;{label}
+        <li className="list-group-item">
+          <span>
+            <i className="fa fa-clone"></i>
+            <i className={iconClass}></i>&nbsp;{label}
+          </span>
         </li>
       )
     );

diff --git a/app/react/Templates/scss/templates.scss b/app/react/Templates/scss/templates.scss
@@ -31,6 +31,8 @@
     border-radius: 4px !important;
     border: 1px solid $c-grey-light !important;
     box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05) !important;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
     .fa-clone,
     .fa-arrows-v {
       margin: 0 15px 0 0;

diff --git a/app/react/Thesauris/scss/thesauris.scss b/app/react/Thesauris/scss/thesauris.scss
@@ -37,7 +37,7 @@
   }
   .list-group-item .btn {
     position: absolute;
-    top: 10px;
+    top: 13px;
     right: 15px;
   }
 }
diff --git a/app/react/components/Elements/scss/alert.scss b/app/react/components/Elements/scss/alert.scss
@@ -1,2 +0,0 @@
-@import "../../../App/scss/Vars.scss";
-

diff --git a/app/react/components/Elements/scss/feedback.scss b/app/react/components/Elements/scss/feedback.scss
@@ -1,5 +1,3 @@
-@import "../../../App/scss/Vars.scss";
-
 .feedback {
   text-align: center;
   display: inline-block;
@@ -9,7 +7,7 @@
   font-style: italic;
 
   .fa {
-    color: $hardFontColor;
+    color: #222;
   }
 
   &-success {