Fix #1453. Improved style in user manager

Now support long group names and long groups lists.
geosolutions-it · Feb 15, 2017 · bb3c0f5 · bb3c0f5
1 parent 053933c
commit bb3c0f5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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;
+}