Update styling

pydio · Feb 24, 2016 · d051f92 · d051f92
1 parent 2dddc17
commit d051f92
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 10 deletions.
diff --git a/core/src/plugins/action.share/class.ShareCenter.php b/core/src/plugins/action.share/class.ShareCenter.php
@@ -1501,6 +1501,7 @@ public function shareNode($httpVars, &$update){
 
         }
 
+        // OCS LINK
         if(isSet($httpVars["ocs_data"])){
 
             $ocsData = json_decode($httpVars["ocs_data"], true);

diff --git a/core/src/plugins/action.share/res/react-share-form.css b/core/src/plugins/action.share/res/react-share-form.css
@@ -188,7 +188,8 @@ div#react_share_form div.user-badge span.avatar {
 div#react_share_form div.user-badge.user-type-group span.avatar {
   background-color: #47b092;
 }
-div#react_share_form div.user-badge.user-type-tmp_user span.avatar {
+div#react_share_form div.user-badge.user-type-tmp_user span.avatar,
+div#react_share_form div.user-badge.user-type-remote_user span.avatar {
   background-color: #438db3;
 }
 div#react_share_form div.user-badge img {
@@ -245,7 +246,10 @@ div#react_share_form div.remote-users-add div.user {
 }
 div#react_share_form div.remote-users-add button.mui-icon-button {
   margin-top: 26px;
-  color: #ccc;
+  color: #438db3;
+}
+div#react_share_form div.remote-users-add button.mui-icon-button.mui-is-disabled {
+  color: #eee;
 }
 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
@@ -216,7 +216,8 @@ div#react_share_form {
         background-color: @color1;
       }
     }
-    &.user-type-tmp_user{
+    &.user-type-tmp_user,
+    &.user-type-remote_user{
       span.avatar{
         background-color: @color3;
       }
@@ -275,7 +276,10 @@ div#react_share_form {
     }
     button.mui-icon-button{
       margin-top: 26px;
-      color: #ccc;
+      color: @color3;
+      &.mui-is-disabled{
+        color: #eee;
+      }
     }
   }
 }

diff --git a/core/src/plugins/action.share/res/react/ShareDialog.js b/core/src/plugins/action.share/res/react/ShareDialog.js
@@ -74,8 +74,10 @@
             }
             if( (model.getNode().isLeaf() && auth.file_workspaces) || (!model.getNode().isLeaf() && auth.folder_workspaces)){
                 var users = model.getSharedUsers();
+                var ocsUsers = model.getOcsInvitations();
+                var totalUsers = users.length + ocsUsers.length;
                 panels.push(
-                    <ReactMUI.Tab key="target-users" label={'Users' + (users.length?' ('+users.length+')':'')}>
+                    <ReactMUI.Tab key="target-users" label={'Users' + (totalUsers?' ('+totalUsers+')':'')}>
                         <UsersPanel shareModel={model}/>
                     </ReactMUI.Tab>
                 );
@@ -259,8 +261,10 @@
             }*/
             if(this.props.type == 'group') {
                 avatar = <span className="avatar icon-group"/>;
-            }else if(this.props.type == 'temporary'){
+            }else if(this.props.type == 'temporary') {
                 avatar = <span className="avatar icon-plus"/>;
+            }else if(this.props.type == 'remote_user'){
+                avatar = <span className="avatar icon-cloud"/>;
             }else{
                 avatar = <span className="avatar icon-user"/>;
             }
@@ -588,6 +592,10 @@
             shareModel: React.PropTypes.instanceOf(ReactModel.Share)
         },
 
+        getInitialState: function(){
+            return {addDisabled: true};
+        },
+
         addUser:function(){
             var h = this.refs["host"].getValue();
             var u = this.refs["user"].getValue();
@@ -598,21 +606,45 @@
             this.props.shareModel.removeOcsInvitation(invite);
         },
 
+        monitorInput:function(){
+            var h = this.refs["host"].getValue();
+            var u = this.refs["user"].getValue();
+            this.setState({addDisabled:!(h && u)});
+        },
+
         render: function(){
 
             var inv = this.props.shareModel.getOcsInvitations().map(function(invite){
                 var rem = function(){
                     this.removeUser(invite);
                 }.bind(this);
-                return <div>{invite.HOST} -- {invite.USER} -- <span onClick={rem}>X</span></div>;
+                var status;
+                if(!invite.STATUS){
+                    status = 'not sent';
+                }else if(invite.STATUS == 1){
+                    status = 'pending';
+                }else if(invite.STATUS == 2){
+                    status = 'accepted';
+                }else if(invite.STATUS == 4){
+                    status = 'rejected';
+                }
+                var menuItems = [{text:'Remove', callback:rem}];
+                return (
+                    <UserBadge
+                        label={invite.USER + " @ " + invite.HOST + " (" + status + ")"}
+                        avatar={null}
+                        type={"remote_user"}
+                        menus={menuItems}
+                    />
+                );
             }.bind(this));
             return (
                 <div>
                     <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}/>
+                        <ReactMUI.TextField className="host" ref="host" floatingLabelText="Remote Host" onChange={this.monitorInput}/>
+                        <ReactMUI.TextField className="user" ref="user" type="text" floatingLabelText="RemoteUser" onChange={this.monitorInput}/>
+                        <ReactMUI.IconButton tooltip="Add" iconClassName="icon-plus-sign" onClick={this.addUser} disabled={this.state.addDisabled}/>
                     </div>
                     <div>{inv}</div>
                 </div>