fixed collection linear view to an extent

still errors remaining and work that needs to be done!

7 files changed, 105 insertions, 73 deletions

diff --git a/package-lock.json b/package-lock.json
index d938d9658..66ac0fca2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4856,13 +4856,9 @@
             "integrity": "sha1-ujpCMHCOGGcFBl5mur3Uw1z2ACg="
         },
         "D": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
-            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-            "requires": {
-                "es5-ext": "^0.10.50",
-                "type": "^1.0.1"
-            }
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/D/-/D-1.0.0.tgz",
+            "integrity": "sha512-nQvrCBu7K2pSSEtIM0EEF03FVjcczCXInMt3moLNFbjlWx6bZrX72uT6/1uAXDbnzGUAx9gTyDiQ+vrFi663oA=="
         },
         "abab": {
             "version": "2.0.6",
@@ -6199,9 +6195,9 @@
             }
         },
         "browndash-components": {
-            "version": "0.0.47",
-            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.0.47.tgz",
-            "integrity": "sha512-eFiTens6b8+lizT8gkSMZJW7cbroq2chUppLDd4xTlXGUGNwd1qPL+KIF4L21DY4tDouZVKtKI32gODWlIKkjw==",
+            "version": "0.0.52",
+            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.0.52.tgz",
+            "integrity": "sha512-rnlHX+h0TQkNLhbS533k4nmPOSyapGHyA7rp0sJw9kzNmjt7Xk75djfimgyoTElU37/k67KKaHnEwaSRro3x3g==",
             "requires": {
                 "@emotion/react": "^11.11.1",
                 "@emotion/styled": "^11.11.0",
@@ -8164,6 +8160,7 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
             "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+            "dev": true,
             "requires": {
                 "es5-ext": "^0.10.50",
                 "type": "^1.0.1"
@@ -9553,6 +9550,7 @@
             "version": "0.10.62",
             "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
             "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
+            "dev": true,
             "requires": {
                 "es6-iterator": "^2.0.3",
                 "es6-symbol": "^3.1.3",
@@ -9563,6 +9561,7 @@
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
             "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+            "dev": true,
             "requires": {
                 "d": "1",
                 "es5-ext": "^0.10.35",
@@ -9578,6 +9577,7 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
             "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+            "dev": true,
             "requires": {
                 "d": "^1.0.1",
                 "ext": "^1.1.2"
@@ -11202,6 +11202,7 @@
             "version": "1.7.0",
             "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
             "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+            "dev": true,
             "requires": {
                 "type": "^2.7.2"
             },
@@ -11209,7 +11210,8 @@
                 "type": {
                     "version": "2.7.2",
                     "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
-                    "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
+                    "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
+                    "dev": true
                 }
             }
         },
@@ -25312,7 +25314,8 @@
         "type": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
+            "dev": true
         },
         "type-check": {
             "version": "0.4.0",
diff --git a/package.json b/package.json
index 2bfd01211..45da1e5f4 100644
--- a/package.json
+++ b/package.json
@@ -177,7 +177,7 @@
         "body-parser": "^1.19.2",
         "bootstrap": "^4.6.1",
         "brotli": "^1.3.3",
-        "browndash-components": "0.0.47",
+        "browndash-components": "0.0.52",
         "browser-assert": "^1.2.1",
         "bson": "^4.6.1",
         "canvas": "^2.9.3",
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 3475cab82..736aeceae 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -347,10 +347,10 @@ export class CurrentUserUtils {
             { title: "Files",           toolTip: "Files ⌘⇧F",           target: this.setupFilesystem(doc, "myFilesystem"),         icon: "folder-open", },
             { title: "Tools",           toolTip: "Tools ⌘T",            target: this.setupToolsBtnPanel(doc, "myTools"),           icon: "wrench",      funcs: {hidden: "IsNoviceMode()"} },
             { title: "Imports",         toolTip: "Imports ⌘I",          target: this.setupImportSidebar(doc, "myImports"),         icon: "upload",      },
-            { title: "Recently Closed", toolTip: "Recently Closed ⌘R",  target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), icon: "archive",     },
-            { title: "Shared Docs",     toolTip: "Shared Docs ⌘⇧S",     target: Doc.MySharedDocs,                                  icon: "users",       funcs: {badgeValue:badgeValue}},
+            { title: "Closed",          toolTip: "Recently Closed ⌘R",  target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), icon: "archive",     },
+            { title: "Shared",          toolTip: "Shared Docs ⌘⇧S",     target: Doc.MySharedDocs,                                  icon: "users",       funcs: {badgeValue:badgeValue}},
             { title: "Trails",          toolTip: "Trails ⌘⇧",           target: Doc.UserDoc(),                                     icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
-            { title: "User Doc View",   toolTip: "User Doc ⌘U",         target: this.setupUserDocView(doc, "myUserDocView"),       icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
+            { title: "User Doc",        toolTip: "User Doc ⌘U",         target: this.setupUserDocView(doc, "myUserDocView"),       icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
         ].map(tuple => ({...tuple, scripts:{onClick: 'selectMainMenu(self)'}}));
     }
 
@@ -600,8 +600,8 @@ export class CurrentUserUtils {
                             CurrentUserUtils.createToolButton(opts), scripts, funcs);
         
         const btnDescs = [// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet
-            { scripts: { onClick: "undo()"},      opts: { title: "undo",              icon: "undo-alt",               toolTip: "Click to undo" }},
-            { scripts: { onClick: "redo()"},      opts: { title: "redo",              icon: "redo-alt",               toolTip: "Click to redo" }},
+            { scripts: { onClick: "undo()"},      opts: { title: "Undo",              icon: "undo-alt",               toolTip: "Undo ⌘Z" }},
+            { scripts: { onClick: "redo()"},      opts: { title: "Redo",              icon: "redo-alt",               toolTip: "Redo ⌘R" }},
             { scripts: { },                       opts: { title: "undoStack",         layout: "<UndoStack>",          toolTip: "Undo/Redo Stack"}}, // note: layout fields are hacks -- they don't actually run through the JSX parser (yet)
             { scripts: { },                       opts: { title: "linker",            layout: "<LinkingUI>",          toolTip: "link started"}},
             { scripts: { },                       opts: { title: "currently playing", layout: "<CurrentlyPlayingUI>", toolTip: "currently playing media"}},
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index c35f088a6..9db8fe532 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -8,7 +8,7 @@
     background-color: $dark-gray;
     height: 35px;
     border-bottom: $standard-border;
-    padding-right: 5px;
+    padding: 0 10px;
     align-items: center;
 
     .collectionMenu-hardCodedButton {
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 7d71bce13..38692b924 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -42,6 +42,7 @@ import './CollectionMenu.scss';
 import { COLLECTION_BORDER_WIDTH } from './CollectionView';
 import { TabDocView } from './TabDocView';
 import { CollectionFreeFormView } from './collectionFreeForm';
+import { Group, IconButton, Toggle, ToggleType, Type } from 'browndash-components';
 
 interface CollectionMenuProps {
     panelHeight: () => number;
@@ -142,12 +143,17 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
         const propIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down';
         const propTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar';
 
-        const prop = (
-            <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="topar" placement="bottom">
-                <div className="collectionMenu-hardCodedButton" style={{ backgroundColor: SettingsManager.propertiesWidth > 0 ? Colors.MEDIUM_BLUE : undefined }} onPointerDown={this.toggleTopBar}>
-                    <FontAwesomeIcon icon={propIcon} size="lg" />
-                </div>
-            </Tooltip>
+        const hardCodedButtons = (
+            <div className={`hardCodedButtons`}>
+                <Toggle 
+                    toggleType={ToggleType.BUTTON} 
+                    type={Type.PRIM} 
+                    color={Colors.LIGHT_GRAY} 
+                    onClick={this.toggleTopBar} 
+                    toggleStatus={SettingsManager.headerBarHeight > 0} 
+                    icon={<FontAwesomeIcon icon={propIcon} size="lg" />}
+                />
+            </div>
         );
 
         // NEW BUTTONS
@@ -155,7 +161,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
         const contMenuButtons = (
             <div className="collectionMenu-container">
                 {this.contMenuButtons}
-                {prop}
+                {hardCodedButtons}
             </div>
         );
 
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 8f90e4444..446e720e8 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -20,6 +20,7 @@ import { UndoStack } from '../../UndoStack';
 import { CollectionStackedTimeline } from '../CollectionStackedTimeline';
 import { CollectionSubView } from '../CollectionSubView';
 import './CollectionLinearView.scss';
+import { Button, Type } from 'browndash-components';
 
 /**
  * CollectionLinearView is the class for rendering the horizontal collection
@@ -201,40 +202,22 @@ export class CollectionLinearView extends CollectionSubView() {
         const isExpanded = BoolCast(this.layoutDoc.linearView_IsExpanded);
 
         const menuOpener = (
-            <label
-                className={`collectionlinearView-label${isExpanded ? '-expanded' : ''}`}
-                htmlFor={this.Document[Id] + '-input'}
-                style={{ boxShadow: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BoxShadow) }}
-                onPointerDown={StopEvent}>
-                <div className="collectionLinearView-menuOpener">{Cast(this.props.Document.icon, 'string', null) ?? <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}</div>
-            </label>
+            <Button 
+                text={Cast(this.props.Document.icon, 'string', null)} 
+                icon={<FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}
+                type={Type.TERT}
+                onPointerDown={e => e.stopPropagation()}
+                onClick={() => {
+                        this.layoutDoc.linearView_IsExpanded = !isExpanded;
+                }}
+                tooltip={isExpanded ? 'Close' : 'Open'}
+            />
         );
 
         return (
             <div className={`collectionLinearView-outer ${this.layoutDoc.linearView_SubMenu}`} style={{ backgroundColor: this.layoutDoc.linearView_IsExpanded ? undefined : 'transparent' }}>
-                <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension() }}>
-                    {!this.props.Document.linearView_Expandable ? null : (
-                        <Tooltip title={<div className="dash-tooltip">{isExpanded ? 'Close' : 'Open'}</div>} placement="top">
-                            {menuOpener}
-                        </Tooltip>
-                    )}
-                    <input
-                        id={this.Document[Id] + '-input'}
-                        type="checkbox"
-                        checked={isExpanded}
-                        ref={this.addMenuToggle}
-                        onChange={action(e => {
-                            ScriptCast(this.Document.onClick)?.script.run({
-                                this: this.layoutDoc,
-                                self: this.rootDoc,
-                                _readOnly_: false,
-                                scriptContext: this.props.scriptContext,
-                                documentView: this.props.DocumentView?.(),
-                            });
-                            this.layoutDoc.linearView_IsExpanded = this.addMenuToggle.current!.checked;
-                        })}
-                    />
-
+                <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension(), pointerEvents: 'all' }}>
+                    {!this.props.Document.linearView_Expandable ? null : menuOpener}
                     {!this.layoutDoc.linearView_IsExpanded ? null : (
                         <div
                             className="collectionLinearView-content"
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 7d5c38140..8314f2d86 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -98,8 +98,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     @computed get label() {
         return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
     }
-    Icon = (color: string) => {
-        const icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
+    Icon = (color: string, iconFalse?: boolean) => {
+        let icon;
+        if (iconFalse ) {
+            icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as any;
+            if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />
+            else return null
+        }
+        icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
         const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
         return !icon ? null : icon === 'pres-trail' ? trailsIcon() : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
     };
@@ -309,25 +315,18 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             console.log(e);
         }
 
+        console.log("current item: ", text);
+
         // Get items to place into the list
         const list: IListItemProps[] = this.buttonList
             .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
             .map(value => (
                 {
                     text: value,
-                    style: { fontFamily: value }
+                    style: { fontFamily: value },
+                    onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value)
                     // shortcut: '#',
                 }
-                // <div
-                //     className="list-item"
-                //     key={value}
-                //     style={{
-                //         fontFamily: script.script.originalScript.startsWith('{ return setFont') ? value : undefined,
-                //         backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined,
-                //     }}
-                //     onClick={undoable(() => script.script.run({ self: this.rootDoc, value }), value)}>
-                //     {value[0].toUpperCase() + value.slice(1)}
-                // </div>
             ));
 
         const label =
@@ -338,7 +337,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             );
 
         return (
-            <Dropdown color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/>
+            <Dropdown selected={{text: text}} color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/>
         )
 
         return (
@@ -466,6 +465,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle);
         const buttonText: string = StrCast(this.rootDoc.buttonText);
         const tooltip: string = StrCast(this.rootDoc.toolTip);
+        
         // Colors
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
@@ -507,6 +507,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     }
 
     render() {
+        // determine dash button metadata
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const tooltip: string = StrCast(this.rootDoc.toolTip);
@@ -523,7 +524,46 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         // prettier-ignore
         switch (this.type) {
             case ButtonType.EditableText: return this.editableText;
-            case ButtonType.DropdownList: button = this.dropdownListButton; break;
+            case ButtonType.DropdownList:
+                let script = ScriptCast(this.rootDoc.script);
+                let noviceList: string[] = [];
+                let text: string | undefined;
+                let dropdown = true;
+                let icon: IconProp = 'caret-down';
+                try {
+                    if (script?.script.originalScript.startsWith('setView')) {
+                        const selected = SelectionManager.Docs().lastElement();
+                        if (selected) {
+                            if (StrCast(selected.type) === DocumentType.COL) {
+                                text = StrCast(selected._type_collection);
+                            } else {
+                                dropdown = false;
+                                text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type);
+                                icon = Doc.toIcon(selected);
+                            }
+                        } else {
+                            dropdown = false;
+                            icon = 'globe-asia';
+                            text = 'User Default';
+                        }
+                        noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
+                    } else text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+                } catch (e) {
+                    console.log(e);
+                } 
+                // Get items to place into the list
+                const list: IListItemProps[] = this.buttonList
+                .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
+                .map(value => (
+                    {
+                        text: value,
+                        style: { fontFamily: value },
+                        onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value)
+                        // shortcut: '#',
+                    }
+                ));
+                button = <Dropdown selected={{text: text}} color={Colors.WHITE} type={Type.PRIM} dropdownType={DropdownType.SELECT} items={list} location={OrientationType.LEFT}/>
+                break;
             case ButtonType.ColorButton: button = this.colorButton; break;
             case ButtonType.NumberDropdownButton: button = this.numberDropdownButton; break;
             case ButtonType.NumberInlineButton: button = this.numberInlineButton; break;
@@ -532,7 +572,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             case ButtonType.ToggleButton: button = this.toggleButton; break;
             case ButtonType.TextButton: 
                     // Script for checking the outcome of the toggle
-                    const script = ScriptCast(this.rootDoc.script);
+                    script = ScriptCast(this.rootDoc.script);
                     const checkResult = script?.script.run({ _readOnly_: true }).result;
                     button = (
                     <div className={`menuButton ${this.type}`} style={{ color, backgroundColor:checkResult ?? backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}>
@@ -548,7 +588,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 );
                 break;
             case ButtonType.MenuButton: button = (
-                    <IconButton tooltip={tooltip} size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
+                    <IconButton tooltip={tooltip} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
                 );
                 break;
         }