diff options
Diffstat (limited to 'src/client/views/collections/collectionLinear')
| -rw-r--r-- | src/client/views/collections/collectionLinear/CollectionLinearView.tsx | 43 |
1 files changed, 13 insertions, 30 deletions
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" |