Style remote-users-add form

pydio · Feb 24, 2016 · 6acb79c · 6acb79c
1 parent 1c8cc98
commit 6acb79c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 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
@@ -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
@@ -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
@@ -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>
             );