aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/StyleProvider.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/StyleProvider.tsx')
-rw-r--r--src/client/views/StyleProvider.tsx117
1 files changed, 37 insertions, 80 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 5efecaf3a..c77bfd468 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -18,13 +18,12 @@ import { TreeSort } from './collections/TreeView';
import { Colors } from './global/globalEnums';
import { InkingStroke } from './InkingStroke';
import { MainView } from './MainView';
-import { DocumentViewProps, OpenWhere } from './nodes/DocumentView';
+import { DocumentViewProps } from './nodes/DocumentView';
import { FieldViewProps } from './nodes/FieldView';
import { KeyValueBox } from './nodes/KeyValueBox';
import { SliderBox } from './nodes/SliderBox';
import './StyleProvider.scss';
import React = require('react');
-import { SchemaRowBox } from './collections/collectionSchema/SchemaRowBox';
export enum StyleProp {
TreeViewIcon = 'treeViewIcon',
@@ -37,13 +36,13 @@ export enum StyleProp {
BackgroundColor = 'backgroundColor', // background color of a document view
FillColor = 'fillColor', // fill color of an ink stroke or shape
WidgetColor = 'widgetColor', // color to display UI widgets on a document view -- used for the sidebar divider dragger on a text note
- HideLinkButton = 'hideLinkButton', // hides the blue-dot link button. used when a document acts like a button
+ HideLinkBtn = 'hideLinkButton', // hides the blue-dot link button. used when a document acts like a button
PointerEvents = 'pointerEvents', // pointer events for DocumentView -- inherits pointer events if not specified
Decorations = 'decorations', // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background
HeaderMargin = 'headerMargin', // margin at top of documentview, typically for displaying a title -- doc contents will start below that
- showCaption = 'layout_showCaption',
+ ShowCaption = 'layout_showCaption',
TitleHeight = 'titleHeight', // Height of Title area
- layout_showTitle = 'layout_showTitle', // whether to display a title on a Document (optional :hover suffix)
+ ShowTitle = 'layout_showTitle', // whether to display a title on a Document (optional :hover suffix)
JitterRotation = 'jitterRotation', // whether documents should be randomly rotated
BorderPath = 'customBorder', // border path for document view
FontSize = 'fontSize', // size of text font
@@ -96,8 +95,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
const lockedPosition = () => doc && BoolCast(doc._lockedPosition);
const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor);
const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity);
- const layout_showTitle = () => props?.styleProvider?.(doc, props, StyleProp.layout_showTitle);
+ const layout_showTitle = () => props?.styleProvider?.(doc, props, StyleProp.ShowTitle);
const random = (min: number, max: number, x: number, y: number) => /* min should not be equal to max */ min + (((Math.abs(x * y) * 9301 + 49297) % 233280) / 233280) * (max - min);
+ // prettier-ignore
switch (property.split(':')[0]) {
case StyleProp.TreeViewIcon:
const img = ImageCast(doc?.icon, ImageCast(doc?.data));
@@ -131,21 +131,17 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
}
}
return undefined;
- case StyleProp.DocContents:
- return undefined;
- case StyleProp.WidgetColor:
- return isAnnotated ? Colors.LIGHT_BLUE : darkScheme() ? 'lightgrey' : 'dimgrey';
- case StyleProp.Opacity:
- return props?.LayoutTemplateString?.includes(KeyValueBox.name) ? 1 : Cast(doc?._opacity, 'number', Cast(doc?.opacity, 'number', null));
- case StyleProp.HideLinkButton:
- return props?.hideLinkButton || (!selected && doc?.layout_hideLinkButton);
- case StyleProp.FontSize:
- return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(doc?._fontSize, StrCast(Doc.UserDoc().fontSize)));
- case StyleProp.FontFamily:
- return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(doc?._fontFamily, StrCast(Doc.UserDoc().fontFamily)));
- case StyleProp.FontWeight:
- return StrCast(doc?.[fieldKey + 'fontWeight'], StrCast(doc?._fontWeight, StrCast(Doc.UserDoc().fontWeight)));
- case StyleProp.layout_showTitle:
+ case StyleProp.DocContents:return undefined;
+ case StyleProp.WidgetColor:return isAnnotated ? Colors.LIGHT_BLUE : darkScheme() ? 'lightgrey' : 'dimgrey';
+ case StyleProp.Opacity: return props?.LayoutTemplateString?.includes(KeyValueBox.name) ? 1 : Cast(doc?._opacity, 'number', Cast(doc?.opacity, 'number', null));
+ case StyleProp.HideLinkBtn:return props?.hideLinkButton || (!selected && doc?.layout_hideLinkButton);
+ case StyleProp.FontSize: return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(doc?._fontSize, StrCast(Doc.UserDoc().fontSize)));
+ case StyleProp.FontFamily: return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(doc?._fontFamily, StrCast(Doc.UserDoc().fontFamily)));
+ case StyleProp.FontWeight: return StrCast(doc?.[fieldKey + 'fontWeight'], StrCast(doc?._fontWeight, StrCast(Doc.UserDoc().fontWeight)));
+ case StyleProp.FillColor: return Cast(doc?._fillColor, 'string', Cast(doc?.fillColor, 'string', 'transparent'));
+ case StyleProp.ShowCaption:return doc?._type_collection === CollectionViewType.Carousel || props?.hideCaptions ? undefined : StrCast(doc?._layout_showCaption);
+ case StyleProp.TitleHeight:return 15;
+ case StyleProp.ShowTitle:
return (
(doc &&
!doc.presentationTargetDoc &&
@@ -162,8 +158,6 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
)) ||
''
);
- case StyleProp.FillColor:
- return Cast(doc?._fillColor, 'string', Cast(doc?.fillColor, 'string', 'transparent'));
case StyleProp.Color:
if (MainView.Instance.LastButton === doc) return Colors.DARK_GRAY;
const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color));
@@ -174,8 +168,6 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
return lightOrDark(backColor);
case StyleProp.BorderRounding:
return StrCast(doc?.[fieldKey + 'borderRounding'], StrCast(doc?.borderRounding, doc?._type_collection === CollectionViewType.Pile ? '50%' : ''));
- case StyleProp.TitleHeight:
- return 15;
case StyleProp.BorderPath:
const borderPath = Doc.IsComicStyle(doc) &&
props?.renderDepth &&
@@ -194,8 +186,6 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
};
case StyleProp.JitterRotation:
return Doc.IsComicStyle(doc) ? random(-1, 1, NumCast(doc?.x), NumCast(doc?.y)) * ((props?.PanelWidth() || 0) > (props?.PanelHeight() || 0) ? 5 : 10) : 0;
- case StyleProp.showCaption:
- return doc?._type_collection === CollectionViewType.Carousel || props?.hideCaptions ? undefined : StrCast(doc?._layout_showCaption);
case StyleProp.HeaderMargin:
return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._type_collection as any) ||
(doc?.type === DocumentType.RTF && !layout_showTitle()?.includes('noMargin')) ||
@@ -207,55 +197,29 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
case StyleProp.BackgroundColor: {
if (MainView.Instance.LastButton === doc) return Colors.LIGHT_GRAY;
let docColor: Opt<string> = StrCast(doc?.[fieldKey + '_backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : ''));
+ // prettier-ignore
switch (doc?.type) {
- case DocumentType.PRESELEMENT:
- docColor = docColor || (darkScheme() ? '' : '');
- break;
- case DocumentType.PRES:
- docColor = docColor || (darkScheme() ? 'transparent' : 'transparent');
- break;
- case DocumentType.FONTICON:
- docColor = boxBackground ? undefined : docColor || Colors.DARK_GRAY;
- break;
- case DocumentType.RTF:
- docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
- break;
- case DocumentType.FILTER:
- docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : 'rgba(105, 105, 105, 0.432)');
- break;
- case DocumentType.INK:
- docColor = doc?.stroke_isInkMask ? 'rgba(0,0,0,0.7)' : undefined;
- break;
- case DocumentType.SLIDER:
- break;
- case DocumentType.EQUATION:
- docColor = docColor || 'transparent';
- break;
- case DocumentType.LABEL:
- docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
- break;
- case DocumentType.BUTTON:
- docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
- break;
- case DocumentType.LINKANCHOR:
- docColor = isAnchor ? Colors.LIGHT_BLUE : 'transparent';
- break;
- case DocumentType.LINK:
- docColor = (isAnchor ? docColor : '') || 'transparent';
- break;
+ case DocumentType.SLIDER: break;
+ case DocumentType.PRESELEMENT: docColor = docColor || (darkScheme() ? '' : ''); break;
+ case DocumentType.PRES: docColor = docColor || (darkScheme() ? 'transparent' : 'transparent'); break;
+ case DocumentType.FONTICON: docColor = boxBackground ? undefined : docColor || Colors.DARK_GRAY; break;
+ case DocumentType.RTF: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
+ case DocumentType.FILTER: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : 'rgba(105, 105, 105, 0.432)'); break;
+ case DocumentType.INK: docColor = doc?.stroke_isInkMask ? 'rgba(0,0,0,0.7)' : undefined; break;
+ case DocumentType.EQUATION: docColor = docColor || 'transparent'; break;
+ case DocumentType.LABEL: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
+ case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
+ case DocumentType.LINKANCHOR: docColor = isAnchor ? Colors.LIGHT_BLUE : 'transparent'; break;
+ case DocumentType.LINK: docColor = (isAnchor ? docColor : '') || 'transparent'; break;
case DocumentType.IMG:
case DocumentType.WEB:
case DocumentType.PDF:
case DocumentType.MAP:
case DocumentType.SCREENSHOT:
- case DocumentType.VID:
- docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY);
- break;
+ case DocumentType.VID: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
case DocumentType.COL:
if (StrCast(Doc.LayoutField(doc)).includes(SliderBox.name)) break;
- docColor =
- docColor ||
- (Doc.IsSystem(doc)
+ docColor = docColor || (Doc.IsSystem(doc)
? darkScheme()
? Colors.DARK_GRAY
: Colors.LIGHT_GRAY // system docs (seen in treeView) get a grayish background
@@ -266,12 +230,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
: Cast((props?.renderDepth || 0) > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground, 'string') ?? (darkScheme() ? Colors.BLACK : 'linear-gradient(#065fff, #85c1f9)'));
break;
//if (doc._type_collection !== CollectionViewType.Freeform && doc._type_collection !== CollectionViewType.Time) return "rgb(62,62,62)";
- default:
- docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE);
- break;
+ default: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE);
}
- if (docColor && !doc) docColor = DashColor(docColor).fade(0.5).toString();
- return docColor;
+ return (docColor && !doc) ? DashColor(docColor).fade(0.5).toString() : docColor;
}
case StyleProp.BoxShadow: {
if (!doc || opacity() === 0 || doc.noShadow) return undefined; // if it's not visible, then no shadow)
@@ -378,13 +339,9 @@ export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp,
*/
export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
if (doc && property.split(':')[0] === StyleProp.Decorations) {
- return doc._type_collection === CollectionViewType.Docking ? null : (
- <>
- {DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => {
- DocFocusOrOpen(doc, { toggleTarget: true, willZoomCentered: true, zoomScale: 0 }, DocCast(doc?.embedContainer ?? doc?.annotationOn));
- })}
- </>
- );
+ return doc._type_collection === CollectionViewType.Docking
+ ? null
+ : DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => DocFocusOrOpen(doc, { toggleTarget: true, willZoomCentered: true, zoomScale: 0 }, DocCast(doc?.embedContainer ?? doc?.annotationOn)));
}
return DefaultStyleProvider(doc, props, property);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:34:28 +0000