aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/documents/DocumentTypes.ts2
-rw-r--r--src/client/documents/Documents.ts31
-rw-r--r--src/client/util/CaptureManager.tsx1
-rw-r--r--src/client/util/CurrentUserUtils.ts5
-rw-r--r--src/client/views/FilterPanel.scss23
-rw-r--r--src/client/views/FilterPanel.tsx21
-rw-r--r--src/client/views/MainView.scss11
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/PropertiesButtons.scss98
-rw-r--r--src/client/views/PropertiesButtons.tsx320
-rw-r--r--src/client/views/PropertiesDocContextSelector.tsx3
-rw-r--r--src/client/views/PropertiesView.scss28
-rw-r--r--src/client/views/PropertiesView.tsx127
-rw-r--r--src/client/views/nodes/importBox/ImportElementBox.tsx70
14 files changed, 561 insertions, 181 deletions
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 6cd8de87a..b629d9b8c 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -2,7 +2,7 @@ export enum DocumentType {
NONE = 'none',
// core data types
- RTF = 'rtf',
+ RTF = 'rich text',
IMG = 'image',
WEB = 'web',
COL = 'collection',
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 665165c70..63a7c3339 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -441,6 +441,7 @@ export namespace Docs {
nativeHeightUnfrozen: true,
layout_forceReflow: true,
defaultDoubleClick: 'ignore',
+ systemIcon: 'BsFileEarmarkTextFill',
},
},
],
@@ -462,21 +463,21 @@ export namespace Docs {
DocumentType.IMG,
{
layout: { view: ImageBox, dataField: defaultDataKey },
- options: { freeform: '' },
+ options: { freeform: '', systemIcon: 'BsFileEarmarkImageFill' },
},
],
[
DocumentType.WEB,
{
layout: { view: WebBox, dataField: defaultDataKey },
- options: { _height: 300, _layout_fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true, waitForDoubleClickToClick: 'always' },
+ options: { _height: 300, _layout_fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true, waitForDoubleClickToClick: 'always', systemIcon: 'BsGlobe' },
},
],
[
DocumentType.COL,
{
layout: { view: CollectionView, dataField: defaultDataKey },
- options: { _layout_fitWidth: true, freeform: '', _freeform_panX: 0, _freeform_panY: 0, _freeform_scale: 1 },
+ options: { _layout_fitWidth: true, freeform: '', _freeform_panX: 0, _freeform_panY: 0, _freeform_scale: 1, systemIcon: 'BsFillCollectionFill' },
},
],
[
@@ -490,35 +491,35 @@ export namespace Docs {
DocumentType.VID,
{
layout: { view: VideoBox, dataField: defaultDataKey },
- options: { _layout_currentTimecode: 0 },
+ options: { _layout_currentTimecode: 0, systemIcon: 'BsFileEarmarkPlayFill' },
},
],
[
DocumentType.AUDIO,
{
layout: { view: AudioBox, dataField: defaultDataKey },
- options: { _height: 100, layout_fitWidth: true, layout_forceReflow: true, nativeDimModifiable: true },
+ options: { _height: 100, layout_fitWidth: true, layout_forceReflow: true, nativeDimModifiable: true, systemIcon: 'BsFillVolumeUpFill' },
},
],
[
DocumentType.REC,
{
layout: { view: VideoBox, dataField: defaultDataKey },
- options: { _height: 100, backgroundColor: 'pink' },
+ options: { _height: 100, backgroundColor: 'pink', systemIcon: 'BsFillMicFill' },
},
],
[
DocumentType.PDF,
{
layout: { view: PDFBox, dataField: defaultDataKey },
- options: { _layout_curPage: 1, _layout_fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true },
+ options: { _layout_curPage: 1, _layout_fitWidth: true, nativeDimModifiable: true, nativeHeightUnfrozen: true, systemIcon: 'BsFileEarmarkPdfFill' },
},
],
[
DocumentType.MAP,
{
layout: { view: MapBox, dataField: defaultDataKey },
- options: { _height: 600, _width: 800, nativeDimModifiable: true },
+ options: { _height: 600, _width: 800, nativeDimModifiable: true, systemIcon: 'BsFillPinMapFill' },
},
],
[
@@ -557,7 +558,7 @@ export namespace Docs {
DocumentType.SCRIPTING,
{
layout: { view: ScriptingBox, dataField: defaultDataKey },
- options: {},
+ options: { systemIcon: 'BsFileEarmarkCodeFill' },
},
],
[
@@ -577,7 +578,7 @@ export namespace Docs {
DocumentType.EQUATION,
{
layout: { view: EquationBox, dataField: 'text' },
- options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true },
+ options: { nativeDimModifiable: true, fontSize: '14px', layout_hideResizeHandles: true, layout_hideDecorationTitle: true, systemIcon: 'BsCalculatorFill' }, ///systemIcon: 'BsSuperscript' + BsSubscript
},
],
[
@@ -619,7 +620,7 @@ export namespace Docs {
DocumentType.WEBCAM,
{
layout: { view: RecordingBox, dataField: defaultDataKey },
- options: {},
+ options: { systemIcon: 'BsFillCameraVideoFill' },
},
],
[
@@ -641,14 +642,14 @@ export namespace Docs {
{
// NOTE: this is unused!! ink fields are filled in directly within the InkDocument() method
layout: { view: InkingStroke, dataField: 'stroke' },
- options: {},
+ options: { systemIcon: 'BsFillPencilFill' },
},
],
[
DocumentType.SCREENSHOT,
{
layout: { view: ScreenshotBox, dataField: defaultDataKey },
- options: { nativeDimModifiable: true, nativeHeightUnfrozen: true },
+ options: { nativeDimModifiable: true, nativeHeightUnfrozen: true, systemIcon: 'BsCameraFill' },
},
],
[
@@ -656,7 +657,7 @@ export namespace Docs {
{
data: '',
layout: { view: ComparisonBox, dataField: defaultDataKey },
- options: { backgroundColor: 'gray', dropAction: 'move', waitForDoubleClickToClick: 'always' },
+ options: { backgroundColor: 'gray', dropAction: 'move', waitForDoubleClickToClick: 'always', systemIcon: 'BsLayoutSplit' },
},
],
[
@@ -692,7 +693,7 @@ export namespace Docs {
{
data: '',
layout: { view: PhysicsSimulationBox, dataField: defaultDataKey, _width: 1000, _height: 800 },
- options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '' },
+ options: { _height: 100, layout_forceReflow: true, nativeHeightUnfrozen: true, mass1: '', mass2: '', nativeDimModifiable: true, position: '', acceleration: '', pendulum: '', spring: '', wedge: '', simulation: '', review: '', systemIcon: 'BsShareFill' },
},
],
]);
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
index d68761ba7..f42336ee7 100644
--- a/src/client/util/CaptureManager.tsx
+++ b/src/client/util/CaptureManager.tsx
@@ -58,7 +58,6 @@ export class CaptureManager extends React.Component<{}> {
)
);
}
-
return (
<div className="capture-block">
<div className="capture-block-title">Links</div>
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ef1726fab..6977fb0b6 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -30,6 +30,8 @@ import { LinkManager } from "./LinkManager";
import { ScriptingGlobals } from "./ScriptingGlobals";
import { ColorScheme, SettingsManager } from "./SettingsManager";
import { UndoManager } from "./UndoManager";
+import { PresElementBox } from "../views/nodes/trails";
+import { ImportElementBox } from "../views/nodes/importBox/importElementBox";
interface Button {
// DocumentOptions fields a button can set
@@ -809,8 +811,9 @@ export class CurrentUserUtils {
/// Import option on the left side button panel
static setupImportSidebar(doc: Doc, field:string) {
+ // PresElementBox.LayoutString('data')
const reqdOpts:DocumentOptions = {
- title: "My Imports", _forceActive: true, ignoreClick: true, _layout_showTitle: "title",
+ title: "My Imports", _forceActive: true, ignoreClick: true, _layout_showTitle: "title", childLayoutString: ImportElementBox.LayoutString('data'),
_dragOnlyWithinContainer: true, _layout_hideContextMenu: true, childLimitHeight: 0,
childDragAction: "copy", _layout_autoHeight: true, _yMargin: 50, _gridGap: 15, layout_boxShadow: "0 0", _lockedPosition: true, isSystem: true, _chromeHidden: true,
dontRegisterView: true, layout_explainer: "This is where documents that are Imported into Dash will go."
diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index c903f29ee..34d06ea23 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -156,7 +156,7 @@
right: 0;
top: 0;
z-index: 1;
- background-color: #9f9f9f;
+ // background-color: #9f9f9f;
.filterBox-tree {
z-index: 0;
@@ -182,6 +182,7 @@
}
.filterBox-tree {
+ padding-top: 8px;
display: inline-block;
width: 100%;
margin-bottom: 10px;
@@ -189,3 +190,23 @@
overflow: auto;
}
}
+
+
+
+.filterBox-facetHeader{
+ display: flex;
+ align-items: center;
+ // float:right;
+
+ .filterBox-facetHeader-collapse{
+ float: right;
+ justify-items: right;
+ align-items: flex-end;
+ margin-left: auto;
+ margin-right: 9px;
+ }
+
+}
+
+
+
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index a5c18cd8b..b10fafb57 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -11,6 +11,8 @@ import './FilterPanel.scss';
import { FieldView } from './nodes/FieldView';
import { SearchBox } from './search/SearchBox';
import { undoable } from '../util/UndoManager';
+import { AiOutlineMinusSquare } from 'react-icons/ai';
+import { CiCircleRemove } from 'react-icons/ci';
interface filterProps {
rootDoc: Doc;
@@ -167,13 +169,15 @@ export class FilterPanel extends React.Component<filterProps> {
render() {
const options = this._allFacets.filter(facet => this.currentFacets.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet }));
+ console.log("this is option " + options)
+ console.log("this is alll facets " + this._allFacets)
return (
<div className="filterBox-treeView">
<div className="filterBox-select">
<div style={{ width: '100%' }}>
<Select placeholder="Add a filter..." options={options} isMulti={false} onChange={val => this.facetClick((val as UserOptions).value)} onKeyDown={e => e.stopPropagation()} value={null} closeMenuOnSelect={true} />
</div>
- <div className="filterBox-select-bool">
+ {/* <div className="filterBox-select-bool">
<select className="filterBox-selection" onChange={action(e => this.targetDoc && (this.targetDoc._childFilters_boolean = (e.target as any).value))} defaultValue={StrCast(this.targetDoc?.childFilters_boolean)}>
{['AND', 'OR'].map(bool => (
<option value={bool} key={bool}>
@@ -181,13 +185,24 @@ export class FilterPanel extends React.Component<filterProps> {
</option>
))}
</select>
- </div>{' '}
+ </div>{' '} */}
</div>
<div className="filterBox-tree" key="tree">
{Array.from(this.activeFacets.keys()).map(facetHeader => (
<div>
- {facetHeader}
+ <div className = "filterBox-facetHeader">
+ <div className = "filterBox-facetHeader-Header"> </div>
+ {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
+
+ <div className = "filterBox-facetHeader-collapse">
+ <AiOutlineMinusSquare/>
+ <CiCircleRemove/>
+ </div>
+
+ </div>
+
+
{this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)}
</div>
))}
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index e33054c8e..0c377730e 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -185,6 +185,17 @@ h1,
background: $light-gray;
}
}
+
+ .propertiesView {
+ left: 0;
+ position: absolute;
+ z-index: 2;
+ background-color: linen;//$light-gray;
+
+ .editable-title {
+ background-color: linen;//$light-gray;
+ }
+ }
}
.mainView-libraryHandle {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 28f0ad0c8..efd8206bf 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -813,7 +813,7 @@ export class MainView extends React.Component {
{this.dockingContent}
{this._hideUI ? null : (
- <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}>
+ <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1, background : 'linen' }}>
<FontAwesomeIcon icon={this.propertiesWidth() < 10 ? 'chevron-left' : 'chevron-right'} color={this.colorScheme === ColorScheme.Dark ? Colors.WHITE : Colors.BLACK} size="sm" />
</div>
)}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index db30745fc..b801b3abf 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,22 +20,31 @@ $linkGap : 3px;
.propertiesButtons-linkButton-empty,
.propertiesButtons-linkButton-nonempty {
- height: 25px;
- width: 29px;
- border-radius: 6px;
- pointer-events: auto;
- background-color: $dark-gray;
- color: #fcfbf7;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 75%;
- transition: transform 0.2s;
- text-align: center;
+ // margin-right: 7px;
+ // margin-left: 8px;
+ height: 28px;
+ // width: 226px;//29px;
display: flex;
- justify-content: center;
align-items: center;
- margin-right: 10px;
- margin-left: 4px;
+ // height: 25px;
+ // width: 230px;//29px;
+ // display: flex;
+ // align-items: center;
+ // border-radius: 6px;
+ pointer-events: auto;
+ // background-color: $dark-gray;
+ // color: #fcfbf7;
+ // text-transform: uppercase;
+ // letter-spacing: 2px;
+ // font-size: 75%;
+ transition: transform 0.2s;
+ // text-align: center;
+
+
+ // justify-content: center;
+
+ // margin-right: 10px;
+ // margin-left: 4px;
&:hover {
background: $medium-gray;
@@ -46,24 +55,34 @@ $linkGap : 3px;
.propertiesButtons-linkButton-empty.toggle-on {
background-color: $medium-blue;
color: $white;
+ width:100%
}
.propertiesButtons-linkButton-empty.toggle-hover {
background-color: $light-blue;
color: $black;
+ width:100%
}
.propertiesButtons-linkButton-empty.toggle-off {
- background-color: $dark-gray;
- color: white;
+ background-color: white;//$dark-gray;
+ color: black; //white;
+ width:100%
+}
+
+.propertiesButtons-icon {
+ margin-left:8px;
}
.propertiesButtons {
+ position:relative;
width: 100%;
- height: auto;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- padding-bottom: 5.5px;
- gap: 5px;
+ // margin-top: 3px;
+// // grid-column: 1/4;
+// width: 100%;
+// height: auto;
+// display: flex;
+// // flex-direction: row;
+// // flex-wrap: wrap;
+// padding-bottom: 5.5px;
}
.onClickFlyout-editScript {
@@ -79,8 +98,11 @@ $linkGap : 3px;
.propertiesButtons-button {
pointer-events: auto;
- padding-right: 5px;
- width: 100%;
+ padding-right: 8px;//5px;
+ width: 100%;//width: 25px;
+ border-radius: 5px;
+ margin-right: 20px;
+ margin-bottom: 8px;
}
.propertiesButton-dropdownList {
@@ -106,18 +128,24 @@ $linkGap : 3px;
}
}
-.propertiesButtons-title {
- background: $dark-gray;
- color: $white;
- font-size: 6px;
- width: 37px;
- padding: 3px;
- height: 12px;
- border-radius: 7px;
+.propertiesButtons-label {
text-transform: uppercase;
- text-align: center;
- margin-top: -4px;
-}
+ margin-left: 8px;
+ // margin-right: 50 px;
+}
+
+// .propertiesButtons-title {
+// background: pink; //$dark-gray;
+// color: $white;
+// font-size: 6px;
+// width: 37px;
+// padding: 3px;
+// height: 12px;
+// border-radius: 7px;
+// text-transform: uppercase;
+// text-align: center;
+// margin-top: -4px;
+// }
.propertiesButtons-linker {
height: 25px;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index b0f9d5a7e..6105cc1b5 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -1,5 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Icon, Tooltip } from '@material-ui/core';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import { Doc, DocListCast, Opt } from '../../fields/Doc';
@@ -21,6 +21,16 @@ import { DocumentView, OpenWhere } from './nodes/DocumentView';
import { pasteImageBitmap } from './nodes/WebBoxRenderer';
import './PropertiesButtons.scss';
import React = require('react');
+import { JsxElement } from 'typescript';
+import { FaBraille, FaHighlighter, FaLock, FaLockOpen, FaThumbtack } from 'react-icons/fa';
+import { AiOutlineApple, AiOutlineColumnWidth, AiOutlinePicture } from 'react-icons/ai';
+import { MdClosedCaption, MdClosedCaptionDisabled, MdGridOff, MdGridOn, MdSubtitles, MdSubtitlesOff, MdTouchApp } from 'react-icons/md';
+import { TbEditCircle, TbEditCircleOff, TbHandOff, TbHandStop, TbHighlight, TbHighlightOff } from 'react-icons/tb';
+import { BiHide, BiShow } from 'react-icons/bi';
+import { BsGrid3X3GapFill } from 'react-icons/bs';
+import { TfiBarChart } from 'react-icons/tfi';
+import { CiGrid31 } from 'react-icons/ci';
+import { RxWidth } from 'react-icons/rx';
import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components';
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
@@ -31,6 +41,7 @@ enum UtilityButtonState {
OpenRight,
OpenExternally,
}
+
@observer
export class PropertiesButtons extends React.Component<{}, {}> {
@observable public static Instance: PropertiesButtons;
@@ -42,14 +53,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
return !SelectionManager.SelectedSchemaDoc() && SelectionManager.Views().lastElement()?.topMost;
}
- propertyToggleBtn = (label: string, property: string, tooltip: (on?: any) => string, icon: (on: boolean) => string, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
+ propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc;
const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
return !targetDoc ? null : <Toggle
toggleStatus={BoolCast(targetDoc[property])}
- text={tooltip(targetDoc?.[property])}
+ text={label(targetDoc?.[property])}
color={StrCast(Doc.UserDoc().userColor)}
- icon={<FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} />}
+ icon={icon(targetDoc?.[property] as any)}
iconPlacement={'left'}
align={'flex-start'}
fillWidth={true}
@@ -62,188 +73,274 @@ export class PropertiesButtons extends React.Component<{}, {}> {
/>
};
+
+ // this implments a container pattern by marking the targetDoc (collection) as a lightbox
+ // that always fits its contents to its container and that hides all other documents when
+ // a link is followed that targets a 'lightbox' destination
+ @computed get isLightboxButton() {
+ return this.propertyToggleBtn(
+ on => 'Lightbox',
+ 'isLightbox',
+ on => `${on ? 'Set' : 'Remove'} lightbox flag`,
+ on => 'window-restore',
+ onClick => {
+ SelectionManager.Views().forEach(dv => {
+ const containerDoc = dv.rootDoc;
+ //containerDoc.followAllLinks =
+ // containerDoc.noShadow =
+ // containerDoc.layout_disableBrushing =
+ // containerDoc._forceActive =
+ //containerDoc._freeform_fitContentsToBox =
+ containerDoc._isLightbox = !containerDoc._isLightbox;
+ //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
+ const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
+ //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
+ containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.link_displayLine = false)));
+ });
+ }
+ );
+ }
+
+ @computed get titleButton() {
+ return this.propertyToggleBtn(
+ on => (!on ? 'SHOW TITLE' : this.selectedDoc?.['_layout_showTitle'] === 'title:hover' ? 'HIDE TITLE' : 'HOVER TITLE'),
+ '_layout_showTitle',
+ on => 'Switch between title styles',
+ on => (on ? <MdSubtitlesOff /> : <MdSubtitles />), // {currentIcon}, //(on ? <MdSubtitles/> :) , //,'text-width', on ? <MdSubtitles/> : <MdSubtitlesOff/>,
+ (dv, doc) => {
+ const tdoc = dv?.rootDoc || doc;
+ const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
+ tdoc._layout_showTitle = newtitle;
+ }
+ );
+ }
+
@computed get lockButton() {
return this.propertyToggleBtn(
- 'No\xA0Drag',
+ on => (on ? 'UNLOCK' : 'LOCK'), // 'No\xA0Drag',
'_lockedPosition',
on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`,
- on => 'thumbtack'
+ on => (on ? <FaLockOpen /> : <FaLock />)
+ // on => 'thumbtack'
);
}
+
@computed get maskButton() {
+ //highlight text while going down and reading through
return this.propertyToggleBtn(
- 'Mask',
+ on => (on ? 'PLAIN INK' : 'HIGHLIGHTER MASK'),
'stroke_isInkMask',
on => (on ? 'Make plain ink' : 'Make highlight mask'),
- on => 'paint-brush',
+ on => (on ? <TbHighlightOff /> : <TbHighlight />), // <FaHighlighter/>,// 'paint-brush',
(dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
);
}
+
@computed get hideImageButton() {
+ // put in developer -- can trace on top of object and drawing is still there
return this.propertyToggleBtn(
- 'Background',
+ on => (on ? 'SHOW BACKGROUND IMAGE' : 'HIDE BACKGROUND IMAGE'), //'Background',
'_hideImage',
on => (on ? 'Show Image' : 'Show Background'),
- on => 'portrait'
+ on => (on ? <BiShow /> : <BiHide />) //'portrait'
);
}
+
@computed get clustersButton() {
return this.propertyToggleBtn(
- 'Clusters',
+ on => (on ?'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
'_freeform_useClusters',
on => `${on ? 'Hide' : 'Show'} clusters`,
- on => 'braille'
+ on => <FaBraille />
);
}
@computed get panButton() {
return this.propertyToggleBtn(
- 'Lock\xA0View',
+ on => (on ? 'ENABLE PANNING' : 'DISABLE PANNING'), //'Lock\xA0View',
'_lockedTransform',
on => `${on ? 'Unlock' : 'Lock'} panning of view`,
- on => 'lock'
+ on => (on ? <TbHandStop /> : <TbHandOff />) //'lock'
);
}
- @computed get forceActiveButton() {
+
+ @computed get forceActiveButton() { //select text
return this.propertyToggleBtn(
- 'Active',
+ on => on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION',
'_forceActive',
on => `${on ? 'Select to activate' : 'Contents always active'} `,
- on => 'eye'
+ on => <MdTouchApp/> // 'eye'
);
}
+
@computed get fitContentButton() {
return this.propertyToggleBtn(
- 'View All',
+ on => (on ? 'PREVIOUS VIEW' : 'VIEW ALL'), //'View All',
'_freeform_fitContentsToBox',
on => `${on ? "Don't" : 'Do'} fit content to container visible area`,
- on => 'object-group'
- );
- }
- // this implments a container pattern by marking the targetDoc (collection) as a lightbox
- // that always fits its contents to its container and that hides all other documents when
- // a link is followed that targets a 'lightbox' destination
- @computed get isLightboxButton() {
- return this.propertyToggleBtn(
- 'Lightbox',
- 'isLightbox',
- on => `${on ? 'Set' : 'Remove'} lightbox flag`,
- on => 'window-restore',
- onClick => {
- SelectionManager.Views().forEach(dv => {
- const containerDoc = dv.rootDoc;
- //containerDoc.followAllLinks =
- // containerDoc.noShadow =
- // containerDoc.layout_disableBrushing =
- // containerDoc._forceActive =
- //containerDoc._freeform_fitContentsToBox =
- containerDoc._isLightbox = !containerDoc._isLightbox;
- //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
- const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
- //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
- containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.link_displayLine = false)));
- });
- }
+ on => (on ? <CiGrid31 /> : <BsGrid3X3GapFill />) //'object-group'
);
}
+
+ // // this implments a container pattern by marking the targetDoc (collection) as a lightbox
+ // // that always fits its contents to its container and that hides all other documents when
+ // // a link is followed that targets a 'lightbox' destination
+ // @computed get isLightboxButton() { // developer
+ // return this.propertyToggleBtn(
+ // on => 'Lightbox',
+ // 'isLightbox',
+ // on => `${on ? 'Set' : 'Remove'} lightbox flag`,
+ // on => 'window-restore',
+ // onClick => {
+ // SelectionManager.Views().forEach(dv => {
+ // const containerDoc = dv.rootDoc;
+ // //containerDoc.followAllLinks =
+ // // containerDoc.noShadow =
+ // // containerDoc.disableDocBrushing =
+ // // containerDoc._forceActive =
+ // //containerDoc._freeform_fitContentsToBox =
+ // containerDoc._isLightbox = !containerDoc._isLightbox;
+ // //containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
+ // const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
+ // //dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
+ // containerContents.forEach(doc => LinkManager.Links(doc).forEach(link => (link.layout_linkDisplay = false)));
+ // });
+ // }
+ // );
+ // }
+
@computed get layout_fitWidthButton() {
return this.propertyToggleBtn(
- 'Fit\xA0Width',
+ on => (on ? 'RESTRICT WIDTH' : 'FIT WIDTH'), //'Fit\xA0Width',
'_layout_fitWidth',
on => `${on ? "Don't" : 'Do'} fit content to width of container`,
- on => 'arrows-alt-h'
+ on => (on ? <AiOutlineColumnWidth /> : <RxWidth />) // 'arrows-alt-h'
);
}
+
@computed get captionButton() {
- return this.propertyToggleBtn(
- 'Caption',
+ return this.propertyToggleBtn( //DEVELOPER
+ on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption',
'_layout_showCaption',
on => `${on ? 'Hide' : 'Show'} caption footer`,
- on => 'closed-captioning',
+ on => (on ? <MdClosedCaptionDisabled /> : <MdClosedCaption />), //'closed-captioning',
(dv, doc) => ((dv?.rootDoc || doc)._layout_showCaption = (dv?.rootDoc || doc)._layout_showCaption === undefined ? 'caption' : undefined)
);
}
- @computed get chromeButton() {
+
+ @computed get chromeButton() { // developer -- removing UI decoration
return this.propertyToggleBtn(
- 'Controls',
+ on => on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS',
'_chromeHidden',
on => `${on ? 'Show' : 'Hide'} editing UI`,
- on => 'edit',
+ on => on? <TbEditCircle/> : <TbEditCircleOff/> , // 'edit',
(dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
);
}
- @computed get titleButton() {
- return this.propertyToggleBtn(
- 'Title',
- '_layout_showTitle',
- on => 'Switch between title styles',
- on => 'text-width',
- (dv, doc) => {
- const tdoc = dv?.rootDoc || doc;
- const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
- tdoc._layout_showTitle = newtitle;
- }
- );
- }
- @computed get layout_autoHeightButton() {
+
+ @computed get layout_autoHeightButton() { // store previous dimensions to store old values
return this.propertyToggleBtn(
- 'Auto\xA0Size',
+ on => 'Auto\xA0Size',
'_layout_autoHeight',
on => `Automatical vertical sizing to show all content`,
on => 'arrows-alt-v'
);
}
+
@computed get gridButton() {
return this.propertyToggleBtn(
- 'Grid',
+ on => (on ? 'HIDE GRID' : 'DISPLAY GRID'),
'_freeform_backgroundGrid',
on => `Display background grid in collection`,
- on => 'border-all'
+ on => (on ? <MdGridOff /> :<MdGridOn /> ) //'border-all'
);
}
- @computed get groupButton() {
- return this.propertyToggleBtn(
- 'Group',
- 'isGroup',
- on => `Display collection as a Group`,
- on => 'object-group',
- (dv, doc) => {
- doc.isGroup = !doc.isGroup;
- doc.forceActive = doc.isGroup;
- doc.dragWhenActive = doc.isGroup;
- }
- );
- }
- @computed get freezeThumb() {
- return this.propertyToggleBtn(
- 'FreezeThumb',
- '_thumb-frozen',
- on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`,
- on => 'snowflake',
- (dv, doc) => {
- if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined;
- else {
- document.body.focus(); // so that we can access the clipboard without an error
- setTimeout(() =>
- pasteImageBitmap((data_url: any, error: any) => {
- error && console.log(error);
- data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename)));
- })
- );
- }
- }
- );
- }
- @computed get snapButton() {
+
+ // @computed get groupButton() { //developer
+ // return this.propertyToggleBtn(
+ // on => 'Group',
+ // 'isGroup',
+ // on => `Display collection as a Group`,
+ // on => 'object-group',
+ // (dv, doc) => {
+ // doc.isGroup = !doc.isGroup;
+ // doc.forceActive = doc.isGroup;
+ // }
+ // );
+ // }
+
+ // @computed get freezeThumb() {
+ // return this.propertyToggleBtn(
+ // 'FreezeThumb',
+ // '_thumb-frozen',
+ // on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`,
+ // on => 'snowflake',
+ // (dv, doc) => {
+ // if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined;
+ // else {
+ // document.body.focus(); // so that we can access the clipboard without an error
+ // setTimeout(() =>
+ // pasteImageBitmap((data_url: any, error: any) => {
+ // error && console.log(error);
+ // data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename)));
+ // })
+ // );
+ // }
+ // }
+ // );
+ // }
+ @computed get snapButton() { // THESE ARE NOT COMING
return this.propertyToggleBtn(
- 'Snap\xA0Lines',
+ on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'),
'freeform_snapLines',
on => `Display snapping lines when objects are dragged`,
- on => 'th',
+ on => <TfiBarChart />, //'th',
undefined,
- true
);
}
+ // @computed
+ // get onClickButton() {
+ // return !this.selectedDoc ? null : (
+ // <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>} placement="top">
+ // <div>
+ // <div className="propertiesButtons-linkFlyout">
+ // <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onClickFlyout}>
+ // <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+ // <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+ // </div>
+ // </Flyout>
+ // </div>
+ // <div className="propertiesButtons-title"> onclick </div>
+ // </div>
+ // </Tooltip>
+ // );
+ // }
+ // @computed
+ // get perspectiveButton() { // gone
+ // return !this.selectedDoc ? null : (
+ // <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
+ // <div>
+ // <div className="propertiesButtons-linkFlyout">
+ // <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
+ // <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+ // <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+ // </div>
+ // </Flyout>
+ // </div>
+ // <div className="propertiesButtons-title"> Perspective </div>
+ // </div>
+ // </Tooltip>
+ // );
+ // }
+
+ @undoBatch
+ handlePerspectiveChange = (e: any) => {
+ this.selectedDoc && (this.selectedDoc._type_collection = e.target.value);
+ SelectionManager.Views()
+ .filter(dv => dv.docView)
+ .map(dv => dv.docView!)
+ .forEach(docView => (docView.layoutDoc._type_collection = e.target.value));
+ };
@computed get onClickVal() {
const linkButton = IsFollowLinkScript(this.selectedDoc.onClick);
const followLoc = this.selectedDoc._followLinkLocation;
@@ -381,7 +478,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
);
}
-
render() {
const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)];
const isText = layoutField instanceof RichTextField;
@@ -406,18 +502,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{toggle(this.titleButton)}
{toggle(this.captionButton)}
{toggle(this.lockButton)}
- {toggle(this.onClickButton)}
+ {/* {toggle(this.onClickButton)} */}
{toggle(this.layout_fitWidthButton)}
- {toggle(this.freezeThumb)}
+ {/* {toggle(this.freezeThumb)} */}
{toggle(this.forceActiveButton)}
{toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
- {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
+ {/* {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })} */}
{toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}
{toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
{toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
{toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
{toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
- {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })}
+ {/* {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })} */}
{toggle(this.snapButton, { display: !isCollection ? 'none' : '' })}
{toggle(this.clustersButton, { display: !isFreeForm ? 'none' : '' })}
{toggle(this.panButton, { display: !isFreeForm ? 'none' : '' })}
diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx
index 6cac7b0fe..6a54f0002 100644
--- a/src/client/views/PropertiesDocContextSelector.tsx
+++ b/src/client/views/PropertiesDocContextSelector.tsx
@@ -19,6 +19,7 @@ type PropertiesDocContextSelectorProps = {
@observer
export class PropertiesDocContextSelector extends React.Component<PropertiesDocContextSelectorProps> {
+
@computed get _docs() {
if (!this.props.DocView) return [];
const target = this.props.DocView.props.Document;
@@ -39,6 +40,8 @@ export class PropertiesDocContextSelector extends React.Component<PropertiesDocC
}, new Set<Doc>())
.keys()
);
+ console.log("embeddings " + embeddings.length);
+
return doclayouts
.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance?.props.Document))
.filter(doc => !Doc.IsSystem(doc))
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 6dbc11d29..060b506e3 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -527,8 +527,16 @@
}
}
+.propertiesView-wordTitle{
+ color:darkslategray;
+ font-weight:200;
+}
+
.editable-title {
border: solid 1px #323232;
+ padding-left: 5px;
+ padding-top: 4px;
+ border-radius: 4px;
height: fit-content;
&:hover {
@@ -536,6 +544,26 @@
}
}
+.propertiesView-wordType{
+ color:darkslategray;
+ font-weight:200;
+}
+
+.currentType{
+ text-decoration: underline;
+ display: flex;
+ align-items:center;
+ // border: solid 1px #323232;
+ // padding-left: 5px;
+ // padding-top: 4px;
+ // border-radius: 4px;
+ // height: fit-content;
+}
+
+.currentType-icon{
+ margin-right:5px;
+}
+
.properties-flyout {
grid-column: 2/4;
}
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index ae6f6afe2..31c03de4c 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,12 +3,15 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core';
import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Checkbox, Tooltip } from '@material-ui/core';
-import { concat, intersection } from 'lodash';
+import { Button, Colors, EditableText, NumberInput, Size, Slider, Type } from 'browndash-components';
+import { concat } from 'lodash';
import { Lambda, action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import { ColorState, SketchPicker } from 'react-color';
+import * as Icons from "react-icons/bs"; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
+import { GrCircleInformation } from 'react-icons/gr';
import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
-import { Doc, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc';
+import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc';
import { AclAdmin, DocAcl, DocData, Height, Width } from '../../fields/DocSymbols';
import { Id } from '../../fields/FieldSymbols';
import { InkField } from '../../fields/InkField';
@@ -30,13 +33,12 @@ import { InkStrokeProperties } from './InkStrokeProperties';
import { PropertiesButtons } from './PropertiesButtons';
import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector';
import { PropertiesDocContextSelector } from './PropertiesDocContextSelector';
+import { PropertiesSection } from './PropertiesSection';
import './PropertiesView.scss';
import { DefaultStyleProvider } from './StyleProvider';
-import { Button, Colors, EditableText, NumberDropdown, Size, Slider, Type, NumberInput } from 'browndash-components';
-import { PropertiesSection } from './PropertiesSection';
import { DocumentView, OpenWhere, StyleProviderFunc } from './nodes/DocumentView';
-import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
import { KeyValueBox } from './nodes/KeyValueBox';
+import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails';
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -49,6 +51,7 @@ interface PropertiesViewProps {
addDocTab: (doc: Doc, where: OpenWhere) => boolean;
}
+
@observer
export class PropertiesView extends React.Component<PropertiesViewProps> {
private _widthUndo?: UndoManager.Batch;
@@ -188,7 +191,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
});
rows.push(
- <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px' }}>
+ <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: "white", textAlign: "center" }}>
<EditableView key="editableView" oneLine contents={'add key:value or #tags'} height={13} fontSize={10} GetValue={() => ''} SetValue={this.setKeyValue} />
</div>
);
@@ -246,11 +249,34 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return !this.selectedDoc ? null : <PropertiesDocContextSelector DocView={this.selectedDocumentView} hideTitle={true} addDocTab={this.props.addDocTab} />;
}
+ @computed get contextCount(){
+ console.log("in context count");
+ if (this.selectedDocumentView){
+ const target = (this.selectedDocumentView.props.Document)
+ const embeddings = DocListCast(target.proto_embeddings)
+ console.log(embeddings.length -1 );
+ return (embeddings.length - 1)
+ } else{
+ return 0;
+ }
+ }
+
@computed get links() {
const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc;
return !selAnchor ? null : <PropertiesDocBacklinksSelector Document={selAnchor} hideTitle={true} addDocTab={this.props.addDocTab} />;
}
+ @computed get linkCount(){
+ const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc;
+ var counter = 0;
+
+ LinkManager.Links(selAnchor).forEach((l, i) =>
+ counter ++
+ );
+
+ return counter;
+ }
+
@computed get layoutPreview() {
if (SelectionManager.Views().length > 1) {
return '-- multiple selected --';
@@ -513,6 +539,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@computed get fieldsCheckbox() {
+ // color= "primary"
return <Checkbox color="primary" onChange={this.toggleCheckbox} checked={this.layoutFields} />;
}
@@ -532,6 +559,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@computed get editableTitle() {
+
const titles = new Set<string>();
const title = Array.from(titles.keys()).length > 1 ? '--multiple selected--' : StrCast(this.selectedDoc?.title);
SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title)));
@@ -561,6 +589,48 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
);
}
+ @computed get currentComponent() {
+
+ var iconName = StrCast(this.selectedDoc?.systemIcon)
+
+ // if (this.selectedDoc?.type === DocumentType.COL){
+ // console.log("i did it!")
+ // }
+
+
+ if (iconName){
+ const Icon = Icons[iconName as keyof typeof Icons];
+ return <Icon />;
+ } else{
+ return <Icons.BsFillCollectionFill/>
+
+ }
+ }
+
+ @computed get currentType() {
+ // console.log("current type " + this.selectedDoc?.type)
+
+ const documentType = StrCast(this.selectedDoc?.type)
+ var currentType: string = documentType;
+ var capitalizedDocType = currentType.charAt(0).toUpperCase() + currentType.slice(1)
+
+ return (
+ <div>
+ <div className = "propertiesView-wordType">Type</div>
+ <div className= "currentType">
+ <div className='currentType-icon'>
+ {this.currentComponent}
+ </div>
+
+ {capitalizedDocType}
+
+ </div>
+
+ </div>
+
+ )
+ }
+
@undoBatch
@action
setTitle = (value: string | number) => {
@@ -914,6 +984,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
);
};
+ @action
+ onDoubleClick = () => {
+ this.openContexts = false;
+ this.openLinks = false;
+ this.openOptions = false;
+ this.openTransform = false;
+ this.openFields = false;
+ this.openSharing = false;
+ this.openLayout = false;
+ this.openFilters = false;
+ }
+
@computed get widthAndDash() {
return (
<div className="widthAndDash">
@@ -999,11 +1081,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
formLabel={label}
formLabelPlacement={'left'}
type={Type.SEC}
- unit={unit}
- fillWidth
+ unit={unit}
+ fillWidth
color={this.color}
number={number}
- setNumber={setNumber}
+ setNumber={setNumber}
+ min={min}
+ max={max}
/>
<Slider
multithumb={false}
@@ -1067,6 +1151,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
isOpen={this.openOptions}
setInSection={(bool) => this.inOptions = bool}
setIsOpen={(bool) => this.openOptions = bool}
+ onDoubleClick={() => this.onDoubleClick()}
/>
}
@@ -1133,10 +1218,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>}
isOpen={this.openFilters}
setIsOpen={(bool) => this.openFilters = bool}
+ onDoubleClick={() => this.onDoubleClick()}
/>
}
@computed get inkSubMenu() {
+ let isDouble = false;
+
return (
<>
<PropertiesSection
@@ -1144,12 +1232,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
content={this.isInk ? this.appearanceEditor : null}
isOpen={this.openAppearance}
setIsOpen={(bool) => this.openAppearance = bool}
+ onDoubleClick={() => this.onDoubleClick()}
/>
<PropertiesSection
title="Transform"
content={this.transformEditor}
isOpen={this.openTransform}
setIsOpen={(bool) => this.openTransform = bool}
+ onDoubleClick={() => this.onDoubleClick()}
/>
</>
);
@@ -1163,6 +1253,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>}
isOpen={this.openFields}
setIsOpen={(bool) => this.openFields = bool}
+ onDoubleClick={() => this.onDoubleClick()}
/>
}
@@ -1172,15 +1263,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
content={this.contexts}
isOpen={this.openContexts}
setIsOpen={(bool) => this.openContexts = bool}
+ onDoubleClick={() => this.onDoubleClick()}
/>
}
+
+
@computed get linksSubMenu() {
return <PropertiesSection
title="Linked To"
content={this.links}
isOpen={this.openLinks}
setIsOpen={(bool) => this.openLinks = bool}
+ onDoubleClick={() => this.onDoubleClick()}
/>
}
@@ -1190,6 +1285,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
content={this.layoutPreview}
isOpen={this.openLayout}
setIsOpen={(bool) => this.openLayout = bool}
+ onDoubleClick={() => this.onDoubleClick()}
/>
}
@@ -1645,10 +1741,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
width: this.props.width,
minWidth: this.props.width,
}}>
- <div className="propertiesView-title" style={{ width: this.props.width }}>
- Properties
+ <div className = "propertiesView-propAndInfoGrouping">
+ <div className="propertiesView-title" style={{ width: this.props.width }}>
+ Properties
+ </div>
+ <div className = "propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/')}>
+ <GrCircleInformation/> </div>
+
</div>
+
+
<div className="propertiesView-name">{this.editableTitle}</div>
+ <div className = "propertiesView-type"> {this.currentType} </div>
<div className="propertiesView-type">{this.type}</div>
{this.contextsSubMenu}
{this.linksSubMenu}
@@ -1675,6 +1779,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
Presentation
</div>
<div className="propertiesView-name" style={{ borderBottom: 0 }}>
+
{this.editableTitle}
<div className="propertiesView-presSelected">
<div className="propertiesView-selectedCount">{PresBox.Instance.selectedArray.size} selected</div>
diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx
new file mode 100644
index 000000000..a5d21cc8e
--- /dev/null
+++ b/src/client/views/nodes/importBox/ImportElementBox.tsx
@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+import { ViewBoxBaseComponent } from "../../DocComponent";
+import { FieldView, FieldViewProps } from "../FieldView";
+import { computed } from "mobx";
+import { Id } from "../../../../fields/FieldSymbols";
+import React from "react";
+import { EditableView } from "../../EditableView";
+import { DocListCast } from "../../../../fields/Doc";
+import { StrCast } from "../../../../fields/Types";
+
+
+@observer
+export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
+ public static LayoutString(fieldKey: string) {
+ return FieldView.LayoutString(ImportElementBox, fieldKey);
+ }
+
+ private _itemRef: React.RefObject<HTMLDivElement> = React.createRef();
+ private _dragRef: React.RefObject<HTMLDivElement> = React.createRef();
+ private _titleRef: React.RefObject<EditableView> = React.createRef();
+
+ @computed importBoxVoew() {
+ return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as PresBox;
+ }
+
+ @computed get indexInPres() {
+ return DocListCast(this.presBox?.[StrCast(this.presBox.presFieldKey, 'data')]).indexOf(this.rootDoc);
+ }
+
+ @computed get presBox() {
+ return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc;
+ }
+
+ // @computed get selectedArray() {
+ // return this.presBoxView?.selectedArray;
+ // }
+
+@computed get mainItem() {
+ const isCurrent: boolean = this.presBox?._itemIndex === this.indexInPres;
+ //const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false;
+ // const activeItem: Doc = this.rootDoc;
+
+ return(
+ <div
+ className = {`presItem-container`}
+ // key={this.props.Document[Id] + this.indexInPres}
+ style = {{backgroundColor: 'pink'}}
+
+ >
+ <div
+ ref = {this._dragRef}
+ className = {`presItem-slide ${isCurrent ? 'active' : ''}`}
+ style = {{
+ backgroundColor: 'green'
+ }}>
+ <div
+ className="presItem-number"
+ title = "select without navigation"
+
+ >
+ {/* <EditableView ref={this._titleRef} oneLine={true} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> */}
+
+ </div>
+ </div>
+
+ </div>
+ )
+}
+
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 12:21:03 +0000