SharingManager UI

2 files changed, 119 insertions, 84 deletions

diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index d942550ca..98fea0dcb 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -29,6 +29,7 @@
         }
 
         .share-container {
+
             .share-setup {
                 display: flex;
                 margin-bottom: 20px;
@@ -49,11 +50,15 @@
                     outline: none;
                     text-align: justify; // for Edge
                     text-align-last: end;
+                    font-size: 13px;
+                    min-width: 90px;
+                    height: 36;
+                    margin-left: 2px;
                 }
 
                 .share-button {
-                    height: 105%;
-                    margin-left: 2%;
+                    height: 36;
+                    margin-left: 3%;
                     background-color: black;
                 }
             }
@@ -126,9 +131,10 @@
                 .users-list {
                     font-style: italic;
                     background: #e8e8e8;
+                    border: 2px solid gray;
                     padding-left: 10px;
                     padding-right: 10px;
-                    width: 100%;
+                    width: 97%;
                     overflow-y: scroll;
                     overflow-x: hidden;
                     text-align: left;
@@ -196,29 +202,51 @@
         }
     }
 
+    .title-individual{
+        height: 25px;
+        padding-left: 2;
+        width: 97%;
+        margin-top: 10px;
+        margin-left: -8px;
+        font-size: 14;
+        margin-bottom: -4;
+        border: 2px solid gray;
+        border-bottom: none;
+        align-items: center;
+        display: flex;
+    }
+
+    .title-group{
+        height: 25px;
+        padding-left: 2;
+        width: 97%;
+        margin-top: 10px;
+        margin-left: -.5px;
+        font-size: 14;
+        margin-bottom: -4;
+        border: 2px solid gray;
+        border-bottom: none;
+        align-items: center;
+        display: flex;
+    }
+
     .container {
         display: flex;
         position: relative;
         margin-top: 5px;
-        // margin-bottom: 10px;
+        margin-left: -5px;
         font-size: 22px;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        width: 265px;
+        width: 97%;
         text-align: left;
         font-style: normal;
-        font-size: 14;
+        font-size: 12.5;
         font-weight: normal;
-        padding: 0;
-        align-items: center;
-
-        margin-left: -5px;
 
-        display: flex;
         padding: 3px;
-        align-items: right;
         border-bottom: 0.5px solid grey;
 
         .group-info {
@@ -232,14 +260,7 @@
         }
 
         .padding {
-            // padding: 0 10px 0 0;
-            // color: black;
-            // text-overflow: ellipsis;
-            // overflow: hidden;
-            // white-space: nowrap;
-            // max-width: 40%;
-
-            width: 150px;
+            max-width: 150px;
             overflow-x: hidden;
             display: inline-block;
             text-overflow: ellipsis;
@@ -261,61 +282,70 @@
             align-items: flex-end;
             right: -10;            
         }
+    }
 
-        .permissions-dropdown-None{
-            align-items: flex-end;
-            margin-right: -12px;
-            padding: 0px;
-            padding-left: 3px;
-            background: grey;
-            color: rgb(71, 71, 71);
-            border-radius: 6px;
-            border: 1px solid rgb(71, 71, 71);
-        }
-        .permissions-dropdown-Edit,
-        .permissions-dropdown-Admin {
-            align-items: flex-end;
-            margin-right: -12px;
-            padding: 0px;
-            padding-left: 3px;
-            background: rgb(254, 254, 199);
-            color: rgb(75, 75, 5);
-            border-radius: 6px;
-            border: 1px solid rgb(75, 75, 5);
-        }
-        .permissions-dropdown-Augment{
-            align-items: flex-end;
-            margin-right: -12px;
-            padding: 0px;
-            padding-left: 3px;
-            background: rgb(208, 255, 208);
-            color:rgb(19, 80, 19);
-            border-radius: 6px;
-            border: 1px solid rgb(19, 80, 19);
-
-        }
-        .permissions-dropdown-View{
-            align-items: flex-end;
-            margin-right: -12px;
-            padding: 0px;
-            padding-left: 3px;
-            background: rgb(213, 213, 255);
-            color: rgb(25, 25, 101);
-            border-radius: 6px;
-            border: 1px solid rgb(25, 25, 101);
-        }
-        .permissions-dropdown-Not-Shared{
-            align-items: flex-end;
-            margin-right: -12px;
-            padding: 0px;
-            padding-left: 3px;
-            background: rgb(255, 207, 207);
-            color: rgb(138, 47, 47);
-            border-radius: 6px;
-            border: 1px solid rgb(138, 47, 47);
-        }
+    .permissions-dropdown-None{
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: grey;
+        color: rgb(71, 71, 71);
+        border-radius: 6px;
+        border: 1px solid rgb(71, 71, 71);
+    }
+    .permissions-dropdown-Edit,
+    .permissions-dropdown-Admin {
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: rgb(254, 254, 199);
+        color: rgb(75, 75, 5);
+        border-radius: 6px;
+        border: 1px solid rgb(75, 75, 5);
+    }
+    .permissions-dropdown-Augment{
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: rgb(208, 255, 208);
+        color:rgb(19, 80, 19);
+        border-radius: 6px;
+        border: 1px solid rgb(19, 80, 19);
 
     }
