From 54308259a8cd3ac98aaee550ea01ad97f17172e6 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 17 Jul 2023 23:11:35 -0400 Subject: so many updates --- src/client/views/collections/CollectionMenu.scss | 651 +-------------------- src/client/views/collections/CollectionMenu.tsx | 51 +- .../views/collections/CollectionTreeView.tsx | 2 + src/client/views/collections/TabDocView.scss | 17 - src/client/views/collections/TabDocView.tsx | 103 ++-- src/client/views/collections/TreeView.scss | 36 +- src/client/views/collections/TreeView.tsx | 35 +- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 69 ++- .../collectionLinear/CollectionLinearView.tsx | 51 +- 9 files changed, 201 insertions(+), 814 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 9db8fe532..6eeccc94e 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -10,650 +10,13 @@ border-bottom: $standard-border; padding: 0 10px; align-items: center; + overflow-x: scroll; + &::-webkit-scrollbar { + display: none; + } - .collectionMenu-hardCodedButton { - cursor: pointer; - color: $white; - width: 25px; - height: 25px; - padding: 5; - text-align: center; + .hardCodedButtons { display: flex; - justify-content: center; - align-items: center; - position: relative; - transition: 0.2s; - border-radius: 3px; - - &:hover { - background-color: rgba(0, 0, 0, 0.2); - } + flex-direction: row; } -} - -// .collectionMenu-cont { -// position: relative; -// display: inline-flex; -// width: 100%; -// opacity: 0.9; -// z-index: 901; -// transition: top .5s; -// background: $dark-gray; -// color: $white; -// transform-origin: top left; -// top: 0; -// width: 100%; - -// .recordButtonOutline { -// border-radius: 100%; -// width: 18px; -// height: 18px; -// border: solid 1px $white; -// display: flex; -// align-items: center; -// justify-content: center; -// } - -// .recordButtonInner { -// border-radius: 100%; -// width: 70%; -// height: 70%; -// background: $white; -// } - -// .collectionMenu { -// display: flex; -// height: 100%; -// overflow: visible; -// z-index: 901; -// border: unset; - -// .collectionMenu-divider { -// height: 100%; -// margin-left: 3px; -// margin-right: 3px; -// width: 2px; -// background-color: $medium-gray; -// } - -// .collectionViewBaseChrome { -// display: flex; -// align-items: center; - -// .collectionViewBaseChrome-viewPicker { -// font-size: $small-text; -// outline-color: $black; -// color: $white; -// border: none; -// background: $dark-gray; -// } - -// .collectionViewBaseChrome-viewPicker:focus { -// outline: none; -// border: none; -// } - -// .collectionViewBaseChrome-viewPicker:active { -// outline-color: $black; -// } - -// .collectionViewBaseChrome-button { -// font-size: $small-text; -// text-transform: uppercase; -// letter-spacing: 2px; -// background: $white; -// color: $pink; -// outline-color: $black; -// border: none; -// padding: 12px 10px 11px 10px; -// margin-left: 10px; -// } - -// .collectionViewBaseChrome-cmdPicker { -// margin-left: 3px; -// margin-right: 0px; -// font-size: $small-text; -// text-transform: capitalize; -// color: $white; -// border: none; -// background: $dark-gray; -// } - -// .collectionViewBaseChrome-cmdPicker:focus { -// border: none; -// outline: none; -// } - -// .commandEntry-outerDiv { -// pointer-events: all; -// background-color: transparent; -// display: flex; -// flex-direction: row; -// align-items: center; -// justify-content: center; -// height: 100%; -// overflow: hidden; - -// .commandEntry-drop { -// color: $white; -// width: 30px; -// margin-top: auto; -// margin-bottom: auto; -// } -// } - -// .commandEntry-outerDiv:hover{ -// background-color: $drop-shadow; - -// .collectionViewBaseChrome-viewPicker, -// .collectionViewBaseChrome-cmdPicker{ -// background: $dark-gray; -// } -// } - -// .collectionViewBaseChrome-collapse { -// transition: all .5s, opacity 0.3s; -// position: absolute; -// width: 30px; -// transform-origin: top left; -// pointer-events: all; -// // margin-top: 10px; -// } - -// @media only screen and (max-device-width: 480px) { -// .collectionViewBaseChrome-collapse { -// display: none; -// } -// } - -// .collectionViewBaseChrome-template, -// .collectionViewBaseChrome-viewModes { -// align-items: center; -// height: 100%; -// display: flex; -// background: transparent; -// color: $medium-gray; -// justify-content: center; -// } - -// .collectionViewBaseChrome-viewSpecs { -// margin-left: 5px; -// display: grid; -// border: none; -// border-right: solid $medium-gray 1px; - -// .collectionViewBaseChrome-filterIcon { -// position: relative; -// display: flex; -// margin: auto; -// background: $dark-gray; -// color: $white; -// width: 30px; -// height: 30px; -// align-items: center; -// justify-content: center; -// border: none; -// border-right: solid $medium-gray 1px; -// } - -// .collectionViewBaseChrome-viewSpecsInput { -// padding: 12px 10px 11px 10px; -// border: 0px; -// color: $medium-gray; -// text-align: center; -// letter-spacing: 2px; -// outline-color: $black; -// font-size: $small-text; -// background: $white; -// height: 100%; -// width: 75px; -// } - -// .collectionViewBaseChrome-viewSpecsMenu { -// overflow: hidden; -// transition: height .5s, display .5s; -// position: absolute; -// top: 60px; -// z-index: 100; -// display: flex; -// flex-direction: column; -// background: $white; -// box-shadow: $medium-gray 2px 2px 4px; - -// .qs-datepicker { -// left: unset; -// right: 0; -// } - -// .collectionViewBaseChrome-viewSpecsMenu-row { -// display: grid; -// grid-template-columns: 150px 200px 150px; -// margin-top: 10px; -// margin-right: 10px; - -// .collectionViewBaseChrome-viewSpecsMenu-rowLeft, -// .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, -// .collectionViewBaseChrome-viewSpecsMenu-rowRight { -// font-size: $small-text; -// letter-spacing: 2px; -// color: $medium-gray; -// margin-left: 10px; -// padding: 5px; -// border: none; -// outline-color: $black; -// } -// } - -// .collectionViewBaseChrome-viewSpecsMenu-lastRow { -// display: grid; -// grid-template-columns: 1fr 1fr 1fr; -// grid-gap: 10px; -// margin: 10px; -// } -// } -// } -// } - -// .collectionStackingViewChrome-cont, -// .collectionTreeViewChrome-cont, -// .collection3DCarouselViewChrome-cont { -// display: flex; -// justify-content: space-between; -// } - -// .collectionGridViewChrome-cont { -// display: flex; -// margin-left: 10; - -// .collectionGridViewChrome-viewPicker { -// font-size: $small-text; -// //text-transform: uppercase; -// //letter-spacing: 2px; -// background: $dark-gray; -// color: $white; -// outline-color: $black; -// color: $white; -// border: none; -// border-right: solid $medium-gray 1px; -// } - -// .collectionGridViewChrome-viewPicker:active { -// outline-color: $black; -// } - -// .grid-control { -// align-self: center; -// display: flex; -// flex-direction: row; -// margin-right: 5px; - -// .grid-icon { -// margin-right: 5px; -// align-self: center; -// } - -// .flexLabel { -// margin-bottom: 0; -// } - -// .collectionGridViewChrome-entryBox { -// width: 50%; -// color: $black; -// } - -// .collectionGridViewChrome-columnButton { -// color: $black; -// } -// } -// } - -// .collectionStackingViewChrome-sort, -// .collectionTreeViewChrome-sort { -// display: flex; -// align-items: center; -// justify-content: space-between; - -// .collectionStackingViewChrome-sortIcon, -// .collectionTreeViewChrome-sortIcon { -// transition: transform .5s; -// margin-left: 10px; -// } -// } - -// button:hover { -// transform: scale(1); -// } - - -// .collectionStackingViewChrome-pivotField-cont, -// .collectionTreeViewChrome-pivotField-cont, -// .collection3DCarouselViewChrome-scrollSpeed-cont { -// justify-self: right; -// align-items: center; -// display: flex; -// grid-auto-columns: auto; -// font-size: $small-text; -// letter-spacing: 2px; - -// .collectionStackingViewChrome-pivotField-label, -// .collectionTreeViewChrome-pivotField-label, -// .collection3DCarouselViewChrome-scrollSpeed-label { -// grid-column: 1; -// margin-right: 7px; -// user-select: none; -// font-family: $sans-serif; -// letter-spacing: normal; -// } - -// .collectionStackingViewChrome-sortIcon { -// transition: transform .5s; -// grid-column: 3; -// text-align: center; -// display: flex; -// justify-content: center; -// align-items: center; -// cursor: pointer; -// width: 25px; -// height: 25px; -// border-radius: 100%; -// } - -// .collectionStackingViewChrome-sortIcon:hover { -// background-color: $drop-shadow; -// } - -// .collectionStackingViewChrome-pivotField, -// .collectionTreeViewChrome-pivotField, -// .collection3DCarouselViewChrome-scrollSpeed { -// color: $white; -// grid-column: 2; -// grid-row: 1; -// width: 90%; -// min-width: 100px; -// display: flex; -// height: 80%; -// border-radius: 7px; -// align-items: center; -// background: $white; - -// .editable-view-input, -// input, -// .editableView-container-editing-oneLine, -// .editableView-container-editing { -// margin: auto; -// border: 0px; -// color: $light-gray !important; -// text-align: center; -// letter-spacing: 2px; -// outline-color: $black; -// height: 100%; -// } - -// .react-autosuggest__container { -// margin: 0; -// color: $medium-gray; -// padding: 0px; -// } -// } -// } - -// .collectionStackingViewChrome-pivotField:hover, -// .collectionTreeViewChrome-pivotField:hover, -// .collection3DCarouselViewChrome-scrollSpeed:hover { -// cursor: text; -// } - -// } -// } - -// .collectionMenu-webUrlButtons { -// margin-left: 44; -// background: lightGray; -// display: flex; -// } - -// .webBox-urlEditor { -// position: relative; -// opacity: 0.9; -// z-index: 901; -// transition: top .5s; - -// .urlEditor { -// display: grid; -// grid-template-columns: 1fr auto; -// padding-bottom: 10px; -// overflow: hidden; -// margin-top: 5px; -// height: 35px; - -// .editorBase { -// display: flex; - -// .editor-collapse { -// transition: all .5s, opacity 0.3s; -// position: absolute; -// width: 40px; -// transform-origin: top left; -// } - -// .switchToText { -// color: $medium-gray; -// } - -// .switchToText:hover { -// color: $dark-gray; -// } -// } - -// button:hover { -// transform: scale(1); -// } -// } -// } - -// .collectionMenu-urlInput { -// padding: 12px 10px 11px 10px; -// border: 0px; -// color: $black; -// font-size: $small-text; -// letter-spacing: 2px; -// outline-color: $black; -// background: $white; -// width: 100%; -// min-width: 350px; -// margin-right: 10px; -// height: 100%; -// } - -// .collectionFreeFormMenu-cont { -// display: inline-flex; -// position: relative; -// align-items: center; -// height: 100%; - -// .color-previewI { -// width: 60%; -// top: 80%; -// position: absolute; -// height: 4px; -// } - -// .color-previewII { -// width: 80%; -// height: 80%; -// margin-left: 10%; -// position: absolute; -// bottom: 5; -// } - -// .btn-group { -// display: grid; -// grid-template-columns: auto auto auto auto; -// margin: auto; -// /* Make the buttons appear below each other */ -// } - -// .btn-draw { -// display: inline-flex; -// margin: auto; -// /* Make the buttons appear below each other */ -// } - -// .fwdKeyframe, -// .numKeyframe, -// .backKeyframe { -// cursor: pointer; -// position: relative; -// width: 20; -// height: 30; -// bottom: 0; -// background: $dark-gray; -// display: inline-flex; -// align-items: center; -// color: $white; -// } - -// .backKeyframe { -// svg { -// display: block; -// margin: auto; -// } -// } - - -// .numKeyframe { -// flex-direction: column; -// padding-top: 5px; -// } - -// .fwdKeyframe { -// svg { -// display: block; -// margin: auto; -// } - -// border-right: solid $medium-gray 1px; -// } -// } - -// .collectionSchemaViewChrome-cont { -// display: flex; -// font-size: $small-text; - -// .collectionSchemaViewChrome-toggle { -// display: flex; -// margin-left: 10px; -// } - -// .collectionSchemaViewChrome-label { -// text-transform: uppercase; -// letter-spacing: 2px; -// margin-right: 5px; -// display: flex; -// flex-direction: column; -// justify-content: center; -// } - -// .collectionSchemaViewChrome-toggler { -// width: 100px; -// height: 35px; -// background-color: $black; -// position: relative; -// } - -// .collectionSchemaViewChrome-togglerButton { -// width: 47px; -// height: 30px; -// background-color: $light-gray; -// // position: absolute; -// transition: all 0.5s ease; -// // top: 3px; -// margin-top: 3px; -// color: $medium-gray; -// letter-spacing: 2px; -// text-transform: uppercase; -// display: flex; -// flex-direction: column; -// justify-content: center; -// text-align: center; - -// &.on { -// margin-left: 3px; -// } - -// &.off { -// margin-left: 50px; -// } -// } -// } - - -// .commandEntry-outerDiv { -// display: flex; -// flex-direction: column; -// height: 40px; -// } - -// .commandEntry-inputArea { -// display: flex; -// flex-direction: row; -// width: 150px; -// margin: auto auto auto auto; -// } - -// .react-autosuggest__container { -// position: relative; -// width: 100%; -// margin-left: 5px; -// margin-right: 5px; -// } - -// .react-autosuggest__input { -// border: 1px solid $light-gray; -// border-radius: 4px; -// width: 100%; -// } - -// .react-autosuggest__input--focused { -// outline: none; -// } - -// .react-autosuggest__input--open { -// border-bottom-left-radius: 0; -// border-bottom-right-radius: 0; -// } - -// .react-autosuggest__suggestions-container { -// display: none; -// } - -// .react-autosuggest__suggestions-container--open { -// display: block; -// position: fixed; -// overflow-y: auto; -// max-height: 400px; -// width: 180px; -// border: 1px solid $light-gray; -// background-color: $white; -// font-family: $sans-serif; -// font-weight: 300; -// font-size: $large-header; -// border-bottom-left-radius: 4px; -// border-bottom-right-radius: 4px; -// z-index: 2; -// } - -// .react-autosuggest__suggestions-list { -// margin: 0; -// padding: 0; -// list-style-type: none; -// } - -// .react-autosuggest__suggestion { -// cursor: pointer; -// padding: 10px 20px; -// } - -// .react-autosuggest__suggestion--highlighted { -// background-color: $light-gray; -// } \ No newline at end of file +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 38692b924..9eb716763 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -2,23 +2,23 @@ import React = require('react'); import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@material-ui/core'; -import { action, computed, Lambda, observable, reaction, runInAction } from 'mobx'; +import { Toggle, ToggleType, Type } from 'browndash-components'; +import { Lambda, action, computed, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { ColorState } from 'react-color'; +import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; -import { Document } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; import { RichTextField } from '../../../fields/RichTextField'; import { listSpec } from '../../../fields/Schema'; -import { ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../fields/Types'; +import { Document } from '../../../fields/documentSchemas'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../Utils'; -import { Docs } from '../../documents/Documents'; import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes'; +import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { ScriptingGlobals } from '../../util/ScriptingGlobals'; import { SelectionManager } from '../../util/SelectionManager'; @@ -28,21 +28,19 @@ import { undoBatch } from '../../util/UndoManager'; import { AntimodeMenu } from '../AntimodeMenu'; import { EditableView } from '../EditableView'; import { GestureOverlay } from '../GestureOverlay'; -import { Colors } from '../global/globalEnums'; import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from '../InkingStroke'; import { LightboxView } from '../LightboxView'; +import { MainView } from '../MainView'; +import { DefaultStyleProvider } from '../StyleProvider'; import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; import { DocumentView, OpenWhereMod } from '../nodes/DocumentView'; -import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; -import { DefaultStyleProvider } from '../StyleProvider'; import { CollectionDockingView } from './CollectionDockingView'; -import { CollectionLinearView } from './collectionLinear'; 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'; +import { CollectionLinearView } from './collectionLinear'; interface CollectionMenuProps { panelHeight: () => number; @@ -96,6 +94,15 @@ export class CollectionMenu extends AntimodeMenu { } }; + @action + toggleProperties = () => { + if (MainView.Instance.propertiesWidth() > 0) { + SettingsManager.propertiesWidth = 0; + } else { + SettingsManager.propertiesWidth = 300; + } + }; + buttonBarXf = () => { if (!this._docBtnRef.current) return Transform.Identity(); const { scale, translateX, translateY } = Utils.GetScreenTransform(this._docBtnRef.current); @@ -140,18 +147,30 @@ export class CollectionMenu extends AntimodeMenu { } render() { - const propIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down'; - const propTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar'; + const headerIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down'; + const headerTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar'; + const propIcon = SettingsManager.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; + const propTitle = SettingsManager.propertiesWidth > 0 ? 'Close Properties' : 'Open Properties'; const hardCodedButtons = (
0} + icon={} + tooltip={headerTitle} + /> + 0} icon={} + tooltip={propTitle} />
); @@ -159,7 +178,11 @@ export class CollectionMenu extends AntimodeMenu { // NEW BUTTONS //dash col linear view buttons const contMenuButtons = ( -
+
{this.contMenuButtons} {hardCodedButtons}
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 4cd3885f5..09be9dc76 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -386,6 +386,7 @@ export class CollectionTreeView extends CollectionSubView this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor); + const color = () => this.props.styleProvider?.(this.doc, this.props, StyleProp.Color); const pointerEvents = () => (this.props.isContentActive() === false ? 'none' : undefined); const titleBar = this.props.treeViewHideTitle || this.doc.treeViewHideTitle ? null : this.titleBar; return ( @@ -402,6 +403,7 @@ export class CollectionTreeView extends CollectionSubView !this.doc.treeViewHasOverlay && r && this.createTreeDropTarget(r)} style={{ ...(!titleBar ? { marginLeft: this.marginX(), paddingTop: this.marginTop() } : {}), + color: color(), overflow: 'auto', width: '100%', height: '100%', diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index 58605c3f4..13bb3a577 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -65,11 +65,7 @@ input.lm_title { } .miniMap { - position: absolute; overflow: hidden; - right: 15; - bottom: 15; - border: solid 1px; width: 100%; height: 100%; transition: all 0.5s; @@ -90,18 +86,5 @@ input.lm_title { cursor: pointer; position: absolute; bottom: 5; - display: flex; right: 5; - width: 25px; - height: 25px; - border-radius: 3px; - padding: 2px; - justify-content: center; - align-items: center; - align-content: center; - background-color: $light-gray; - - &:hover { - box-shadow: none; - } } diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 4d780f46b..714619a74 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -34,6 +34,7 @@ import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormV import { CollectionView } from './CollectionView'; import './TabDocView.scss'; import React = require('react'); +import { Popup, Toggle, Type } from 'browndash-components'; const _global = (window /* browser */ || global) /* node */ as any; interface TabDocViewProps { @@ -573,63 +574,53 @@ export class TabMinimapView extends React.Component { const miniTop = 50 + ((NumCast(this.props.document._freeform_panY) - this.renderBounds.cy) / this.renderBounds.dim) * 100 - miniHeight / 2; const miniSize = this.returnMiniSize(); return ( - <> - {' '} - {this.props.document?.layout_hideMinimap ? null : ( -
- -
-
+
+ } + color={StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)} + type={Type.TERT} + onPointerDown={e => e.stopPropagation()} + placement={'top-end'} + popup={ +
+ +
+
+
-
- )} - {this.props.document.layout_hideMinimap ? 'Open minimap' : 'Close minimap'}
}> -
e.stopPropagation()} - onClick={action(e => { - e.stopPropagation(); - this.props.document!.layout_hideMinimap = !this.props.document!.layout_hideMinimap; - })}> - -
- - + } + /> +
); } } diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 7eab03e1d..85f99b9c2 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -24,34 +24,18 @@ // width: $TREE_BULLET_WIDTH; width: 100%; height: 100%; - position: absolute; - - .treeView-expandIcon { - display: none; - left: -10px; - position: absolute; - } - - .treeView-checkIcon { - left: 3.5px; - top: 2px; - position: absolute; - } - - &:hover { - .treeView-expandIcon { - display: unset; - } - } + position: relative; + display: flex; + flex-direction: row; } - .treeView-bulletIcons:hover img { - left: 14px; - position: absolute; - transform-origin: center left; - transform: scale(6); - pointer-events: none; - } + // .treeView-bulletIcons:hover img { + // left: 14px; + // position: absolute; + // transform-origin: center left; + // transform: scale(6); + // pointer-events: none; + // } .bullet { grid-column: 1; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 8d8d895c6..55f62cdf2 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -34,6 +34,7 @@ import { CollectionTreeView, TreeViewType } from './CollectionTreeView'; import { CollectionView } from './CollectionView'; import './TreeView.scss'; import React = require('react'); +import { IconButton, Size } from 'browndash-components'; export interface TreeViewProps { treeView: CollectionTreeView; @@ -541,6 +542,8 @@ export class TreeView extends React.Component { TraceMobx(); const expandKey = this.treeViewExpandedView; const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; label: string } }) ?? {}; + const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color) + console.log("tree view", color, this.doc.title, Doc.IsSystem(this.doc)) if (['links', 'annotations', 'embeddings', this.fieldKey].includes(expandKey)) { const sorting = StrCast(this.doc.treeViewSortCriterion, TreeSort.None); const sortKeys = Object.keys(sortings); @@ -580,7 +583,9 @@ export class TreeView extends React.Component { ); } return ( - <> +
{!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
{sortings[sorting]?.label} @@ -640,17 +645,18 @@ export class TreeView extends React.Component { this._renderCount )} - +
); } else if (this.treeViewExpandedView === 'fields') { return ( -
    +
      {this.expandedField}
    ); } return (
      { e.preventDefault(); e.stopPropagation(); @@ -685,6 +691,7 @@ export class TreeView extends React.Component { @computed get renderBullet() { TraceMobx(); const iconType = this.props.treeView.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question'; + const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color) const checked = this.onCheckedClick ? this.doc.treeViewChecked ?? 'unchecked' : undefined; return (
      { }> {this.props.treeView.outlineMode ? ( !(this.doc.text as RichTextField)?.Text ? null : ( - + } + size={Size.XSMALL} + /> ) ) : (
      -
      - -
      - {this.onCheckedClick ? null : typeof iconType === 'string' ? : iconType} + } + size={Size.XSMALL} + /> + {this.onCheckedClick ? null : + } + size={Size.XSMALL} + /> + }
      )}
      diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index c9168d40a..0f51fe6ff 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -4,6 +4,10 @@ import { Tooltip } from '@material-ui/core'; import { observer } from 'mobx-react'; import { unimplementedFunction } from '../../../../Utils'; import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; +import { IconButton } from 'browndash-components'; +import { StrCast } from '../../../../fields/Types'; +import { Doc } from '../../../../fields/Doc'; +import { computed } from 'mobx'; @observer export class MarqueeOptionsMenu extends AntimodeMenu { @@ -22,39 +26,44 @@ export class MarqueeOptionsMenu extends AntimodeMenu { MarqueeOptionsMenu.Instance = this; } + @computed get userColor() { + return StrCast(Doc.UserDoc().userColor) + } + render() { - const presPinWithViewIcon = ; + const presPinWithViewIcon = ; const buttons = ( <> - Create a Collection
} placement="bottom"> - - - , - Create a Grouping
} placement="bottom"> - - - , - Summarize Documents
} placement="bottom"> - - - , - Delete Documents
} placement="bottom"> - - - , - Pin selected region to trail} placement="bottom"> - - + } + color={this.userColor} + /> + this.createCollection(e, true)} + icon={} + color={this.userColor} + /> + } + color={this.userColor} + /> + } + color={this.userColor} + /> + ); return this.getElement(buttons); diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx index 446e720e8..56b8366d0 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx @@ -20,7 +20,8 @@ import { UndoStack } from '../../UndoStack'; import { CollectionStackedTimeline } from '../CollectionStackedTimeline'; import { CollectionSubView } from '../CollectionSubView'; import './CollectionLinearView.scss'; -import { Button, Type } from 'browndash-components'; +import { Button, Toggle, ToggleType, Type } from 'browndash-components'; +import { Colors } from '../../global/globalEnums'; /** * CollectionLinearView is the class for rendering the horizontal collection @@ -47,7 +48,7 @@ export class CollectionLinearView extends CollectionSubView() { componentDidMount() { this._widthDisposer = reaction( - () => 5 + NumCast(this.rootDoc.linearBtnWidth, this.dimension()) + (this.layoutDoc.linearView_IsExpanded ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (doc[Width]() || this.dimension()) + tot + 4, 0) : 0), + () => 5 + NumCast(this.rootDoc.linearBtnWidth, this.dimension()) + (this.layoutDoc.linearView_IsOpen ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (doc[Width]() || this.dimension()) + tot + 4, 0) : 0), width => this.childDocs.length && (this.layoutDoc._width = width), { fireImmediately: true } ); @@ -199,36 +200,48 @@ export class CollectionLinearView extends CollectionSubView() { render() { const flexDir = StrCast(this.Document.flexDirection); // Specify direction of linear view content const flexGap = NumCast(this.Document.flexGap); // Specify the gap between linear view content - const isExpanded = BoolCast(this.layoutDoc.linearView_IsExpanded); + const isExpanded = BoolCast(this.layoutDoc.linearView_IsOpen); const menuOpener = ( -