diff options
Diffstat (limited to 'src/client/views/StyleProvider.tsx')
| -rw-r--r-- | src/client/views/StyleProvider.tsx | 78 |
1 files changed, 46 insertions, 32 deletions
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 1e98695d1..b04b1ae65 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -1,7 +1,7 @@ +import { Dropdown, DropdownType, IconButton, IListItemProps, Shadows, Size, Type } from '@dash/components'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; -import { Dropdown, DropdownType, IconButton, IListItemProps, Shadows, Size, Type } from 'browndash-components'; import { action, untracked } from 'mobx'; import { extname } from 'path'; import * as React from 'react'; @@ -10,6 +10,7 @@ import { FaFilter } from 'react-icons/fa'; import { ClientUtils, DashColor, lightOrDark } from '../../ClientUtils'; import { Doc, Opt, StrListCast } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; +import { InkInkTool } from '../../fields/InkField'; import { ScriptField } from '../../fields/ScriptField'; import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../fields/Types'; import { AudioAnnoState } from '../../server/SharedMediaTypes'; @@ -23,7 +24,7 @@ import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; import { FieldViewProps } from './nodes/FieldView'; import { StyleProp } from './StyleProp'; import './StyleProvider.scss'; -import { TagsView } from './TagsView'; +import { styleProviderQuiz } from './StyleProviderQuiz'; function toggleLockedPosition(doc: Doc) { UndoManager.RunInBatch(() => Doc.toggleLockedPosition(doc), 'toggleBackground'); @@ -53,7 +54,6 @@ export function styleFromLayoutString(doc: Doc, props: FieldViewProps, scale: nu } export function border(doc: Doc, pw: number, ph: number, rad: number = 0, inset: number = 0) { - if (!rad) rad = 0; const width = pw * inset; const height = ph * inset; @@ -100,6 +100,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & containerViewPath, childFilters, hideCaptions, + hideFilterStatus, showTitle, childFiltersByRanges, renderDepth, @@ -121,6 +122,12 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & const color = () => styleProvider?.(doc, props, StyleProp.Color) as string; const opacity = () => styleProvider?.(doc, props, StyleProp.Opacity); const layoutShowTitle = () => styleProvider?.(doc, props, StyleProp.ShowTitle) as string; + + // bcz: For now, this is how to add custom-stylings (like a Quiz styling) for app-specific purposes. The quiz styling will short-circuit + // the regular stylings for items that it controls (eg., things with a quiz field, or images) + const quizProp = styleProviderQuiz.quizStyleProvider(doc, props, property); + if (quizProp !== undefined) return quizProp; + // prettier-ignore switch (property.split(':')[0]) { case StyleProp.TreeViewIcon: { @@ -164,7 +171,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & case StyleProp.FontSize: return StrCast(doc?.[fieldKey + 'fontSize'], StrCast(Doc.UserDoc().fontSize)); case StyleProp.FontFamily: return StrCast(doc?.[fieldKey + 'fontFamily'], StrCast(Doc.UserDoc().fontFamily)); case StyleProp.FontWeight: return StrCast(doc?.[fieldKey + 'fontWeight'], StrCast(Doc.UserDoc().fontWeight)); - case StyleProp.FillColor: return StrCast(doc?._fillColor, StrCast(doc?.fillColor, StrCast(doc?.backgroundColor, 'transparent'))); + case StyleProp.FontStyle: return StrCast(doc?.[fieldKey + 'fontStyle'], StrCast(Doc.UserDoc().fontStyle)); + case StyleProp.FontDecoration:return StrCast(doc?.[fieldKey + 'fontDecoration'], StrCast(Doc.UserDoc().fontDecoration)); + case StyleProp.FillColor: return StrCast(doc?._fillColor, StrCast(doc?.fillColor, StrCast(doc?.backgroundColor, StrCast(Doc.UserDoc()[Doc.ActiveInk === InkInkTool.Highlight ? "inkHighlighterColor": "inkFillColor"], 'transparent')))); case StyleProp.ShowCaption: return hideCaptions || doc?._type_collection === CollectionViewType.Carousel ? undefined: StrCast(doc?._layout_showCaption); case StyleProp.TitleHeight: return Math.min(4,(docView?.().screenToViewTransform().Scale ?? 1)) * NumCast(Doc.UserDoc().headerHeight,30); case StyleProp.ShowTitle: return ( @@ -197,33 +206,40 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & const rounding = StrCast(doc?.[fieldKey + 'borderRounding'], StrCast(doc?.layout_borderRounding, doc?._type_collection === CollectionViewType.Pile ? '50%' : '')); return (doc?.[StrCast(doc?.layout_fieldKey)] instanceof Doc || doc?.isTemplateDoc) ? StrCast(doc._layout_borderRounding,rounding) : rounding; } + case StyleProp.Border: { + const bcolor = StrCast(doc?.borderColor, StrCast(doc?.[fieldKey + 'borderColor'], StrCast(doc?.layout_borderColor))); + return bcolor + " " + + StrCast(doc?.borderStyle, StrCast(doc?.[fieldKey + 'borderStyle'], StrCast(doc?.layout_borderStyle, "solid"))) + " " + + (StrCast(doc?.borderWidth || doc?.[fieldKey + 'borderWidth'] || doc?.layout_borderWidth) || + (NumCast(doc?.borderWidth, NumCast(doc?.[fieldKey + 'borderWidth'], NumCast(doc?.layout_borderWidth, bcolor ?1:0)))+"px")) + } // Doc.IsComicStyle(doc) && // renderDepth && // !doc?.layout_isSvg && //case StyleProp. - case StyleProp.BorderPath: { - const docWidth = Number(doc?._width); - const borderWidth = Number(StrCast(doc?.borderWidth)); - //console.log(borderWidth); - const ratio = borderWidth / docWidth; - const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', '')); - const radiusRatio = borderRadius / docWidth; - const radius = radiusRatio * ((2 * borderWidth) + docWidth); + // case StyleProp.BorderPath: { + // const docWidth = Number(doc?._width); + // const borderWidth = Number(StrCast(doc?.borderWidth)); + // //console.log(borderWidth); + // const ratio = borderWidth / docWidth; + // const borderRadius = Number(StrCast(layoutDoc?._layout_borderRounding).replace('px', '')); + // const radiusRatio = borderRadius / docWidth; + // const radius = radiusRatio * ((2 * borderWidth) + docWidth); - const borderPath = doc && border(doc, NumCast(doc._width), NumCast(doc._height), radius, -ratio/2 ?? 0); - return !borderPath - ? null - : { - clipPath: `path('${borderPath}')`, - jsx: ( - <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}> - <svg style={{ overflow: 'visible', height: '100%' }} viewBox={`0 0 ${PanelWidth?.()} ${PanelHeight?.()}`}> - <path d={borderPath} style={{ stroke: StrCast(doc?.borderColor), fill: 'transparent', strokeWidth: `${StrCast(doc?.borderWidth)}px` }} /> - </svg> - </div> - ), - }; - } + // const borderPath = doc && border(doc, NumCast(doc._width), NumCast(doc._height), radius, -ratio/2); + // return !borderPath + // ? null + // : { + // clipPath: `path('${borderPath}')`, + // jsx: ( + // <div key="border2" className="documentView-customBorder" style={{ pointerEvents: 'none' }}> + // <svg style={{ overflow: 'visible', height: '100%' }} viewBox={`0 0 ${PanelWidth?.()} ${PanelHeight?.()}`}> + // <path d={borderPath} style={{ stroke: StrCast(doc?.borderColor), fill: 'transparent', strokeWidth: `${StrCast(doc?.borderWidth)}px` }} /> + // </svg> + // </div> + // ), + // }; + // } case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._type_collection as CollectionViewType) || (doc?.type === DocumentType.RTF && !layoutShowTitle()?.includes('noMargin')) || @@ -244,10 +260,10 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & case DocumentType.PRESELEMENT: docColor = docColor || ""; break; case DocumentType.PRES: docColor = docColor || 'transparent'; break; case DocumentType.FONTICON: docColor = boxBackground ? undefined : docColor || Colors.DARK_GRAY; break; - case DocumentType.RTF: docColor = docColor || Colors.LIGHT_GRAY; break; + case DocumentType.RTF: docColor = docColor || StrCast(Doc.UserDoc().textBackgroundColor, Colors.LIGHT_GRAY); break; case DocumentType.LINK: docColor = (isAnchor ? docColor : undefined); 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.EQUATION: docColor = docColor || StrCast(Doc.UserDoc().textBackgroundColor, 'transparent'); break; case DocumentType.LABEL: docColor = docColor || Colors.LIGHT_GRAY; break; case DocumentType.BUTTON: docColor = docColor || Colors.LIGHT_GRAY; break; case DocumentType.IMG: @@ -306,7 +322,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & ? undefined // if it's a background & has a cluster color, make the shadow spread really big : fieldKey.includes('_inline') // if doc is an inline document in a text box ? `${Colors.DARK_GRAY} ${StrCast(doc.layout_boxShadow, '0vw 0vw 0.1vw')}` - : DocCast(doc.embedContainer)?.type === DocumentType.RTF && !isInk() // if doc is embedded in a text document (but not an inline) + :doc.rootDocument !== doc.embedContainer && DocCast(doc.embedContainer)?.type === DocumentType.RTF && !isInk() // if doc is embedded in a text document (but not an inline) and this isn't a simple text template (where the layoutDoc's rootDocument is its embed container) ? `${Colors.DARK_GRAY} ${StrCast(doc.layout_boxShadow, '0.2vw 0.2vw 0.8vw')}` : StrCast(doc.layout_boxShadow, ''); } @@ -339,7 +355,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & : childFilters?.().filter(f => ClientUtils.IsRecursiveFilter(f) && f !== ClientUtils.noDragDocsFilter).length || childFiltersByRanges?.().length ? 'orange' // 'inheritsFilter' : undefined; - return !showFilterIcon ? null : ( + return !showFilterIcon || hideFilterStatus ? null : ( <div className="styleProvider-filter"> <Dropdown type={Type.TERT} @@ -384,7 +400,6 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & </Tooltip> ); }; - const tags = () => docView?.() ? <TagsView Views={[docView?.()]}/> : null; return ( <> @@ -392,7 +407,6 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps & {lock()} {filter()} {audio()} - {tags()} </> ); } |