From 6acb79c2de02f6b5be0fb6f63fac773972b57a5d Mon Sep 17 00:00:00 2001
From: cdujeu <charles@ajaxplorer.info>
Date: Wed, 24 Feb 2016 15:24:20 +0100
Subject: [PATCH] Style remote-users-add form

---
 .../action.share/res/react-share-form.css     | 19 +++++++++++++++++++
 .../action.share/res/react-share-form.less    | 17 +++++++++++++++++
 .../action.share/res/react/ShareDialog.js     | 13 ++++++++-----
 3 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/core/src/plugins/action.share/res/react-share-form.css b/core/src/plugins/action.share/res/react-share-form.css
index f43a06f17e..c99badb4fc 100644
--- a/core/src/plugins/action.share/res/react-share-form.css
+++ b/core/src/plugins/action.share/res/react-share-form.css
@@ -228,6 +228,25 @@ div#react_share_form div.user-badge span.user-badge-rights-container {
 div#react_share_form div.user-badge span.user-badge-rights-container input[name="write"] {
   margin-left: 28px;
 }
+div#react_share_form div.remote-users-add {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  margin-top: -23px;
+  padding-left: 12px;
+}
+div#react_share_form div.remote-users-add div.host {
+  width: 66%;
+  margin-right: 6px;
+}
+div#react_share_form div.remote-users-add div.user {
+  margin-top: 1px;
+  width: 40%;
+}
+div#react_share_form div.remote-users-add button.mui-icon-button {
+  margin-top: 26px;
+  color: #ccc;
+}
 div.react-autosuggest {
   padding-left: 4px;
 }
diff --git a/core/src/plugins/action.share/res/react-share-form.less b/core/src/plugins/action.share/res/react-share-form.less
index 8a1c0e07b1..f9ea723ef2 100644
--- a/core/src/plugins/action.share/res/react-share-form.less
+++ b/core/src/plugins/action.share/res/react-share-form.less
@@ -261,6 +261,23 @@ div#react_share_form {
       }
     }
   }
+  div.remote-users-add{
+    display: flex;
+    margin-top: -23px;
+    padding-left: 12px;
+    div.host{
+      width: 66%;
+      margin-right: 6px;
+    }
+    div.user{
+      margin-top: 1px;
+      width: 40%;
+    }
+    button.mui-icon-button{
+      margin-top: 26px;
+      color: #ccc;
+    }
+  }
 }
 div.react-autosuggest {
   padding-left: 4px;
diff --git a/core/src/plugins/action.share/res/react/ShareDialog.js b/core/src/plugins/action.share/res/react/ShareDialog.js
index c09b50410f..771ccc2aca 100644
--- a/core/src/plugins/action.share/res/react/ShareDialog.js
+++ b/core/src/plugins/action.share/res/react/ShareDialog.js
@@ -589,8 +589,8 @@
         },
 
         addUser:function(){
-            var h = this.refs["host"].getDOMNode().value;
-            var u = this.refs["user"].getDOMNode().value;
+            var h = this.refs["host"].getValue();
+            var u = this.refs["user"].getValue();
             this.props.shareModel.addOcsInvitation(h, u);
         },
 
@@ -608,9 +608,12 @@
             }.bind(this));
             return (
                 <div>
-                    <input ref="host" type="text"/>
-                    <input ref="user" type="text"/>
-                    <ReactMUI.FlatButton label="Add" onClick={this.addUser}/>
+                    <h3>Remote Users</h3>
+                    <div className="remote-users-add reset-pydio-forms">
+                        <ReactMUI.TextField className="host" ref="host" floatingLabelText="Remote Host"/>
+                        <ReactMUI.TextField className="user" ref="user" type="text" floatingLabelText="RemoteUser"/>
+                        <ReactMUI.IconButton tooltip="Add" iconClassName="icon-plus-sign" onClick={this.addUser}/>
+                    </div>
                     <div>{inv}</div>
                 </div>
             );