aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections')
-rw-r--r--src/client/views/collections/CollectionMenu.scss651
-rw-r--r--src/client/views/collections/CollectionMenu.tsx51
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx2
-rw-r--r--src/client/views/collections/TabDocView.scss17
-rw-r--r--src/client/views/collections/TabDocView.tsx103
-rw-r--r--src/client/views/collections/TreeView.scss36
-rw-r--r--src/client/views/collections/TreeView.tsx35
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx69
-rw-r--r--src/client/views/collections/collectionLinear/CollectionLinearView.tsx51
9 files changed, 201 insertions, 814 deletions
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<CollectionMenuProps> {
}
};
+ @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<CollectionMenuProps> {
}
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 = (
<div className={`hardCodedButtons`}>
<Toggle
toggleType={ToggleType.BUTTON}
type={Type.PRIM}
- color={Colors.LIGHT_GRAY}
+ color={StrCast(Doc.UserDoc().userColor)}
onClick={this.toggleTopBar}
toggleStatus={SettingsManager.headerBarHeight > 0}
+ icon={<FontAwesomeIcon icon={headerIcon} size="lg" />}
+ tooltip={headerTitle}
+ />
+ <Toggle
+ toggleType={ToggleType.BUTTON}
+ type={Type.PRIM}
+ color={StrCast(Doc.UserDoc().userColor)}
+ onClick={this.toggleProperties}
+ toggleStatus={SettingsManager.propertiesWidth > 0}
icon={<FontAwesomeIcon icon={propIcon} size="lg" />}
+ tooltip={propTitle}
/>
</div>
);
@@ -159,7 +178,11 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
// NEW BUTTONS
//dash col linear view buttons
const contMenuButtons = (
- <div className="collectionMenu-container">
+ <div className="collectionMenu-container"
+ style={{
+ background: StrCast(Doc.UserDoc().userBackgroundColor),
+ // borderColor: StrCast(Doc.UserDoc().userColor)
+ }} >
{this.contMenuButtons}
{hardCodedButtons}
</div>
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<Partial<collectionTree
@observable _headerHeight = 0;
@computed get content() {
const background = () => 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<Partial<collectionTree
ref={r => !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<TabMinimapViewProps> {
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 : (
- <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this.props.background() }}>
- <CollectionFreeFormView
- Document={this.props.document}
- docViewPath={returnEmptyDoclist}
- childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
- noOverlay={true} // don't render overlay Docs since they won't scale
- setHeight={returnFalse}
- isContentActive={emptyFunction}
- isAnyChildContentActive={returnFalse}
- select={emptyFunction}
- isSelected={returnFalse}
- dontRegisterView={true}
- fieldKey={Doc.LayoutFieldKey(this.props.document)}
- bringToFront={emptyFunction}
- rootSelected={returnTrue}
- addDocument={returnFalse}
- moveDocument={returnFalse}
- removeDocument={returnFalse}
- PanelWidth={this.returnMiniSize}
- PanelHeight={this.returnMiniSize}
- ScreenToLocalTransform={Transform.Identity}
- renderDepth={0}
- whenChildContentsActiveChanged={emptyFunction}
- focus={emptyFunction}
- styleProvider={TabMinimapView.miniStyleProvider}
- addDocTab={this.props.addDocTab}
- pinToPres={TabDocView.PinDoc}
- childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist}
- childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist}
- searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
- fitContentsToBox={returnTrue}
- />
- <div className="miniOverlay" onPointerDown={this.miniDown}>
- <div className="miniThumb" style={{ width: `${miniWidth}% `, height: `${miniHeight}% `, left: `${miniLeft}% `, top: `${miniTop}% ` }} />
+ <div className="miniMap-hidden">
+ <Popup
+ icon={<FontAwesomeIcon icon="globe-asia" size="lg" />}
+ color={StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}
+ type={Type.TERT}
+ onPointerDown={e => e.stopPropagation()}
+ placement={'top-end'}
+ popup={
+ <div className="miniMap" style={{ width: miniSize, height: miniSize, background: this.props.background() }}>
+ <CollectionFreeFormView
+ Document={this.props.document}
+ docViewPath={returnEmptyDoclist}
+ childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this.
+ noOverlay={true} // don't render overlay Docs since they won't scale
+ setHeight={returnFalse}
+ isContentActive={emptyFunction}
+ isAnyChildContentActive={returnFalse}
+ select={emptyFunction}
+ isSelected={returnFalse}
+ dontRegisterView={true}
+ fieldKey={Doc.LayoutFieldKey(this.props.document)}
+ bringToFront={emptyFunction}
+ rootSelected={returnTrue}
+ addDocument={returnFalse}
+ moveDocument={returnFalse}
+ removeDocument={returnFalse}
+ PanelWidth={this.returnMiniSize}
+ PanelHeight={this.returnMiniSize}
+ ScreenToLocalTransform={Transform.Identity}
+ renderDepth={0}
+ whenChildContentsActiveChanged={emptyFunction}
+ focus={emptyFunction}
+ styleProvider={TabMinimapView.miniStyleProvider}
+ addDocTab={this.props.addDocTab}
+ pinToPres={TabDocView.PinDoc}
+ childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyDoclist}
+ childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyDoclist}
+ searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
+ fitContentsToBox={returnTrue}
+ />
+ <div className="miniOverlay" onPointerDown={this.miniDown}>
+ <div className="miniThumb" style={{ width: `${miniWidth}% `, height: `${miniHeight}% `, left: `${miniLeft}% `, top: `${miniTop}% ` }} />
+ </div>
</div>
- </div>
- )}
- <Tooltip key="ttip" title={<div className="dash-tooltip">{this.props.document.layout_hideMinimap ? 'Open minimap' : 'Close minimap'}</div>}>
- <div
- className="miniMap-hidden"
- style={{
- color: this.props.document.layout_hideMinimap ? Colors.BLACK : Colors.WHITE,
- backgroundColor: this.props.document.layout_hideMinimap ? Colors.LIGHT_GRAY : Colors.MEDIUM_BLUE,
- boxShadow: this.props.document.layout_hideMinimap ? Shadows.STANDARD_SHADOW : undefined,
- }}
- onPointerDown={e => e.stopPropagation()}
- onClick={action(e => {
- e.stopPropagation();
- this.props.document!.layout_hideMinimap = !this.props.document!.layout_hideMinimap;
- })}>
- <FontAwesomeIcon icon="globe-asia" size="lg" />
- </div>
- </Tooltip>
- </>
+ }
+ />
+ </div>
);
}
}
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<TreeViewProps> {
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<TreeViewProps> {
);
}
return (
- <>
+ <div style={{
+ color: color
+ }}>
{!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
<div className={'treeView-sorting'} style={{ background: sortings[sorting]?.color }}>
{sortings[sorting]?.label}
@@ -640,17 +645,18 @@ export class TreeView extends React.Component<TreeViewProps> {
this._renderCount
)}
</ul>
- </>
+ </div>
);
} else if (this.treeViewExpandedView === 'fields') {
return (
- <ul key={this.doc[Id] + this.doc.title} style={{ cursor: 'inherit' }}>
+ <ul key={this.doc[Id] + this.doc.title} style={{ cursor: 'inherit', color: color }}>
<div>{this.expandedField}</div>
</ul>
);
}
return (
<ul
+ style={{ color: color }}
onPointerDown={e => {
e.preventDefault();
e.stopPropagation();
@@ -685,6 +691,7 @@ export class TreeView extends React.Component<TreeViewProps> {
@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 (
<div
@@ -705,14 +712,26 @@ export class TreeView extends React.Component<TreeViewProps> {
}>
{this.props.treeView.outlineMode ? (
!(this.doc.text as RichTextField)?.Text ? null : (
- <FontAwesomeIcon size="sm" icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />
+ <IconButton
+ color={color}
+ icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
+ size={Size.XSMALL}
+ />
)
) : (
<div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
- <div className={`treeView-${this.onCheckedClick ? 'checkIcon' : 'expandIcon'}`}>
- <FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />
- </div>
- {this.onCheckedClick ? null : typeof iconType === 'string' ? <FontAwesomeIcon icon={iconType as IconProp} /> : iconType}
+ <IconButton
+ color={color}
+ icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
+ size={Size.XSMALL}
+ />
+ {this.onCheckedClick ? null :
+ <IconButton
+ color={color}
+ icon={<FontAwesomeIcon icon={iconType as IconProp} />}
+ size={Size.XSMALL}
+ />
+ }
</div>
)}
</div>
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<AntimodeMenuProps> {
@@ -22,39 +26,44 @@ export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
MarqueeOptionsMenu.Instance = this;
}
+ @computed get userColor() {
+ return StrCast(Doc.UserDoc().userColor)
+ }
+
render() {
- const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ margin: 'auto', width: 19, transform: 'translate(-2px, -2px)' }} />;
+ const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ width: 19 }} />;
const buttons = (
<>
- <Tooltip key="collect" title={<div className="dash-tooltip">Create a Collection</div>} placement="bottom">
- <button className="antimodeMenu-button" onPointerDown={this.createCollection}>
- <FontAwesomeIcon icon="object-group" size="lg" />
- </button>
- </Tooltip>
- ,
- <Tooltip key="group" title={<div className="dash-tooltip">Create a Grouping</div>} placement="bottom">
- <button className="antimodeMenu-button" onPointerDown={e => this.createCollection(e, true)}>
- <FontAwesomeIcon icon="layer-group" size="lg" />
- </button>
- </Tooltip>
- ,
- <Tooltip key="summarize" title={<div className="dash-tooltip">Summarize Documents</div>} placement="bottom">
- <button className="antimodeMenu-button" onPointerDown={this.summarize}>
- <FontAwesomeIcon icon="compress-arrows-alt" size="lg" />
- </button>
- </Tooltip>
- ,
- <Tooltip key="delete" title={<div className="dash-tooltip">Delete Documents</div>} placement="bottom">
- <button className="antimodeMenu-button" onPointerDown={this.delete}>
- <FontAwesomeIcon icon="trash-alt" size="lg" />
- </button>
- </Tooltip>
- ,
- <Tooltip key="pinWithView" title={<div className="dash-tooltip">Pin selected region to trail</div>} placement="bottom">
- <button className="antimodeMenu-button" onPointerDown={this.pinWithView}>
- {presPinWithViewIcon}
- </button>
- </Tooltip>
+ <IconButton
+ tooltip={"Create a Collection"}
+ onPointerDown={this.createCollection}
+ icon={<FontAwesomeIcon icon="object-group"/>}
+ color={this.userColor}
+ />
+ <IconButton
+ tooltip={"Create a Grouping"}
+ onPointerDown={e => this.createCollection(e, true)}
+ icon={<FontAwesomeIcon icon="layer-group"/>}
+ color={this.userColor}
+ />
+ <IconButton
+ tooltip={"Summarize Documents"}
+ onPointerDown={this.summarize}
+ icon={<FontAwesomeIcon icon="compress-arrows-alt"/>}
+ color={this.userColor}
+ />
+ <IconButton
+ tooltip={"Delete Documents"}
+ onPointerDown={this.delete}
+ icon={<FontAwesomeIcon icon="trash-alt"/>}
+ color={this.userColor}
+ />
+ <IconButton
+ tooltip={"Pin selected region"}
+ onPointerDown={this.pinWithView}
+ icon={presPinWithViewIcon}
+ 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 = (
- <Button
+ <Toggle
text={Cast(this.props.Document.icon, 'string', null)}
- icon={<FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}
+ icon={Cast(this.props.Document.icon, 'string', null) ? undefined : <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}
type={Type.TERT}
+ color={StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}
onPointerDown={e => e.stopPropagation()}
+ toggleType={ToggleType.BUTTON}
+ toggleStatus={BoolCast(this.layoutDoc.linearView_IsOpen)}
onClick={() => {
- this.layoutDoc.linearView_IsExpanded = !isExpanded;
+ this.layoutDoc.linearView_IsOpen = !isExpanded;
}}
tooltip={isExpanded ? 'Close' : 'Open'}
+ fillWidth={true}
+ align={'center'}
/>
);
return (
- <div className={`collectionLinearView-outer ${this.layoutDoc.linearView_SubMenu}`} style={{ backgroundColor: this.layoutDoc.linearView_IsExpanded ? undefined : 'transparent' }}>
+ <div className={`collectionLinearView-outer ${this.layoutDoc.linearView_SubMenu}`} style={{ backgroundColor: this.layoutDoc.linearView_IsOpen ? undefined : 'transparent' }}>
<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"
- style={{
- height: this.dimension(),
- flexDirection: flexDir as any,
- gap: flexGap,
- }}>
- {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
- </div>
- )}
+ {this.props.Document.linearView_Dropdown ?
+ <div>Hello World!</div>
+ :
+ <>
+ {!this.props.Document.linearView_Expandable ? null : menuOpener}
+ {!this.layoutDoc.linearView_IsOpen ? null : (
+ <div
+ className="collectionLinearView-content"
+ style={{
+ height: this.dimension(),
+ flexDirection: flexDir as any,
+ gap: flexGap,
+ }}>
+ {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
+ </div>
+ )}
+ </>
+ }
+
</div>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-24 05:36:21 +0000