PropertiesView UI updates and sharing symbol icon in heirarchy mapping

4 files changed, 32 insertions, 80 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index c82257d1f..fdbe2f866 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react';
 import { FaUndo } from 'react-icons/fa';
 import { Utils, aggregateBounds, emptyFunction, numberValue, returnFalse, setupMoveUpEvents } from '../../Utils';
 import { DateField } from '../../fields/DateField';
-import { Doc, DocListCast, Field, HierarchyMapping } from '../../fields/Doc';
+import { Doc, DocListCast, Field, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc';
 import { AclAdmin, AclAugment, AclEdit, DocData, Height, Width } from '../../fields/DocSymbols';
 import { InkField } from '../../fields/InkField';
 import { RichTextField } from '../../fields/RichTextField';
@@ -767,27 +767,7 @@ const dragDocView = SelectionManager.Views()[0];
         // sharing
         const docShareMode = HierarchyMapping.get(GetEffectiveAcl(seldocview.rootDoc))!.name
         const shareMode = StrCast(docShareMode);
-        var shareSymbolIcon = null;
-        switch (shareMode) {
-            case SharingPermissions.Admin:
-                shareSymbolIcon = '⬢ ';
-                break;
-            case SharingPermissions.Edit:
-                shareSymbolIcon = '⬢ ';
-                break;
-            case SharingPermissions.Augment:
-                shareSymbolIcon = '⬟ ';
-                break;
-            case SharingPermissions.View:
-                shareSymbolIcon = '♦ ';
-                break;
-            case SharingPermissions.None:
-                shareSymbolIcon = '▲ ';
-                break;
-            default:
-                shareSymbolIcon = '';
-                break;
-        }
+        var shareSymbolIcon = ReverseHierarchyMap.get(shareMode)?.image;
 
         // hide the decorations if the parent chooses to hide it or if the document itself hides it
         const hideDecorations = seldocview.props.hideDecorations || seldocview.rootDoc.hideDecorations;
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 3cf7f2546..7e0da5520 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -162,8 +162,8 @@
 
     .propertiesView-shareDropDown{
         margin-right: 10px;
-        width: 92%;
-
+        min-width: 65px;
+        
         & .propertiesView-shareDropDownNone{
             height: 16px;
             padding: 0px;
@@ -370,13 +370,13 @@
     }
 
     .expansion-button {
-        margin-left: 0;
+        margin-left: -15px;
+        margin-right: 20px;
 
         .expansion-button-icon {
             width: 11px;
             height: 11px;
             color: black;
-            margin-left: -15px;
 
             &:hover {
                 color: rgb(131, 131, 131);
@@ -394,8 +394,7 @@
         border-radius: 6px; // remove when adding buttons
         margin-right: 10px; // remove when adding buttons
         background-color: #ececec;
-        max-height: 130px;
-        width: 92%;
+        width: 97%;
 
         .propertiesView-sharingTable-item {
             display: flex;
@@ -420,10 +419,10 @@
 
             .propertiesView-sharingTable-item-permission {
                 display: flex;
-                position: fixed;
-                right: 30px;
                 align-items: flex-end;
+                text-align: right;
                 margin-left: auto;
+                margin-right: -12px;
             }
 
             &:last-child {
@@ -437,8 +436,10 @@
         background: inherit;
         border: none;
         background: inherit;
-        text-align: justify; // for Edge
-        text-align-last: end;
+        width: max;
+        text-align: left;
+        display: flex;
+        right: 35px;
     }
 
     .propertiesView-fields {
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index f5a39898e..c7db657ff 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,19 +3,19 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Tooltip } from '@material-ui/core';
-import { intersection } from 'lodash';
+import { concat, intersection } from 'lodash';
 import { Lambda, action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
-import { Doc, Field, FieldResult, NumListCast, Opt, StrListCast } from '../../fields/Doc';
-import { DocAcl, DocData, Height, Width } from '../../fields/DocSymbols';
+import { Doc, Field, FieldResult, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc';
+import { AclAdmin, DocAcl, DocData, Height, Width } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { InkField } from '../../fields/InkField';
 import { List } from '../../fields/List';
 import { ComputedField } from '../../fields/ScriptField';
 import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types';
-import { SharingPermissions, normalizeEmail } from '../../fields/util';
+import { GetEffectiveAcl, SharingPermissions, normalizeEmail } from '../../fields/util';
 import { DocumentType } from '../documents/DocumentTypes';
 import { DocumentManager } from '../util/DocumentManager';
 import { GroupManager } from '../util/GroupManager';
@@ -321,7 +321,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     .filter(permission => !Doc.noviceMode || ![SharingPermissions.View].includes(permission as any))
                     .map(permission => (
                         <option className="propertiesView-permisssions-select" key={permission} value={permission}>
-                            {permission}
+                            {concat(ReverseHierarchyMap.get(permission)?.image, ' ', permission)}
                         </option>
                     ))}
             </select>
@@ -391,32 +391,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      * @returns a colored dropdown bar reflective of the permission
      */
     colorACLDropDown(name: string, admin: boolean, permission: string, showExpansionIcon?: boolean) {
-        var dropDownText = '';
-        switch (StrCast(permission)) {
-            case SharingPermissions.Admin:
-                dropDownText = '⬢ ';
-                break;
-            case SharingPermissions.Edit:
-                dropDownText = '⬢ ';
-                break;
-            case SharingPermissions.Augment:
-                dropDownText = '⬟ ';
-                break;
-            case SharingPermissions.View:
-                dropDownText = '♦ ';
-                break;
-            case SharingPermissions.None:
-                dropDownText = '▲ ';
-                break;
-        }
+        var shareImage = ReverseHierarchyMap.get(permission)?.image;
         return (
             <div>
                 <div className={'propertiesView-shareDropDown'}>
                     <div className={`propertiesView-shareDropDown${permission}`}>
                         <div className="propertiesView-shareDropDown">
-                            {' '}
-                            {dropDownText}
-                            {admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission) : permission}
+                            {admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission) : concat(shareImage, ' ', permission)}
                         </div>
                     </div>
                 </div>
@@ -442,21 +423,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      * @returns the sharing and permissions panel.
      */
     @computed get sharingTable() {
-        const docToUse = this.selectedDoc;
-        if (!docToUse) {
-            return null;
-        }
         // all selected docs
         const docs =
             SelectionManager.Views().length < 2 && this.selectedDoc ? [this.layoutDocAcls ? this.selectedDoc : this.dataDoc!] : SelectionManager.Views().map(docView => (this.layoutDocAcls ? docView.props.Document : docView.props.Document[DocData]));
-
         const target = docs[0];
 
-        // const effectiveAcls = GetEffectiveAcl(target);
-        // const showAdmin = effectiveAcls == AclAdmin || docToUse!['acl-' + normalizeEmail(Doc.CurrentUserEmail)] == 'Owner';
-        const curUserAcl = docToUse!['acl-' + normalizeEmail(Doc.CurrentUserEmail)];
-        const showAdmin = curUserAcl == 'Admin' || curUserAcl == 'Owner';
-
+        const showAdmin = GetEffectiveAcl(this.selectedDoc!) == AclAdmin
         const tableEntries = [];
         const usersAdded: string[] = []; // all shared users being added - organized by denormalized email
 
@@ -469,12 +441,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 }
             }
             if (userOnDoc && !usersAdded.includes(eachUser.user.email) && eachUser.user.email != 'Public' && eachUser.user.email != target.author) {
-                // tableEntries.unshift(this.sharingItem(eachUser.user.email, showAdmin, permission, false)); // adds each user
                 usersAdded.push(eachUser.user.email);
             }
         });
 
-        // adds each user to the table
+        // sorts and then adds each user to the table
         usersAdded.sort(this.sortUsers);
         usersAdded.map(userEmail => {
             const permission = StrCast(target[`acl-${normalizeEmail(userEmail)}`]);
@@ -507,11 +478,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return (
             <div>
                 {' '}
-                Sharing Mode for Public / Guest Users
+                Public / Guest Users
                 <div>{this.colorACLDropDown('Public', showAdmin, StrCast(target['acl-Public']), false)}</div>
                 <div>
                     {' '}
-                    <br></br> Sharing Modes for Individual Users and Groups with Access to the Dashboard{' '}
+                    <br></br> Individual Users with Access to this Document{' '}
                 </div>
                 <div className="propertiesView-sharingTable">{<div> {tableEntries}</div>}</div>
             </div>
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 3116fd70b..8f9f36153 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -130,15 +130,15 @@ export enum aclLevel {
     admin = 4,
 }
 // prettier-ignore
-export const HierarchyMapping: Map<symbol, { level:aclLevel; name: SharingPermissions }> = new Map([
-    [AclPrivate,  { level: aclLevel.unshared,     name: SharingPermissions.None }],
-    [AclReadonly, { level: aclLevel.viewable,     name: SharingPermissions.View }],
-    [AclAugment,  { level: aclLevel.augmentable,  name: SharingPermissions.Augment}],
-    [AclEdit,     { level: aclLevel.editable,     name: SharingPermissions.Edit }],
-    [AclAdmin,    { level: aclLevel.admin,        name: SharingPermissions.Admin }],
-    [AclUnset,    { level: aclLevel.unset,        name: SharingPermissions.Unset }],
+export const HierarchyMapping: Map<symbol, { level:aclLevel; name: SharingPermissions; image: string }> = new Map([
+    [AclPrivate,  { level: aclLevel.unshared,     name: SharingPermissions.None,    image: '▲' }],
+    [AclReadonly, { level: aclLevel.viewable,     name: SharingPermissions.View,    image: '♦' }],
+    [AclAugment,  { level: aclLevel.augmentable,  name: SharingPermissions.Augment, image: '⬟' }],
+    [AclEdit,     { level: aclLevel.editable,     name: SharingPermissions.Edit,    image: '⬢' }],
+    [AclAdmin,    { level: aclLevel.admin,        name: SharingPermissions.Admin,   image: '⬢' }],
+    [AclUnset,    { level: aclLevel.unset,        name: SharingPermissions.Unset,   image: '▲' }],
 ]);
-export const ReverseHierarchyMap: Map<string, { level: aclLevel; acl: symbol }> = new Map(Array.from(HierarchyMapping.entries()).map(value => [value[1].name, { level: value[1].level, acl: value[0] }]));
+export const ReverseHierarchyMap: Map<string, { level: aclLevel; acl: symbol ; image: string}> = new Map(Array.from(HierarchyMapping.entries()).map(value => [value[1].name, { level: value[1].level, acl: value[0], image: value[1].image }]));
 
 // caches the document access permissions for the current user.
 // this recursively updates all protos as well.