From 00c77824a9d21af73a8d8166249bfa848f3318a9 Mon Sep 17 00:00:00 2001
From: Aurelsicoko <aurelsicoko@gmail.com>
Date: Thu, 21 Sep 2017 14:03:17 +0200
Subject: [PATCH] Generate relation attribute in right order and fix select on
 relation modal

---
 .../admin/src/components/RelationBox/index.js |  2 +-
 .../src/components/RelationBox/styles.scss    | 34 +++++++++++--------
 .../services/ContentTypeBuilder.js            |  5 +--
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/index.js
index 9e1f187df3..43ae6b9225 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/index.js
@@ -45,7 +45,7 @@ class RelationBox extends React.Component { // eslint-disable-line react/prefer-
           {map(this.props.dropDownItems, (value, key) => {
             const divStyle = get(this.props.header, 'name') === value.name ? { color: '#323740', fontWeight: 'bold'} : { color: 'rgba(50,55,64, 0.75)'};
             return (
-              <div style={{ height: '3.8rem'}} key={key}>
+              <div style={{ height: '3.6rem'}} key={key}>
                 <DropdownItem onClick={this.handleClick} id={value.name}>
                   <div style={divStyle} id={value.name}>
                     <i className={`fa ${value.icon}`} style={divStyle} />
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/styles.scss
index b3db0b4649..f26e5e7eb4 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/styles.scss
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationBox/styles.scss
@@ -21,12 +21,12 @@
   text-transform: capitalize;
   display: block;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  overflow: visible;
 
   > i {
     margin-right: 8px;
-    color: rgba(50, 55, 64, 0.75);
+    color: #323740;
     font-size: 1.3rem;
     font-weight: 100;
   }
@@ -48,16 +48,17 @@
 .dropDown {
   position: absolute;
   width: 100%;
+  height: 100%;
   display: flex;
-  top: .5rem;
+  top: 0; left: 0;
   justify-content: flex-end;
 
   > div {
     width: 100%;
     > button {
+      cursor: pointer;
       width: 100%;
       text-align: right;
-      cursor: pointer;
       background-color: transparent;
       border: none;
       font-size: 14px;
@@ -82,28 +83,33 @@
 }
 
 .dropDownContent {
-  top: 102%;
-  // left: -18.2rem;
+  top: 100%;
   padding: 0;
   border-radius: 0;
   border: none;
   font-family: Lato;
+  box-shadow: 0 2px 4px rgba(203, 211, 224, .5);
+
   > div {
     min-width: 21.5rem;
 
     > button {
+      padding: 0 15px;
+
       > div {
-        border-bottom: 1px solid #F6F6F6;
-        font-family: Lato;
-        text-transform: capitalize;
-        font-size: 1.3rem;
-        color: rgba(50, 55, 64, 0.75);
         cursor: pointer;
+        border-bottom: 1px solid #F6F6F6;
+        font-size: 1.3rem;
+        font-family: Lato;
+        font-weight: 400;
+        text-transform: capitalize;
+        color: #323740;
+
         > i {
           margin-right: 8px;
-          color: rgba(50, 55, 64, 0.75);
-          font-size: 1.3rem;
-          font-weight: 100;
+          font-size: 1.2rem;
+          font-weight: 100 !important;
+          color: #323740;
         }
       }
     }
diff --git a/packages/strapi-plugin-content-type-builder/services/ContentTypeBuilder.js b/packages/strapi-plugin-content-type-builder/services/ContentTypeBuilder.js
index 48d313784c..8587edd42f 100755
--- a/packages/strapi-plugin-content-type-builder/services/ContentTypeBuilder.js
+++ b/packages/strapi-plugin-content-type-builder/services/ContentTypeBuilder.js
@@ -136,8 +136,7 @@ module.exports = {
         const attr = {
           required: relation.required,
           columnName: relation.columnName,
-          unique: relation.unique,
-          via: relation.key
+          unique: relation.unique
         };
 
         switch (relation.nature) {
@@ -152,6 +151,8 @@ module.exports = {
           default:
         }
 
+        attr.via = relation.key;
+
         attrs[attribute.name] = attr;
       }