From 9a63f35496c82fd8be89e9490f65ac6354c7b752 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Mon, 10 Jul 2023 02:25:25 -0400
Subject: fixed collection linear view to an extent

still errors remaining and work that needs to be done!
---
 src/client/views/collections/CollectionMenu.scss   |  2 +-
 src/client/views/collections/CollectionMenu.tsx    | 20 ++++++----
 .../collectionLinear/CollectionLinearView.tsx      | 43 +++++++---------------
 3 files changed, 27 insertions(+), 38 deletions(-)

(limited to 'src/client/views/collections')

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"
-- 
cgit v1.2.3-70-g09d2