From 62666034718378f4d970331665019b23659c1f3d Mon Sep 17 00:00:00 2001 From: srichman333 Date: Wed, 22 Mar 2023 17:01:17 -0400 Subject: visual changes to collaboration on doc and in PropertiesView --- src/client/views/DocumentDecorations.scss | 81 +++++++++++++++++++++++++- src/client/views/DocumentDecorations.tsx | 64 +++++++++++++++------ src/client/views/PropertiesView.scss | 70 +++++++++++++++++----- src/client/views/PropertiesView.tsx | 96 ++++++++++++++++++++++++------- src/client/views/StyleProvider.tsx | 7 ++- src/fields/util.ts | 4 +- 6 files changed, 265 insertions(+), 57 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index ccac5ffe4..ce5378e69 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -112,6 +112,33 @@ $resizeHandler: 8px; } } + .documentDecorations-lockButton { + display: flex; + align-items: center; + justify-content: center; + background: grey; + border: solid 1.5px rgb(72, 71, 71); + color: grey; + transition: 0.1s ease; + opacity: 1; + pointer-events: all; + width: 20px; + height: 20px; + min-width: 20px; + border-radius: 100%; + opacity: 0.5; + cursor: pointer; + + &:hover { + color: rgb(72, 71, 71); + opacity: 1; + } + + > svg { + margin: 0; + } + } + .documentDecorations-minimizeButton { display: flex; align-items: center; @@ -186,6 +213,58 @@ $resizeHandler: 8px; } } + .documentDecorations-share { + background: none; + opacity: 1; + grid-column: 3; + pointer-events: auto; + overflow: hidden; + text-align: center; + width: 100%; + max-width: 120px; + display: flex; + height: 20px; + border-radius: 8px; + border-width: 10px; + opacity: 0.3; + &:hover { + opacity: 1; + } + .documentDecorations-shareNone, + .documentDecorations-shareAdmin{ + width: calc(100% + 10px); + background: grey; + color: rgb(71, 71, 71); + border-color: rgb(71, 71, 71); + } + .documentDecorations-shareEdit, + .documentDecorations-shareSelf-Edit{ + width: calc(100% + 10px); + background: rgb(235, 235, 145); + color: rgb(75, 75, 5); + border-color: rgb(75, 75, 5); + } + .documentDecorations-shareAugment{ + width: calc(100% + 10px); + background: rgb(160, 230, 160); + color:rgb(19, 80, 19); + border-color:rgb(19, 80, 19); + + } + .documentDecorations-shareView{ + width: calc(100% + 10px); + background: rgb(161, 161, 238); + color: rgb(25, 25, 101); + border-color: rgb(25, 25, 101);; + } + .documentDecorations-shareNot-Shared{ + width: calc(100% + 10px); + background: rgb(210, 143, 143); + color: rgb(146, 58, 58); + border-color: rgb(146, 58, 58);; + } + } + .documentDecorations-centerCont { grid-column: 2; background: none; @@ -264,7 +343,7 @@ $resizeHandler: 8px; .documentDecorations-lock { position: relative; background: black; - color: gray; + color: rgb(145, 144, 144); height: 14; width: 14; pointer-events: all; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 2982f8a99..d87c13ce6 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,6 +1,6 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; +import { StylesProvider, Tooltip } from '@material-ui/core'; import { IconButton } from 'browndash-components'; import { action, computed, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -11,7 +11,7 @@ import { Document } from '../../fields/documentSchemas'; import { InkField } from '../../fields/InkField'; import { ScriptField } from '../../fields/ScriptField'; import { Cast, NumCast, StrCast } from '../../fields/Types'; -import { GetEffectiveAcl } from '../../fields/util'; +import { GetEffectiveAcl, SharingPermissions } from '../../fields/util'; import { emptyFunction, numberValue, returnFalse, setupMoveUpEvents, Utils } from '../../Utils'; import { Docs } from '../documents/Documents'; import { DocumentType } from '../documents/DocumentTypes'; @@ -27,10 +27,11 @@ import { Colors } from './global/globalEnums'; import { InkingStroke } from './InkingStroke'; import { InkStrokeProperties } from './InkStrokeProperties'; import { LightboxView } from './LightboxView'; -import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView'; +import { DocumentView, OpenWhereMod } from './nodes/DocumentView'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { ImageBox } from './nodes/ImageBox'; import React = require('react'); +import { SharingManager } from '../util/SharingManager'; @observer export class DocumentDecorations extends React.Component<{ PanelWidth: number; PanelHeight: number; boundsLeft: number; boundsTop: number }, { value: string }> { @@ -283,12 +284,11 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P openDoc = DocListCast(openDoc.aliases).find(alias => !alias.context) ?? Doc.MakeAlias(openDoc); Doc.deiconifyView(openDoc); } - selectedDocs[0].props.addDocTab(openDoc, OpenWhere.lightbox); - // LightboxView.SetLightboxDoc( - // openDoc, - // undefined, - // selectedDocs.slice(1).map(view => view.props.Document) - // ); + LightboxView.SetLightboxDoc( + openDoc, + undefined, + selectedDocs.slice(1).map(view => view.props.Document) + ); } } SelectionManager.DeselectAll(); @@ -735,6 +735,29 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P setTimeout(action(() => (this._showNothing = true))); return null; } + + // sharing + const docShareMode = seldocview.rootDoc["acl-Public"]; + const shareMode = StrCast(docShareMode); + var shareSymbolIcon = null; + switch(shareMode){ + case ("Edit"): + shareSymbolIcon = "⬢ "; + break; + case ("Self-Edit"): + shareSymbolIcon = "⬢ "; + break; + case ("Augment"): + shareSymbolIcon = "⬟ "; + break; + case ("View"): + shareSymbolIcon = "♦ "; + break; + case ("Not-Shared"): + shareSymbolIcon = "▲ "; + break; + } + // 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; const hideResizers = hideDecorations || seldocview.props.hideResizeHandles || seldocview.rootDoc.hideResizeHandles || seldocview.rootDoc._isGroup || this._isRounding || this._isRotating; @@ -775,7 +798,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P undoBatch(e => click!(e)) )) }> - + ); @@ -797,7 +820,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P const resizerScheme = colorScheme ? 'documentDecorations-resizer' + colorScheme : ''; // Radius constants - const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof FormattedTextBox || seldocview.ComponentView instanceof CollectionFreeFormView; + const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof FormattedTextBox; const borderRadius = numberValue(StrCast(seldocview.rootDoc.borderRounding)); const docMax = Math.min(NumCast(seldocview.rootDoc.width) / 2, NumCast(seldocview.rootDoc.height) / 2); const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2); @@ -820,15 +843,16 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P ) : (
{`${hideTitle ? '' : this.selectionTitle}`} - {!useLock ? null : ( - toggle ability to interact with document
} placement="top"> -
e.preventDefault()}> - -
- - )} ); + const sharingMenu = docShareMode ? ( +
+
+ {shareSymbolIcon + " " + shareMode} + {/* {shareMode} */} +
+
) : (
+ ); return (
: topBtn('close', 'times', undefined, e => this.onCloseClick(true), 'Close')} {hideResizers || hideDeleteButton ?
: topBtn('minimize', 'window-maximize', undefined, e => this.onCloseClick(undefined), 'Minimize')} {hideTitle ? null : titleArea} + {sharingMenu} + {hideOpenButton ?
: + seldocview.rootDoc._lockedPosition? topBtn('lock', 'lock', this.onLockDown, undefined, 'Toggle ability to interact with document') + : topBtn('lock', 'unlock', this.onLockDown, undefined, 'Toggle ability to interact with document')} {hideOpenButton ?
: topBtn('open', 'external-link-alt', this.onMaximizeDown, undefined, 'Open in Lightbox (ctrl: as alias, shift: in new collection)')}
{hideResizers ? null : ( diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 897be9a32..3edc7fea8 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -160,6 +160,50 @@ } } + .propertiesView-shareDropDown{ + margin-right: 10px; + width: 92%; + + & .propertiesView-shareDropDownNone, + .propertiesView-shareDropDownAdmin{ + padding: 5px; + background: grey; + color: rgb(71, 71, 71); + border-radius: 6px; + border: 1px solid rgb(71, 71, 71); + } + & .propertiesView-shareDropDownEdit, + .propertiesView-shareDropDownSelf-Edit{ + padding: 5px; + background: rgb(235, 235, 145); + color: rgb(75, 75, 5); + border-radius: 6px; + border: 1px solid rgb(75, 75, 5); + } + & .propertiesView-shareDropDownAugment{ + padding: 5px; + background: rgb(160, 230, 160); + color:rgb(19, 80, 19); + border-radius: 6px; + border: 1px solid rgb(19, 80, 19); + + } + & .propertiesView-shareDropDownView{ + padding: 5px; + background: rgb(161, 161, 238); + color: rgb(25, 25, 101); + border-radius: 6px; + border: 1px solid rgb(25, 25, 101); + } + & .propertiesView-shareDropDownNot-Shared{ + padding: 5px; + background: rgb(210, 143, 143); + color: rgb(138, 47, 47); + border-radius: 6px; + border: 1px solid rgb(138, 47, 47); + } + } + .propertiesView-filters { //border-bottom: 1px solid black; //padding: 8.5px; @@ -344,7 +388,6 @@ // display: inline-table; background-color: #ececec; max-height: 130px; - overflow-y: auto; width: 92%; .propertiesView-sharingTable-item { @@ -373,18 +416,6 @@ display: flex; align-items: flex-end; margin-left: auto; - - .permissions-select { - border: none; - background-color: inherit; - width: 87px; - text-align: justify; // for Edge - text-align-last: end; - - &:hover { - cursor: pointer; - } - } } &:last-child { @@ -393,6 +424,19 @@ } } + .propertiesView-permissions-select { + background-color: inherit; + background: inherit; + border: none; + background: inherit; + width: 87px; + text-align: justify; // for Edge + text-align-last: end; + &:hover { + cursor: pointer; + } + } + .propertiesView-fields { //border-bottom: 1px solid black; //padding: 8.5px; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index e750dc43a..c34760d13 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -7,7 +7,7 @@ import { intersection } from 'lodash'; import { action, autorun, computed, Lambda, observable } from 'mobx'; import { observer } from 'mobx-react'; import { ColorState, SketchPicker } from 'react-color'; -import { AclAdmin, AclSym, HierarchyMapping, DataSym, Doc, DocListCast, Field, HeightSym, NumListCast, Opt, StrListCast, WidthSym } from '../../fields/Doc'; +import { AclAdmin, AclSym, HierarchyMapping, DataSym, Doc, DocListCast, Field, HeightSym, NumListCast, Opt, StrListCast, WidthSym, DocCastAsync } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { InkField } from '../../fields/InkField'; import { List } from '../../fields/List'; @@ -364,8 +364,13 @@ export class PropertiesView extends React.Component { */ @undoBatch changePermissions = (e: any, user: string) => { - const docs = (SelectionManager.Views().length < 2 ? [this.selectedDoc] : SelectionManager.Views().map(dv => dv.props.Document)).filter(doc => doc).map(doc => (this.layoutDocAcls ? doc : DocCast(doc)[DataSym])); - SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, docs); + if (user=="Public"){ + this.selectedDoc!['acl-' +user] = e.currentTarget.value as SharingPermissions; + } + else{ + const docs = (SelectionManager.Views().length < 2 ? [this.selectedDoc] : SelectionManager.Views().map(dv => dv.props.Document)).filter(doc => doc).map(doc => (this.layoutDocAcls ? doc : DocCast(doc)[DataSym])); + SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, docs); + } }; /** @@ -376,11 +381,11 @@ export class PropertiesView extends React.Component { if (permission === '-multiple-') dropdownValues.unshift(permission); if (user !== 'Override') dropdownValues.splice(dropdownValues.indexOf(SharingPermissions.Unset), 1); return ( - this.changePermissions(e, user)}> {dropdownValues .filter(permission => !Doc.noviceMode || ![SharingPermissions.View, SharingPermissions.SelfEdit].includes(permission as any)) .map(permission => ( - @@ -433,8 +438,7 @@ export class PropertiesView extends React.Component { // onPointerDown={action(() => this.selectedUser = this.selectedUser === name ? "" : name)} >
- {' '} - {name}{' '} + {' '}{name}{' '}
{/* {name !== "Me" ? this.notifyIcon : null} */}
@@ -445,13 +449,52 @@ export class PropertiesView extends React.Component { ); } + publicACLDropDown(admin: boolean, permission: string, showExpansionIcon?: boolean){ + var dropDownText = ""; + switch(StrCast(permission)){ + case ("Edit"): + dropDownText = "⬢ "; + break; + case ("Self-Edit"): + dropDownText = "⬢ "; + break; + case ("Augment"): + dropDownText = "⬟ "; + break; + case ("View"): + dropDownText = "♦ "; + break; + case ("Not-Shared"): + dropDownText = "▲ "; + break; + } + return ( +
+
+
+
+ {' '}{dropDownText}{' '} + {admin && permission !== 'Owner' ? this.getPermissionsSelect("Public", permission) : permission} + {permission === 'Owner' || showExpansionIcon ? this.expansionIcon : null} +
+
+
+
+ ); + } + /** * @returns the sharing and permissions panel. */ @computed get sharingTable() { + // const docToUse = this.selectedDocumentView?.rootDoc; + const docToUse = this.selectedDoc; + if (!docToUse){ + return null; + } // all selected docs const docs = - SelectionManager.Views().length < 2 ? [this.layoutDocAcls ? this.selectedDoc : this.selectedDoc?.[DataSym]] : SelectionManager.Views().map(docView => (this.layoutDocAcls ? docView.props.Document : docView.props.Document[DataSym])); + SelectionManager.Views().length < 2 ? [this.layoutDocAcls ? docToUse : docToUse?.[DataSym]] : SelectionManager.Views().map(docView => (this.layoutDocAcls ? docView.props.Document : docView.props.Document[DataSym])); const target = docs[0]; @@ -479,17 +522,27 @@ export class PropertiesView extends React.Component { // shifts the current user, owner, public to the top of the doc. // tableEntries.unshift(this.sharingItem("Override", showAdmin, docs.filter(doc => doc).every(doc => doc["acl-Override"] === docs[0]["acl-Override"]) ? (AclMap.get(target[AclSym]?.["acl-Override"]) || "None") : "-multiple-")); if (ownerSame) tableEntries.unshift(this.sharingItem(StrCast(target.author), showAdmin, 'Owner')); - tableEntries.unshift(this.sharingItem('Public', showAdmin, docs.filter(doc => doc).every(doc => doc['acl-Public'] === target['acl-Public']) ? target['acl-Public'] || SharingPermissions.None : '-multiple-')); - tableEntries.unshift( - this.sharingItem( - 'Me', - showAdmin, - docs.filter(doc => doc).every(doc => doc.author === Doc.CurrentUserEmail) ? 'Owner' : effectiveAcls.every(acl => acl === effectiveAcls[0]) ? HierarchyMapping.get(effectiveAcls[0])!.name : '-multiple-', - !ownerSame - ) - ); - return
{tableEntries}
; + // tableEntries.unshift(this.sharingItem(target.author, showAdmin, docs.filter(doc => doc).every(doc => doc['acl-Public'] === target['acl-Public']) ? target['acl-Public'] || SharingPermissions.None : '-multiple-')); + // tableEntries.unshift( + // this.sharingItem( + // 'Me', + // showAdmin, + // docs.filter(doc => doc).every(doc => doc.author === Doc.CurrentUserEmail) ? 'Owner' : effectiveAcls.every(acl => acl === effectiveAcls[0]) ? HierarchyMapping.get(effectiveAcls[0])!.name : '-multiple-', + // !ownerSame + // ) + // ); + docs.map(doc => tableEntries.unshift(this.sharingItem(doc.author, showAdmin, doc['acl-Public'], true))); + + return ( +
Sharing Mode +
{this.publicACLDropDown(true, StrCast(docToUse['acl-Public']), false)}
+


Who has access to the Dashboard?
+
{ +
{tableEntries}
+ }
+
+ ); } @computed get fieldsCheckbox() { @@ -1116,12 +1169,15 @@ export class PropertiesView extends React.Component { {!this.openSharing ? null : (
- {!Doc.noviceMode ? ( + + + {/* {!Doc.noviceMode ? ( // what is the layout checkbox for?
(this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
Layout
- ) : null} + ) : null} */} + {/*
{"Re-distribute sharing settings"}
}>
+ //
) : null; } } @@ -330,9 +331,9 @@ export function DashboardStyleProvider(doc: Opt, props: Opt {DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => { doc.hidden = doc.hidden ? undefined : true; - if (!doc.hidden) { - DocFocusOrOpen(doc, props?.ContainingCollectionDoc); - } + // if (!doc.hidden) { + // DocFocusOrOpen(doc, props?.ContainingCollectionDoc); + // } })} ); diff --git a/src/fields/util.ts b/src/fields/util.ts index e517e7604..4f7472842 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -183,10 +183,10 @@ export enum SharingPermissions { Unset = 'None', Admin = 'Admin', Edit = 'Edit', - SelfEdit = 'Self Edit', + SelfEdit = 'Self-Edit', Augment = 'Augment', View = 'View', - None = 'Not Shared', + None = 'Not-Shared', } // return acl from cache or cache the acl and return. -- cgit v1.2.3-70-g09d2