DocumentDecorations layout acl checkbox

2 files changed, 32 insertions, 13 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 0a690f751..d1b6c5772 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -228,6 +228,25 @@ $resizeHandler: 8px;
         &:hover {
             opacity: 1;
         }
+
+        .checkbox{
+            position: fixed;
+            display: inline;
+            margin-top: -2px;
+            margin-left: -5px;
+            font-size: 7px;
+
+            .checkbox-box{
+                transform: scale(.7);
+            }
+
+            .checkbox-text{
+                font-size: 7px;
+                margin-top: 10px;
+                margin-left: -20px;
+            }
+        }
+
         .documentDecorations-shareNone{
             width: calc(100% + 10px);
             background: grey;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b9fef5cf8..3b51f8c61 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -65,6 +65,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     @observable private _isRotating: boolean = false;
     @observable private _isRounding: boolean = false;
     @observable private _isResizing: boolean = false;
+    @observable private showLayoutAcl: boolean = false;
 
     constructor(props: any) {
         super(props);
@@ -764,7 +765,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         }
 
         // sharing
-        const docShareMode = HierarchyMapping.get(GetEffectiveAcl(seldocview.rootDoc))!.name
+        const acl = this.showLayoutAcl ? GetEffectiveLayoutAcl(seldocview.rootDoc) : GetEffectiveAcl(seldocview.rootDoc);
+        const docShareMode = HierarchyMapping.get(acl)!.name
         const shareMode = StrCast(docShareMode);
         var shareSymbolIcon = ReverseHierarchyMap.get(shareMode)?.image;
 
@@ -824,19 +826,17 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
         const radiusHandleLocation = Math.min(radiusHandle, maxDist);
 
         const sharingMenu = docShareMode ? (
-            <div className='documentDecorations-share' 
-                 onPointerDown={e => 
-                    setupMoveUpEvents(
-                        this, 
-                        e, 
-                        e => this.onBackgroundMove(true, e), 
-                        returnFalse, 
-                        action(() => SettingsManager.propertiesWidth =250)
-                    )
-                }>
+            <div className='documentDecorations-share' >
                 <div className={`documentDecorations-share${shareMode}`}>
                     &nbsp;
                     <span>{shareSymbolIcon + ' ' + shareMode}</span>
+                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+                    <div className='checkbox'>
+                        <div className='checkbox-box'>
+                            <input type="checkbox" checked={this.showLayoutAcl} onChange={action(() => (this.showLayoutAcl = !this.showLayoutAcl))} /> 
+                        </div>
+                        <div className='checkbox-text'> Layout </div>
+                    </div>
                     &nbsp;
                 </div>
             </div>
@@ -858,8 +858,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 onPointerDown={e => e.stopPropagation()}
             />
         ) : (
-            <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown}>
-                <span className={`documentDecorations-titleSpan${colorScheme}`}>{`${hideTitle ? '' : this.selectionTitle}`}</span>
+            <div className="documentDecorations-title" key="title" onPointerDown={e => {e.stopPropagation}}>
+                <span className={`documentDecorations-titleSpan${colorScheme}`} onPointerDown={this.onTitleDown}>{`${hideTitle ? '' : this.selectionTitle}`}</span>
                 {sharingMenu}
                 {!useLock ? null : (
                     <Tooltip key="lock" title={<div className="dash-tooltip">toggle ability to interact with document</div>} placement="top">