aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.scss1
-rw-r--r--src/client/views/MainView.tsx42
-rw-r--r--src/client/views/StyleProvider.tsx2
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx4
-rw-r--r--src/client/views/collections/TreeView.scss27
-rw-r--r--src/client/views/collections/TreeView.tsx4
-rw-r--r--src/client/views/nodes/FilterBox.tsx4
-rw-r--r--src/client/views/search/SearchBox.scss29
-rw-r--r--src/client/views/search/SearchBox.tsx2
9 files changed, 72 insertions, 43 deletions
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 33bd7e77e..d6a455a22 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -369,7 +369,6 @@
height: 55px;
top: 50%;
left: -10px;
- border: 1px solid black;
border-radius: 8px;
position: relative;
z-index: 41; // lm_maximised has a z-index of 40 and this needs to be above that
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b05346d4c..e43b8baf1 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -3,7 +3,7 @@ import { faBuffer, faHireAHelper } from '@fortawesome/free-brands-svg-icons';
import * as far from '@fortawesome/free-regular-svg-icons';
import * as fa from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, configure, observable, reaction } from 'mobx';
+import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import "normalize.css";
import * as React from 'react';
@@ -28,7 +28,7 @@ import { SettingsManager } from '../util/SettingsManager';
import { SharingManager } from '../util/SharingManager';
import { SnappingManager } from '../util/SnappingManager';
import { Transform } from '../util/Transform';
-import { UndoManager } from '../util/UndoManager';
+import { UndoManager, undoBatch } from '../util/UndoManager';
import { TimelineMenu } from './animationtimeline/TimelineMenu';
import { CollectionDockingView } from './collections/CollectionDockingView';
import { MarqueeOptionsMenu } from './collections/collectionFreeForm/MarqueeOptionsMenu';
@@ -46,7 +46,7 @@ import { LinkMenu } from './linking/LinkMenu';
import "./MainView.scss";
import { AudioBox } from './nodes/AudioBox';
import { DocumentLinksButton } from './nodes/DocumentLinksButton';
-import { DocumentView } from './nodes/DocumentView';
+import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
import { LinkDocPreview } from './nodes/LinkDocPreview';
@@ -58,7 +58,8 @@ import { PDFMenu } from './pdf/PDFMenu';
import { PreviewCursor } from './PreviewCursor';
import { PropertiesView } from './PropertiesView';
import { SearchBox } from './search/SearchBox';
-import { DefaultStyleProvider } from './StyleProvider';
+import { DefaultStyleProvider, StyleProp } from './StyleProvider';
+import { FieldViewProps } from './nodes/FieldView';
const _global = (window /* browser */ || global /* node */) as any;
@observer
@@ -295,6 +296,33 @@ export class MainView extends React.Component {
doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right");
}
+
+ /**
+ * add lock and hide button decorations for the "Dashboards" flyout TreeView
+ */
+ DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
+ const toggleField = undoBatch(action((e: React.MouseEvent, doc: Doc, field: string) => {
+ e.stopPropagation();
+ doc[field] = doc[field] ? undefined : true;
+ }));
+ switch (property.split(":")[0]) {
+ case StyleProp.Decorations:
+ return !doc || property.includes(":afterHeader") || // bcz: Todo: afterHeader should be generalized into a renderPath that is a list of the documents rendered so far which would mimic much of CSS property selectors
+ DocListCast((Doc.UserDoc().myDashboards as Doc).data).some(dash => dash === doc ||
+ DocListCast(dash.data).some(tabset => tabset === doc)) ? (null) :
+ <>
+ <div className={`styleProvider-treeView-hide${doc.hidden ? "-active" : ""}`} onClick={e => toggleField(e, doc, "hidden")}>
+ <FontAwesomeIcon icon={doc.hidden ? "eye-slash" : "eye"} size="sm" />
+ </div>
+ <div className={`styleProvider-treeView-lock${doc.lockedPosition ? "-active" : ""}`} onClick={e => toggleField(e, doc, "lockedPosition")}>
+ <FontAwesomeIcon icon={doc.lockedPosition ? "lock" : "unlock"} size="sm" />
+ </div>
+ </>;
+ }
+ return DefaultStyleProvider(doc, props, property);
+ }
+
+
@computed get flyout() {
return !this._flyoutWidth ? <div className={`mainView-libraryFlyout-out`}>
{this.docButtons}
@@ -314,7 +342,7 @@ export class MainView extends React.Component {
PanelHeight={this.getContentsHeight}
renderDepth={0}
focus={emptyFunction}
- styleProvider={DefaultStyleProvider}
+ styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
@@ -386,8 +414,8 @@ export class MainView extends React.Component {
{this.menuPanel}
<div className={`mainView-innerContent${this.darkScheme ? "-dark" : ""}`}>
{this.flyout}
- < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
- <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} size="sm" />
+ <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
+ <FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} style={{ opacity: "50%" }} size="sm" />
</div>
{this.dockingContent}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 35fe30a56..a6e3516ed 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -109,7 +109,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps |
case DocumentType.PRES: docColor = docColor || (darkScheme() ? "#3e3e3e" : "white"); break;
case DocumentType.FONTICON: docColor = undefined; break;
case DocumentType.RTF: docColor = docColor || (darkScheme() ? "#2d2d2d" : "#f1efeb"); break;
- case DocumentType.LABEL:
+ case DocumentType.FILTER: docColor = docColor || (darkScheme() ? "#2d2d2d" : "rgba(105, 105, 105, 0.432)"); break;
case DocumentType.INK: docColor = undefined; break;
case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break;
case DocumentType.LINK: return "transparent";
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 344a6c103..d1e0a0f02 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -212,8 +212,8 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
render() {
TraceMobx();
if (!(this.doc instanceof Doc)) return (null);
- const background = this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
- const paddingX = `${NumCast(this.doc._xPadding, 10)}px`;
+ const background = this.props.treeViewHideTitle && this.props.treeViewHideHeaderFields ? "#D3D3D3" : this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
+ const paddingX = `${NumCast(this.doc._xPadding, 15)}px`;
const paddingTop = `${NumCast(this.doc._yPadding, 20)}px`;
const pointerEvents = !this.props.active() && !SnappingManager.GetIsDragging() && !this._isChildActive ? "none" : undefined;
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 7a719b4a4..1208fa07d 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -112,10 +112,21 @@
width: unset;
}
- >svg {
- display: none;
+ .right-buttons-container {
+ display: flex;
+ align-items: center;
+ margin-left: 0.25rem;
+ opacity: 0.75;
+
+ >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
+ margin-left: 0.25rem;
+ margin-right: 0.25rem;
+ }
+
+ >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+ display: none;
+ }
}
-
}
.treeView-header:hover {
@@ -123,10 +134,6 @@
display: inherit;
}
- >svg {
- display: inherit;
- }
-
.treeView-openRight {
display: inline-block;
height: 17px;
@@ -139,6 +146,12 @@
margin-left: 3px;
}
}
+
+ .right-buttons-container {
+ >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+ display: inherit;
+ }
+ }
}
.treeView-header-above {
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index b5e498503..2f9a2f3eb 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -441,7 +441,9 @@ export class TreeView extends React.Component<TreeViewProps> {
@computed get renderBullet() {
TraceMobx();
- const iconType = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon);
+ const iconType = Doc.toIcon(this.doc);
+
+ //const iconType = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon);
// const footerDecoration = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decoration + ":footer");
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index d93c2f249..4fd1efd91 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -159,7 +159,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
newFacet && Doc.AddDocToList(this.dataDoc, this.props.fieldKey, newFacet);
}
}
- filterBackground = () => "#d3d3d3";
+
@computed get scriptField() {
const scriptText = "setDocFilter(this?.target, heading, this.title, checked)";
const script = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name });
@@ -266,7 +266,7 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
treeViewHideHeaderFields={true}
onCheckedClick={this.scriptField}
dontRegisterView={true}
- styleProvider={this.filterBackground}
+ styleProvider={this.props.styleProvider}
moveDocument={returnFalse}
removeDocument={returnFalse}
addDocument={returnFalse} />
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 13d4a6d5a..76f9b66eb 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -30,42 +30,29 @@
.searchBox-lozenge-user,
.searchBox-lozenge-dashboard,
.searchBox-lozenge {
- background-color: #313131;
- border-radius: 5px;
height: 18px;
padding: 4px;
- box-shadow: lightgrey 0.15em 0.15em 0.1em;
- margin: 2px;
- margin-bottom: 4px;
- border-top: dimgrey 1px solid;
- border-left: dimgrey 1px solid;
+ margin-right: 5px;
display: flex;
+ align-items: center;
+ border: grey 1px solid;
.searchBox-logoff,
.searchBox-dashboards {
border-radius: 3px;
background: olivedrab;
color: white;
- position: relative;
display: none;
- margin-left: 3px;
- padding-left: 2px;
- padding-right: 2px;
- padding-bottom: 11px;
- cursor: default;
+ margin-left: 5px;
+ padding: 1px 2px 1px 2px;
+ cursor: pointer;
}
.searchBox-logoff {
background: red;
}
.searchBox-dashSelect{
- background-color: black;
- color: white;
- font-size: 9;
- margin-right: 6;
- border-radius: 5px;
- position: relative;
- height: 15px;
- transform: translate(0,-3px);
+ border: none;
+ background-color: transparent;
&:hover {
cursor: pointer;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index d3fee85a7..d10afdcf9 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -466,7 +466,7 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
}
@computed get scopeButtons() {
- return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px", border: "1px solid gray", borderRadius: "0.3em", borderBottom: !this.open ? "1px solid" : "none", }}>
+ return <div style={{ height: 25, paddingLeft: "4px", paddingRight: "4px"}}>
<form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
<div style={{ display: "contents" }}>
<div className="radio" style={{ margin: 0 }}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 22:56:46 +0000