aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/collections/TabDocView.tsx107
-rw-r--r--src/client/views/nodes/DocumentView.tsx2
2 files changed, 62 insertions, 47 deletions
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 6d22f0420..1bf0cb838 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -6,7 +6,7 @@ import { clamp } from 'lodash';
import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
import { observer } from "mobx-react";
import * as ReactDOM from 'react-dom';
-import { DataSym, Doc, DocListCast, Opt, DocListCastAsync, StrListCast } from "../../../fields/Doc";
+import { DataSym, Doc, DocListCast, Opt, DocListCastAsync, StrListCast, WidthSym, HeightSym } from "../../../fields/Doc";
import { Id } from '../../../fields/FieldSymbols';
import { FieldId } from "../../../fields/RefField";
import { listSpec } from '../../../fields/Schema';
@@ -359,7 +359,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
renderDepth={0}
whenActiveChanged={emptyFunction}
focus={emptyFunction}
- styleProvider={TabDocView.styleProvider}
+ styleProvider={TabDocView.miniStyleProvider}
addDocTab={this.addDocTab}
pinToPres={TabDocView.PinDoc}
docFilters={CollectionDockingView.Instance.docFilters}
@@ -436,55 +436,70 @@ export class TabDocView extends React.Component<TabDocViewProps> {
// a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab
//
public static styleProvider = (doc: Opt<Doc>, renderDepth: number, property: string, layerProvider?: (doc: Doc, assign?: boolean) => boolean): any => {
- if (property === "color") {
- if (Doc.UserDoc().renderStyle === "comic") return undefined;
- let docColor = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor));
- if (!docColor) {
+ switch (property) {
+ case "color": {
+ if (Doc.UserDoc().renderStyle === "comic") return undefined;
+ let docColor = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor));
+ if (!docColor) {
+ switch (doc?.type) {
+ case DocumentType.PRESELEMENT: docColor = TabDocView.darkScheme ? "dimgrey" : ""; break;
+ case DocumentType.PRES: docColor = TabDocView.darkScheme ? "#3e3e3e" : "black"; break;
+ case DocumentType.FONTICON: docColor = "black"; break;
+ case DocumentType.RTF: docColor = TabDocView.darkScheme ? "#2d2d2d" : "#f1efeb";
+ case DocumentType.LABEL:
+ case DocumentType.BUTTON: docColor = TabDocView.darkScheme ? "#2d2d2d" : "lightgray"; break;
+ case DocumentType.LINK:
+ case DocumentType.COL:
+ docColor = Doc.IsSystem(doc) ? (TabDocView.darkScheme ? "rgb(62,62,62)" : "lightgrey") :
+ StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground);
+ break;
+ //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
+ default: docColor = TabDocView.darkScheme ? "black" : "white"; break;
+ }
+ }
+ if (docColor && (!doc || layerProvider?.(doc) === false)) docColor = Color(docColor).fade(0.5).toString();
+ return docColor;
+ }
+ case "hidden": return (BoolCast(doc?.hidden) /* || layerProvider?.(doc) === false*/);
+ case "boxShadow": {
switch (doc?.type) {
- case DocumentType.PRESELEMENT: docColor = TabDocView.darkScheme ? "dimgrey" : ""; break;
- case DocumentType.PRES: docColor = TabDocView.darkScheme ? "#3e3e3e" : "black"; break;
- case DocumentType.FONTICON: docColor = "black"; break;
- case DocumentType.RTF: docColor = TabDocView.darkScheme ? "#2d2d2d" : "#f1efeb";
- case DocumentType.LABEL:
- case DocumentType.BUTTON: docColor = TabDocView.darkScheme ? "#2d2d2d" : "lightgray"; break;
- case DocumentType.LINK:
- case DocumentType.COL:
- docColor = Doc.IsSystem(doc) ? (TabDocView.darkScheme ? "rgb(62,62,62)" : "lightgrey") :
- StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground);
- break;
- //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
- default: docColor = TabDocView.darkScheme ? "black" : "white"; break;
+ case DocumentType.COL: return StrListCast(doc.layers).includes("background") ? undefined :
+ `${TabDocView.darkScheme ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`;
+ default: return undefined;
}
}
- if (docColor && (!doc || layerProvider?.(doc) === false)) docColor = Color(docColor).fade(0.5).toString();
- return docColor;
- }
- if (property.startsWith("pointerEvents")) {
- const layer = doc && layerProvider?.(doc);
- if (layer === false && !property.includes(":selected") && !SnappingManager.GetIsDragging()) return "none";
- if (doc?.type === DocumentType.INK && Doc.GetSelectedTool() !== InkTool.None) return "none";
- if (layer === true) return "all";
- return undefined;
- }
- if (property.startsWith("decorations")) {
- const isBackground = StrListCast(doc?.layers).includes("background");
- return doc && (isBackground || property.includes(":selected")) && renderDepth > 0 &&
- ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ?
- <div className="documentView-lock" onClick={() => TabDocView.toggleBackground(doc)}>
- <FontAwesomeIcon icon={isBackground ? "unlock" : "lock"} style={{ color: isBackground ? "red" : undefined }} size="lg" />
- </div>
- : (null);
- }
- if (property === "hidden") {
- if (doc && (doc.hidden /* || layerProvider?.(doc) === false*/)) return true;
- return false;
+ case "docContents": return undefined;
+ default:
+ if (property.startsWith("pointerEvents")) {
+ const layer = doc && layerProvider?.(doc);
+ if (layer === false && !property.includes(":selected") && !SnappingManager.GetIsDragging()) return "none";
+ if (doc?.type === DocumentType.INK && Doc.GetSelectedTool() !== InkTool.None) return "none";
+ if (layer === true) return "all";
+ return undefined;
+ }
+ if (property.startsWith("decorations")) {
+ const isBackground = StrListCast(doc?.layers).includes("background");
+ return doc && (isBackground || property.includes(":selected")) && renderDepth > 0 &&
+ ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ?
+ <div className="documentView-lock" onClick={() => TabDocView.toggleBackground(doc)}>
+ <FontAwesomeIcon icon={isBackground ? "unlock" : "lock"} style={{ color: isBackground ? "red" : undefined }} size="lg" />
+ </div>
+ : (null);
+ }
}
- if (property === "boxShadow") {
- switch (doc?.type) {
- case DocumentType.COL: return StrListCast(doc.layers).includes("background") ? undefined :
- `${TabDocView.darkScheme ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`;
+ }
+ public static miniStyleProvider = (doc: Opt<Doc>, renderDepth: number, property: string, layerProvider?: (doc: Doc, assign?: boolean) => boolean): any => {
+ if (doc) {
+ switch (property) {
+ case "docContents":
+ if (doc.type === DocumentType.COL) return null;
+ const background = doc.type === DocumentType.PDF ? "red" : doc.type === DocumentType.IMG ? "blue" : doc.type === DocumentType.RTF ? "orange" :
+ doc.type === DocumentType.VID ? "purple" : doc.type === DocumentType.WEB ? "yellow" : "gray";
+ return <div style={{ width: doc[WidthSym](), height: doc[HeightSym](), position: "absolute", display: "block", background }} />;
+ default:
+ if (property.startsWith("pointerEvents")) return "none";
+ return TabDocView.styleProvider(doc, renderDepth, property, layerProvider);
}
- return undefined;
}
}
@computed get docView() {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8ae548813..e8fcf027e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1105,7 +1105,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
let highlighting = fullDegree && this.layoutDoc.type !== DocumentType.FONTICON && this.layoutDoc._viewType !== CollectionViewType.Linear && this.props.Document.type !== DocumentType.INK;
highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]"; // bcz: hack to turn off highlighting onsidebar panel documents. need to flag a document as not highlightable in a more direct way
const topmost = this.topMost ? "-topmost" : "";
- return <div className={`documentView-node${topmost}`}
+ return this.props.styleProvider?.(this.rootDoc, this.props.renderDepth, "docContents", this.props.layerProvider) ?? <div className={`documentView-node${topmost}`}
id={this.props.Document[Id]}
ref={this._mainCont} onKeyDown={this.onKeyDown}
onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 20:50:42 +0000