diff options
Diffstat (limited to 'src/client/views/StyleProvider.tsx')
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 22 |
1 files changed, 13 insertions, 9 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 9ed8a2924..74e4e9bee 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -70,6 +70,10 @@ export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentVie export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string): any { const docProps = testDocProps(props) ? props : undefined; const selected = property.includes(":selected"); + const isBackground = () => StrListCast(doc?.layers).includes(StyleLayers.Background); + const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor); + const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity); + switch (property.split(":")[0]) { case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey"; @@ -80,7 +84,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | (doc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) : "author;creationDate") : undefined); case StyleProp.Color: - const backColor = props?.styleProvider?.(doc, props, StyleProp.BackgroundColor) || "black"; + const backColor = backgroundCol() || "black"; const col = Color(backColor).rgb(); const colsum = (col.red() + col.green() + col.blue()); if (colsum / col.alpha() > 600 || col.alpha() < 0.25) return "black"; @@ -111,7 +115,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | case DocumentType.COL: docColor = docColor || (Doc.IsSystem(doc) ? (darkScheme() ? "rgb(62,62,62)" : "lightgrey") : - StrListCast(doc.layers).includes(StyleLayers.Background) ? "cyan" : + isBackground() ? "cyan" : doc.annotationOn ? "#00000015" : StrCast((props?.renderDepth || 0) > 0 ? Doc.UserDoc().activeCollectionNestedBackground : @@ -124,16 +128,17 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | return docColor; } case StyleProp.BoxShadow: { - if (!doc || props?.styleProvider?.(doc, props, StyleProp.Opacity) === 0) return undefined; // if it's not visible, then no shadow) - const isBackground = () => StrListCast(doc.layers).includes(StyleLayers.Background); + if (!doc || opacity() === 0) return undefined; // if it's not visible, then no shadow) const backgroundHalo = (doc: Doc) => props?.ContainingCollectionDoc?._useClusters || NumCast(doc.group, -1) !== -1; + if (doc?.isLinkButton && doc.type !== DocumentType.LINK) return StrCast(doc?._linkButtonShadow, "lightblue 0em 0em 1em"); + switch (doc?.type) { case DocumentType.COL: return isBackground() ? undefined : `${darkScheme() ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`; default: return doc.z ? `#9c9396 ${StrCast(doc?.boxShadow, "10px 10px 0.9vw")}` : // if it's a floating doc, give it a big shadow - backgroundHalo(doc) && doc.type !== DocumentType.INK ? (`${props?.styleProvider?.(doc, props, StyleProp.BackgroundColor)} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (docProps?.ContentScaling?.() || 1)}px`)}`) : // if it's just in a cluster, make the shadown roughly match the cluster border extent + backgroundHalo(doc) && doc.type !== DocumentType.INK ? (`${backgroundCol()} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / (docProps?.ContentScaling?.() || 1)}px`)}`) : // if it's just in a cluster, make the shadown roughly match the cluster border extent isBackground() ? undefined : // if it's a background & has a cluster color, make the shadow spread really big StrCast(doc.boxShadow, ""); } @@ -141,17 +146,16 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | case StyleProp.PointerEvents: if (props?.pointerEvents === "none") return "none"; const layer = doc && props?.layerProvider?.(doc); - if (props?.styleProvider?.(doc, props, StyleProp.Opacity) === 0 || doc?.type === DocumentType.INK || doc?.isInkMask) return "none"; + if (opacity() === 0 || doc?.type === DocumentType.INK || doc?.isInkMask) return "none"; if (layer === false && !selected && !SnappingManager.GetIsDragging()) return "none"; if (doc?.type !== DocumentType.INK && layer === true) return "all"; return undefined; case StyleProp.Decorations: if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform) { - const isBackground = StrListCast(doc?.layers).includes(StyleLayers.Background); - return doc && (isBackground || selected) && (props?.renderDepth || 0) > 0 && + return doc && (isBackground() || selected) && (props?.renderDepth || 0) > 0 && ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ? <div className="styleProvider-lock" onClick={() => toggleBackground(doc)}> - <FontAwesomeIcon icon={isBackground ? "unlock" : "lock"} style={{ color: isBackground ? "red" : undefined }} size="lg" /> + <FontAwesomeIcon icon={isBackground() ? "unlock" : "lock"} style={{ color: isBackground() ? "red" : undefined }} size="lg" /> </div> : (null); } |