Improve the owner label inside share panel (#604)

GeoNode · Nov 19, 2021 · fe5d715 · fe5d715
1 parent baec6ac
commit fe5d715
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 11 deletions.
diff --git a/geonode_mapstore_client/client/js/components/Permissions/Permissions.jsx b/geonode_mapstore_client/client/js/components/Permissions/Permissions.jsx
@@ -170,15 +170,25 @@ function Permissions({
                     {filteredEntries
                         .filter((item) => item.permissions === 'owner' && !item.is_superuser)
                         .map((item) => {
-                            return (<p className="gn-share-permissions-name" >
-                                <Message msgId="gnviewer.ownerPermission" />: {' '}
-                                <a href={`/people/profile/${item?.username}/`}>
-                                    {(item?.first_name !== "" && item?.last_name !== "") ?
-                                        (item?.first_name + ' ' + item?.last_name) :
-                                        item?.username
-                                    }
-                                </a>
-                            </p>);
+                            return (
+                                <div className="gn-share-permissions-row">
+                                    <p className="gn-share-permissions-label gn-share-permissions-name"><Message msgId="gnviewer.permissionOwner" />:</p>
+                                    <div className="gn-share-permissions-owner">
+                                        <div className="gn-share-permission-tag">
+                                            <div className="gn-share-permissions-icon">
+                                                {item.avatar
+                                                    ? <img src={item.avatar}/>
+                                                    : <FaIcon name={item.type} />}
+                                            </div>
+                                            <a className="gn-share-permissions-owners-name" href={`/people/profile/${item?.username}/`}>
+                                                {(item?.first_name !== "" && item?.last_name !== "") ?
+                                                    (item?.first_name + ' ' + item?.last_name) :
+                                                    item?.username
+                                                }
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>);
                         })}
                     {permissionsGroups
                         .map((group) => {

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_share.less b/geonode_mapstore_client/client/themes/geonode/less/_share.less
@@ -6,12 +6,14 @@
     .gn-share-panel {
         .color-var(@theme-vars[main-color]);
         .background-color-var(@theme-vars[main-bg]);
-        .gn-share-permissions-list-head {
+        .gn-share-permissions-list-head,
+        .gn-share-permission-tag {
             .background-color-var(@theme-vars[main-bg]);
         }
     }
     .gn-share-permissions-head,
-    .gn-share-permissions-container {
+    .gn-share-permissions-container,
+    .gn-share-permission-tag {
         .border-color-var(@theme-vars[main-border-color]);
     }
     .gn-share-permissions-pinned {
@@ -157,6 +159,40 @@
     }
 }
 
+.gn-share-permissions-label {
+    font-weight: bold;
+    margin: 0;
+}
+
+.gn-share-permissions-owner {
+    min-width: 200px;
+    padding: 0 0.25rem;
+
+
+}
+
+.gn-share-permission-tag {
+    display: flex;
+    align-items: center;
+    max-width: calc(200px - 0.5rem);
+    border-radius: 20px;
+    border-width: 1px;
+    border-style: solid;
+    white-space: nowrap;
+    padding: .25rem;
+}
+
+.gn-share-permission-tag a {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-left: 0.25rem;
+}
+
+.gn-share-permission-tag .gn-share-permissions-icon img {
+    width: unset;
+}
+
 .gn-geo-limits {
     position: relative;
     width: 300px;