From bb3c0f530d53e5a0ed98a0419df5fba1cdb34b54 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Wed, 15 Feb 2017 12:12:54 +0100
Subject: [PATCH 1/3] Fix #1453. Improved style in user manager

Now support long group names and long groups lists.
---
 web/client/components/manager/users/UserCard.jsx | 16 ++++++++++++++--
 .../manager/users/style/userdialog.css           |  9 +++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/client/components/manager/users/UserCard.jsx b/web/client/components/manager/users/UserCard.jsx
index ceb4c05862..1acc77bd1a 100644
--- a/web/client/components/manager/users/UserCard.jsx
+++ b/web/client/components/manager/users/UserCard.jsx
@@ -34,7 +34,9 @@ const UserCard = React.createClass({
                 backgroundPosition: "center",
                 backgroundRepeat: "repeat-x"
             },
-            innerItemStyle: {"float": "left", margin: "10px"}
+            innerItemStyle: {"float": "left",
+                margin: "10px"
+            }
         };
     },
     renderStatus() {
@@ -47,7 +49,17 @@ const UserCard = React.createClass({
     },
     renderGroups() {
         return (<div key="groups" style={this.props.innerItemStyle}><div><strong><Message msgId="users.groupTitle"/></strong></div>
-    {this.props.user && this.props.user.groups ? this.props.user.groups.map((group)=> (<div key={"group-" + group.id}>{group.groupName}</div>)) : null}
+        <div style={{
+            width: "260px",
+            maxHeight: "100px",
+            overflowY: "auto",
+            overflowX: "visible"
+        }}>{this.props.user && this.props.user.groups ? this.props.user.groups.map((group) => (<div style={{
+            maxWidth: "240px",
+            overflowX: "hidden",
+            textOverflow: "ellipsis"
+          }}key={"group-" + group.id}>{group.groupName}</div>)) : null}</div>
+
      </div>);
     },
     renderRole() {
diff --git a/web/client/components/manager/users/style/userdialog.css b/web/client/components/manager/users/style/userdialog.css
index a2fbf20a3e..7901a112c0 100644
--- a/web/client/components/manager/users/style/userdialog.css
+++ b/web/client/components/manager/users/style/userdialog.css
@@ -22,3 +22,12 @@
     text-overflow: ellipsis;
     overflow: hidden;
 }
+.user-edit-dialog  .Select--multi .Select-value-label{
+    max-width: 180px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.user-edit-dialog  .Select-multi-value-wrapper {
+    max-height: 300px;
+    overflow: auto;
+}

From 2a6f9f6b614fc249f91501c2bd17f566aaf04079 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Wed, 15 Feb 2017 15:06:42 +0100
Subject: [PATCH 2/3] fixed group selecttor with only one group

---
 web/client/components/manager/users/style/userdialog.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/client/components/manager/users/style/userdialog.css b/web/client/components/manager/users/style/userdialog.css
index 7901a112c0..152d2c6295 100644
--- a/web/client/components/manager/users/style/userdialog.css
+++ b/web/client/components/manager/users/style/userdialog.css
@@ -30,4 +30,5 @@
 .user-edit-dialog  .Select-multi-value-wrapper {
     max-height: 300px;
     overflow: auto;
+    min-height: 36px;
 }

From 7dcf6c4359cfbb5cb6aa69b2338d7db2091ca5a3 Mon Sep 17 00:00:00 2001
From: Lorenzo Natali <lorenzo.natali@geo-solutions.it>
Date: Wed, 15 Feb 2017 16:27:28 +0100
Subject: [PATCH 3/3] refactored using flex-box

---
 .../components/manager/users/UserCard.jsx     | 25 +++++++------------
 .../manager/users/style/usercard.css          | 24 ++++++++++++++++++
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/web/client/components/manager/users/UserCard.jsx b/web/client/components/manager/users/UserCard.jsx
index 1acc77bd1a..51cb62fbb3 100644
--- a/web/client/components/manager/users/UserCard.jsx
+++ b/web/client/components/manager/users/UserCard.jsx
@@ -48,27 +48,18 @@ const UserCard = React.createClass({
        </div>);
     },
     renderGroups() {
-        return (<div key="groups" style={this.props.innerItemStyle}><div><strong><Message msgId="users.groupTitle"/></strong></div>
-        <div style={{
-            width: "260px",
-            maxHeight: "100px",
-            overflowY: "auto",
-            overflowX: "visible"
-        }}>{this.props.user && this.props.user.groups ? this.props.user.groups.map((group) => (<div style={{
-            maxWidth: "240px",
-            overflowX: "hidden",
-            textOverflow: "ellipsis"
-          }}key={"group-" + group.id}>{group.groupName}</div>)) : null}</div>
+        return (<div key="groups" className="groups-container" style={this.props.innerItemStyle}><div><strong><Message msgId="users.groupTitle"/></strong></div>
+    <div className="groups-list">{this.props.user && this.props.user.groups ? this.props.user.groups.map((group) => (<div className="group-item" key={"group-" + group.id}>{group.groupName}</div>)) : null}</div>
 
      </div>);
     },
     renderRole() {
-        return (<div key="role" style={this.props.innerItemStyle}><div><strong><Message msgId="users.roleTitle"/></strong></div>
+        return (<div key="role" className="role-containter" style={this.props.innerItemStyle}><div><strong><Message msgId="users.roleTitle"/></strong></div>
             {this.props.user.role}
         </div>);
     },
     renderAvatar() {
-        return (<div key="avatar" style={this.props.innerItemStyle} ><Button bsStyle="primary" type="button" className="square-button">
+        return (<div key="avatar" className="avatar-containter" style={this.props.innerItemStyle} ><Button bsStyle="primary" type="button" className="square-button">
             <Glyphicon glyph="user" />
             </Button></div>);
     },
@@ -77,9 +68,11 @@ const UserCard = React.createClass({
            <GridCard className="user-thumb" style={this.props.style} header={this.props.user.name}
                 actions={this.props.actions}
                >
-            {this.renderAvatar()}
-            {this.renderRole()}
-             {this.renderGroups()}
+            <div className="user-data-container">
+                {this.renderAvatar()}
+                {this.renderRole()}
+                {this.renderGroups()}
+            </div>
              {this.renderStatus()}
            </GridCard>
         );
diff --git a/web/client/components/manager/users/style/usercard.css b/web/client/components/manager/users/style/usercard.css
index 0fa06a8a7f..82013ee6d0 100644
--- a/web/client/components/manager/users/style/usercard.css
+++ b/web/client/components/manager/users/style/usercard.css
@@ -12,7 +12,31 @@
 .user-thumb .gridcard-tools,.group-thumb .gridcard-tools {
     right: 0
 }
+.user-data-container {
+    display: flex;
+    width: 100%;
+}
+.user-thumb .role-containter{
+    width: 50px;
+}
+.user-thumb .avatar-containter{
+    width: 50px;
+}
+.user-thumb  .groups-container {
+    white-space: nowrap;
+    overflow: hidden;
+}
+.user-thumb  .groups-container .groups-list{
+    width: 100%;
+    max-height: 100px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
 
+.user-thumb .groups-container .groups-list .group-item {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
 .group-thumb .group-thumb-description {
     /* ellipsis for description */
     margin: 10px;