diff options
| -rw-r--r-- | src/client/util/SharingManager.scss | 96 | ||||
| -rw-r--r-- | src/client/util/SharingManager.tsx | 32 |
2 files changed, 105 insertions, 23 deletions
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss index 80d5807b4..d942550ca 100644 --- a/src/client/util/SharingManager.scss +++ b/src/client/util/SharingManager.scss @@ -206,7 +206,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - width: 100%; + width: 265px; text-align: left; font-style: normal; font-size: 14; @@ -214,33 +214,105 @@ padding: 0; align-items: center; + margin-left: -5px; + + display: flex; + padding: 3px; + align-items: right; + border-bottom: 0.5px solid grey; + .group-info { cursor: pointer; } - // &:hover .padding { - // white-space: unset; - // } + &:hover .padding { + overflow-x: unset; + white-space: unset; + overflow-wrap: break-word; + } .padding { - padding: 0 10px 0 0; - color: black; + // padding: 0 10px 0 0; + // color: black; + // text-overflow: ellipsis; + // overflow: hidden; + // white-space: nowrap; + // max-width: 40%; + + width: 150px; + overflow-x: hidden; + display: inline-block; text-overflow: ellipsis; - overflow: hidden; white-space: nowrap; - max-width: 40%; } .permissions-dropdown { - border: none; - height: 25; - background-color: #e8e8e8; + display: flex; + align-items: flex-end; + text-align: right; + margin-left: auto; + margin-right: -12px; + } .edit-actions { display: flex; position: absolute; - right: -10; + 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); } } diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index da075632b..8b829158e 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -1,12 +1,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { IconButton, Size } from 'browndash-components'; -import { intersection } from 'lodash'; +import { concat, intersection } from 'lodash'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import Select from 'react-select'; import * as RequestPromise from 'request-promise'; -import { Doc, DocListCast, DocListCastAsync, HierarchyMapping } from '../../fields/Doc'; +import { Doc, DocListCast, DocListCastAsync, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc'; import { AclAdmin, AclPrivate, AclUnset, DocAcl, DocData } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; @@ -372,7 +372,7 @@ export class SharingManager extends React.Component<{}> { if (!override) dropdownValues.splice(dropdownValues.indexOf(SharingPermissions.Unset), 1); return dropdownValues.map(permission => ( <option key={permission} value={permission}> - {permission} + {concat(ReverseHierarchyMap.get(permission)?.image, ' ', permission)} </option> )); } @@ -527,17 +527,20 @@ export class SharingManager extends React.Component<{}> { const userKey = `acl-${normalizeEmail(user.email)}`; const uniform = docs.map(doc => (this.layoutDocAcls ? doc : doc[DocData])).every(doc => doc?.[DocAcl]?.[userKey] === docs[0]?.[DocAcl]?.[userKey]); const permissions = uniform ? StrCast(targetDoc?.[userKey]) : '-multiple-'; - + return !permissions ? null : ( <div key={userKey} className={'container'}> <span className={'padding'}>{user.email}</span> <div className="edit-actions"> {admin || this.myDocAcls ? ( - <select className={'permissions-dropdown'} value={permissions} onChange={e => this.setInternalSharing({ user, linkDatabase, sharingDoc, userColor }, e.currentTarget.value)}> + <select className={`permissions-dropdown-${permissions}`} value={permissions} onChange={e => this.setInternalSharing({ user, linkDatabase, sharingDoc, userColor }, e.currentTarget.value)}> {this.sharingOptions(uniform)} </select> ) : ( - <div className={'permissions-dropdown'}>{permissions}</div> + <div className={`permissions-dropdown-${permissions}`}> + {concat(ReverseHierarchyMap.get(permissions)?.image, ' ', permissions)} + + </div> )} </div> </div> @@ -548,6 +551,7 @@ export class SharingManager extends React.Component<{}> { const sameAuthor = docs.every(doc => doc?.author === docs[0]?.author); // the owner of the doc and the current user are placed at the top of the user list. + const curUserPermission = HierarchyMapping.get(effectiveAcls[0])!.name userListContents.unshift( sameAuthor ? ( <div key={'owner'} className={'container'}> @@ -561,7 +565,10 @@ export class SharingManager extends React.Component<{}> { <div key={'me'} className={'container'}> <span className={'padding'}>Me</span> <div className="edit-actions"> - <div className={'permissions-dropdown'}>{effectiveAcls.every(acl => acl === effectiveAcls[0]) ? HierarchyMapping.get(effectiveAcls[0])!.name : '-multiple-'}</div> + <div className={`permissions-dropdown-${curUserPermission}`}> + {effectiveAcls.every(acl => acl === effectiveAcls[0]) ? concat(ReverseHierarchyMap.get(curUserPermission)?.image, ' ', curUserPermission) : '-multiple-'} + + </div> </div> </div> ) : null @@ -576,7 +583,7 @@ export class SharingManager extends React.Component<{}> { .map(doc => (this.layoutDocAcls ? doc : doc[DocData])) .every(doc => (this.layoutDocAcls ? doc?.[DocAcl]?.[groupKey] === docs[0]?.[DocAcl]?.[groupKey] : doc?.[DocData]?.[DocAcl]?.[groupKey] === docs[0]?.[DocData]?.[DocAcl]?.[groupKey])); const permissions = uniform ? StrCast(targetDoc?.[`acl-${StrCast(group.title)}`]) : '-multiple-'; - + return !permissions ? null : ( <div key={groupKey} className={'container'}> <div className={'padding'}>{StrCast(group.title)}</div> @@ -585,13 +592,16 @@ export class SharingManager extends React.Component<{}> { <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} /> </div> ) : null} - <div className="edit-actions"> + <div className={"edit-actions"}> {admin || this.myDocAcls ? ( - <select className={'permissions-dropdown'} value={permissions} onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}> + <select className={`permissions-dropdown-${permissions}`} value={permissions} onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}> {this.sharingOptions(uniform, group.title === 'Override')} </select> ) : ( - <div className={'permissions-dropdown'}>{permissions}</div> + <div className={`permissions-dropdown-${permissions}`}> + {concat(ReverseHierarchyMap.get(permissions)?.image, ' ', permissions)} + + </div> )} </div> </div> |