+    .permissions-dropdown-View{
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: rgb(213, 213, 255);
+        color: rgb(25, 25, 101);
+        border-radius: 6px;
+        border: 1px solid rgb(25, 25, 101);
+    }
+    .permissions-dropdown-Not-Shared{
+        height: 100%;
+        min-width: 85px;
+        text-align: right;
+        margin-right: -12px;
+        padding: 0px;
+        padding-left: 3px;
+        background: rgb(255, 207, 207);
+        color: rgb(138, 47, 47);
+        border-radius: 6px;
+        border: 1px solid rgb(138, 47, 47);
+    }
 
     .no-users {
         margin-top: 20px;
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 8b829158e..3a3d393a0 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -587,6 +587,7 @@ export class SharingManager extends React.Component<{}> {
             return !permissions ? null : (
                 <div key={groupKey} className={'container'}>
                     <div className={'padding'}>{StrCast(group.title)}</div>
+                    &nbsp;
                     {group instanceof Doc ? (
                         <div className="group-info" onClick={action(() => (GroupManager.Instance.currentGroup = group))}>
                             <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
@@ -639,9 +640,11 @@ export class SharingManager extends React.Component<{}> {
                                         }),
                                     }}
                                 />
-                                <select className="permissions-select" onChange={this.handlePermissionsChange} value={this.permissions}>
-                                    {this.sharingOptions(true)}
-                                </select>
+                                <div className='permissions-select'>
+                                    <select className={`permissions-dropdown-${this.permissions}`} onChange={this.handlePermissionsChange} value={this.permissions}>
+                                        {this.sharingOptions(true)}
+                                    </select>
+                                </div>
                                 <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
                                     Share
                                 </button>
@@ -666,20 +669,22 @@ export class SharingManager extends React.Component<{}> {
                     <div className="main-container">
                         <div className={'individual-container'}>
                             <div className="user-sort" onClick={action(() => (this.individualSort = this.individualSort === 'ascending' ? 'descending' : this.individualSort === 'descending' ? 'none' : 'ascending'))}>
-                                Individuals{' '}
-                                {this.individualSort === 'ascending' ? (
-                                    <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
-                                ) : this.individualSort === 'descending' ? (
-                                    <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
-                                ) : (
-                                    <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
-                                )}
+                                <div className='title-individual'>
+                                    Individuals &nbsp;
+                                    {this.individualSort === 'ascending' ? (
+                                        <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
+                                    ) : this.individualSort === 'descending' ? (
+                                        <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
+                                    ) : (
+                                        <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
+                                    )}
+                                </div>
                             </div>
                             <div className={'users-list'}>{userListContents}</div>
                         </div>
                         <div className={'group-container'}>
                             <div className="user-sort" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
-                                <div className="container">
+                                <div className='title-group'>
                                     Groups &nbsp;
                                     <div className="group-info" onClick={action(() => GroupManager.Instance?.open())}>
                                         <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />