simplified goldenlayout tab buttons and made open in lightbox more accessible for a tab.

9 files changed, 41 insertions, 38 deletions

diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
index e789d8e20..2b94d35ee 100644
--- a/src/client/goldenLayout.js
+++ b/src/client/goldenLayout.js
@@ -1589,7 +1589,7 @@
             blockedPopoutsThrowError: true,
             closePopoutsOnUnload: true,
             showPopoutIcon: true,
-            showMaximiseIcon: true,
+            showMaximiseIcon: false,
             showCloseIcon: true,
             responsiveMode: 'onload', // Can be onload, always, or none.
             tabOverlapAllowance: 0, // maximum pixel overlap per tab
@@ -2622,7 +2622,7 @@
             /**
              * Maximise control - set the component to the full size of the layout
              */
-            if (this._getHeaderSetting('maximise')) {
+            if (false && this._getHeaderSetting('maximise')) {
                 maximise = lm.utils.fnBind(this.parent.toggleMaximise, this.parent);
                 maximiseLabel = this._getHeaderSetting('maximise');
                 minimiseLabel = this._getHeaderSetting('minimise');
@@ -2640,7 +2640,7 @@
             /**
              * Close button
              */
-            if (this._isClosable()) {
+            if (false && this._isClosable()) {
                 closeStack = lm.utils.fnBind(this.parent.remove, this.parent);
                 label = this._getHeaderSetting('close');
                 this.closeButton = new lm.controls.HeaderButton(this, label, 'lm_close', closeStack);
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
index f42336ee7..8a4f37121 100644
--- a/src/client/util/CaptureManager.tsx
+++ b/src/client/util/CaptureManager.tsx
@@ -73,7 +73,7 @@ export class CaptureManager extends React.Component<{}> {
                     <div
                         className="save"
                         onClick={() => {
-                            LightboxView.SetLightboxDoc(this._document);
+                            LightboxView.Instance.SetLightboxDoc(this._document);
                             this.close();
                         }}>
                         Save
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 3c07f757e..333ba9f32 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -56,7 +56,7 @@
 // }
 .lm_header .lm_controls {
     position: absolute;
-    right: 3px;
+    right: 0px;
 }
 .lm_header .lm_controls > li {
     cursor: pointer;
@@ -64,16 +64,12 @@
     width: 18px;
     height: 18px;
     text-align: center;
-    top: 3px;
 }
 .lm_header ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
 }
-.lm_header .lm_tabs {
-    position: absolute;
-}
 .lm_header .lm_tab {
     cursor: pointer;
     float: left;
@@ -329,8 +325,9 @@
 }
 
 .lm_header .lm_tabs {
+    position: absolute;
     overflow-y: hidden;
-    width: 100%;
+    width: calc(100% - 5px);
 }
 ul.lm_tabs::before {
     content: ' ';
@@ -506,6 +503,7 @@ ul.lm_tabs::before {
         display: flex;
         align-content: center;
         justify-content: center;
+        background: transparent !important;
     }
 
     .lm_controls > li {
@@ -516,7 +514,11 @@ ul.lm_tabs::before {
 
     .lm_controls .lm_popout {
         background-image: unset;
-        left: -3;
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+        background: #93939347;
+        z-index: 100;
+        //left: -3;
         &:hover {
             background: gray;
             color: white !important;
@@ -526,7 +528,7 @@ ul.lm_tabs::before {
         content: '+';
         margin: auto;
         font-size: x-large;
-        top: -6;
+        top: -4;
         position: relative;
     }
     .lm_maximise {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 4873a61ff..1b616d6a8 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -406,8 +406,9 @@ export class CollectionDockingView extends CollectionSubView() {
             window.addEventListener('mouseup', this.onPointerUp);
             if (!htmlTarget.closest('*.lm_content') && (htmlTarget.closest('*.lm_tab') || htmlTarget.closest('*.lm_stack'))) {
                 const className = typeof htmlTarget.className === 'string' ? htmlTarget.className : '';
-                if (className.includes('lm_maximise')) this._flush = UndoManager.StartBatch('tab maximize');
-                else {
+                if (className.includes('lm_maximise')) {
+                    // this._flush = UndoManager.StartBatch('tab maximize');
+                } else {
                     const tabTarget = (e.target as HTMLElement)?.parentElement?.className.includes('lm_tab') ? (e.target as HTMLElement).parentElement : (e.target as HTMLElement);
                     const map = Array.from(this.tabMap).find(tab => tab.element[0] === tabTarget);
                     if (map?.DashDoc && DocumentManager.Instance.getFirstDocumentView(map.DashDoc)) {
@@ -589,7 +590,7 @@ export class CollectionDockingView extends CollectionSubView() {
 
 ScriptingGlobals.add(
     function openInLightbox(doc: any) {
-        LightboxView.AddDocTab(doc, OpenWhere.lightbox);
+        LightboxView.Instance.AddDocTab(doc, OpenWhere.lightbox);
     },
     'opens up document in a lightbox',
     '(doc: any)'
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 694f70903..29abff3a4 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -173,7 +173,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab
         if (cm && !e.isPropagationStopped()) {
             // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             !Doc.noviceMode &&
-                this.setupViewTypes('UI Controls...', vtype => {
+                this.setupViewTypes('Appearance...', vtype => {
                     const newRendition = Doc.MakeEmbedding(this.rootDoc);
                     newRendition._type_collection = vtype;
                     this.props.addDocTab(newRendition, OpenWhere.addRight);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e46a7bed7..57c943479 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1759,13 +1759,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this.props.Document._isGroup && this.Document.transcription && appearanceItems.push({ description: 'Ink to text', event: () => this.transcribeStrokes(false), icon: 'font' });
 
         !Doc.noviceMode ? appearanceItems.push({ description: 'Arrange contents in grid', event: this.layoutDocsInGrid, icon: 'table' }) : null;
+        !Doc.noviceMode ? appearanceItems.push({ description: (this.Document._freeform_useClusters ? 'Hide' : 'Show') + ' Clusters', event: () => this.updateClusters(!this.Document._freeform_useClusters), icon: 'braille' }) : null;
         !appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
 
-        const viewctrls = ContextMenu.Instance.findByDescription('UI Controls...');
-        const viewCtrlItems = viewctrls && 'subitems' in viewctrls ? viewctrls.subitems : [];
-        !Doc.noviceMode ? viewCtrlItems.push({ description: (this.Document._freeform_useClusters ? 'Hide' : 'Show') + ' Clusters', event: () => this.updateClusters(!this.Document._freeform_useClusters), icon: 'braille' }) : null;
-        !viewctrls && ContextMenu.Instance.addItem({ description: 'UI Controls...', subitems: viewCtrlItems, icon: 'eye' });
-
         const options = ContextMenu.Instance.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         !this.props.isAnnotationOverlay &&
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ce63a2cf2..d9af634f5 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, ObservableMap, observe, trace } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
-import { Doc, DocListCast, Field, NumListCast, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { listSpec } from '../../../../fields/Schema';
@@ -17,9 +17,9 @@ import { undoable, undoBatch } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { EditableView } from '../../EditableView';
 import { Colors } from '../../global/globalEnums';
-import { DocFocusOptions, DocumentView } from '../../nodes/DocumentView';
+import { DocFocusOptions, DocumentView, DocumentViewProps } from '../../nodes/DocumentView';
 import { KeyValueBox } from '../../nodes/KeyValueBox';
-import { DefaultStyleProvider } from '../../StyleProvider';
+import { DefaultStyleProvider, StyleProp } from '../../StyleProvider';
 import { CollectionSubView } from '../CollectionSubView';
 import './CollectionSchemaView.scss';
 import { SchemaColumnHeader } from './SchemaColumnHeader';
@@ -943,6 +943,12 @@ interface CollectionSchemaViewDocsProps {
 @observer
 class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsProps> {
     tableWidthFunc = () => this.props.schema.tableWidth;
+    noOpacityStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => {
+        if (property === StyleProp.Opacity) {
+            return 1;
+        }
+        return DefaultStyleProvider(doc, props, property);
+    };
     childScreenToLocal = computedFn((index: number) => () => this.props.schema.props.ScreenToLocalTransform().translate(0, -this.props.rowHeight() - index * this.props.rowHeight()));
     render() {
         return (
@@ -962,7 +968,7 @@ class CollectionSchemaViewDocs extends React.Component<CollectionSchemaViewDocsP
                                 renderDepth={this.props.schema.props.renderDepth + 1}
                                 PanelWidth={this.tableWidthFunc}
                                 PanelHeight={this.props.rowHeight}
-                                styleProvider={DefaultStyleProvider}
+                                styleProvider={this.noOpacityStyleProvider}
                                 waitForDoubleClickToClick={returnNever}
                                 defaultDoubleClick={returnIgnore}
                                 dragAction="move"
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 0aaa9c538..35d28ba9c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -756,14 +756,14 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
         if (!this.props.Document.isFolder) {
             const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layout_fieldKey)], Doc, null);
-            const appearance = cm.findByDescription('UI Controls...');
+            const appearance = cm.findByDescription('Appearance...');
             const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : [];
 
             if (this.props.renderDepth === 0) {
-                appearanceItems.push({ description: 'Open in Lightbox', event: () => LightboxView.Instance.SetLightboxDoc(this.rootDoc), icon: 'hand-point-right' });
+                appearanceItems.splice(0, 0, { description: 'Open in Lightbox', event: () => LightboxView.Instance.SetLightboxDoc(this.rootDoc), icon: 'external-link-alt' });
             }
             !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template   ', event: () => this.props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
-            !appearance && appearanceItems.length && cm.addItem({ description: 'UI Controls...', subitems: appearanceItems, icon: 'compass' });
+            !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'compass' });
 
             if (!Doc.IsSystem(this.rootDoc) && this.rootDoc.type !== DocumentType.PRES && ![CollectionViewType.Docking, CollectionViewType.Tree].includes(this.rootDoc._type_collection as any)) {
                 const existingOnClick = cm.findByDescription('OnClick...');
@@ -894,7 +894,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         else cm.moveAfter(help);
 
         e?.stopPropagation(); // DocumentViews should stop propagation of this event
-        cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
+        cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15, undefined, undefined, undefined);
     };
 
     @computed get _rootSelected() {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 7a175c9f6..764fa35cb 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -853,29 +853,27 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 icon: !FormattedTextBox._globalHighlights.has(option) ? 'highlighter' : 'remove-format',
             })
         );
+        const appearance = cm.findByDescription('Appearance...');
+        const appearanceItems: ContextMenuProps[] = appearance && 'subitems' in appearance ? appearance.subitems : [];
 
-        const uicontrols: ContextMenuProps[] = [];
-        uicontrols.push({
+        appearanceItems.push({
             description: !this.Document._layout_noSidebar ? 'Hide Sidebar Handle' : 'Show Sidebar Handle',
             event: () => (this.layoutDoc._layout_noSidebar = !this.layoutDoc._layout_noSidebar),
             icon: !this.Document._layout_noSidebar ? 'eye-slash' : 'eye',
         });
-        uicontrols.push({
+        appearanceItems.push({
             description: (this.Document._layout_enableAltContentUI ? 'Hide' : 'Show') + ' Alt Content UI',
             event: () => (this.layoutDoc._layout_enableAltContentUI = !this.layoutDoc._layout_enableAltContentUI),
             icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye',
         });
-        !Doc.noviceMode && uicontrols.push({ description: 'Show Highlights...', noexpand: true, subitems: highlighting, icon: 'hand-point-right' });
+        !Doc.noviceMode && appearanceItems.push({ description: 'Show Highlights...', noexpand: true, subitems: highlighting, icon: 'hand-point-right' });
         !Doc.noviceMode &&
-            uicontrols.push({
+            appearanceItems.push({
                 description: 'Broadcast Message',
                 event: () => DocServer.GetRefField('rtfProto').then(proto => proto instanceof Doc && (proto.BROADCAST_MESSAGE = Cast(this.rootDoc[this.fieldKey], RichTextField)?.Text)),
                 icon: 'expand-arrows-alt',
             });
-        cm.addItem({ description: 'UI Controls...', subitems: uicontrols, icon: 'asterisk' });
 
-        const appearance = cm.findByDescription('Appearance...');
-        const appearanceItems = appearance && 'subitems' in appearance ? appearance.subitems : [];
         appearanceItems.push({ description: 'Change Style...', noexpand: true, subitems: changeItems, icon: 'external-link-alt' });
         // this.rootDoc.isTemplateDoc && appearanceItems.push({ description: "Make Default Layout", event: async () => Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.rootDoc), icon: "eye" });
 
@@ -909,7 +907,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 },
                 icon: 'eye',
             });
-        cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
+        !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
 
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];