From 63f9f9573dab9745d2f570e1917b325a474fdd93 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 28 Oct 2024 20:07:51 -0400 Subject: reworked LabelBox's to be fully editable. gor rid of singleLine for label boxes. made a text_fitBox field to render text with a labelBox. fixed styleprovider in freeformview clusters to be untracked() to avoid invalidations. added a default text color to Settings panel. fixed clicking text buttons to not lose focus in labelBox. --- src/client/views/nodes/FontIconBox/FontIconBox.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/client/views/nodes/FontIconBox/FontIconBox.scss') diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss index 2db285910..ab03a2318 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss @@ -10,6 +10,10 @@ height: 3px !important; } } +.fonticonbox { + margin: auto; + width: 100%; +} .menuButton { height: 100%; display: flex; -- cgit v1.2.3-70-g09d2 From 4c768162e0436115a05b9c8b0e4d837d626d45ba Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 30 Oct 2024 18:54:52 -0400 Subject: reworked how context menu buttons for ink and text work. added disableMixBlend for making transparent docs not use 'multiply'. --- src/ClientUtils.ts | 11 +- src/client/documents/DocUtils.ts | 16 +- src/client/documents/Documents.ts | 1 - src/client/util/CurrentUserUtils.ts | 78 +++++---- src/client/util/InteractionUtils.tsx | 6 +- src/client/util/SettingsManager.tsx | 4 +- src/client/util/SnappingManager.ts | 7 + src/client/views/FilterPanel.tsx | 2 +- src/client/views/GestureOverlay.tsx | 164 ++++++------------ src/client/views/GlobalKeyHandler.ts | 9 +- src/client/views/InkingStroke.tsx | 3 +- src/client/views/LightboxView.tsx | 4 +- src/client/views/StyleProp.ts | 4 +- src/client/views/StyleProvider.tsx | 5 +- .../views/collections/CollectionDockingView.tsx | 2 +- .../CollectionFreeFormInfoUI.tsx | 6 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 71 ++++---- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- src/client/views/global/globalScripts.ts | 112 +++++++------ .../views/newlightbox/ButtonMenu/ButtonMenu.tsx | 6 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 5 +- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 72 ++++---- .../views/nodes/FontIconBox/FontIconBox.scss | 3 + src/client/views/nodes/FontIconBox/FontIconBox.tsx | 186 ++++++++++++--------- src/client/views/nodes/ImageBox.tsx | 10 +- src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 13 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 12 +- .../views/nodes/formattedText/RichTextMenu.tsx | 22 +-- src/client/views/pdf/PDFViewer.tsx | 2 +- src/client/views/smartdraw/SmartDrawHandler.tsx | 12 +- src/fields/Doc.ts | 6 +- src/fields/InkField.ts | 27 +-- src/pen-gestures/GestureTypes.ts | 1 - 35 files changed, 444 insertions(+), 446 deletions(-) (limited to 'src/client/views/nodes/FontIconBox/FontIconBox.scss') diff --git a/src/ClientUtils.ts b/src/ClientUtils.ts index e7aee1c2a..baad9a06c 100644 --- a/src/ClientUtils.ts +++ b/src/ClientUtils.ts @@ -107,12 +107,12 @@ export namespace ClientUtils { default: return type.charAt(0).toUpperCase() + type.substring(1,3); } // prettier-ignore } - export function cleanDocumentType(type: DocumentType, colType: CollectionViewType) { + export function cleanDocumentType(type: DocumentType, colType?: CollectionViewType) { switch (type) { case DocumentType.PDF: return 'PDF'; case DocumentType.IMG: return 'Image'; case DocumentType.AUDIO: return 'Audio'; - case DocumentType.COL: return 'Collection:'+colType; + case DocumentType.COL: return 'Collection:'+ (colType ?? ""); case DocumentType.RTF: return 'Text'; default: return type.charAt(0).toUpperCase() + type.slice(1); } // prettier-ignore @@ -212,7 +212,7 @@ export namespace ClientUtils { return { r: r, g: g, b: b, a: a }; } - const isTransparentFunctionHack = 'isTransparent(__value__)'; + export const isTransparentFunctionHack = 'isTransparent(__value__)'; export const noRecursionHack = '__noRecursion'; // special case filters @@ -223,11 +223,6 @@ export namespace ClientUtils { export function IsRecursiveFilter(val: string) { return !val.includes(noRecursionHack); } - export function HasFunctionFilter(val: string) { - if (val.includes(isTransparentFunctionHack)) return (color: string) => color !== '' && DashColor(color).alpha() !== 1; - // add other function filters here... - return undefined; - } export function toRGBAstr(col: { r: number; g: number; b: number; a?: number }) { return 'rgba(' + col.r + ',' + col.g + ',' + col.b + (col.a !== undefined ? ',' + col.a : '') + ')'; diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts index dae3e48ad..067b9c5e0 100644 --- a/src/client/documents/DocUtils.ts +++ b/src/client/documents/DocUtils.ts @@ -3,7 +3,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { saveAs } from 'file-saver'; import * as JSZip from 'jszip'; import { action, runInAction } from 'mobx'; -import { ClientUtils } from '../../ClientUtils'; +import { ClientUtils, DashColor } from '../../ClientUtils'; import * as JSZipUtils from '../../JSZipUtils'; import { decycle } from '../../decycler/decycler'; import { DateField } from '../../fields/DateField'; @@ -36,11 +36,16 @@ import { DocumentView } from '../views/nodes/DocumentView'; import { CollectionFreeFormView } from '../views/collections/collectionFreeForm'; export namespace DocUtils { + function HasFunctionFilter(val: string) { + if (val.includes(ClientUtils.isTransparentFunctionHack)) return (d: Doc, color: string) => !d.disableMixBlend && color !== '' && DashColor(color).alpha() !== 1; + // add other function filters here... + return undefined; + } function matchFieldValue(doc: Doc, key: string, valueIn: unknown): boolean { let value = valueIn; - const hasFunctionFilter = ClientUtils.HasFunctionFilter(value as string); + const hasFunctionFilter = HasFunctionFilter(value as string); if (hasFunctionFilter) { - return hasFunctionFilter(StrCast(doc[key])); + return hasFunctionFilter(doc, StrCast(doc[key])); } if (key === LinkedTo) { // links are not a field value, so handled here. value is an expression of form ([field=]idToDoc("...")) @@ -683,9 +688,14 @@ export namespace DocUtils { _layout_centered: BoolCast(Doc.UserDoc()._layout_centered), _layout_fitWidth: true, _layout_autoHeight: true, + backgroundColor: StrCast(Doc.UserDoc().textBackgroundColor), text_fitBox: BoolCast(Doc.UserDoc().fitBox), text_align: StrCast(Doc.UserDoc().textAlign), text_fontColor: StrCast(Doc.UserDoc().fontColor), + text_fontFamily: StrCast(Doc.UserDoc().fontFamily), + text_fontWeight: StrCast(Doc.UserDoc().fontWeight), + text_fontStyle: StrCast(Doc.UserDoc().fontStyle), + text_fontDecoration: StrCast(Doc.UserDoc().fontDecoration), }), }); diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index b0e1a7545..efd6ce3c9 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -927,7 +927,6 @@ export namespace Docs { I.text_align = 'center'; I.rotation = 0; I.defaultDoubleClick = 'ignore'; - I.keepZWhenDragged = true; I.author_date = new DateField(); I.acl_Guest = Doc.defaultAclPrivate ? SharingPermissions.None : SharingPermissions.View; // I.acl_Override = SharingPermissions.Unset; diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b3aa5e145..98a3e8914 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -4,7 +4,7 @@ import * as rp from 'request-promise'; import { ClientUtils, OmitKeys } from "../../ClientUtils"; import { Doc, DocListCast, DocListCastAsync, FieldType, Opt } from "../../fields/Doc"; import { DocData } from "../../fields/DocSymbols"; -import { InkTool } from "../../fields/InkField"; +import { InkEraserTool, InkInkTool, InkTool } from "../../fields/InkField"; import { List } from "../../fields/List"; import { PrefetchProxy } from "../../fields/Proxy"; import { RichTextField } from "../../fields/RichTextField"; @@ -39,6 +39,7 @@ import { SelectionManager } from "./SelectionManager"; import { ColorScheme } from "./SettingsManager"; import { SnappingManager } from "./SnappingManager"; import { UndoManager } from "./UndoManager"; +import { DocumentView } from "../views/nodes/DocumentView"; export interface Button { // DocumentOptions fields a button can set @@ -731,11 +732,11 @@ pie title Minerals in my tap water return [ { title: "Font", toolTip: "Font", width: 100, btnType: ButtonType.DropdownList, toolType:"font", ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'}, btnList: new List(["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]) }, - { title: "Font Size",toolTip: "Font size (%size)", btnType: ButtonType.NumberDropdownButton, toolType:"fontSize", ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 9 }, + { title: " Size", toolTip: "Font size (%size)", btnType: ButtonType.NumberDropdownButton, toolType:"fontSize", ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'}, numBtnMax: 200, numBtnMin: 9 }, { title: "Color", toolTip: "Font color (%color)", btnType: ButtonType.ColorButton, icon: "font", toolType:"fontColor",ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'} }, { title: "Highlight",toolTip: "Font highlight", btnType: ButtonType.ColorButton, icon: "highlighter", toolType:"highlight",ignoreClick: true, scripts: {script: '{ return setFontAttr(this.toolType, value, _readOnly_);}'} }, { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", toolType:"bold", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, - { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", toolType:"italics", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, + { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", toolType:"italic", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, { title: "Under", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", toolType:"underline",ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, { title: "Bullets", toolTip: "Bullet List", btnType: ButtonType.ToggleButton, icon: "list", toolType:"bullet", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, { title: "#", toolTip: "Number List", btnType: ButtonType.ToggleButton, icon: "list-ol", toolType:"decimal", ignoreClick: true, scripts: {onClick: '{ return toggleCharStyle(this.toolType, _readOnly_);}'} }, @@ -758,24 +759,27 @@ pie title Minerals in my tap water static inkTools():Button[] { return [ - { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", toolType: "pen", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }}, - { title: "Highlight",toolTip: "Highlight (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter",toolType: "highlighter", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }}, - { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", toolType: "write", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, - { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.MultiToggleButton, toolType: InkTool.Eraser, scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, + { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", toolType: Gestures.Circle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, + { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", toolType: Gestures.Rectangle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, + { title: "Line", toolTip: "Line (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "minus", toolType: Gestures.Line, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, + { title: "Ink", toolTip: "Ink", btnType: ButtonType.MultiToggleButton, toolType: InkTool.Ink, scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' }, + subMenu: [ + { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen-nib", toolType: InkInkTool.Pen, ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' }}, + { title: "Highlight",toolTip: "Highlight (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter", toolType: InkInkTool.Highlight, ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' }}, + { title: "Write", toolTip: "Write (Ctrl+Shift+P)", btnType: ButtonType.ToggleButton, icon: "pen", toolType: InkInkTool.Write, ignoreClick: true, scripts: {onClick:'{ return setActiveTool(this.toolType, true, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }}, + ]}, + { title: "Width", toolTip: "Stroke width", btnType: ButtonType.NumberSliderButton, toolType: "strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"!activeInkTool()"}, numBtnMin: 1, linearBtnWidth:40}, + { title: "Color", toolTip: "Stroke color", btnType: ButtonType.ColorButton, icon: "pen", toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"!activeInkTool()"}}, + { title: "Eraser", toolTip: "Eraser (Ctrl+E)", btnType: ButtonType.MultiToggleButton, toolType: InkTool.Eraser, scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, subMenu: [ - { title: "Stroke", toolTip: "Stroke Erase", btnType: ButtonType.ToggleButton, icon: "eraser", toolType:InkTool.StrokeEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, - { title: "Segment", toolTip: "Segment Erase", btnType: ButtonType.ToggleButton, icon: "xmark", toolType:InkTool.SegmentEraser,ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, - { title: "Radius", toolTip: "Radius Erase", btnType: ButtonType.ToggleButton, icon: "circle-xmark",toolType:InkTool.RadiusEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} }, + { title: "Stroke", toolTip: "Eraser complete strokes",btnType: ButtonType.ToggleButton, icon: "eraser", toolType:InkEraserTool.Stroke, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}}, + { title: "Segment", toolTip: "Erase segments up to intersections",btnType: ButtonType.ToggleButton,icon: "xmark",toolType:InkEraserTool.Segment,ignoreClick:true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}}, + { title: "Area", toolTip: "Erase like a pencil", btnType: ButtonType.ToggleButton, icon: "circle-xmark",toolType:InkEraserTool.Radius, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}}, ]}, - { title: "Eraser Width", toolTip: "Eraser Width", btnType: ButtonType.NumberSliderButton, toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1, funcs: {hidden:"NotRadiusEraser()"}}, - { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle", toolType: Gestures.Circle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, - { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square", toolType: Gestures.Rectangle, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, - { title: "Line", toolTip: "Line (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "minus", toolType: Gestures.Line, scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} }, - { title: "Mask", toolTip: "Mask", btnType: ButtonType.ToggleButton, icon: "user-circle",toolType: "inkMask", scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"IsNoviceMode()" } }, - { title: "Labels", toolTip: "Labels", btnType: ButtonType.ToggleButton, icon: "text-width", toolType: "labels", scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, }, - { title: "Width", toolTip: "Stroke width", btnType: ButtonType.NumberSliderButton, toolType: "strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1}, - { title: "Ink", toolTip: "Stroke color", btnType: ButtonType.ColorButton, icon: "pen", toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'} }, - { title: "Smart Draw", toolTip: "Draw with GPT", btnType: ButtonType.ToggleButton, icon: "user-pen", toolType: "smartdraw", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}'}, funcs: {hidden: "IsNoviceMode()"}}, + { title: " Size", toolTip: "Size of area pencil eraser", btnType: ButtonType.NumberSliderButton, toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"NotRadiusEraser()"}, numBtnMin: 1, linearBtnWidth:40}, + { title: "Mask", toolTip: "Make Stroke a Stencil Mask", btnType: ButtonType.ToggleButton, icon: "user-circle",toolType: "inkMask", scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"IsNoviceMode()" } }, + { title: "Labels", toolTip: "Show Labels Inside Shapes", btnType: ButtonType.ToggleButton, icon: "text-width", toolType: "labels", scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}}, + { title: "Smart Draw", toolTip: "Draw with GPT", btnType: ButtonType.ToggleButton, icon: "user-pen", toolType: "smartdraw", scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}'}, funcs: {hidden: "IsNoviceMode()"}}, ]; } @@ -814,11 +818,11 @@ pie title Minerals in my tap water { title: "Pin", icon: "map-pin", toolTip: "Pin View to Trail", btnType: ButtonType.ClickButton, expertMode: false, width: 30, scripts: { onClick: 'pinWithView(altKey)'}, funcs: {hidden: "IsNoneSelected()"}}, { title: "Header", icon: "heading", toolTip: "Doc Titlebar Color", btnType: ButtonType.ColorButton, expertMode: false, ignoreClick: true, scripts: { script: 'return setHeaderColor(value, _readOnly_)'} }, { title: "Template",icon: "scroll", toolTip: "Default Note Template",btnType: ButtonType.ToggleButton, expertMode: false, toolType:DocumentType.RTF, scripts: { onClick: '{ return setDefaultTemplate(_readOnly_); }'} }, - { title: "Fill", icon: "fill-drip", toolTip: "Fill/Background Color",btnType: ButtonType.ColorButton, expertMode: false, ignoreClick: true, width: 30, scripts: { script: 'return setBackgroundColor(value, _readOnly_)'}, funcs: {hidden: "IsNoneSelected()"}}, // Only when a document is selected - { title: "Overlay", icon: "layer-group", toolTip: "Overlay", btnType: ButtonType.ToggleButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode, true)'}, scripts: { onClick: '{ return toggleOverlay(_readOnly_); }'}}, // Only when floating document is selected in freeform - { title: "Back", icon: "chevron-left", toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'}, width: 30, scripts: { onClick: 'prevKeyFrame(_readOnly_)'}}, + { title: "Fill", icon: "fill-drip", toolTip: "Fill/Background Color",btnType: ButtonType.ColorButton, expertMode: false, ignoreClick: true, width: 30, scripts: { script: 'return setBackgroundColor(value, _readOnly_)'} }, // Only when a document is selected + { title: "Overlay", icon: "layer-group", toolTip: "Overlay", btnType: ButtonType.ToggleButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode, true)'}, scripts: { onClick: '{ return toggleOverlay(_readOnly_); }'}}, // Only when floating document is selected in freeform + { title: "Back", icon: "chevron-left", toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'}, width: 30, scripts: { onClick: 'prevKeyFrame(_readOnly_)'}}, { title: "Num", icon:"", toolTip: "Frame # (click to toggle edit mode)",btnType: ButtonType.TextButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)', buttonText: 'selectedDocs()?.lastElement()?.currentFrame?.toString()'}, width: 20, scripts: { onClick: '{ return curKeyFrame(_readOnly_);}'}}, - { title: "Fwd", icon: "chevron-right", toolTip: "Next Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'}, width: 30, scripts: { onClick: 'nextKeyFrame(_readOnly_)'}}, + { title: "Fwd", icon: "chevron-right", toolTip: "Next Animation Frame", btnType: ButtonType.ClickButton, expertMode: true, toolType:CollectionViewType.Freeform, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'}, width: 30, scripts: { onClick: 'nextKeyFrame(_readOnly_)'}}, { title: "Filter", icon: "=", toolTip: "Filter cards by tags", subMenu: CurrentUserUtils.tagGroupTools(),ignoreClick:true, toolType:DocumentType.COL, funcs: {hidden: '!SelectedDocType(this.toolType, this.expertMode)'}, btnType: ButtonType.MultiToggleButton, width: 30, backgroundColor: doc.userVariantColor as string}, { title: "Text", icon: "Text", toolTip: "Text functions", subMenu: CurrentUserUtils.textTools(), expertMode: false, toolType:DocumentType.RTF, funcs: { linearView_IsOpen: `SelectedDocType(this.toolType, this.expertMode)`} }, // Always available @@ -863,7 +867,7 @@ pie title Minerals in my tap water } // linear view const reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List(['width', "linearView_IsOpen"]), - childDontRegisterViews: true, flexGap: 0, _height: 30, ignoreClick: !params.scripts?.onClick, + childDontRegisterViews: true, flexGap: 0, _height: 30, _width: 30, ignoreClick: !params.scripts?.onClick, linearView_SubMenu: true, linearView_Expandable: true, embedContainer: menuDoc}; const items = (menutBtn?:Doc) => !menutBtn ? [] : subMenu.map(sub => this.setupContextMenuBtn(sub, menutBtn) ); @@ -987,15 +991,23 @@ pie title Minerals in my tap water Doc.noviceMode ?? (Doc.noviceMode = true); doc._showLabel ?? (doc._showLabel = true); doc.textAlign ?? (doc.textAlign = "left"); + doc.textBackgroundColor ?? (doc.textBackgroundColor = Colors.LIGHT_GRAY); doc.activeTool = InkTool.None; doc.openInkInLightbox ?? (doc.openInkInLightbox = false); - doc.activeInkHideTextLabels ?? (doc.activeInkHideTextLabels = false); - doc.activeInkColor ?? (doc.activeInkColor = "rgb(0, 0, 0)"); - doc.activeInkWidth ?? (doc.activeInkWidth = 1); - doc.activeInkBezier ?? (doc.activeInkBezier = "0"); - doc.activeFillColor ?? (doc.activeFillColor = ""); - doc.activeArrowStart ?? (doc.activeArrowStart = ""); - doc.activeArrowEnd ?? (doc.activeArrowEnd = ""); + doc.activeHideTextLabels ?? (doc.activeHideTextLabels = false); + doc[`active${InkInkTool.Pen}Color`] ?? (doc[`active${InkInkTool.Pen}Color`] = "rgb(0, 0, 0)"); + doc[`active${InkInkTool.Pen}Width`] ?? (doc[`active${InkInkTool.Pen}Width`] = 2); + doc[`active${InkInkTool.Pen}Bezier`] ?? (doc[`active${InkInkTool.Pen}Bezier`] = "0"); + doc[`active${InkInkTool.Write}Color`] ?? (doc[`active${InkInkTool.Write}Color`] = "rgb(255, 0, 0)"); + doc[`active${InkInkTool.Write}Width`] ?? (doc[`active${InkInkTool.Write}Width`] = 1); + doc[`active${InkInkTool.Write}Bezier`] ?? (doc[`active${InkInkTool.Write}Bezier`] = "0"); + doc[`active${InkInkTool.Highlight}Color`] ?? (doc[`active${InkInkTool.Highlight}Color`] = 'transparent'); + doc[`active${InkInkTool.Highlight}Width`] ?? (doc[`active${InkInkTool.Highlight}Width`] = 20); + doc[`active${InkInkTool.Highlight}Bezier`] ?? (doc[`active${InkInkTool.Highlight}Bezier`] = "0"); + doc[`active${InkInkTool.Highlight}Fill`] ?? (doc[`active${InkInkTool.Highlight}Fill`] = "rgba(0, 255, 255, 0.4)"); + doc.activeInkTool ?? (doc.activeInkTool = InkInkTool.Pen); + doc.activeEraserTool ?? (doc.activeEraserTool = InkEraserTool.Stroke); + doc.activeEraserWidth ?? (doc.activeEraserWidth = 20); doc.activeDash ?? (doc.activeDash === "0"); doc.fontSize ?? (doc.fontSize = "12px"); doc.fontFamily ?? (doc.fontFamily = "Arial"); @@ -1130,7 +1142,9 @@ pie title Minerals in my tap water } // eslint-disable-next-line prefer-arrow-callback -ScriptingGlobals.add(function NotRadiusEraser() { return Doc.ActiveTool !== InkTool.RadiusEraser; }, "is the active tool anything but the radius eraser"); +ScriptingGlobals.add(function activeInkTool() { return Doc.ActiveTool=== InkTool.Ink || DocumentView.Selected().some(dv => dv.layoutDoc.layout_isSvg); }, "is a pen tool or an ink stroke active"); +// eslint-disable-next-line prefer-arrow-callback +ScriptingGlobals.add(function NotRadiusEraser() { return Doc.ActiveTool !== InkTool.Eraser || Doc.ActiveEraser !== InkEraserTool.Radius; }, "is the active tool anything but the radius eraser"); // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function MySharedDocs() { return Doc.MySharedDocs; }, "document containing all shared Docs"); // eslint-disable-next-line prefer-arrow-callback diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 4231c2ca8..ca1cb8014 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -109,7 +109,7 @@ export namespace InteractionUtils { dash: string | undefined, scalexIn: number, scaleyIn: number, - shape: Gestures, + shape: Gestures | undefined, pevents: Property.PointerEvents, opacity: number, nodefs: boolean, @@ -136,7 +136,7 @@ export namespace InteractionUtils { const arrowLengthFactor = 5 * (markerScale || 0.5); const arrowNotchFactor = 2 * (markerScale || 0.5); return ( - + {' '} {/* setting the svg fill sets the arrowStart fill */} {nodefs ? null : ( @@ -186,7 +186,7 @@ export namespace InteractionUtils { opacity: 1.0, // opacity: strokeWidth !== width ? 0.5 : undefined, pointerEvents: pevents === 'all' ? 'visiblePainted' : pevents, - stroke: color ?? 'rgb(0, 0, 0)', + stroke: (color ?? 'rgb(0, 0, 0)') || 'transparent', strokeWidth, strokeLinecap: strokeLineCap, strokeDasharray: dashArray, diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 33d7d90a8..628097ca8 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -268,9 +268,9 @@ export class SettingsManager extends React.Component { formLabelPlacement="right" toggleType={ToggleType.SWITCH} onClick={() => { - Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels; + Doc.UserDoc().activeHideTextLabels = !Doc.UserDoc().activeHideTextLabels; }} - toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)} + toggleStatus={BoolCast(Doc.UserDoc().activeHideTextLabels)} size={Size.XSMALL} color={SettingsManager.userColor} /> diff --git a/src/client/util/SnappingManager.ts b/src/client/util/SnappingManager.ts index 5f6c7d9ac..2a150dc5a 100644 --- a/src/client/util/SnappingManager.ts +++ b/src/client/util/SnappingManager.ts @@ -1,4 +1,5 @@ import { observable, action, runInAction, makeObservable } from 'mobx'; +import { Gestures } from '../../pen-gestures/GestureTypes'; export enum freeformScrollMode { Pan = 'pan', @@ -29,6 +30,8 @@ export class SnappingManager { @observable _propertyWid: number = 0; @observable _printToConsole: boolean = false; @observable _hideDecorations: boolean = false; + @observable _keepGestureMode: boolean = false; // for whether primitive selection enters a one-shot or persistent mode + @observable _inkShape: Gestures | undefined = undefined; private constructor() { SnappingManager._manager = this; @@ -61,6 +64,8 @@ export class SnappingManager { public static get PropertiesWidth(){ return this.Instance._propertyWid; } // prettier-ignore public static get PrintToConsole() { return this.Instance._printToConsole; } // prettier-ignore public static get HideDecorations(){ return this.Instance._hideDecorations; } // prettier-ignore + public static get KeepGestureMode(){ return this.Instance._keepGestureMode; } // prettier-ignore + public static get InkShape() { return this.Instance._inkShape; } // prettier-ignore public static SetLongPress = (press: boolean) => runInAction(() => {this.Instance._longPress = press}); // prettier-ignore public static SetShiftKey = (down: boolean) => runInAction(() => {this.Instance._shiftKey = down}); // prettier-ignore @@ -78,6 +83,8 @@ export class SnappingManager { public static SetPropertiesWidth= (wid:number) =>runInAction(() => {this.Instance._propertyWid = wid}); // prettier-ignore public static SetPrintToConsole = (state:boolean) =>runInAction(() => {this.Instance._printToConsole = state}); // prettier-ignore public static SetHideDecorations= (state:boolean) =>runInAction(() => {this.Instance._hideDecorations = state}); // prettier-ignore + public static SetKeepGestureMode= (state:boolean) =>runInAction(() => {this.Instance._keepGestureMode = state}); // prettier-ignore + public static SetInkShape = (shape?:Gestures)=>runInAction(() => {this.Instance._inkShape = shape}); // prettier-ignore public static userColor: string | undefined; public static userVariantColor: string | undefined; diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx index 11425e477..99738052d 100644 --- a/src/client/views/FilterPanel.tsx +++ b/src/client/views/FilterPanel.tsx @@ -102,7 +102,7 @@ const HotKeyIconButton: React.FC = observer(({ hotKey /*, sel return (
{ e.stopPropagation(); state.startEditing(); diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 59d37df91..2d6cd03e0 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -2,9 +2,9 @@ import * as fitCurve from 'fit-curve'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyFilter, returnEmptyString, returnFalse, setupMoveUpEvents } from '../../ClientUtils'; +import { setupMoveUpEvents } from '../../ClientUtils'; import { emptyFunction, intersectRect } from '../../Utils'; -import { Doc, Opt, returnEmptyDoclist } from '../../fields/Doc'; +import { Doc } from '../../fields/Doc'; import { InkData, InkField, InkTool } from '../../fields/InkField'; import { NumCast } from '../../fields/Types'; import { Gestures } from '../../pen-gestures/GestureTypes'; @@ -14,27 +14,25 @@ import { DocumentType } from '../documents/DocumentTypes'; import { Docs } from '../documents/Documents'; import { InteractionUtils } from '../util/InteractionUtils'; import { ScriptingGlobals } from '../util/ScriptingGlobals'; -import { Transform } from '../util/Transform'; +import { SnappingManager } from '../util/SnappingManager'; import { undoable } from '../util/UndoManager'; import './GestureOverlay.scss'; import { InkingStroke } from './InkingStroke'; import { ObservableReactComponent } from './ObservableReactComponent'; -import { returnEmptyDocViewList } from './StyleProvider'; import { CollectionFreeFormView } from './collections/collectionFreeForm'; import { - ActiveArrowEnd, - ActiveArrowScale, - ActiveArrowStart, - ActiveDash, - ActiveFillColor, - ActiveInkBezierApprox, + ActiveInkArrowEnd, + ActiveInkArrowScale, + ActiveInkArrowStart, ActiveInkColor, + ActiveInkDash, + ActiveInkFillColor, ActiveInkWidth, DocumentView, - SetActiveArrowStart, - SetActiveDash, - SetActiveFillColor, + SetActiveInkArrowStart, SetActiveInkColor, + SetActiveInkDash, + SetActiveInkFillColor, SetActiveInkWidth, } from './nodes/DocumentView'; export enum ToolglassTools { @@ -57,18 +55,14 @@ export class GestureOverlay extends ObservableReactComponent = undefined; @observable public SavedColor?: string = undefined; @observable public SavedWidth?: number = undefined; @observable public Tool: ToolglassTools = ToolglassTools.None; - @observable public KeepPrimitiveMode = false; // for whether primitive selection enters a one-shot or persistent mode @observable private _thumbX?: number = undefined; @observable private _thumbY?: number = undefined; @observable private _pointerY?: number = undefined; @observable private _points: { X: number; Y: number }[] = []; - @observable private _strokes: InkData[] = []; - @observable private _palette?: JSX.Element = undefined; @observable private _clipboardDoc?: JSX.Element = undefined; @computed private get height(): number { @@ -97,7 +91,7 @@ export class GestureOverlay extends ObservableReactComponent { (document.activeElement as HTMLElement)?.blur(); if (!(e.target as HTMLElement)?.className?.toString().startsWith('lm_')) { - if ([InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + if (Doc.ActiveTool === InkTool.Ink) { this._points.push({ X: e.clientX, Y: e.clientY }); setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); } @@ -123,13 +117,9 @@ export class GestureOverlay extends ObservableReactComponent ({ X: p.X - B.left, Y: p.Y - B.top })); const { Name, Score } = - (this.InkShape - ? new Result(this.InkShape, 1, Date.now) + (SnappingManager.InkShape + ? new Result(SnappingManager.InkShape, 1, Date.now) : Doc.UserDoc().recognizeGestures && points.length > 2 ? GestureUtils.GestureRecognizer.Recognize([points]) : undefined) ?? @@ -292,6 +282,7 @@ export class GestureOverlay extends ObservableReactComponent { - const b = { left: -20000, right: 20000, top: -20000, bottom: 20000, width: 40000, height: 40000 }; // this.getBounds(l, true); - return ( - - {InteractionUtils.CreatePolyline( - l, - b.left, - b.top, - strokeColor, - width, - width, - 'miter', - 'round', - ActiveInkBezierApprox(), - 'none' /* ActiveFillColor() */, - ActiveArrowStart(), - ActiveArrowEnd(), - ActiveArrowScale(), - ActiveDash(), - 1, - 1, - this.InkShape as Gestures, - 'none', - 1.0, - false - )} - - ); - }), - this._points.length <= 1 ? null : ( - - {InteractionUtils.CreatePolyline( - this._points.map(p => ({ X: p.X - (rect?.x || 0), Y: p.Y - (rect?.y || 0) })), - B.left, - B.top, - ActiveInkColor(), - width, - width, - 'miter', - 'round', - '', - 'none' /* ActiveFillColor() */, - ActiveArrowStart(), - ActiveArrowEnd(), - ActiveArrowScale(), - ActiveDash(), - 1, - 1, - this.InkShape as Gestures, - 'none', - 1.0, - false - )} - - ), - ], + this._points.length <= 1 ? null : ( + + {InteractionUtils.CreatePolyline( + this._points.map(p => ({ X: p.X - (rect?.x || 0), Y: p.Y - (rect?.y || 0) })), + B.left, + B.top, + strokeColor, + width, + width, + 'miter', + 'round', + '', + 'none' /* ActiveFillColor() */, + ActiveInkArrowStart(), + ActiveInkArrowEnd(), + ActiveInkArrowScale(), + ActiveInkDash(), + 1, + 1, + SnappingManager.InkShape, + 'none', + 1.0, + false + )} + + ), ]; } - screenToLocalTransform = () => new Transform(-(this._thumbX ?? 0), -(this._thumbY ?? 0) + this.height, 1); - return300 = () => 300; - @action - public openFloatingDoc = (doc: Doc) => { - this._clipboardDoc = ( - - ); - }; @action public closeFloatingDoc = () => { @@ -694,10 +626,10 @@ ScriptingGlobals.add(function setPen(width: string, color: string, fill: string, SetActiveInkColor(color); GestureOverlay.Instance.SavedWidth = ActiveInkWidth(); SetActiveInkWidth(width); - SetActiveFillColor(fill); - SetActiveArrowStart(arrowStart); - SetActiveArrowStart(arrowEnd); - SetActiveDash(dash); + SetActiveInkFillColor(fill); + SetActiveInkArrowStart(arrowStart); + SetActiveInkArrowStart(arrowEnd); + SetActiveInkDash(dash); }); }); // eslint-disable-next-line prefer-arrow-callback diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index d7d8e9506..f16338361 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -2,7 +2,7 @@ import { random } from 'lodash'; import { action } from 'mobx'; import { Doc, DocListCast } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; -import { InkTool } from '../../fields/InkField'; +import { InkInkTool, InkTool } from '../../fields/InkField'; import { ScriptField } from '../../fields/ScriptField'; import { Cast, PromiseValue } from '../../fields/Types'; import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; @@ -280,10 +280,10 @@ export class KeyManager { } break; case 'e': - Doc.ActiveTool = [InkTool.StrokeEraser, InkTool.SegmentEraser, InkTool.RadiusEraser].includes(Doc.ActiveTool) ? InkTool.None : InkTool.StrokeEraser; + Doc.ActiveTool = Doc.ActiveTool === InkTool.Eraser ? InkTool.None : InkTool.Eraser; break; case 'p': - Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; + Doc.ActiveTool = Doc.ActiveTool === InkTool.Ink ? InkTool.None : InkTool.Ink; break; case 'r': preventDefault = false; @@ -378,7 +378,8 @@ export class KeyManager { UndoManager.Redo(); break; case 'p': - Doc.ActiveTool = InkTool.Write; + Doc.ActiveInk = InkInkTool.Write; + Doc.ActiveTool = InkTool.Ink; break; default: } diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 270266a94..5199eb02b 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -470,14 +470,13 @@ export class InkingStroke extends ViewBoxAnnotatableComponent() className="inkStroke" style={{ transform: isInkMask ? `rotate(-${NumCast(this._props.LocalRotation?.() ?? 0)}deg) translate(${InkingStroke.MaskDim / 2}px, ${InkingStroke.MaskDim / 2}px)` : undefined, - // mixBlendMode: this.layoutDoc.tool === InkTool.Highlighter ? 'multiply' : 'unset', cursor: this._props.isSelected() ? 'default' : undefined, }} {...interactions}> {clickableLine(this.onPointerDown, isInkMask)} {isInkMask ? null : inkLine} - {!closed || this.dataDoc[this.fieldKey + '_showLabel'] === false || (!RTFCast(this.dataDoc.text)?.Text && !this.dataDoc[this.fieldKey + '_showLabel'] && (!this._props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : ( + {!closed || this.dataDoc[this.fieldKey + '_showLabel'] === false || (!RTFCast(this.dataDoc.text)?.Text && !this.dataDoc[this.fieldKey + '_showLabel'] && (!this._props.isSelected() || Doc.UserDoc().activeHideTextLabels)) ? null : (
{ // if (this._showPalette === false) AnnotationPalette.Instance.resetPalette(true); }; togglePen = () => { - Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; + Doc.ActiveTool = Doc.ActiveTool === InkTool.Ink ? InkTool.None : InkTool.Ink; }; toggleExplore = () => SnappingManager.SetExploreMode(!SnappingManager.ExploreMode); @@ -332,7 +332,7 @@ export class LightboxView extends ObservableReactComponent { {toggleBtn('lightboxView-navBtn', 'toggle reading view', BoolCast(this._doc?._layout_fitWidth), 'book-open', 'book', this.toggleFitWidth)} {toggleBtn('lightboxView-tabBtn', 'open document in a tab', false, 'file-export', '', this.downloadDoc)} {toggleBtn('lightboxView-paletteBtn', 'toggle annotation palette', this._showPalette === true, 'palette', '', this.togglePalette)} - {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Pen, 'pen', '', this.togglePen)} + {toggleBtn('lightboxView-penBtn', 'toggle pen annotation', Doc.ActiveTool === InkTool.Ink, 'pen', '', this.togglePen)} {toggleBtn('lightboxView-exploreBtn', 'toggle navigate only mode', SnappingManager.ExploreMode, 'globe-americas', '', this.toggleExplore)}
); diff --git a/src/client/views/StyleProp.ts b/src/client/views/StyleProp.ts index 44d3bf757..56367e70b 100644 --- a/src/client/views/StyleProp.ts +++ b/src/client/views/StyleProp.ts @@ -19,7 +19,9 @@ export enum StyleProp { FontColor = 'fontColor', // color o tet FontSize = 'fontSize', // size of text font FontFamily = 'fontFamily', // font family of text - FontWeight = 'fontWeight', // font weight of text + FontWeight = 'fontWeight', // font weight of text (eg bold) + FontStyle = 'fontStyle', // font style of text (eg italic) + FontDecoration = 'fontDecoration', // text decoration of text (eg underline) Highlighting = 'highlighting', // border highlighting ContextMenuItems = 'contextMenuItems', // menu items to add to context menu AnchorMenuItems = 'anchorMenuItems', diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 12c032964..3a5f57908 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -25,6 +25,7 @@ import { styleProviderQuiz } from './StyleProviderQuiz'; import { StyleProp } from './StyleProp'; import './StyleProvider.scss'; import { TagsView } from './TagsView'; +import { InkInkTool } from '../../fields/InkField'; function toggleLockedPosition(doc: Doc) { UndoManager.RunInBatch(() => Doc.toggleLockedPosition(doc), 'toggleBackground'); @@ -171,7 +172,9 @@ export function DefaultStyleProvider(doc: Opt, props: Opt activeTool() === InkTool.Pen, () => penMode], + activePen: [() => activeTool() === InkTool.Ink, () => penMode], }, 'documentation.png', () => TopBar.Instance.FlipDocumentationIcon() @@ -187,7 +187,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent activeTool() === InkTool.Eraser, () => eraserMode], - activePen: [() => activeTool() !== InkTool.Pen, () => viewedLink], + activePen: [() => activeTool() !== InkTool.Ink, () => viewedLink], }); // prettier-ignore // const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index ff711314b..f2a5780c5 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -10,7 +10,7 @@ import { DateField } from '../../../../fields/DateField'; import { Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../../fields/Doc'; import { DocData, Height, Width } from '../../../../fields/DocSymbols'; import { Id } from '../../../../fields/FieldSymbols'; -import { InkData, InkField, InkTool, Segment } from '../../../../fields/InkField'; +import { InkData, InkEraserTool, InkField, InkInkTool, InkTool, Segment } from '../../../../fields/InkField'; import { List } from '../../../../fields/List'; import { RichTextField } from '../../../../fields/RichTextField'; import { listSpec } from '../../../../fields/Schema'; @@ -36,7 +36,20 @@ import { ContextMenu } from '../../ContextMenu'; import { InkingStroke } from '../../InkingStroke'; import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView'; import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp'; -import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveEraserWidth, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, DocumentView, SetActiveInkColor, SetActiveInkWidth } from '../../nodes/DocumentView'; +import { + ActiveInkArrowEnd, + ActiveInkArrowStart, + ActiveInkDash, + ActiveEraserWidth, + ActiveInkFillColor, + ActiveInkBezierApprox, + ActiveInkColor, + ActiveInkWidth, + ActiveIsInkMask, + DocumentView, + SetActiveInkColor, + SetActiveInkWidth, +} from '../../nodes/DocumentView'; import { FieldViewProps } from '../../nodes/FieldView'; import { FocusViewOptions } from '../../nodes/FocusViewOptions'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; @@ -497,13 +510,9 @@ export class CollectionFreeFormView extends CollectionSubView = this.getRadiusEraserIntersections({ X: currPoint.X - delta[0], Y: currPoint.Y - delta[1] }, currPoint); strokeMap.forEach((intersects, stroke) => { if (!this._deleteList.includes(stroke)) { @@ -614,13 +624,16 @@ export class CollectionFreeFormView extends CollectionSubView - this.forceStrokeGesture( - e, - Gestures.Stroke, - segment.reduce((data, curve) => [...data, ...curve.points.map(p => stroke.ComponentView?.ptToScreen?.({ X: p.x, Y: p.y }) ?? { X: 0, Y: 0 })], [] as PointData[]) - ) - ); + segments?.forEach(segment => { + const points = segment.reduce((data, curve) => [...data, ...curve.points.map(p => stroke.ComponentView?.ptToScreen?.({ X: p.x, Y: p.y }) ?? { X: 0, Y: 0 })], [] as PointData[]); + const bounds = InkField.getBounds(points); + const B = this.screenToFreeformContentsXf.transformBounds(bounds.left, bounds.top, bounds.width, bounds.height); + const inkDoc = this.createInkDoc(points, B); + ['color', 'fillColor', 'stroke_width', 'stroke_dash', 'stroke_bezier'].forEach(field => { + inkDoc[DocData][field] = stroke.dataDoc[field]; + }); + this.addDocument(inkDoc); + }); } stroke.layoutDoc.opacity = 0; stroke.layoutDoc.dontIntersect = true; @@ -632,7 +645,7 @@ export class CollectionFreeFormView extends CollectionSubView { @@ -1195,14 +1208,14 @@ export class CollectionFreeFormView extends CollectionSubView - {Doc.ActiveTool === InkTool.RadiusEraser && this._showEraserCircle && ( + {Doc.ActiveTool === InkTool.Eraser && Doc.ActiveEraser === InkEraserTool.Radius && this._showEraserCircle && (
e.preventDefault()} onScroll={e => { diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 013b18a97..40144c4ce 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -3,7 +3,7 @@ import { Colors } from 'browndash-components'; import { runInAction } from 'mobx'; import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; -import { InkTool } from '../../../fields/InkField'; +import { InkEraserTool, InkInkTool, InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; @@ -16,21 +16,20 @@ import { SnappingManager } from '../../util/SnappingManager'; import { UndoManager, undoable } from '../../util/UndoManager'; import { GestureOverlay } from '../GestureOverlay'; import { InkTranscription } from '../InkTranscription'; -import { InkingStroke } from '../InkingStroke'; import { PropertiesView } from '../PropertiesView'; import { CollectionFreeFormView } from '../collections/collectionFreeForm'; import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; import { ActiveEraserWidth, - ActiveFillColor, + ActiveInkFillColor, ActiveInkColor, - ActiveInkHideTextLabels, + ActiveHideTextLabels, ActiveInkWidth, ActiveIsInkMask, DocumentView, - SetActiveFillColor, + SetActiveInkFillColor, SetActiveInkColor, - SetActiveInkHideTextLabels, + SetactiveHideTextLabels, SetActiveInkWidth, SetActiveIsInkMask, SetEraserWidth, @@ -60,20 +59,21 @@ ScriptingGlobals.add(function setView(view: string, getSelected: boolean) { // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) { const selectedViews = DocumentView.Selected(); + const selectedDoc = selectedViews.lastElement()?.Document; + const defaultFill = selectedDoc?._layout_isSvg ? () => StrCast(selectedDoc[DocData].fillColor) : !Doc.ActiveTool || Doc.ActiveTool === InkTool.None ? () => StrCast(Doc.UserDoc().textBackgroundColor, 'transparent') : () => ActiveInkFillColor(); + const setDefaultFill = !Doc.ActiveTool || Doc.ActiveTool === InkTool.None ? (c: string) => { Doc.UserDoc().textBackgroundColor = c; }: SetActiveInkFillColor; // prettier-ignore if (Doc.ActiveTool !== InkTool.None && !selectedViews.lastElement()?.Document._layout_isSvg) { - if (checkResult) { - return ActiveFillColor(); - } - SetActiveFillColor(color ?? 'transparent'); + if (checkResult) return defaultFill(); + setDefaultFill(color ?? 'transparent'); } else if (selectedViews.length) { if (checkResult) { const selView = selectedViews.lastElement(); const fieldKey = selView.Document._layout_isSvg ? 'fillColor' : 'backgroundColor'; const layoutFrameNumber = Cast(selView.containerViewPath?.().lastElement()?.Document?._currentFrame, 'number'); // frame number that container is at which determines layout frame values const contentFrameNumber = Cast(selView.Document?._currentFrame, 'number', layoutFrameNumber ?? null); // frame number that content is at which determines what content is displayed - return CollectionFreeFormDocumentView.getStringValues(selView?.Document, contentFrameNumber)[fieldKey] ?? 'transparent'; + return CollectionFreeFormDocumentView.getStringValues(selView?.Document, contentFrameNumber)[fieldKey] || defaultFill(); } - selectedViews.some(dv => dv.ComponentView instanceof InkingStroke) && SetActiveFillColor(color ?? 'transparent'); + setDefaultFill(color ?? 'transparent'); selectedViews.forEach(dv => { const fieldKey = dv.Document._layout_isSvg ? 'fillColor' : 'backgroundColor'; const layoutFrameNumber = Cast(dv.containerViewPath?.().lastElement()?.Document?._currentFrame, 'number'); // frame number that container is at which determines layout frame values @@ -92,10 +92,13 @@ ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: b } else { const selected = DocumentView.SelectedDocs().length ? DocumentView.SelectedDocs() : LinkManager.Instance.currentLink ? [LinkManager.Instance.currentLink] : []; if (checkResult) { - return selected.lastElement()?._backgroundColor ?? 'transparent'; + return selected.lastElement()?._backgroundColor ?? defaultFill(); } - SetActiveFillColor(color ?? 'transparent'); - selected.forEach(doc => { doc[DocData].backgroundColor = color; }); // prettier-ignore + if (!selected.length) setDefaultFill(color ?? 'transparent'); + else + selected.forEach(doc => { + doc[DocData][doc._layout_isSvg ? 'fillColor' : 'backgroundColor'] = color; + }); } return ''; }); @@ -330,7 +333,7 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh return undefined; }); -type attrname = 'noAutoLink' | 'dictation' | 'fitBox' | 'bold' | 'italics' | 'elide' | 'underline' | 'left' | 'center' | 'right' | 'vcent' | 'bullet' | 'decimal'; +type attrname = 'noAutoLink' | 'dictation' | 'fitBox' | 'bold' | 'italic' | 'elide' | 'underline' | 'left' | 'center' | 'right' | 'vcent' | 'bullet' | 'decimal'; type attrfuncs = [attrname, { checkResult: () => boolean; toggle?: () => unknown }]; // eslint-disable-next-line prefer-arrow-callback @@ -360,10 +363,10 @@ ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?: toggle: () => editorView && RichTextMenu.Instance?.toggleNoAutoLinkAnchor()}], ['bold', { checkResult: () => (editorView ? RichTextMenu.Instance?.bold??false : (Doc.UserDoc().fontWeight === 'bold')), toggle: editorView ? RichTextMenu.Instance?.toggleBold : () => { Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === 'bold' ? undefined : 'bold'; }}], - ['italics', { checkResult: () => (editorView ? RichTextMenu.Instance?.italics ?? false : (Doc.UserDoc().fontStyle === 'italics')), - toggle: editorView ? RichTextMenu.Instance?.toggleItalics : () => { Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italics' ? undefined : 'italics'; }}], - ['underline', { checkResult: () => (editorView ? RichTextMenu.Instance?.underline ?? false: (Doc.UserDoc().textDecoration === 'underline')), - toggle: editorView ? RichTextMenu.Instance?.toggleUnderline : () => { Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === 'underline' ? undefined : 'underline'; } }]] + ['italic', { checkResult: () => (editorView ? RichTextMenu.Instance?.italic ?? false : (Doc.UserDoc().fontStyle === 'italic')), + toggle: editorView ? RichTextMenu.Instance?.toggleItalic : () => { Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italic' ? undefined : 'italic'; }}], + ['underline', { checkResult: () => (editorView ? RichTextMenu.Instance?.underline ?? false: (Doc.UserDoc().fontDecoration === 'underline')), + toggle: editorView ? RichTextMenu.Instance?.toggleUnderline : () => { Doc.UserDoc().fontDecoration = Doc.UserDoc().fontDecoration === 'underline' ? undefined : 'underline'; } }]] const map = new Map(attrs.concat(alignments).concat(listings)); if (checkResult) { @@ -373,43 +376,46 @@ ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?: return undefined; }); -function setActiveTool(toolIn: InkTool | Gestures, keepPrim: boolean, checkResult?: boolean) { +function setActiveTool(tool: InkTool | InkEraserTool | InkInkTool | Gestures, keepPrim: boolean, checkResult?: boolean) { InkTranscription.Instance?.createInkGroup(); - const tool = toolIn === InkTool.Eraser ? Doc.UserDoc().activeEraserTool : toolIn; if (checkResult) { - return ((Doc.ActiveTool === tool || (Doc.UserDoc().activeEraserTool === tool && (tool === toolIn || Doc.ActiveTool === tool))) && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool - ? GestureOverlay.Instance?.KeepPrimitiveMode || ![Gestures.Circle, Gestures.Line, Gestures.Rectangle].includes(tool as Gestures) + return Doc.ActiveTool === tool || Doc.ActiveEraser === tool || Doc.ActiveInk === tool || SnappingManager.InkShape === tool + ? true //SnappingManager.KeepGestureMode || ![Gestures.Circle, Gestures.Line, Gestures.Rectangle].includes(tool as Gestures) : false; } runInAction(() => { + const eraserTool = tool === InkTool.Eraser ? Doc.ActiveEraser : [InkEraserTool.Stroke, InkEraserTool.Radius, InkEraserTool.Segment].includes(tool as InkEraserTool) ? (tool as InkEraserTool) : undefined; + const inkTool = tool === InkTool.Ink ? Doc.ActiveInk : [InkInkTool.Pen, InkInkTool.Write, InkInkTool.Highlight].includes(tool as InkInkTool) ? (tool as InkInkTool) : undefined; if (GestureOverlay.Instance) { - GestureOverlay.Instance.KeepPrimitiveMode = keepPrim; + SnappingManager.SetKeepGestureMode(keepPrim); } if (Object.values(Gestures).includes(tool as Gestures)) { - if (GestureOverlay.Instance.InkShape === tool && !keepPrim) { + if (SnappingManager.InkShape === tool && !keepPrim) { Doc.ActiveTool = InkTool.None; - GestureOverlay.Instance.InkShape = undefined; + SnappingManager.SetInkShape(undefined); } else { - Doc.ActiveTool = InkTool.Pen; - GestureOverlay.Instance.InkShape = tool as Gestures; + Doc.ActiveTool = InkTool.Ink; + SnappingManager.SetInkShape(tool as Gestures); } - } else if (tool) { - if (Doc.UserDoc().ActiveTool === tool) { + } else if (eraserTool) { + if (Doc.ActiveTool === InkTool.Eraser && Doc.ActiveTool === tool) { Doc.ActiveTool = InkTool.None; } else { - if ([InkTool.StrokeEraser, InkTool.RadiusEraser, InkTool.SegmentEraser].includes(tool as InkTool)) { - Doc.UserDoc().activeEraserTool = tool; - } - // pen or eraser - if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) { - Doc.ActiveTool = InkTool.None; - } else { - Doc.ActiveTool = tool as InkTool; - GestureOverlay.Instance.InkShape = undefined; - } + Doc.ActiveEraser = eraserTool; + Doc.ActiveTool = InkTool.Eraser; + SnappingManager.SetInkShape(undefined); + } + } else if (inkTool) { + if (Doc.ActiveTool === InkTool.Ink && Doc.ActiveTool === tool) { + Doc.ActiveTool = InkTool.None; + } else { + Doc.ActiveInk = inkTool; + Doc.ActiveTool = InkTool.Ink; + SnappingManager.SetInkShape(undefined); } } else { - Doc.ActiveTool = InkTool.None; + if ((Doc.ActiveTool === tool || !tool) && !keepPrim) Doc.ActiveTool = InkTool.None; + else Doc.ActiveTool = tool as InkTool; } }); return undefined; @@ -419,44 +425,44 @@ ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode'); // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function activeEraserTool() { - return StrCast(Doc.UserDoc().activeEraserTool, InkTool.StrokeEraser); + return StrCast(Doc.UserDoc().activeEraserTool, InkEraserTool.Stroke); }, 'returns the current eraser tool'); // toggle: Set overlay status of selected document // eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: string | number, checkResult?: boolean) { - const selected = DocumentView.SelectedDocs().lastElement() ?? Doc.UserDoc(); + const selected = DocumentView.SelectedDocs().lastElement(); // prettier-ignore const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', { checkResult: () => number|boolean|string|undefined; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([ ['inkMask', { checkResult: () => ((selected?._layout_isSvg ? BoolCast(selected[DocData].stroke_isInkMask) : ActiveIsInkMask())), setInk: (doc: Doc) => { doc[DocData].stroke_isInkMask = !doc.stroke_isInkMask; }, - setMode: () => selected?.type !== DocumentType.INK && SetActiveIsInkMask(!ActiveIsInkMask()), + setMode: () => SetActiveIsInkMask(value ? true : false) }], ['labels', { - checkResult: () => ((selected?._stroke_showLabel ? BoolCast(selected[DocData].stroke_showLabel) : ActiveInkHideTextLabels())), - setInk: (doc: Doc) => { doc[DocData].stroke_showLabel = !doc.stroke_showLabel; }, - setMode: () => selected?.type !== DocumentType.INK && SetActiveInkHideTextLabels(!ActiveInkHideTextLabels()), + checkResult: () => ((selected?._layout_isSvg ? BoolCast(selected[DocData].stroke_showLabel) : !ActiveHideTextLabels())), + setInk: (doc: Doc) => { doc[DocData].stroke_showLabel = value; }, + setMode: () => SetactiveHideTextLabels(value? false : true), }], ['fillColor', { - checkResult: () => (selected?._layout_isSvg ? StrCast(selected[DocData].fillColor) : ActiveFillColor() ?? "transparent"), + checkResult: () => (selected?._layout_isSvg ? StrCast(selected[DocData].fillColor) : ActiveInkFillColor() ?? "transparent"), setInk: (doc: Doc) => { doc[DocData].fillColor = StrCast(value); }, - setMode: () => SetActiveFillColor(StrCast(value)), + setMode: () => SetActiveInkFillColor(StrCast(value)), }], [ 'strokeWidth', { checkResult: () => (selected?._layout_isSvg ? NumCast(selected[DocData].stroke_width) : ActiveInkWidth()), setInk: (doc: Doc) => { doc[DocData].stroke_width = NumCast(value); }, - setMode: () => { SetActiveInkWidth(value.toString()); selected?.type === DocumentType.INK && setActiveTool( GestureOverlay.Instance.InkShape ?? InkTool.Pen, true, false);}, + setMode: () => SetActiveInkWidth(value.toString()), }], ['strokeColor', { checkResult: () => (selected?._layout_isSvg? StrCast(selected[DocData].color) : ActiveInkColor()), setInk: (doc: Doc) => { doc[DocData].color = String(value); }, - setMode: () => { SetActiveInkColor(StrCast(value)); selected?.type === DocumentType.INK && setActiveTool(GestureOverlay.Instance.InkShape ?? InkTool.Pen, true, false);}, + setMode: () => SetActiveInkColor(StrCast(value)) }], [ 'eraserWidth', { checkResult: () => ActiveEraserWidth() === 0 ? 1 : ActiveEraserWidth(), setInk: (doc: Doc) => { }, - setMode: () => { SetEraserWidth(+value);}, + setMode: () => SetEraserWidth(+value), }] ]); diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx index 3eb99f47a..8115bafbf 100644 --- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx +++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { action } from 'mobx'; import * as React from 'react'; import { Doc } from '../../../../fields/Doc'; @@ -35,10 +33,10 @@ export function ButtonMenu() {
{ e.stopPropagation(); - Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen; + Doc.ActiveTool = Doc.ActiveTool === InkTool.Ink ? InkTool.None : InkTool.Ink; }} />
{this.RenderCutoffProvider(this.Document) ? (
) : ( val.lower)).omit} // prettier-ignore Document={this._props.Document} renderDepth={this._props.renderDepth} diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index d79a37181..7925410e2 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -73,7 +73,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { return
; } marqueeDown = (e: React.PointerEvent) => { - if (!e.altKey && e.button === 0 && NumCast(this.Document._freeform_scale, 1) <= NumCast(this.Document.freeform_scaleMin, 1) && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + if (!e.altKey && e.button === 0 && NumCast(this.Document._freeform_scale, 1) <= NumCast(this.Document.freeform_scaleMin, 1) && this._props.isContentActive() && Doc.ActiveTool !== InkTool.Ink) { setupMoveUpEvents( this, e, @@ -453,7 +453,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { @action onPointerDown = (e: React.PointerEvent): void => { if ((this.Document._freeform_scale || 1) !== 1) return; - if (!e.altKey && e.button === 0 && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + if (!e.altKey && e.button === 0 && this._props.isContentActive() && Doc.ActiveTool !== InkTool.Ink) { this._props.select(false); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); this._marqueeing = [e.clientX, e.clientY]; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index eb7f333b9..30f9e6363 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -380,7 +380,7 @@ export class DocumentViewInternal extends DocComponent { - if (e.buttons !== 1 || [InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) return; + if (e.buttons !== 1 || Doc.ActiveTool === InkTool.Ink) return; if (!ClientUtils.isClick(e.clientX, e.clientY, this._downX, this._downY, Date.now())) { this.cleanupPointerEvents(); @@ -1560,55 +1560,45 @@ export class DocumentView extends DocComponent() { } else func(); } } - -export function ActiveFillColor(): string { - const dv = DocumentView.Selected().lastElement() ?.Document._layout_isSvg ? DocumentView.Selected().lastElement() : undefined; - return StrCast(dv?.Document.fillColor, StrCast(ActiveInkPen()?.activeFillColor, "")); -} // prettier-ignore -export function ActiveInkPen(): Doc { return Doc.UserDoc(); } // prettier-ignore -export function ActiveInkColor(): string { return StrCast(ActiveInkPen()?.activeInkColor, 'black'); } // prettier-ignore -export function ActiveIsInkMask(): boolean { return BoolCast(ActiveInkPen()?.activeIsInkMask, false); } // prettier-ignore -export function ActiveInkHideTextLabels(): boolean { return BoolCast(ActiveInkPen().activeInkHideTextLabels, false); } // prettier-ignore -export function ActiveArrowStart(): string { return StrCast(ActiveInkPen()?.activeArrowStart, ''); } // prettier-ignore -export function ActiveArrowEnd(): string { return StrCast(ActiveInkPen()?.activeArrowEnd, ''); } // prettier-ignore -export function ActiveArrowScale(): number { return NumCast(ActiveInkPen()?.activeArrowScale, 1); } // prettier-ignore -export function ActiveDash(): string { return StrCast(ActiveInkPen()?.activeDash, '0'); } // prettier-ignore -export function ActiveInkWidth(): number { return Number(ActiveInkPen()?.activeInkWidth); } // prettier-ignore -export function ActiveInkBezierApprox(): string { return StrCast(ActiveInkPen()?.activeInkBezier); } // prettier-ignore -export function ActiveEraserWidth(): number { return Number(ActiveInkPen()?.eraserWidth ?? 25); } // prettier-ignore - +export function ActiveHideTextLabels(): boolean { return BoolCast(Doc.UserDoc().activeHideTextLabels, false); } // prettier-ignore +export function ActiveIsInkMask(): boolean { return BoolCast(Doc.UserDoc()?.activeIsInkMask, false); } // prettier-ignore +export function ActiveEraserWidth(): number { return Number(Doc.UserDoc()?.activeEraserWidth ?? 25); } // prettier-ignore + +export function ActiveInkFillColor(): string { return StrCast(Doc.UserDoc()?.[`active${Doc.ActiveInk}Fill`]); } // prettier-ignore +export function ActiveInkColor(): string { return StrCast(Doc.UserDoc()?.[`active${Doc.ActiveInk}Color`], 'black'); } // prettier-ignore +export function ActiveInkArrowStart(): string { return StrCast(Doc.UserDoc()?.[`active${Doc.ActiveInk}ArrowStart`], ''); } // prettier-ignore +export function ActiveInkArrowEnd(): string { return StrCast(Doc.UserDoc()?.[`active${Doc.ActiveInk}ArrowEnd`], ''); } // prettier-ignore +export function ActiveInkArrowScale(): number { return NumCast(Doc.UserDoc()?.[`active${Doc.ActiveInk}ArrowScale`], 1); } // prettier-ignore +export function ActiveInkDash(): string { return StrCast(Doc.UserDoc()?.[`active${Doc.ActiveInk}Dash`], '0'); } // prettier-ignore +export function ActiveInkWidth(): number { return Number(Doc.UserDoc()?.[`active${Doc.ActiveInk}Width`]); } // prettier-ignore +export function ActiveInkBezierApprox(): string { return StrCast(Doc.UserDoc()[`active${Doc.ActiveInk}Bezier`]); } // prettier-ignore + +export function SetActiveIsInkMask(value: boolean) { Doc.UserDoc() && (Doc.UserDoc().activeIsInkMask = value); } // prettier-ignore +export function SetactiveHideTextLabels(value: boolean) { Doc.UserDoc() && (Doc.UserDoc().activeHideTextLabels = value); } // prettier-ignore +export function SetEraserWidth(width: number): void { Doc.UserDoc() && (Doc.UserDoc().activeEraserWidth = width); } // prettier-ignore export function SetActiveInkWidth(width: string): void { - !isNaN(parseInt(width)) && ActiveInkPen() && (ActiveInkPen().activeInkWidth = width); + !isNaN(parseInt(width)) && Doc.UserDoc() && (Doc.UserDoc()[`active${Doc.ActiveInk}Width`] = width); } -export function SetActiveBezierApprox(bezier: string): void { - ActiveInkPen() && (ActiveInkPen().activeInkBezier = isNaN(parseInt(bezier)) ? '' : bezier); +export function SetActiveInkBezierApprox(bezier: string): void { + Doc.UserDoc() && (Doc.UserDoc()[`active${Doc.ActiveInk}Bezier`] = isNaN(parseInt(bezier)) ? '' : bezier); } export function SetActiveInkColor(value: string) { - ActiveInkPen() && (ActiveInkPen().activeInkColor = value); -} -export function SetActiveIsInkMask(value: boolean) { - ActiveInkPen() && (ActiveInkPen().activeIsInkMask = value); -} -export function SetActiveInkHideTextLabels(value: boolean) { - ActiveInkPen() && (ActiveInkPen().activeInkHideTextLabels = value); -} -export function SetActiveFillColor(value: string) { - ActiveInkPen() && (ActiveInkPen().activeFillColor = value); + Doc.UserDoc() && (Doc.UserDoc()[`active${Doc.ActiveInk}Color`] = value); } -export function SetActiveArrowStart(value: string) { - ActiveInkPen() && (ActiveInkPen().activeArrowStart = value); +export function SetActiveInkFillColor(value: string) { + Doc.UserDoc() && (Doc.UserDoc()[`active${Doc.ActiveInk}Fill`] = value); } -export function SetActiveArrowEnd(value: string) { - ActiveInkPen() && (ActiveInkPen().activeArrowEnd = value); +export function SetActiveInkArrowStart(value: string) { + Doc.UserDoc() && (Doc.UserDoc()[`active${Doc.ActiveInk}ArrowStart`] = value); } -export function SetActiveArrowScale(value: number) { - ActiveInkPen() && (ActiveInkPen().activeArrowScale = value); +export function SetActiveInkArrowEnd(value: string) { + Doc.UserDoc() && (Doc.UserDoc()[`active${Doc.ActiveInk}ArrowEnd`] = value); } -export function SetActiveDash(dash: string): void { - !isNaN(parseInt(dash)) && ActiveInkPen() && (ActiveInkPen().activeDash = dash); +export function SetActiveInkArrowScale(value: number) { + Doc.UserDoc() && (Doc.UserDoc()[`active${Doc.ActiveInk}ArrowScale`] = value); } -export function SetEraserWidth(width: number): void { - ActiveInkPen() && (ActiveInkPen().eraserWidth = width); +export function SetActiveInkDash(dash: string): void { + !isNaN(parseInt(dash)) && Doc.UserDoc() && (Doc.UserDoc()[`active${Doc.ActiveInk}`] = dash); } // eslint-disable-next-line prefer-arrow-callback diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss index ab03a2318..2405889cf 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss @@ -13,6 +13,9 @@ .fonticonbox { margin: auto; width: 100%; + .formLabel { + height: 5px; + } } .menuButton { height: 100%; diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index b45774a75..8c138c2ee 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -4,7 +4,7 @@ import { Button, ColorPicker, Dropdown, DropdownType, IconButton, IListItemProps import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { ClientUtils, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; +import { ClientUtils, DashColor, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc'; import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { emptyFunction } from '../../../../Utils'; @@ -21,6 +21,8 @@ import { FieldView, FieldViewProps } from '../FieldView'; import { OpenWhere } from '../OpenWhere'; import './FontIconBox.scss'; import TrailsIcon from './TrailsIcon'; +import { InkTool } from '../../../../fields/InkField'; +import { ScriptField } from '../../../../fields/ScriptField'; export enum ButtonType { TextButton = 'textBtn', @@ -126,7 +128,8 @@ export class FontIconBox extends ViewBoxBaseComponent() { background={SnappingManager.userBackgroundColor} numberDropdownType={type} showPlusMinus={false} - tooltip={this.label} + formLabel={(StrCast(this.Document.title).startsWith(' ') ? '\u00A0' : '') + StrCast(this.Document.title)} + tooltip={StrCast(this.Document.toolTip, this.label)} type={Type.PRIM} min={NumCast(this.dataDoc.numBtnMin, 0)} max={NumCast(this.dataDoc.numBtnMax, 100)} @@ -148,65 +151,80 @@ export class FontIconBox extends ViewBoxBaseComponent() { return false; }; + /** + * Displays custom dropdown menu for fonts -- this is a HACK -- fix for generality, don't copy + */ + handleFontDropdown = (script: () => string, buttonList: string[]) => { + // text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); + return { + buttonList, + jsx: undefined, + selectedVal: script(), + getStyle: (val: string) => ({ fontFamily: val }), + }; + }; + /** + * Displays custom dropdown menu for view selection -- this is a HACK -- fix for generality, don't copy + */ + handleViewDropdown = (script: ScriptField, buttonList: string[]) => { + const selected = Array.from(script?.script.run({ _readOnly_: true }).result as Doc[]); + const noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Card, CollectionViewType.Carousel3D, CollectionViewType.Carousel, CollectionViewType.Stacking, CollectionViewType.NoteTaking]; + return selected.length === 1 && selected[0].type === DocumentType.COL + ? { + buttonList: buttonList.filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value as CollectionViewType)), + getStyle: undefined, + selectedVal: StrCast(selected[0]._type_collection), + } + : { + jsx: selected.length ? ( + 1 ? 'caret-down' : (Doc.toIcon(selected.lastElement()) as IconProp)} />} + text={selected.length === 1 ? ClientUtils.cleanDocumentType(StrCast(selected[0].type) as DocumentType) : selected.length + ' selected'} + type={Type.TERT} + color={SnappingManager.userColor} + background={SnappingManager.userVariantColor} + popup={} + fillWidth + /> + ) : ( +
@@ -1042,7 +1041,6 @@ export class WebBox extends ViewBoxAnnotatableComponent() { } renderAnnotations = (childFilters: () => string[]) => ( () {
{ @observable private collapsed: boolean = false; @observable private _noLinkActive: boolean = false; @observable private _boldActive: boolean = false; - @observable private _italicsActive: boolean = false; + @observable private _italicActive: boolean = false; @observable private _underlineActive: boolean = false; @observable private _strikethroughActive: boolean = false; @observable private _subscriptActive: boolean = false; @@ -89,8 +89,8 @@ export class RichTextMenu extends AntimodeMenu { @computed get underline() { return this._underlineActive; } - @computed get italics() { - return this._italicsActive; + @computed get italic() { + return this._italicActive; } @computed get strikeThrough() { return this._strikethroughActive; @@ -280,7 +280,7 @@ export class RichTextMenu extends AntimodeMenu { this._noLinkActive = false; this._boldActive = false; - this._italicsActive = false; + this._italicActive = false; this._underlineActive = false; this._strikethroughActive = false; this._subscriptActive = false; @@ -290,7 +290,7 @@ export class RichTextMenu extends AntimodeMenu { switch (mark.name) { case 'noAutoLinkAnchor': this._noLinkActive = true; break; case 'strong': this._boldActive = true; break; - case 'em': this._italicsActive = true; break; + case 'em': this._italicActive = true; break; case 'underline': this._underlineActive = true; break; case 'strikethrough': this._strikethroughActive = true; break; case 'subscript': this._subscriptActive = true; break; @@ -352,7 +352,7 @@ export class RichTextMenu extends AntimodeMenu { } }; - toggleItalics = () => { + toggleItalic = () => { if (this.view) { const mark = this.view.state.schema.mark(this.view.state.schema.marks.em); this.setMark(mark, this.view.state, this.view.dispatch, false); @@ -361,13 +361,10 @@ export class RichTextMenu extends AntimodeMenu { }; setFontField = (value: string, fontField: 'fitBox' | 'fontSize' | 'fontFamily' | 'fontColor' | 'fontHighlight') => { - if (this.dataDoc) { - this.dataDoc[`text_${fontField}`] = value; - this.updateMenu(undefined, undefined, undefined, this.dataDoc); - } else if (this.TextView && this.view) { + if (this.TextView && this.view && fontField !== 'fitBox') { const { text, paragraph } = this.view.state.schema.nodes; const selNode = this.view.state.selection.$anchor.node(); - if ((fontField === 'fontSize' && value === '0px') || (this.view.state.selection.from === 1 && this.view.state.selection.empty && [undefined, text, paragraph].includes(selNode?.type))) { + if (this.view.state.selection.from === 1 && this.view.state.selection.empty && [undefined, text, paragraph].includes(selNode?.type)) { this.TextView.dataDoc[this.TextView.fieldKey + `_${fontField}`] = value; this.view.focus(); } @@ -376,6 +373,9 @@ export class RichTextMenu extends AntimodeMenu { const fmark = this.view?.state.schema.marks['pF' + fontField.substring(1)].create(attrs); this.setMark(fmark, this.view.state, (tx: Transaction) => this.view!.dispatch(tx.addStoredMark(fmark)), true); this.view.focus(); + } else if (this.dataDoc) { + this.dataDoc[`text_${fontField}`] = value; + this.updateMenu(undefined, undefined, undefined, this.dataDoc); } else { Doc.UserDoc()[fontField] = value; this.updateMenu(undefined, undefined, undefined, this.dataDoc); diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 358557ad7..920c9ea8b 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -377,7 +377,7 @@ export class PDFViewer extends ObservableReactComponent { if ((e.button !== 0 || e.altKey) && this._props.isContentActive()) { this._setPreviewCursor?.(e.clientX, e.clientY, true, false, this._props.Document); } - if (!e.altKey && e.button === 0 && this._props.isContentActive() && ![InkTool.Highlighter, InkTool.Pen, InkTool.Write].includes(Doc.ActiveTool)) { + if (!e.altKey && e.button === 0 && this._props.isContentActive() && Doc.ActiveTool !== InkTool.Ink) { this._props.select(false); MarqueeAnnotator.clearAnnotations(this._savedAnnotations); this.isAnnotating = true; diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx index b4635673c..d0f6566a5 100644 --- a/src/client/views/smartdraw/SmartDrawHandler.tsx +++ b/src/client/views/smartdraw/SmartDrawHandler.tsx @@ -21,7 +21,7 @@ import { SVGToBezier, SVGType } from '../../util/bezierFit'; import { InkingStroke } from '../InkingStroke'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { MarqueeView } from '../collections/collectionFreeForm'; -import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, DocumentView } from '../nodes/DocumentView'; +import { ActiveInkArrowEnd, ActiveInkArrowStart, ActiveInkDash, ActiveInkFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, DocumentView } from '../nodes/DocumentView'; import './SmartDrawHandler.scss'; export interface DrawingOptions { @@ -105,14 +105,14 @@ export class SmartDrawHandler extends ObservableReactComponent { y: bounds.top - inkWidth / 2, _width: bounds.width + inkWidth, _height: bounds.height + inkWidth, - stroke_showLabel: BoolCast(Doc.UserDoc().activeInkHideTextLabels)}, // prettier-ignore + stroke_showLabel: !BoolCast(Doc.UserDoc().activeHideTextLabels)}, // prettier-ignore inkWidth, opts.autoColor ? stroke[1] : ActiveInkColor(), ActiveInkBezierApprox(), - stroke[2] === 'none' ? ActiveFillColor() : stroke[2], - ActiveArrowStart(), - ActiveArrowEnd(), - ActiveDash(), + stroke[2] === 'none' ? ActiveInkFillColor() : stroke[2], + ActiveInkArrowStart(), + ActiveInkArrowEnd(), + ActiveInkDash(), ActiveIsInkMask() ); drawing.push(inkDoc); diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 6ec195910..aef7bf330 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -14,7 +14,7 @@ import { Initializing, Self, SelfProxy, TransitionTimer, UpdatingFromServer, Width } from './DocSymbols'; // prettier-ignore import { Copy, FieldChanged, HandleUpdate, Id, Parent, ToJavascriptString, ToScriptString, ToString } from './FieldSymbols'; -import { InkTool } from './InkField'; +import { InkEraserTool, InkInkTool, InkTool } from './InkField'; import { List } from './List'; import { ObjectField, serverOpType } from './ObjectField'; import { PrefetchProxy, ProxyField } from './Proxy'; @@ -253,6 +253,10 @@ export class Doc extends RefField { public static set ActivePage(val) { Doc.UserDoc().activePage = val; } // prettier-ignore public static get ActiveTool(): InkTool { return StrCast(Doc.UserDoc().activeTool, InkTool.None) as InkTool; } // prettier-ignore public static set ActiveTool(tool:InkTool){ Doc.UserDoc().activeTool = tool; } // prettier-ignore + public static get ActiveInk(): InkInkTool { return StrCast(Doc.UserDoc().activeInkTool, InkTool.None) as InkInkTool; } // prettier-ignore + public static set ActiveInk(tool:InkInkTool){ Doc.UserDoc().activeInkTool = tool; } // prettier-ignore + public static get ActiveEraser(): InkEraserTool { return StrCast(Doc.UserDoc().activeEraserTool, InkTool.None) as InkEraserTool; } // prettier-ignore + public static set ActiveEraser(tool:InkEraserTool){ Doc.UserDoc().activeEraserTool = tool; } // prettier-ignore public static get ActivePresentation() { return DocCast(Doc.ActiveDashboard?.activePresentation) as Opt; } // prettier-ignore public static set ActivePresentation(val) { Doc.ActiveDashboard && (Doc.ActiveDashboard.activePresentation = val) } // prettier-ignore public static get ActiveDashboard() { return DocCast(Doc.UserDoc().activeDashboard); } // prettier-ignore diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts index 17b99b033..f3ff5f11f 100644 --- a/src/fields/InkField.ts +++ b/src/fields/InkField.ts @@ -8,17 +8,22 @@ import { ObjectField } from './ObjectField'; // Helps keep track of the current ink tool in use. export enum InkTool { - None = 'none', - Pen = 'pen', - Highlighter = 'highlighter', - StrokeEraser = 'strokeeraser', - SegmentEraser = 'segmenteraser', - RadiusEraser = 'radiuseraser', - Eraser = 'eraser', // not a real tool, but a class of tools - Stamp = 'stamp', - Write = 'write', - PresentationPin = 'presentationpin', - SmartDraw = 'smartdraw', + None = 'None', + Ink = 'Ink', + Eraser = 'Eraser', // not a real tool, but a class of tools + SmartDraw = 'Smartdraw', +} + +export enum InkInkTool { + Pen = 'Pen', + Highlight = 'Highlight', + Write = 'Write', +} + +export enum InkEraserTool { + Stroke = 'Stroke', + Segment = 'Segment', + Radius = 'Radius', } export type Segment = Array; diff --git a/src/pen-gestures/GestureTypes.ts b/src/pen-gestures/GestureTypes.ts index 5a8e9bd97..10f9ba6d0 100644 --- a/src/pen-gestures/GestureTypes.ts +++ b/src/pen-gestures/GestureTypes.ts @@ -8,7 +8,6 @@ export enum Gestures { Arrow = 'arrow', RightAngle = 'rightangle', } - // Defines a point in an ink as a pair of x- and y-coordinates. export interface PointData { X: number; -- cgit v1.2.3-70-g09d2 From 515707c4561eb526426b8fa07dd50bd499fb91cc Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 25 Feb 2025 01:03:25 -0500 Subject: added a hideUI option to hide buttons. fixed a mess of runtime warnings mostly related to how scss files can be included in each other --- .../components/src/components/Button/Button.scss | 184 +++++------ .../src/components/ColorPicker/ColorPicker.scss | 36 +-- .../src/components/Dropdown/Dropdown.scss | 223 +++++++------- .../components/DropdownSearch/DropdownSearch.scss | 207 +++++++------ .../src/components/EditableText/EditableText.scss | 224 +++++++------- .../src/components/FormInput/FormInput.scss | 112 +++---- .../components/src/components/Group/Group.scss | 23 +- .../src/components/IconButton/IconButton.scss | 190 ++++++------ .../components/src/components/ListBox/ListBox.scss | 4 +- .../src/components/ListItem/ListItem.scss | 132 ++++---- .../components/src/components/Modal/Modal.scss | 74 ++--- .../src/components/MultiToggle/MultiToggle.scss | 6 +- .../components/NumberDropdown/NumberDropdown.scss | 7 +- .../src/components/NumberInput/NumberInput.scss | 4 +- .../components/src/components/Popup/Popup.scss | 40 +-- .../components/src/components/Slider/Slider.scss | 305 +++++++++---------- .../components/src/components/Slider/Slider.tsx | 338 +++++++++++---------- .../src/components/Template/Template.scss | 6 +- .../components/src/components/Toggle/Toggle.scss | 122 ++++---- .../components/src/global/globalCssVariables.scss | 110 +++---- src/client/util/CaptureManager.scss | 2 - src/client/util/CurrentUserUtils.ts | 14 +- src/client/util/SettingsManager.scss | 2 - src/client/util/SnappingManager.ts | 3 + src/client/util/reportManager/ReportManager.scss | 4 +- src/client/views/AntimodeMenu.scss | 6 +- src/client/views/ContextMenu.scss | 16 +- src/client/views/DashboardView.scss | 16 +- src/client/views/DocumentButtonBar.scss | 23 +- src/client/views/DocumentDecorations.scss | 38 +-- src/client/views/LightboxView.tsx | 4 +- src/client/views/Main.scss | 12 +- src/client/views/Main.tsx | 3 +- src/client/views/MainView.scss | 18 +- src/client/views/MainView.tsx | 8 +- src/client/views/PropertiesButtons.scss | 20 +- src/client/views/PropertiesSection.scss | 2 - src/client/views/PropertiesView.scss | 6 +- src/client/views/TemplateMenu.scss | 8 +- src/client/views/animationtimeline/Region.scss | 10 +- src/client/views/animationtimeline/Timeline.scss | 6 +- .../views/animationtimeline/TimelineMenu.scss | 16 +- .../views/animationtimeline/TimelineOverview.scss | 2 +- src/client/views/animationtimeline/Track.scss | 6 +- .../views/collections/CollectionCardDeckView.scss | 2 - .../collections/CollectionCarousel3DView.scss | 12 +- .../views/collections/CollectionDockingView.scss | 22 +- src/client/views/collections/CollectionMenu.scss | 6 +- .../collections/CollectionNoteTakingView.scss | 22 +- .../collections/CollectionStackedTimeline.scss | 26 +- .../views/collections/CollectionStackingView.scss | 22 +- .../views/collections/CollectionTreeView.scss | 10 +- src/client/views/collections/CollectionView.scss | 6 +- src/client/views/collections/TabDocView.scss | 2 +- src/client/views/collections/TreeView.scss | 6 +- .../collectionFreeForm/CollectionFreeFormView.scss | 16 +- .../collectionFreeForm/ImageLabelHandler.tsx | 14 +- .../collectionLinear/CollectionLinearView.scss | 22 +- .../collectionSchema/CollectionSchemaView.scss | 40 ++- src/client/views/linking/LinkMenu.scss | 2 +- src/client/views/linking/LinkMenuItem.scss | 8 +- .../views/newlightbox/ButtonMenu/ButtonMenu.scss | 12 +- .../views/newlightbox/ExploreView/ExploreView.scss | 48 +-- .../views/newlightbox/Header/LightboxHeader.scss | 28 +- .../RecommendationList/RecommendationList.scss | 179 ++++++----- .../components/EditableText/EditableText.scss | 46 +-- .../components/Recommendation/Recommendation.scss | 122 ++++---- .../components/SkeletonDoc/SkeletonDoc.scss | 133 ++++---- .../newlightbox/components/Template/Template.scss | 12 +- src/client/views/nodes/AudioBox.scss | 42 +-- .../views/nodes/DataVizBox/components/Chart.scss | 10 +- src/client/views/nodes/DocumentLinksButton.scss | 18 +- src/client/views/nodes/DocumentView.scss | 6 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/EquationBox.scss | 2 - .../views/nodes/FontIconBox/FontIconBox.scss | 36 +-- src/client/views/nodes/IconTagBox.scss | 4 +- src/client/views/nodes/KeyValueBox.scss | 22 +- src/client/views/nodes/KeyValuePair.scss | 2 +- src/client/views/nodes/LinkDescriptionPopup.scss | 10 +- src/client/views/nodes/MapBox/AnimationUtility.ts | 4 +- src/client/views/nodes/MapBox/MapBox.scss | 16 +- src/client/views/nodes/PDFBox.scss | 8 +- src/client/views/nodes/VideoBox.scss | 16 +- src/client/views/nodes/WebBox.scss | 4 +- .../nodes/chatbot/chatboxcomponents/ChatBox.scss | 11 +- .../views/nodes/formattedText/DashFieldView.scss | 4 +- .../nodes/formattedText/FormattedTextBox.scss | 20 +- .../views/nodes/formattedText/RichTextMenu.scss | 4 +- src/client/views/nodes/imageEditor/ImageEditor.tsx | 8 +- src/client/views/nodes/trails/PresBox.scss | 142 ++++----- src/client/views/search/SearchBox.scss | 10 +- src/client/views/topbar/TopBar.scss | 29 +- 93 files changed, 1909 insertions(+), 1931 deletions(-) (limited to 'src/client/views/nodes/FontIconBox/FontIconBox.scss') diff --git a/packages/components/src/components/Button/Button.scss b/packages/components/src/components/Button/Button.scss index a31923e6d..bbe2e2470 100644 --- a/packages/components/src/components/Button/Button.scss +++ b/packages/components/src/components/Button/Button.scss @@ -1,118 +1,118 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .button-container { - position: relative; - width: fit-content; - padding: $padding; - cursor: pointer; - overflow: hidden; - user-select: none; - display: flex; - justify-content: center; - align-items: center; - gap: 5px; - font-family: $default-font; - border-radius: $standard-border-radius; - white-space: nowrap; - transition: 0.4s; - border: solid 1px; - border-color: transparent; - pointer-events: all; - - &.icon { - padding: 0; - gap: 0; - } - - .button-content { + position: relative; + width: fit-content; + padding: global.$padding; + cursor: pointer; + overflow: hidden; + user-select: none; display: flex; justify-content: center; align-items: center; - width: fit-content; - height: 100%; - z-index: 1; gap: 5px; + font-family: global.$default-font; + border-radius: global.$standard-border-radius; + white-space: nowrap; + transition: 0.4s; + border: solid 1px; + border-color: transparent; + pointer-events: all; - .icon { - display: flex; - justify-content: center; - align-items: center; + &.icon { + padding: 0; + gap: 0; } - } - - .background { - width: 100%; - height: 100%; - z-index: 0; - left: 0; - top: 0; - position: absolute; - transition: 0.4s; - } - &.inactive { - &:hover { - .background { - filter: opacity(0) !important; - } + .button-content { + display: flex; + justify-content: center; + align-items: center; + width: fit-content; + height: 100%; + z-index: 1; + gap: 5px; + + .icon { + display: flex; + justify-content: center; + align-items: center; + } } - } - &.primary { .background { - filter: opacity(0); - - &.active { - filter: opacity(0.2) !important; - } + width: 100%; + height: 100%; + z-index: 0; + left: 0; + top: 0; + position: absolute; + transition: 0.4s; } - &:hover{ - .background { - filter: opacity(0.2) - } + &.inactive { + &:hover { + .background { + filter: opacity(0) !important; + } + } } - } - &.secondary { - .background { - filter: opacity(0); + &.primary { + .background { + filter: opacity(0); - &.active { - filter: opacity(0.2) !important; - } - } + &.active { + filter: opacity(0.2) !important; + } + } - &:hover{ - .background { - filter: opacity(0.2) - } + &:hover { + .background { + filter: opacity(0.2); + } + } } - } - &.tertiary { - &:hover{ - box-shadow: $standard-shadow; - } + &.secondary { + .background { + filter: opacity(0); - .background { - filter: opacity(1) !important; + &.active { + filter: opacity(0.2) !important; + } + } + + &:hover { + .background { + filter: opacity(0.2); + } + } } - &:hover{ - .background { - filter: brightness(0.8); - } + &.tertiary { + &:hover { + box-shadow: global.$standard-shadow; + } + + .background { + filter: opacity(1) !important; + } + + &:hover { + .background { + filter: brightness(0.8); + } + } } - } - .label { - position: absolute; - bottom: 0; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - font-size: $xsmall-fontSize; - } + .label { + position: absolute; + bottom: 0; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: global.$xsmall-fontSize; + } } diff --git a/packages/components/src/components/ColorPicker/ColorPicker.scss b/packages/components/src/components/ColorPicker/ColorPicker.scss index e3ed32a45..32b912fe5 100644 --- a/packages/components/src/components/ColorPicker/ColorPicker.scss +++ b/packages/components/src/components/ColorPicker/ColorPicker.scss @@ -1,23 +1,23 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .colorPicker-container { - display: flex; - border-radius: $standard-border-radius; - width: fit-content; - height: fit-content; - position: relative; - - .colorPicker-toggle { - width: 100%; - height: 100%; - position: relative; - cursor: pointer; - } - - .colorPicker-popup { - position: absolute; - top: calc(100% + 5px); + display: flex; + border-radius: global.$standard-border-radius; width: fit-content; height: fit-content; - } + position: relative; + + .colorPicker-toggle { + width: 100%; + height: 100%; + position: relative; + cursor: pointer; + } + + .colorPicker-popup { + position: absolute; + top: calc(100% + 5px); + width: fit-content; + height: fit-content; + } } diff --git a/packages/components/src/components/Dropdown/Dropdown.scss b/packages/components/src/components/Dropdown/Dropdown.scss index 34ed84004..f9ea2711a 100644 --- a/packages/components/src/components/Dropdown/Dropdown.scss +++ b/packages/components/src/components/Dropdown/Dropdown.scss @@ -1,135 +1,136 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .dropdown { - margin-top: 10px; + margin-top: 10px; } .divider { - height: 1px; - width: 100%; - background: $medium-gray; + height: 1px; + width: 100%; + background: global.$medium-gray; } .dropdown-container { - display: flex; - flex-direction: column; - justify-content: center; - min-width: fit-content; - width: 100%; - border-radius: $standard-border-radius; - height: 100%; - position: relative; - transition: 0.4s; - - .dropdown-list { - position: absolute; - top: 100%; + display: flex; + flex-direction: column; + justify-content: center; + min-width: fit-content; width: 100%; - } - .dropdown-toggle-mini, - .dropdown-toggle { - width: calc(100% - 2px); - display: grid; - grid-template-columns: calc(100% - 30px) 30px; - grid-template-areas: 'button end'; - grid-template-rows: 1fr; + border-radius: global.$standard-border-radius; + height: 100%; position: relative; - align-items: center; - border: solid 1px; - border-color: transparent; - border-radius: $standard-border-radius; - overflow: hidden; - - &.inactive { - filter: opacity(0.5); - pointer-events: none; - cursor: not-allowed; - } + transition: 0.4s; - .background { - width: 100%; - height: 100%; - z-index: 0; - position: absolute; - transition: 0.4s; + .dropdown-list { + position: absolute; + top: 100%; + width: 100%; } + .dropdown-toggle-mini, + .dropdown-toggle { + width: calc(100% - 2px); + display: grid; + grid-template-columns: calc(100% - 30px) 30px; + grid-template-areas: 'button end'; + grid-template-rows: 1fr; + position: relative; + align-items: center; + border: solid 1px; + border-color: transparent; + border-radius: global.$standard-border-radius; + overflow: hidden; - &.inactive { - &:hover { - .background { - filter: opacity(0) !important; + &.inactive { + filter: opacity(0.5); + pointer-events: none; + cursor: not-allowed; } - } - } - - &.primary { - .background { - filter: opacity(0); - - &.active { - filter: opacity(0.2) !important; - } - } - - &:hover{ + .background { - filter: opacity(0.2) + width: 100%; + height: 100%; + z-index: 0; + position: absolute; + transition: 0.4s; } - } - } - - &.secondary { - .background { - filter: opacity(0); - - &.active { - filter: opacity(0.2) !important; + + &.inactive { + &:hover { + .background { + filter: opacity(0) !important; + } + } } - } - - &:hover{ - .background { - filter: opacity(0.2) + + &.primary { + .background { + filter: opacity(0); + + &.active { + filter: opacity(0.2) !important; + } + } + + &:hover { + .background { + filter: opacity(0.2); + } + } } - } - } - - &.tertiary { - &:hover{ - box-shadow: $standard-button-shadow; - } - - &:hover{ - .background { - filter: brightness(0.8); + + &.secondary { + .background { + filter: opacity(0); + + &.active { + filter: opacity(0.2) !important; + } + } + + &:hover { + .background { + filter: opacity(0.2); + } + } } - } - } - .toggle-button { - grid-area: button; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - min-width: 70px; - justify-self: center; - } + &.tertiary { + &:hover { + box-shadow: global.$standard-button-shadow; + } - .toggle-caret { - cursor: pointer; - grid-area: end; - display: flex; - justify-content: flex-end; - align-items: center; - justify-self: center; + &:hover { + .background { + filter: brightness(0.8); + } + } + } + + .toggle-button { + grid-area: button; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + min-width: 70px; + justify-self: center; + } + + .toggle-caret { + cursor: pointer; + grid-area: end; + display: flex; + justify-content: flex-end; + align-items: center; + justify-self: center; + } } - } - .dropdown-toggle-mini { - .toggle-caret { - position: absolute; - top:0; left:0; + .dropdown-toggle-mini { + .toggle-caret { + position: absolute; + top: 0; + left: 0; + } } - } } diff --git a/packages/components/src/components/DropdownSearch/DropdownSearch.scss b/packages/components/src/components/DropdownSearch/DropdownSearch.scss index e111c822b..d937df540 100644 --- a/packages/components/src/components/DropdownSearch/DropdownSearch.scss +++ b/packages/components/src/components/DropdownSearch/DropdownSearch.scss @@ -1,123 +1,122 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .dropdownsearch { - margin-top: 10px; + margin-top: 10px; } .divider { - height: 1px; - width: 100%; - background: $medium-gray; + height: 1px; + width: 100%; + background: global.$medium-gray; } .dropdownsearch-container { - display: flex; - flex-direction: column; - justify-content: center; - min-width: fit-content; - border-radius: $standard-border-radius; - height: 100%; - position: relative; - transition: 0.4s; - - .dropdownsearch-list { - position: absolute; - top: 100%; - width: 100%; - } - - .dropdownsearch-toggle { - width: 100%; - display: grid; - grid-template-columns: calc(100% - 30px) 30px; - grid-template-areas: 'button end'; - grid-template-rows: 1fr; + display: flex; + flex-direction: column; + justify-content: center; + min-width: fit-content; + border-radius: global.$standard-border-radius; + height: 100%; position: relative; - align-items: center; - border: solid 1px; - border-color: transparent; - border-radius: $standard-border-radius; - overflow: hidden; - - .toggle-background { - width: 100%; - height: 100%; - z-index: 0; - position: absolute; - transition: 0.4s; - - &.active { - filter: opacity(0.2) !important; - } + transition: 0.4s; + + .dropdownsearch-list { + position: absolute; + top: 100%; + width: 100%; } - &.primary { - color: $medium-blue; - .toggle-background { - background: $medium-blue; - filter: opacity(0); - } - - &:hover{ + .dropdownsearch-toggle { + width: 100%; + display: grid; + grid-template-columns: calc(100% - 30px) 30px; + grid-template-areas: 'button end'; + grid-template-rows: 1fr; + position: relative; + align-items: center; + border: solid 1px; + border-color: transparent; + border-radius: global.$standard-border-radius; + overflow: hidden; + .toggle-background { - filter: opacity(0.2) + width: 100%; + height: 100%; + z-index: 0; + position: absolute; + transition: 0.4s; + + &.active { + filter: opacity(0.2) !important; + } } - } - - } - - &.secondary { - .toggle-background { - background: $medium-blue; - filter: opacity(0); - } - - border: solid 1px $medium-blue; - color: $medium-blue; - - &:hover{ - .toggle-background { - filter: opacity(0.2) + + &.primary { + color: global.$medium-blue; + .toggle-background { + background: global.$medium-blue; + filter: opacity(0); + } + + &:hover { + .toggle-background { + filter: opacity(0.2); + } + } } - } - } - - &.tertiary { - color: white; - - .toggle-background { - background: $medium-blue; - } - - &:hover{ - box-shadow: $standard-button-shadow; - } - - &:hover{ - .toggle-background { - filter: brightness(0.8); + + &.secondary { + .toggle-background { + background: global.$medium-blue; + filter: opacity(0); + } + + border: solid 1px global.$medium-blue; + color: global.$medium-blue; + + &:hover { + .toggle-background { + filter: opacity(0.2); + } + } } - } - } - .toggle-button { - grid-area: button; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - min-width: 70px; - justify-self: center; - } + &.tertiary { + color: white; + + .toggle-background { + background: global.$medium-blue; + } - .toggle-caret { - cursor: pointer; - grid-area: end; - display: flex; - justify-content: flex-end; - align-items: center; - justify-self: center; + &:hover { + box-shadow: global.$standard-button-shadow; + } + + &:hover { + .toggle-background { + filter: brightness(0.8); + } + } + } + + .toggle-button { + grid-area: button; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + min-width: 70px; + justify-self: center; + } + + .toggle-caret { + cursor: pointer; + grid-area: end; + display: flex; + justify-content: flex-end; + align-items: center; + justify-self: center; + } } - } } diff --git a/packages/components/src/components/EditableText/EditableText.scss b/packages/components/src/components/EditableText/EditableText.scss index 19e5af2cd..15965e97e 100644 --- a/packages/components/src/components/EditableText/EditableText.scss +++ b/packages/components/src/components/EditableText/EditableText.scss @@ -1,131 +1,129 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .editableText-container { - position: relative; - width: fit-content; - border: solid 1px; - border-color: transparent; - border-radius: $standard-border-radius; - font-family: $default-font; - overflow: hidden; - padding: $padding; - - .password { - position: absolute; - display: flex; - justify-content: center; - align-items: center; - height: 100%; - right: 0; - top: 0; - } - - .editableText-background { - width: 100%; - height: 100%; - z-index: -1; - position: absolute; - transition: 0.4s; - top: 0; - left: 0; - } - - &.primary { - - &:focus-within { - .editableText-background { - filter: opacity(0.2) !important; - } + position: relative; + width: fit-content; + border: solid 1px; + border-color: transparent; + border-radius: global.$standard-border-radius; + font-family: global.$default-font; + overflow: hidden; + padding: global.$padding; + + .password { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + right: 0; + top: 0; } .editableText-background { - filter: opacity(0); - - &.active { - filter: opacity(0.2) !important; - } + width: 100%; + height: 100%; + z-index: -1; + position: absolute; + transition: 0.4s; + top: 0; + left: 0; } - &:hover{ - .editableText-background { - filter: opacity(0.2) - } + &.primary { + &:focus-within { + .editableText-background { + filter: opacity(0.2) !important; + } + } + + .editableText-background { + filter: opacity(0); + + &.active { + filter: opacity(0.2) !important; + } + } + + &:hover { + .editableText-background { + filter: opacity(0.2); + } + } } - } - - &.secondary { - &:focus-within { - .editableText-background { - filter: opacity(0.2) !important; - } - } - - .editableText-background { - filter: opacity(0); - &.active { - filter: opacity(0.2) !important; - } + &.secondary { + &:focus-within { + .editableText-background { + filter: opacity(0.2) !important; + } + } + + .editableText-background { + filter: opacity(0); + + &.active { + filter: opacity(0.2) !important; + } + } + + &:hover { + .editableText-background { + filter: opacity(0.2); + } + } } - &:hover{ - .editableText-background { - filter: opacity(0.2) - } - } - } + &.tertiary { + &:hover { + box-shadow: global.$standard-shadow; + } - &.tertiary { - &:hover{ - box-shadow: $standard-shadow; + &:hover { + .editableText-background { + filter: brightness(0.8); + } + } } - &:hover{ - .editableText-background { - filter: brightness(0.8); - } + .editableText { + -webkit-appearance: none; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: inherit; + border: none; + outline: none; + margin: 0px !important; + padding: 0px !important; + box-shadow: none !important; + background: transparent; + color: inherit; + z-index: 1; + + &.center { + display: flex; + justify-content: center; + align-items: center; + } } - } - .editableText { - -webkit-appearance: none; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-size: inherit; - border: none; - outline: none; - margin: 0px !important; - padding: 0px !important; - box-shadow: none !important; - background: transparent; - color: inherit; - z-index: 1; - - &.center { - display: flex; - justify-content: center; - align-items: center; + .displayText { + cursor: text !important; + width: 100%; + height: 100%; + white-space: nowrap; + text-overflow: ellipsis; + display: flex; + align-items: center; + font-size: inherit; + color: inherit; + z-index: 1; + + &.center { + display: flex; + justify-content: center; + align-items: center; + } } - } - - .displayText { - cursor: text !important; - width: 100%; - height: 100%; - white-space: nowrap; - text-overflow: ellipsis; - display: flex; - align-items: center; - font-size: inherit; - color: inherit; - z-index: 1; - - &.center { - display: flex; - justify-content: center; - align-items: center; - } - } } - diff --git a/packages/components/src/components/FormInput/FormInput.scss b/packages/components/src/components/FormInput/FormInput.scss index db04ff8cf..2554cbd01 100644 --- a/packages/components/src/components/FormInput/FormInput.scss +++ b/packages/components/src/components/FormInput/FormInput.scss @@ -1,69 +1,69 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .formInput-container { - display: flex; - flex-direction: column; - width: 100%; - height: fit-content; - position: relative; - margin-top: 20px; - - .formInput { - font-family: inherit; + display: flex; + flex-direction: column; width: 100%; - border: 0; - border-bottom: 2px solid black; - outline: 0; - font-size: 1rem; - color: black; - padding: 7px 0; - background: transparent; - transition: border-color 0.2s; - - &::placeholder { - color: transparent; - } + height: fit-content; + position: relative; + margin-top: 20px; - &:focus { - ~ .formInput-label { - position: absolute; - transform: translate(0px, -13px); - display: block; - transition: 0.2s; + .formInput { + font-family: inherit; + width: 100%; + border: 0; + border-bottom: 2px solid black; + outline: 0; font-size: 1rem; - font-weight: 700; - } - padding-bottom: 6px; - font-weight: 700; - border-width: 3px; - border-image: linear-gradient(to right, black, white); - border-image-slice: 1; + color: black; + padding: 7px 0; + background: transparent; + transition: border-color 0.2s; + + &::placeholder { + color: transparent; + } + + &:focus { + ~ .formInput-label { + position: absolute; + transform: translate(0px, -13px); + display: block; + transition: 0.2s; + font-size: 1rem; + font-weight: 700; + } + padding-bottom: 6px; + font-weight: 700; + border-width: 3px; + border-image: linear-gradient(to right, black, white); + border-image-slice: 1; + } + + &:valid { + ~ .formInput-label { + position: absolute; + transform: translate(0px, -13px); + display: block; + transition: 0.2s; + font-size: 1rem; + } + } + + &:required, + &:invalid { + box-shadow: none; + } } - &:valid { - ~ .formInput-label { + .formInput-label { position: absolute; - transform: translate(0px, -13px); + top: 0; + transform: translate(0px, 8px); display: block; transition: 0.2s; font-size: 1rem; - } + color: gray; + pointer-events: none; } - - &:required, - &:invalid { - box-shadow: none; - } - } - - .formInput-label { - position: absolute; - top: 0; - transform: translate(0px, 8px); - display: block; - transition: 0.2s; - font-size: 1rem; - color: gray; - pointer-events: none; - } } diff --git a/packages/components/src/components/Group/Group.scss b/packages/components/src/components/Group/Group.scss index 885472a5d..7cd3dfd9e 100644 --- a/packages/components/src/components/Group/Group.scss +++ b/packages/components/src/components/Group/Group.scss @@ -1,16 +1,15 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .group-wrapper { - overflow: hidden; + overflow: hidden; - .group-container { - width: fit-content; - display: flex; - flex-flow: row wrap; - height: fit-content; - flex-flow: row; - justify-content: flex-start; - align-items: center; - } + .group-container { + width: fit-content; + display: flex; + flex-flow: row wrap; + height: fit-content; + flex-flow: row; + justify-content: flex-start; + align-items: center; + } } - diff --git a/packages/components/src/components/IconButton/IconButton.scss b/packages/components/src/components/IconButton/IconButton.scss index 9a0b53c0f..f899dc50f 100644 --- a/packages/components/src/components/IconButton/IconButton.scss +++ b/packages/components/src/components/IconButton/IconButton.scss @@ -1,121 +1,119 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .iconButton-container { - position: relative; - cursor: pointer; - overflow: hidden; - user-select: none; - display: flex; - justify-content: center; - align-items: center; - font-family: $default-font; - border-radius: $standard-border-radius; - white-space: nowrap; - transition: 0.4s; - border: solid 1px; - border-color: transparent; - pointer-events: all; - - - .iconButton-content { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; - z-index: 1; - font-family: Verdana, sans-serif; - font-weight: 500; - } - - .icon { - z-index: 1; + position: relative; + cursor: pointer; + overflow: hidden; + user-select: none; display: flex; justify-content: center; align-items: center; - } - - .background { - width: 100%; - height: 100%; - z-index: 0; - position: absolute; + font-family: global.$default-font; + border-radius: global.$standard-border-radius; + white-space: nowrap; transition: 0.4s; - } + border: solid 1px; + border-color: transparent; + pointer-events: all; + + .iconButton-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + z-index: 1; + font-family: Verdana, sans-serif; + font-weight: 500; + } - &.inactive { - .background { - filter: opacity(0) !important; + .icon { + z-index: 1; + display: flex; + justify-content: center; + align-items: center; } - } - &.primary { .background { - filter: opacity(0); - - &.active { - filter: opacity(0.2) !important; - } + width: 100%; + height: 100%; + z-index: 0; + position: absolute; + transition: 0.4s; } - &:hover{ - .background { - filter: opacity(0.2) - } + &.inactive { + .background { + filter: opacity(0) !important; + } } - } + &.primary { + .background { + filter: opacity(0); - &.secondary { - .background { - filter: opacity(0); + &.active { + filter: opacity(0.2) !important; + } + } - &.active { - filter: opacity(0.2) !important; - } + &:hover { + .background { + filter: opacity(0.2); + } + } } - &:hover{ - .background { - filter: opacity(0.2) - } - } - } + &.secondary { + .background { + filter: opacity(0); + + &.active { + filter: opacity(0.2) !important; + } + } - &.tertiary { - &:hover{ - box-shadow: $standard-button-shadow; + &:hover { + .background { + filter: opacity(0.2); + } + } } - &:hover{ - .background { - filter: brightness(0.8); - } + &.tertiary { + &:hover { + box-shadow: global.$standard-button-shadow; + } + + &:hover { + .background { + filter: brightness(0.8); + } + } } - } - .color { - position: relative; - width: 70%; - height: 15%; - z-index: 3; - margin-top: 2px; - border-radius: 10px; - outline: solid 0.3px; - outline-offset: -0.3px; - } + .color { + position: relative; + width: 70%; + height: 15%; + z-index: 3; + margin-top: 2px; + border-radius: 10px; + outline: solid 0.3px; + outline-offset: -0.3px; + } - .iconButton-label { - position: relative; - z-index: 2; - max-width: 100%; - overflow: hidden; - white-space: normal; - display: flex; - text-align: center; - justify-content: center; - align-items: center; - font-size: $xsmall-fontSize; - } + .iconButton-label { + position: relative; + z-index: 2; + max-width: 100%; + overflow: hidden; + white-space: normal; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + font-size: global.$xsmall-fontSize; + } } diff --git a/packages/components/src/components/ListBox/ListBox.scss b/packages/components/src/components/ListBox/ListBox.scss index dc449c943..dc2a44513 100644 --- a/packages/components/src/components/ListBox/ListBox.scss +++ b/packages/components/src/components/ListBox/ListBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .listBox-container { position: relative; @@ -13,4 +13,4 @@ max-width: 300px; padding: 5px; gap: 2px; -} \ No newline at end of file +} diff --git a/packages/components/src/components/ListItem/ListItem.scss b/packages/components/src/components/ListItem/ListItem.scss index 736078360..8d46605d0 100644 --- a/packages/components/src/components/ListItem/ListItem.scss +++ b/packages/components/src/components/ListItem/ListItem.scss @@ -1,78 +1,78 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .listItem-container { - position: relative; - width: 100%; - border-radius: $standard-border-radius; - display: flex; - justify-content: center; - align-items: flex-start; - flex-direction: column; - cursor: pointer; - font-family: Verdana, sans-serif; - overflow: hidden; - text-align: left; - - .listItem-background { - position: absolute; + position: relative; width: 100%; - height: 100%; - background: $medium-blue; - filter: opacity(0); - transition: 0.4s; - } - - .listItem-top { + border-radius: global.$standard-border-radius; display: flex; - height: 30px; - width: 100%; - justify-content: space-between; - align-items: center; - gap: 20px; + justify-content: center; + align-items: flex-start; + flex-direction: column; + cursor: pointer; + font-family: Verdana, sans-serif; + overflow: hidden; + text-align: left; - .content { - display: flex; - justify-content: flex-start; - align-items: center; - padding: $padding; - width: 100%; - height: 100%; - z-index: 1; - gap: 5px; - font-weight: 500; - - .text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + .listItem-background { + position: absolute; width: 100%; - } + height: 100%; + background: global.$medium-blue; + filter: opacity(0); + transition: 0.4s; } - .shortcut { - grid-area: end; - padding: $padding; - display: flex; - justify-content: center; - align-items: center; - font-size: $xsmall-fontSize; - font-family: $default-font; - } + .listItem-top { + display: flex; + height: 30px; + width: 100%; + justify-content: space-between; + align-items: center; + gap: 20px; - .caret { - grid-area: end; - display: flex; - justify-content: flex-end; - align-items: center; - justify-self: center; + .content { + display: flex; + justify-content: flex-start; + align-items: center; + padding: global.$padding; + width: 100%; + height: 100%; + z-index: 1; + gap: 5px; + font-weight: 500; + + .text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } + } + + .shortcut { + grid-area: end; + padding: global.$padding; + display: flex; + justify-content: center; + align-items: center; + font-size: global.$xsmall-fontSize; + font-family: global.$default-font; + } + + .caret { + grid-area: end; + display: flex; + justify-content: flex-end; + align-items: center; + justify-self: center; + } } - } - .listItem-description { - font-size: $small-fontSize; - display: flex; - padding: 0px 5px 10px 5px; - justify-content: flex-start; - width: calc(100% - 10px); - } + .listItem-description { + font-size: global.$small-fontSize; + display: flex; + padding: 0px 5px 10px 5px; + justify-content: flex-start; + width: calc(100% - 10px); + } } diff --git a/packages/components/src/components/Modal/Modal.scss b/packages/components/src/components/Modal/Modal.scss index c0667ed26..a5698432d 100644 --- a/packages/components/src/components/Modal/Modal.scss +++ b/packages/components/src/components/Modal/Modal.scss @@ -1,46 +1,46 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .modal-container { - top: 0px; - left: 0px; - width: 100vw; - height: 100vh; - position: fixed; - display: flex; - justify-content: center; - align-items: center; - z-index: 100; - - .modal-popup { - position: relative; + top: 0px; + left: 0px; + width: 100vw; + height: 100vh; + position: fixed; display: flex; - flex-direction: column; - align-items: left; - z-index: 10; - width: 400px; - height: fit-content; - padding: 20px; - border-radius: $standard-border-radius; - font-weight: bold; - font-size: 1.5rem; + justify-content: center; + align-items: center; + z-index: 100; + + .modal-popup { + position: relative; + display: flex; + flex-direction: column; + align-items: left; + z-index: 10; + width: 400px; + height: fit-content; + padding: 20px; + border-radius: global.$standard-border-radius; + font-weight: bold; + font-size: 1.5rem; - .modal-closeButton { - top: -15px; - right: -15px; - position: absolute; - width: fit-content; - height: fit-content; + .modal-closeButton { + top: -15px; + right: -15px; + position: absolute; + width: fit-content; + height: fit-content; + } } - } } .modal-background { - z-index: 9; - position: absolute; - top: -10vh; - left: -10vw; - backdrop-filter: blur(15px); - width: 200vw; - height: 200vh; - background: $modal-background; + z-index: 9; + position: absolute; + top: -10vh; + left: -10vw; + backdrop-filter: blur(15px); + width: 200vw; + height: 200vh; + background: global.$modal-background; } diff --git a/packages/components/src/components/MultiToggle/MultiToggle.scss b/packages/components/src/components/MultiToggle/MultiToggle.scss index 2522549e9..854abdca0 100644 --- a/packages/components/src/components/MultiToggle/MultiToggle.scss +++ b/packages/components/src/components/MultiToggle/MultiToggle.scss @@ -1,5 +1 @@ -@import '../../global/globalCssVariables.scss'; - -.multiToggle-container { - -} \ No newline at end of file +@use '../../global/globalCssVariables.scss' as global; diff --git a/packages/components/src/components/NumberDropdown/NumberDropdown.scss b/packages/components/src/components/NumberDropdown/NumberDropdown.scss index 4ed5855d9..b3111623b 100644 --- a/packages/components/src/components/NumberDropdown/NumberDropdown.scss +++ b/packages/components/src/components/NumberDropdown/NumberDropdown.scss @@ -1,7 +1,4 @@ -@import '../../global/globalCssVariables.scss'; - -.numberDropdown-container { -} +@use '../../global/globalCssVariables.scss' as global; .form-wrapper { .iconButton-label { @@ -14,6 +11,6 @@ text-align: center; justify-content: center; align-items: center; - font-size: $xsmall-fontSize !important; + font-size: global.$xsmall-fontSize !important; } } diff --git a/packages/components/src/components/NumberInput/NumberInput.scss b/packages/components/src/components/NumberInput/NumberInput.scss index 2a562d395..887d64857 100644 --- a/packages/components/src/components/NumberInput/NumberInput.scss +++ b/packages/components/src/components/NumberInput/NumberInput.scss @@ -1,5 +1,5 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .numberInput-container { width: 100%; -} \ No newline at end of file +} diff --git a/packages/components/src/components/Popup/Popup.scss b/packages/components/src/components/Popup/Popup.scss index 39dd2c947..3087293f1 100644 --- a/packages/components/src/components/Popup/Popup.scss +++ b/packages/components/src/components/Popup/Popup.scss @@ -1,30 +1,30 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .popup-wrapper { - width: fit-content; - - &.fillWidth { - width: 100%; - } - - .trigger-container { width: fit-content; - height: fit-content; &.fillWidth { - width: 100%; + width: 100%; + } + + .trigger-container { + width: fit-content; + height: fit-content; + + &.fillWidth { + width: 100%; + } } - } } .popup-container { - display: flex; - height: fit-content; - min-width: fit-content; - width: fit-content; - position: relative; - border: solid 1px $black; - border-radius: $standard-border-radius; - overflow: hidden; - background: $white; + display: flex; + height: fit-content; + min-width: fit-content; + width: fit-content; + position: relative; + border: solid 1px global.$black; + border-radius: global.$standard-border-radius; + overflow: hidden; + background: global.$white; } diff --git a/packages/components/src/components/Slider/Slider.scss b/packages/components/src/components/Slider/Slider.scss index 9a9fc6172..a653f024f 100644 --- a/packages/components/src/components/Slider/Slider.scss +++ b/packages/components/src/components/Slider/Slider.scss @@ -1,168 +1,163 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .slider-container { - display: flex; - position: relative; - justify-content: center; - align-items: center; - min-width: 200px; - width: 100%; - height: 100%; - font-family: $default-font; - - .selected-range { - width: 100%; - background: $medium-blue; - } - - .range { - position: absolute; - background: $light-gray; - } - - .box-minmax{ - width: 100%; display: flex; - justify-content: space-between; - font-size: 20px; - color: $medium-blue; - position: absolute; - top: 110%; - } - .range-slider { - margin: 0px; - position: absolute; + position: relative; + justify-content: center; + align-items: center; + min-width: 200px; width: 100%; height: 100%; - top: 0px; - left: 0px; - - .rs-label-container { - display: flex; - position: absolute; - justify-content: center; - align-items: center; - overflow: visible; - border-radius: $standard-border-radius; - z-index: 45; - pointer-events: none; - - .rs-label { - display: flex; - font-size: smaller; - white-space: nowrap; - border-radius: 100%; - text-align: center; - text-wrap: wrap; - word-break: break-all; - justify-content: center; - align-items: center; - font-family: $default-font; - user-select: none; - pointer-events: none; - top: 0px; - width: fit-content; - border-radius: $standard-border-radius; - z-index: 40; - } - - } - - .rs-range { - width: 100%; - position: relative; - background: transparent; - pointer-events: none; - -webkit-appearance: none; - margin: 0px; - z-index: 20; - - &:focus { - outline: none; - } - - &::-webkit-slider-runnable-track { - width: 100%; - background: none; - cursor: pointer; - box-shadow: none; - -webkit-appearance: none; - pointer-events: none; - } - &::-moz-range-track { - width: 100%; - cursor: pointer; - box-shadow: none; - -webkit-appearance: none; - pointer-events: none; - } - - &::-webkit-slider-thumb { - cursor: ew-resize; - -webkit-appearance: none; - pointer-events: auto; - } - &::-moz-range-thumb { - cursor: pointer; - -webkit-appearance: none; - pointer-events: auto; - } - - &::-moz-focus-outer { - border: 0; - } - - &.xsmall { - &::-webkit-slider-runnable-track { - height: $xsmall; - } + font-family: global.$default-font; - &::-webkit-slider-thumb { - height: $xsmall; - width: $xsmall; - border-radius: $xsmall; - } + .selected-range { + width: 100%; + background: global.$medium-blue; } - &.small { - &::-webkit-slider-runnable-track { - height: $small; - } - - &::-webkit-slider-thumb { - height: $small; - width: $small; - border-radius: $small; - } + .range { + position: absolute; + background: global.$light-gray; } - &.medium { - &::-webkit-slider-runnable-track { - height: $medium; - } - - &::-webkit-slider-thumb { - height: $medium; - width: $medium; - border-radius: $medium; - } + .box-minmax { + width: 100%; + display: flex; + justify-content: space-between; + font-size: 20px; + color: global.$medium-blue; + position: absolute; + top: 110%; } - - &.large { - &::-webkit-slider-runnable-track { - height: $large; - } - - &::-webkit-slider-thumb { - height: $large; - width: $large; - border-radius: $large; - } + .range-slider { + margin: 0px; + position: absolute; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + + .rs-label-container { + display: flex; + position: absolute; + justify-content: center; + align-items: center; + overflow: visible; + border-radius: global.$standard-border-radius; + z-index: 45; + pointer-events: none; + + .rs-label { + display: flex; + font-size: smaller; + white-space: nowrap; + border-radius: 100%; + text-align: center; + text-wrap: wrap; + word-break: break-all; + justify-content: center; + align-items: center; + font-family: global.$default-font; + user-select: none; + pointer-events: none; + top: 0px; + width: fit-content; + border-radius: global.$standard-border-radius; + z-index: 40; + } + } + + .rs-range { + width: 100%; + position: relative; + background: transparent; + pointer-events: none; + -webkit-appearance: none; + margin: 0px; + z-index: 20; + + &:focus { + outline: none; + } + + &::-webkit-slider-runnable-track { + width: 100%; + background: none; + cursor: pointer; + box-shadow: none; + -webkit-appearance: none; + pointer-events: none; + } + &::-moz-range-track { + width: 100%; + cursor: pointer; + box-shadow: none; + -webkit-appearance: none; + pointer-events: none; + } + + &::-webkit-slider-thumb { + cursor: ew-resize; + -webkit-appearance: none; + pointer-events: auto; + } + &::-moz-range-thumb { + cursor: pointer; + -webkit-appearance: none; + pointer-events: auto; + } + + &::-moz-focus-outer { + border: 0; + } + + &.xsmall { + &::-webkit-slider-runnable-track { + height: global.$xsmall; + } + + &::-webkit-slider-thumb { + height: global.$xsmall; + width: global.$xsmall; + border-radius: global.$xsmall; + } + } + + &.small { + &::-webkit-slider-runnable-track { + height: global.$small; + } + + &::-webkit-slider-thumb { + height: global.$small; + width: global.$small; + border-radius: global.$small; + } + } + + &.medium { + &::-webkit-slider-runnable-track { + height: global.$medium; + } + + &::-webkit-slider-thumb { + height: global.$medium; + width: global.$medium; + border-radius: global.$medium; + } + } + + &.large { + &::-webkit-slider-runnable-track { + height: global.$large; + } + + &::-webkit-slider-thumb { + height: global.$large; + width: global.$large; + border-radius: global.$large; + } + } + } } - } - } - } - - - diff --git a/packages/components/src/components/Slider/Slider.tsx b/packages/components/src/components/Slider/Slider.tsx index 3ca51efed..f6f53799c 100644 --- a/packages/components/src/components/Slider/Slider.tsx +++ b/packages/components/src/components/Slider/Slider.tsx @@ -1,178 +1,188 @@ -import React, { useEffect, useRef, useState } from 'react' -import { Colors, getFontSize, getHeight, IGlobalProps, Size , getFormLabelSize, isDark, INumberProps } from '../../global' -import './Slider.scss' +import React, { useState } from 'react'; +import { Colors, getFontSize, getHeight, Size, getFormLabelSize, isDark, INumberProps } from '../../global'; +import './Slider.scss'; export interface ISliderProps extends INumberProps { - multithumb: boolean - autorangeMinVal?: number // minimimum value that min can have when autoranging - autorangeMinSize?: number // minimum difference between min and max when autoranging - autorange?: number // automatically adjust min/max to be +/- autorange/2 around the current value when the thumb is 15% from the min/max, or when the multithumbs are within 20% of the range and the range is bigger than autorange - endNumber?: number - setEndNumber?: (newVal: number) => void - setFinalNumber?: (newVal: number) => void - setFinalEndNumber?: (newVal: number) => void - decimals?: number; - step?: number - minDiff?: number + multithumb: boolean; + autorangeMinVal?: number; // minimimum value that min can have when autoranging + autorangeMinSize?: number; // minimum difference between min and max when autoranging + autorange?: number; // automatically adjust min/max to be +/- autorange/2 around the current value when the thumb is 15% from the min/max, or when the multithumbs are within 20% of the range and the range is bigger than autorange + endNumber?: number; + setEndNumber?: (newVal: number) => void; + setFinalNumber?: (newVal: number) => void; + setFinalEndNumber?: (newVal: number) => void; + decimals?: number; + step?: number; + minDiff?: number; } -let lastVal = 0; // bcz: WHY do I have to do this?? the pointerdown event locks in the value of 'valLoc' when it's created so need some other way to get the current value to that old handler... +let lastVal = 0; // bcz: WHY do I have to do this?? the pointerdown event locks in the value of 'valLoc' when it's created so need some other way to get the current value to that old handler... let lastEndVal = 0; export const Slider = (props: ISliderProps) => { - const [width, setWidth] = useState(100); - const [valLoc, setNumberLoc] = useState(props.number??(props.min + (props.max-props.min)/2)); - const [endNumberLoc, setEndNumberLoc] = useState(props.endNumber??(props.min + 2*(props.max-props.min)/3)); - const [min, setMin] = useState(props.min); - const [max, setMax] = useState(props.max); - const { - formLabel, - formLabelPlacement, - multithumb, - autorange, - autorangeMinVal, - autorangeMinSize, - decimals, - step = 1, - number = valLoc, - endNumber = endNumberLoc, - minDiff = (max-min)/20, - size = Size.SMALL, - height, - unit, - onPointerDown, - setNumber, - setEndNumber, - setFinalNumber, - setFinalEndNumber, - color = Colors.MEDIUM_BLUE, - fillWidth - } = props + const [width, setWidth] = useState(100); + const [valLoc, setNumberLoc] = useState(props.number ?? props.min + (props.max - props.min) / 2); + const [endNumberLoc, setEndNumberLoc] = useState(props.endNumber ?? props.min + (2 * (props.max - props.min)) / 3); + const [min, setMin] = useState(props.min); + const [max, setMax] = useState(props.max); + const { + formLabel, + formLabelPlacement, + multithumb, + autorange, + autorangeMinVal, + autorangeMinSize, + decimals, + step = 1, + number = valLoc, + endNumber = endNumberLoc, + minDiff = (max - min) / 20, + size = Size.SMALL, + height, + unit, + onPointerDown, + setNumber, + setEndNumber, + setFinalNumber, + setFinalEndNumber, + color = Colors.MEDIUM_BLUE, + fillWidth, + } = props; - const toDecimal = (num:number) => decimals !== undefined ? Math.round(num*Math.pow(10,decimals))/Math.pow(10,decimals): num; + const toDecimal = (num: number) => (decimals !== undefined ? Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals) : num); - const getLeftPos = (locVal: number) => { - const dragger = getHeight(height,size) - return (((locVal-min)/ (max-min)) * (width-dragger)) - } + const getLeftPos = (locVal: number) => { + const dragger = getHeight(+(height || 0), size); + return ((locVal - min) / (max - min)) * (width - dragger); + }; - const getValueLabel = (locVal: number): JSX.Element => { - return (
- - {toDecimal(locVal)} - -
) - } - const checkAutorange = () => { - if (autorange) { - const minval = multithumb ? Math.min(lastVal, lastEndVal) : lastVal; - const maxval = multithumb ? Math.max(lastVal, lastEndVal) : lastVal; - const autosize = Math.max(autorangeMinSize??0,(autorange ?? (maxval-minval)))/2; - if ((Math.abs((minval - min)/(max-min)) < .15) || (Math.abs((max - maxval)/(max-min)) < .15) || - (multithumb && maxval - minval < (max-min)/5 && autosize < max-min) - ) { - const newminval = autorangeMinVal !== undefined && minval-autosize < autorangeMinVal? autorangeMinVal : minval-autosize; - setMin(newminval) - setMax(newminval !== minval ? Math.max(maxval + autosize, newminval +autosize): maxval+autosize ) - } - } - } + const getValueLabel = (locVal: number): JSX.Element => { + return ( +
+ {toDecimal(locVal)} +
+ ); + }; + const checkAutorange = () => { + if (autorange) { + const minval = multithumb ? Math.min(lastVal, lastEndVal) : lastVal; + const maxval = multithumb ? Math.max(lastVal, lastEndVal) : lastVal; + const autosize = Math.max(autorangeMinSize ?? 0, autorange ?? maxval - minval) / 2; + if (Math.abs((minval - min) / (max - min)) < 0.15 || Math.abs((max - maxval) / (max - min)) < 0.15 || (multithumb && maxval - minval < (max - min) / 5 && autosize < max - min)) { + const newminval = autorangeMinVal !== undefined && minval - autosize < autorangeMinVal ? autorangeMinVal : minval - autosize; + setMin(newminval); + setMax(newminval !== minval ? Math.max(maxval + autosize, newminval + autosize) : maxval + autosize); + } + } + }; - const valSlider = (which: string, val:number, onchange: (val:number) => void, setFinal: () => void) => { - const valPointerup = (e:PointerEvent) => { - document.removeEventListener('pointerup', valPointerup, true) - setFinal(); - checkAutorange(); - } - return (
- {getValueLabel(val)} - document.addEventListener('pointerup', valPointerup, true)} - onChange={e => { - onchange(+e.target.value); - e.stopPropagation(); - }} - /> -
); - } - const onchange = (val:number) => { - if (autorangeMinVal && val < autorangeMinVal) val = autorangeMinVal; - setNumber?.(lastVal = Math.min(multithumb ? endNumber - (minDiff??0):Number.MAX_VALUE, val)) - setNumberLoc(lastVal = Math.min(multithumb ? endNumber - (minDiff??0):Number.MAX_VALUE, val)) - } - const onendchange = (val:number) => { - setEndNumber?.(lastEndVal = Math.max(number + (minDiff??0), val)) - setEndNumberLoc(lastEndVal = Math.max(number + (minDiff??0), val)) - } - const Slider:(JSX.Element|null)[] = [ - !multithumb ? (null) : valSlider("end", endNumberLoc,onendchange, () => setFinalEndNumber?.(lastEndVal)), - valSlider("start", valLoc, onchange, () => setFinalNumber?.(lastVal)) - ]; + const valSlider = (which: string, val: number, onchange: (val: number) => void, setFinal: () => void) => { + const valPointerup = () => { + document.removeEventListener('pointerup', valPointerup, true); + setFinal(); + checkAutorange(); + }; + return ( +
+ {getValueLabel(val)} + document.addEventListener('pointerup', valPointerup, true)} + onChange={e => { + onchange(+e.target.value); + e.stopPropagation(); + }} + /> +
+ ); + }; + const onchange = (val: number) => { + // eslint-disable-next-line no-param-reassign + if (autorangeMinVal && val < autorangeMinVal) val = autorangeMinVal; + setNumber?.((lastVal = Math.min(multithumb ? endNumber - (minDiff ?? 0) : Number.MAX_VALUE, val))); + setNumberLoc((lastVal = Math.min(multithumb ? endNumber - (minDiff ?? 0) : Number.MAX_VALUE, val))); + }; + const onendchange = (val: number) => { + setEndNumber?.((lastEndVal = Math.max(number + (minDiff ?? 0), val))); + setEndNumberLoc((lastEndVal = Math.max(number + (minDiff ?? 0), val))); + }; + const Slider: (JSX.Element | null)[] = [!multithumb ? null : valSlider('end', endNumberLoc, onendchange, () => setFinalEndNumber?.(lastEndVal)), valSlider('start', valLoc, onchange, () => setFinalNumber?.(lastVal))]; - const slider: JSX.Element = ( -
{ - lastVal = valLoc; - lastEndVal = endNumberLoc; - }} - style={{ - padding: `5px 0px ${getHeight(height, size)}px 0px`, - width: fillWidth ? '100%' : 'fit-content' - }}> -
{ - r && new ResizeObserver(() => setWidth(+(r?.clientWidth??100))).observe(r); - setWidth(+(r?.clientWidth??100)); - }} - style={{height: getHeight(height, size)}} - onPointerDown={onPointerDown} - > - {Slider} -
-
-
- {toDecimal(min)}{unit} - {toDecimal(max)}{unit} + const slider: JSX.Element = ( +
{ + lastVal = valLoc; + lastEndVal = endNumberLoc; + }} + style={{ + padding: `5px 0px ${getHeight(+(height || 0), size)}px 0px`, + width: fillWidth ? '100%' : 'fit-content', + }}> +
{ + r && new ResizeObserver(() => setWidth(+(r?.clientWidth ?? 100))).observe(r); + setWidth(+(r?.clientWidth ?? 100)); + }} + style={{ height: getHeight(+(height || 0), size) }} + onPointerDown={onPointerDown}> + {Slider} +
+
+
+ + {toDecimal(min)} + {unit} + + + {toDecimal(max)} + {unit} + +
+
-
-
- ) - - return ( - formLabel ? -
-
{formLabel}
- {slider} -
- : - slider -) -} + ); + return formLabel ? ( +
+
+ {formLabel} +
+ {slider} +
+ ) : ( + slider + ); +}; diff --git a/packages/components/src/components/Template/Template.scss b/packages/components/src/components/Template/Template.scss index c91147200..854abdca0 100644 --- a/packages/components/src/components/Template/Template.scss +++ b/packages/components/src/components/Template/Template.scss @@ -1,5 +1 @@ -@import '../../global/globalCssVariables.scss'; - -.template-container { - -} \ No newline at end of file +@use '../../global/globalCssVariables.scss' as global; diff --git a/packages/components/src/components/Toggle/Toggle.scss b/packages/components/src/components/Toggle/Toggle.scss index b2faa8d99..d65cb8e23 100644 --- a/packages/components/src/components/Toggle/Toggle.scss +++ b/packages/components/src/components/Toggle/Toggle.scss @@ -1,77 +1,77 @@ -@import '../../global/globalCssVariables.scss'; +@use '../../global/globalCssVariables.scss' as global; .toggle-label { - position: relative; - bottom: 0; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - font-size: $xsmall-fontSize; + position: relative; + bottom: 0; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: global.$xsmall-fontSize; } .toggle-container { - position: relative; - width: fit-content; - cursor: pointer; - overflow: hidden; - user-select: none; - display: flex; - justify-content: center; - align-items: center; - gap: 5px; - font-family: $default-font; - font-size: $medium-fontSize; - border-radius: 100px; - white-space: nowrap; - transition: 0.4s ease; - border: solid 1px; - border-color: $medium-blue; + position: relative; + width: fit-content; + cursor: pointer; + overflow: hidden; + user-select: none; + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + font-family: global.$default-font; + font-size: global.$medium-fontSize; + border-radius: 100px; + white-space: nowrap; + transition: 0.4s ease; + border: solid 1px; + border-color: global.$medium-blue; - &:hover { - .toggle-background { - filter: opacity(0.2); + &:hover { + .toggle-background { + filter: opacity(0.2); + } } - } - &.switch { - &:hover { - .toggle-background { - filter: opacity(0); - } + &.switch { + &:hover { + .toggle-background { + filter: opacity(0); + } + } } - } - .toggle-content { - position: absolute; - display: flex; - align-items: center; - width: 100%; - height: 100%; - z-index: 1; - text-transform: uppercase; - font-family: Verdana, sans-serif; - font-weight: 500; - transition: 0.4s; + .toggle-content { + position: absolute; + display: flex; + align-items: center; + width: 100%; + height: 100%; + z-index: 1; + text-transform: uppercase; + font-family: Verdana, sans-serif; + font-weight: 500; + transition: 0.4s; - .toggle-switch { - background: $medium-blue; - transition: 0.4s; - border-radius: 100px; + .toggle-switch { + background: global.$medium-blue; + transition: 0.4s; + border-radius: 100px; + } } - } - .toggle-background { - width: 100%; - height: 100%; - z-index: 0; - position: absolute; - background: $medium-blue; - transition: 0.4s ease; - filter: opacity(0); + .toggle-background { + width: 100%; + height: 100%; + z-index: 0; + position: absolute; + background: global.$medium-blue; + transition: 0.4s ease; + filter: opacity(0); - &.active { - filter: opacity(0.4) !important; + &.active { + filter: opacity(0.4) !important; + } } - } } diff --git a/packages/components/src/global/globalCssVariables.scss b/packages/components/src/global/globalCssVariables.scss index 1ac2ef45c..ebc44106d 100644 --- a/packages/components/src/global/globalCssVariables.scss +++ b/packages/components/src/global/globalCssVariables.scss @@ -75,8 +75,10 @@ $standard-border-radius: 5px; // shadow $standard-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); -$standard-button-shadow: rgb(0 0 0 / 20%) 0px 2px 4px -1px, - rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px; +$standard-button-shadow: + rgb(0 0 0 / 20%) 0px 2px 4px -1px, + rgb(0 0 0 / 14%) 0px 4px 5px 0px, + rgb(0 0 0 / 12%) 0px 1px 10px 0px; $dashboardselector-height: 32px; $mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc @@ -91,70 +93,68 @@ $LEFT_MENU_WIDTH: 60px; $TREE_BULLET_WIDTH: 20px; :export { - contextMenuZindex: $contextMenu-zindex; - SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; - COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH; - MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; - MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; - SEARCH_THUMBNAIL_SIZE: $search-thumnail-size; - ANTIMODEMENU_HEIGHT: $antimodemenu-height; - DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height; - DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; - LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH; - TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH; + contextMenuZindex: $contextMenu-zindex; + SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; + COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH; + MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; + MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; + SEARCH_THUMBNAIL_SIZE: $search-thumnail-size; + ANTIMODEMENU_HEIGHT: $antimodemenu-height; + DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height; + DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; + LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH; + TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH; } .form-wrapper { - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - gap: 0px; - padding-bottom: 5px; - - - .formLabel { display: flex; - font-family: $default-font; - text-transform: uppercase; - opacity: 0.8; - min-width: 'fit-content' - } - - &.left { - flex-direction: row; - align-items: center; - gap: 3px; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 0px; + padding-bottom: 5px; .formLabel { - text-align: left; + display: flex; + font-family: $default-font; + text-transform: uppercase; + opacity: 0.8; + min-width: 'fit-content'; } - } - &.right { - flex-direction: row-reverse; - justify-content: flex-end; - align-items: center; - gap: 3px; + &.left { + flex-direction: row; + align-items: center; + gap: 3px; - .formLabel { - text-align: right; + .formLabel { + text-align: left; + } } - } - &.top { - flex-direction: column; - gap: 1px; - } + &.right { + flex-direction: row-reverse; + justify-content: flex-end; + align-items: center; + gap: 3px; - &.top-start { - flex-direction: column; - align-items: flex-start; - } + .formLabel { + text-align: right; + } + } - &.top-end { - flex-direction: column; - align-items: flex-end; - } -} + &.top { + flex-direction: column; + gap: 1px; + } + &.top-start { + flex-direction: column; + align-items: flex-start; + } + + &.top-end { + flex-direction: column; + align-items: flex-end; + } +} diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss index 8679a0101..e7cbb4287 100644 --- a/src/client/util/CaptureManager.scss +++ b/src/client/util/CaptureManager.scss @@ -1,5 +1,3 @@ -@import '../views/global/globalCssVariables.module'; - .capture-interface { //background-color: whitesmoke !important; width: 450px; diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index d2d7cabd2..60acd5b21 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -445,7 +445,6 @@ pie title Minerals in my tap water { toolTip: "Tap or drag to create a view slide", title: "View Slide", icon: "address-card", dragFactory: doc.emptyViewSlide as Doc, clickFactory: DocCast(doc.emptyViewSlide), openFactoryLocation: OpenWhere.overlay,funcs: { hidden: "IsNoviceMode()"}}, { toolTip: "Tap or drag to create a data note", title: "DataNote", icon: "window-maximize", dragFactory: doc.emptyHeader as Doc, clickFactory: DocCast(doc.emptyHeader), openFactoryAsDelegate: true, funcs: { hidden: "IsNoviceMode()"} }, { toolTip: "Toggle a Calculator REPL", title: "replviewer", icon: "calculator", clickFactory: '' as unknown as Doc, openFactoryLocation: OpenWhere.overlay}, // hack: clickFactory is not a Doc but will get interpreted as a custom UI by the openDoc() onClick script - // { toolTip: "Toggle an UndoStack", title: "undostacker", icon: "calculator", clickFactory: "" as any, openFactoryLocation: OpenWhere.overlay}, ].map(tuple => ( { openFactoryLocation: OpenWhere.addRight, scripts: { onClick: 'openDoc(copyDragFactory(this.clickFactory,this.openFactoryAsDelegate), this.openFactoryLocation)', @@ -674,12 +673,13 @@ pie title Minerals in my tap water CurrentUserUtils.createToolButton(opts), scripts, funcs); const btnDescs = [// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet - { scripts: { onClick: "undo()"}, opts: { title: "Undo", icon: "undo-alt", toolTip: "Undo ⌘Z" }}, - { scripts: { onClick: "redo()"}, opts: { title: "Redo", icon: "redo-alt", toolTip: "Redo ⌘⇧Z" }}, - { scripts: { }, opts: { title: "undoStack", layout: "", toolTip: "Undo/Redo Stack"}}, // note: layout fields are hacks -- they don't actually run through the JSX parser (yet) - { scripts: { }, opts: { title: "linker", layout: "", toolTip: "link started"}}, - { scripts: { }, opts: { title: "currently playing", layout: "", toolTip: "currently playing media"}}, - { scripts: { }, opts: { title: "Branching", layout: "", toolTip: "Branch, baby!"}} + { scripts: { onClick: "undo()"}, opts: { title: "Undo", icon: "undo-alt", toolTip: "Undo ⌘Z" }}, + { scripts: { onClick: "redo()"}, opts: { title: "Redo", icon: "redo-alt", toolTip: "Redo ⌘⇧Z" }}, + { scripts: { }, opts: { title: "undoStack", layout: "", toolTip: "Undo/Redo Stack"}}, // note: layout fields are hacks -- they don't actually run through the JSX parser (yet) + { scripts: { }, opts: { title: "linker", layout: "", toolTip: "link started"}}, + { scripts: { }, opts: { title: "currently playing", layout: "", toolTip: "currently playing media"}}, + { scripts: { onClick: "hideUI()"},opts: { title: "Toggle UI", icon: "portrait", toolTip: "Toggle visibility of UI buttons"}}, + { scripts: { }, opts: { title: "Branching", layout: "", toolTip: "Branch, baby!"}} ]; const btns = btnDescs.map(desc => dockBtn({_width: 30, _height: 30, defaultDoubleClick: 'ignore', undoIgnoreFields: new List(['opacity']), _dragOnlyWithinContainer: true, ...desc.opts}, desc.scripts)); const dockBtnsReqdOpts:DocumentOptions = { diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index dbfc48c63..f81f17589 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -1,5 +1,3 @@ -@import '../views/global/globalCssVariables.module'; - .settings-interface { //background-color: whitesmoke !important; width: 450px; diff --git a/src/client/util/SnappingManager.ts b/src/client/util/SnappingManager.ts index 9d8a41844..3bbc297b8 100644 --- a/src/client/util/SnappingManager.ts +++ b/src/client/util/SnappingManager.ts @@ -16,6 +16,7 @@ export class SnappingManager { @observable _shiftKey = false; @observable _ctrlKey = false; @observable _metaKey = false; + @observable _hideUI = false; @observable _showPresPaths = false; @observable _isLinkFollowing = false; @observable _isDragging: boolean = false; @@ -53,6 +54,7 @@ export class SnappingManager { public static get ShiftKey() { return this.Instance._shiftKey; } // prettier-ignore public static get CtrlKey() { return this.Instance._ctrlKey; } // prettier-ignore public static get MetaKey() { return this.Instance._metaKey; } // prettier-ignore + public static get HideUI() { return this.Instance._hideUI; } // prettier-ignore public static get ShowPresPaths() { return this.Instance._showPresPaths; } // prettier-ignore public static get IsLinkFollowing(){ return this.Instance._isLinkFollowing; } // prettier-ignore public static get IsDragging() { return this.Instance._isDragging; } // prettier-ignore @@ -73,6 +75,7 @@ export class SnappingManager { public static SetShiftKey = (down: boolean) => runInAction(() => {this.Instance._shiftKey = down}); // prettier-ignore public static SetCtrlKey = (down: boolean) => runInAction(() => {this.Instance._ctrlKey = down}); // prettier-ignore public static SetMetaKey = (down: boolean) => runInAction(() => {this.Instance._metaKey = down}); // prettier-ignore + public static SetHideUI = (vis: boolean) => runInAction(() => {this.Instance._hideUI = vis}); // prettier-ignore public static SetShowPresPaths = (paths:boolean) => runInAction(() => {this.Instance._showPresPaths = paths}); // prettier-ignore public static SetIsLinkFollowing= (follow:boolean)=> runInAction(() => {this.Instance._isLinkFollowing = follow}); // prettier-ignore public static SetIsDragging = (drag: boolean) => runInAction(() => {this.Instance._isDragging = drag}); // prettier-ignore diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss index fd343ac8e..806741c22 100644 --- a/src/client/util/reportManager/ReportManager.scss +++ b/src/client/util/reportManager/ReportManager.scss @@ -1,4 +1,4 @@ -@import '../../views/global/globalCssVariables.module'; +@use '../../views/global/globalCssVariables.module' as global; // header @@ -97,7 +97,7 @@ background: transparent; // &:hover { - // // border-bottom-color: $text-gray; + // // border-bottom-color: global.$text-gray; // } // &:focus { // // border-bottom-color: #4476f7; diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 2ebf673fe..48fa86276 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -1,11 +1,11 @@ -@import './global/globalCssVariables.module'; +@use './global/globalCssVariables.module' as global; .antimodeMenu-cont { position: absolute; z-index: 10001; - height: $antimodemenu-height; + height: global.$antimodemenu-height; width: fit-content; - border-radius: $standard-border-radius; + border-radius: global.$standard-border-radius; overflow: hidden; // box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); // border-radius: 0px 6px 6px 6px; diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 88e147a03..d22c4d096 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -1,9 +1,9 @@ -@import 'global/globalCssVariables.module.scss'; +@use 'global/globalCssVariables.module.scss' as global; .contextMenu-cont { position: absolute; display: flex; - z-index: $contextMenu-zindex; + z-index: global.$contextMenu-zindex; box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%); flex-direction: column; background: whitesmoke; @@ -109,7 +109,7 @@ .contextMenu-item:hover { border-width: 0.11px; border-style: none; - border-color: $medium-gray; // rgb(187, 186, 186); + border-color: global.$medium-gray; // rgb(187, 186, 186); border-bottom-style: solid; border-top-style: solid; @@ -139,7 +139,7 @@ transition: all 0.1s; border-width: 0.11px; border-style: none; - border-color: $medium-gray; // rgb(187, 186, 186); + border-color: global.$medium-gray; // rgb(187, 186, 186); // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 13px; @@ -184,7 +184,7 @@ .top-bar { height: 20px; width: 100%; - display: flex; + display: flex; .close-menu { margin-top: 0; @@ -200,7 +200,7 @@ } } - .bottom-box{ + .bottom-box { display: flex; flex-direction: row; justify-content: center; @@ -209,11 +209,11 @@ height: 100%; width: 100%; - .width-selector{ + .width-selector { width: 100px; } - .max-min-selector{ + .max-min-selector { height: 15px; width: 30px; } diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss index 25feca7bf..daa711bc4 100644 --- a/src/client/views/DashboardView.scss +++ b/src/client/views/DashboardView.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables.module'; +@use './global/globalCssVariables.module' as global; $dashboard-left-menu-width: 250px; $dashboard-view-padding: 20px; @@ -61,9 +61,9 @@ $dashboard-container-width: 250px; font-size: 120px; font-weight: 100; text-align: center; - border: solid 2px $light-gray; + border: solid 2px global.$light-gray; cursor: pointer; - color: $light-gray; + color: global.$light-gray; display: flex; display: flex; justify-content: center; @@ -71,8 +71,8 @@ $dashboard-container-width: 250px; position: relative; &:hover { - color: $light-blue; - border: solid 2px $light-blue; + color: global.$light-blue; + border: solid 2px global.$light-blue; } .background { @@ -91,14 +91,14 @@ $dashboard-container-width: 250px; cursor: pointer; width: $dashboard-container-width; height: $dashboard-container-height; - outline: solid 2px $light-gray; + outline: solid 2px global.$light-gray; outline-offset: -2px; display: flex; flex-direction: column; overflow: hidden; &:hover { - outline: solid 2px $light-blue; + outline: solid 2px global.$light-blue; } .title { @@ -144,7 +144,7 @@ $dashboard-container-width: 250px; } .new-dashboard { - color: $dark-gray; + color: global.$dark-gray; padding: 10px; display: flex; width: 100%; diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index ede277aae..f19fecfa6 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables.module'; +@use 'global/globalCssVariables.module' as global; $linkGap: 3px; @@ -7,13 +7,13 @@ $linkGap: 3px; } .documentButtonBar-linkButton-empty:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } .documentButtonBar-linkButton-nonempty:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } @@ -32,7 +32,6 @@ $linkGap: 3px; .tags { width: 40px; - } } .documentButtonBar-followTypes { @@ -92,8 +91,8 @@ $linkGap: 3px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-gray; - color: $white; + background-color: global.$dark-gray; + color: global.$white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -104,7 +103,7 @@ $linkGap: 3px; align-items: center; &:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } @@ -132,12 +131,12 @@ $linkGap: 3px; text-align: center; border-radius: 50%; pointer-events: auto; - background-color: $dark-gray; + background-color: global.$dark-gray; border: none; transition: 0.2s ease all; &:hover { - background-color: $medium-gray; + background-color: global.$medium-gray; } } @@ -148,7 +147,7 @@ $linkGap: 3px; text-align: center; border-radius: 50%; pointer-events: auto; - background-color: $dark-gray; + background-color: global.$dark-gray; border: none; transition: 0.2s ease all; display: flex; @@ -157,8 +156,8 @@ $linkGap: 3px; align-items: center; &:hover { - background-color: $black; - + background-color: global.$black; + .documentButtonBar-pinTypes { display: flex; } diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 346df10d5..a5afb1305 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables.module'; +@use 'global/globalCssVariables.module' as global; $linkGap: 3px; $headerHeight: 20px; @@ -195,14 +195,14 @@ $resizeHandler: 8px; .documentDecorations-titleSpan { width: 100%; border-radius: 8px; - background: $light-gray; + background: global.$contextMenu-zindex; display: inline-block; cursor: move; } } .documentDecorations-titleBackground { - background: $light-gray; + background: global.$light-gray; border-radius: 8px; width: 100%; height: 100%; @@ -314,7 +314,7 @@ $resizeHandler: 8px; .documentDecorations-bottomResizer, .documentDecorations-rightResizer { pointer-events: auto; - background: $medium-gray-dim; + background: global.$medium-gray-dim; //opacity: 0.2; &:hover { opacity: 1; @@ -344,7 +344,7 @@ $resizeHandler: 8px; border-radius: 100%; left: 7px; top: 7px; - background: $medium-gray; + background: global.$medium-gray; height: 10; width: 10; opacity: 0.5; @@ -378,7 +378,7 @@ $resizeHandler: 8px; transform: translate(0px, -25%); padding-bottom: 100%; border-radius: 100%; - border: solid $medium-gray 10px; + border: solid global.$medium-gray 10px; } .documentDecorations-topLeftResizer, @@ -497,13 +497,13 @@ $resizeHandler: 8px; } .linkButton-empty:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } .linkButton-nonempty:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } @@ -520,7 +520,7 @@ $resizeHandler: 8px; align-items: center; gap: 5px; //top: 4px; - background: $light-gray; + background: global.$light-gray; opacity: 0.2; pointer-events: all; transition: opacity 1s; @@ -542,8 +542,8 @@ $resizeHandler: 8px; text-align: center; border-radius: 50%; pointer-events: auto; - color: $dark-gray; - border: $dark-gray 1px solid; + color: global.$dark-gray; + border: global.$dark-gray 1px solid; } .linkButton-linker:hover { @@ -558,8 +558,8 @@ $resizeHandler: 8px; border-radius: 50%; opacity: 0.9; pointer-events: auto; - background-color: $dark-gray; - color: $white; + background-color: global.$dark-gray; + color: global.$white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -570,7 +570,7 @@ $resizeHandler: 8px; align-items: center; &:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } @@ -600,13 +600,13 @@ $resizeHandler: 8px; border-radius: 50%; opacity: 0.9; font-size: 14; - background-color: $dark-gray; - color: $white; + background-color: global.$dark-gray; + color: global.$white; text-align: center; cursor: pointer; &:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); } } @@ -616,9 +616,9 @@ $resizeHandler: 8px; top: 25px; left: 0px; width: max-content; - font-family: $sans-serif; + font-family: global.$sans-serif; font-size: 12px; - background-color: $light-gray; + background-color: global.$light-gray; padding: 2px 12px; list-style: none; diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index e3df01bbb..0d3feb073 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -18,7 +18,7 @@ import { GestureOverlay } from './GestureOverlay'; import './LightboxView.scss'; import { ObservableReactComponent } from './ObservableReactComponent'; import { OverlayView } from './OverlayView'; -import { DefaultStyleProvider, returnEmptyDocViewList, wavyBorderPath } from './StyleProvider'; +import { DefaultStyleProvider, returnEmptyDocViewList /* wavyBorderPath */ } from './StyleProvider'; import { DocumentView } from './nodes/DocumentView'; import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere'; import { StickerPalette } from './smartdraw/StickerPalette'; @@ -283,7 +283,7 @@ export class LightboxView extends ObservableReactComponent { top: this.topBorder, width: this.lightboxWidth(), height: this.lightboxHeight(), - clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`, + // clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`, background: SnappingManager.userBackgroundColor, }}> diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 02916e48e..bea1de435 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,5 +1,5 @@ -@import 'global/globalCssVariables.module'; -@import 'nodeModuleOverrides'; +@use 'global/globalCssVariables.module' as global; +// bcz: fix @import 'nodeModuleOverrides'; :root { --flyoutHandleWidth: 28px; @@ -10,8 +10,8 @@ body { width: 100%; height: 100%; overflow: hidden; - font-family: $sans-serif; - font-size: $body-text; + font-family: global.$sans-serif; + font-size: global.$body-text; margin: 0; position: absolute; top: 0; @@ -54,7 +54,7 @@ button { background: black; outline: none; border: 0px; - color: $white; + color: global.$white; text-transform: uppercase; letter-spacing: 2px; font-size: 75%; @@ -63,7 +63,7 @@ button { } button:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index dda543470..3c1da88cc 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -87,10 +87,9 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; await CurrentUserUtils.loadUserDocument(info); setTimeout(() => { // prevent zooming browser - document.getElementById('root')!.addEventListener('wheel', event => event.ctrlKey && event.preventDefault(), true); + document.getElementById('root')!.addEventListener('wheel', event => event.ctrlKey && event.preventDefault(), { capture: true, passive: true }); const startload = (document as unknown as { startLoad: number }).startLoad; // see index.html in deploy/ const loading = Date.now() - (startload ? Number(startload) : Date.now() - 3000); - console.log('Loading Time = ' + loading); const d = new Date(); d.setTime(d.getTime() + 100 * 24 * 60 * 60 * 1000); const expires = 'expires=' + d.toUTCString(); diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index e204759ab..2170e0c34 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -1,5 +1,5 @@ -@import 'global/globalCssVariables.module.scss'; -@import 'nodeModuleOverrides'; +@use 'global/globalCssVariables.module.scss' as global; +// bcz: fix @import 'nodeModuleOverrides'; html { overscroll-behavior-x: none; } @@ -68,10 +68,10 @@ body { } .mainView-container { - color: $dark-gray; + color: global.$dark-gray; .lm_goldenlayout { - background: $medium-gray; + background: global.$medium-gray; } } @@ -93,7 +93,7 @@ body { .mainView-propertiesDragger-minified, .mainView-propertiesDragger { //background-color: rgb(140, 139, 139); - background-color: $light-gray; + background-color: global.$light-gray; height: 55px; width: 17px; position: absolute; @@ -133,10 +133,10 @@ body { flex-direction: column; position: relative; height: 100%; - background: $medium-gray; + background: global.$medium-gray; .documentView-node-topmost { - background: $light-gray; + background: global.$light-gray; } } @@ -153,12 +153,12 @@ body { } .mainView-libraryHandle { - background-color: $light-gray; + background-color: global.$light-gray; } .mainView-leftMenuPanel { min-width: var(--menuPanelWidth); - border-right: $standard-border; + border-right: global.$standard-border; .collectionStackingView { scrollbar-width: none; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 195b1c572..8b0354471 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -99,7 +99,7 @@ export class MainView extends ObservableReactComponent { @observable private _sidebarContent: Doc = Doc.MyLeftSidebarPanel; @observable private _leftMenuFlyoutWidth: number = 0; @computed get _hideUI() { - return this.mainDoc && this.mainDoc._type_collection !== CollectionViewType.Docking; + return SnappingManager.HideUI || (this.mainDoc && this.mainDoc._type_collection !== CollectionViewType.Docking); } @computed private get dashboardTabHeight() { @@ -712,7 +712,7 @@ export class MainView extends ObservableReactComponent { childFiltersByRanges={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} suppressSetHeight - renderDepth={this._hideUI ? 0 : -1} + renderDepth={-1} /> ); @@ -1168,6 +1168,10 @@ ScriptingGlobals.add(function selectMainMenu(doc: Doc) { MainView.Instance.selectMenu(doc); }); // eslint-disable-next-line prefer-arrow-callback +ScriptingGlobals.add(function hideUI() { + SnappingManager.SetHideUI(!SnappingManager.HideUI); +}); +// eslint-disable-next-line prefer-arrow-callback ScriptingGlobals.add(function createNewPresentation() { return MainView.Instance.createNewPresentation(); }, 'creates a new presentation when called'); diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index b8c73b6d3..6c2cda346 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables.module.scss'; +@use 'global/globalCssVariables.module.scss' as global; $linkGap: 3px; @@ -7,13 +7,13 @@ $linkGap: 3px; } .propertiesButtons-linkButton-empty:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } .propertiesButtons-linkButton-nonempty:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } @@ -46,19 +46,19 @@ $linkGap: 3px; // margin-left: 4px; &:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); cursor: pointer; } } .propertiesButtons-linkButton-empty.toggle-on { - background-color: $medium-blue; - color: $white; + background-color: global.$medium-blue; + color: global.$white; width: 100%; } .propertiesButtons-linkButton-empty.toggle-hover { - background-color: $light-blue; - color: $black; + background-color: global.$light-blue; + color: global.$black; width: 100%; } .propertiesButtons-linkButton-empty.toggle-off { @@ -88,7 +88,7 @@ $linkGap: 3px; cursor: pointer; text-align: center; margin-top: 5px; - border: 0.5px solid $medium-gray; + border: 0.5px solid global.$medium-gray; background-color: rgb(230, 230, 230); border-radius: 5px; padding: 4px; @@ -111,7 +111,7 @@ $linkGap: 3px; .list-item { cursor: pointer; - color: $black; + color: global.$black; width: 100%; height: 25px; font-weight: 400; diff --git a/src/client/views/PropertiesSection.scss b/src/client/views/PropertiesSection.scss index d32da1bf1..f7138dd50 100644 --- a/src/client/views/PropertiesSection.scss +++ b/src/client/views/PropertiesSection.scss @@ -1,5 +1,3 @@ -@import './global/globalCssVariables.module.scss'; - .propertiesView-section { .propertiesView-content { padding: 10px; diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 7866e67e7..280de4893 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables.module.scss'; +@use './global/globalCssVariables.module.scss' as global; .propertiesView-presentationTrails-title { display: flex; @@ -28,7 +28,7 @@ font-family: 'Roboto'; font-size: 12px; cursor: auto; - border-left: $standard-border; + border-left: global.$standard-border; .slider-text { font-size: 8px; @@ -567,7 +567,7 @@ height: fit-content; &:hover { - border: 0.75px solid $medium-blue; + border: 0.75px solid global.$medium-blue; } } diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss index 36a9ce6d0..8879fc20d 100644 --- a/src/client/views/TemplateMenu.scss +++ b/src/client/views/TemplateMenu.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables.module.scss'; +@use 'global/globalCssVariables.module.scss' as global; .templating-menu { position: absolute; pointer-events: auto; @@ -24,15 +24,15 @@ cursor: pointer; &:hover { - background: $medium-gray; + background: global.$medium-gray; transform: scale(1.05); } } .template-list { - font-family: $sans-serif; + font-family: global.$sans-serif; font-size: 12px; - background-color: $light-gray; + background-color: global.$light-gray; padding: 2px 12px; list-style: none; position: relative; diff --git a/src/client/views/animationtimeline/Region.scss b/src/client/views/animationtimeline/Region.scss index b390ae34e..df82febea 100644 --- a/src/client/views/animationtimeline/Region.scss +++ b/src/client/views/animationtimeline/Region.scss @@ -1,4 +1,4 @@ -@import './../global/globalCssVariables.module.scss'; +@use './../global/globalCssVariables.module.scss' as global; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -14,11 +14,11 @@ $timelineDark: #77a1aa; height: 200px; top: 50%; position: relative; - background-color: $white; + background-color: global.$white; .menutable { tr:nth-child(odd) { - background-color: $light-gray; + background-color: global.$light-gray; } } } @@ -70,7 +70,7 @@ $timelineDark: #77a1aa; height: 100%; position: absolute; pointer-events: none; - background: linear-gradient(to left, $timelineColor 10%, $white); + background: linear-gradient(to left, $timelineColor 10%, global.$white); } .fadeRight { @@ -78,7 +78,7 @@ $timelineDark: #77a1aa; height: 100%; position: absolute; pointer-events: none; - background: linear-gradient(to right, $timelineColor 10%, $white); + background: linear-gradient(to right, $timelineColor 10%, global.$white); } .divider { diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 35ba0fa7f..e1d3b190c 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -1,4 +1,4 @@ -@import './../global/globalCssVariables.module.scss'; +@use './../global/globalCssVariables.module.scss' as global; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -159,7 +159,7 @@ $timelineDark: #77a1aa; width: 100%; height: 300px; position: absolute; - background-color: $light-gray; + background-color: global.$light-gray; border-bottom: 2px solid $timelineDark; transition: transform 500ms ease; @@ -247,7 +247,7 @@ $timelineDark: #77a1aa; top: 0px; width: 100px; height: 30%; - border: 1px solid $dark-gray; + border: 1px solid global.$dark-gray; font-size: 12px; line-height: 11px; background-color: $timelineDark; diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss index de2042f17..5398a4a97 100644 --- a/src/client/views/animationtimeline/TimelineMenu.scss +++ b/src/client/views/animationtimeline/TimelineMenu.scss @@ -1,9 +1,9 @@ -@import './../global/globalCssVariables.module.scss'; +@use './../global/globalCssVariables.module.scss' as global; .timeline-menu-container { position: absolute; display: flex; - box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw; + box-shadow: global.$medium-gray 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; z-index: 10000; @@ -14,7 +14,7 @@ border: solid #bbbbbbbb 1px; .timeline-menu-input { - font: $sans-serif; + font: global.$sans-serif; font-size: 13px; width: 100%; text-transform: uppercase; @@ -33,11 +33,11 @@ border-top-left-radius: 15px; border-top-right-radius: 15px; text-transform: uppercase; - background: $dark-gray; + background: global.$dark-gray; letter-spacing: 2px; .timeline-menu-header-desc { - font: $sans-serif; + font: global.$sans-serif; font-size: 13px; text-align: center; color: whitesmoke; @@ -72,15 +72,15 @@ .timeline-menu-item:hover { border-width: 0.11px; border-style: none; - border-color: $medium-gray; + border-color: global.$medium-gray; border-bottom-style: solid; border-top-style: solid; - background: $medium-blue; + background: global.$medium-blue; } .timeline-menu-desc { padding-left: 10px; - font: $sans-serif; + font: global.$sans-serif; font-size: 13px; } } diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index 2878232e6..8336f2b2f 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,4 +1,4 @@ -@import './../global/globalCssVariables.module.scss'; +@use './../global/globalCssVariables.module.scss' as global; $timelineColor: #9acedf; $timelineDark: #77a1aa; diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss index f56b2fe5f..7f5e8b8f3 100644 --- a/src/client/views/animationtimeline/Track.scss +++ b/src/client/views/animationtimeline/Track.scss @@ -1,12 +1,12 @@ -@import './../global/globalCssVariables.module.scss'; +@use './../global/globalCssVariables.module.scss' as global; .track-container { .track { .inner { top: 0px; width: calc(100%); - background-color: $white; - border: 1px solid $dark-gray; + background-color: global.$white; + border: 1px solid global.$dark-gray; position: relative; z-index: 100; } diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss index 79c53db08..06dd4627f 100644 --- a/src/client/views/collections/CollectionCardDeckView.scss +++ b/src/client/views/collections/CollectionCardDeckView.scss @@ -1,5 +1,3 @@ -@import '../global/globalCssVariables.module.scss'; - .collectionCardView-outer { height: 100%; width: 100%; diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 42e112906..13e6b54c2 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .collectionCarousel3DView-outer { height: 100%; position: relative; @@ -10,8 +10,8 @@ .carousel-wrapper { display: flex; position: absolute; - top: $CAROUSEL3D_TOP * 1%; - height: ($CAROUSEL3D_SIDE_SCALE * 100) * 1%; + top: global.$CAROUSEL3D_TOP * 1%; + height: (global.$CAROUSEL3D_SIDE_SCALE * 100) * 1%; align-items: center; transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); @@ -24,7 +24,7 @@ pointer-events: none; opacity: 0.5; z-index: 1; - transform: scale($CAROUSEL3D_SIDE_SCALE); + transform: scale(global.$CAROUSEL3D_SIDE_SCALE); user-select: none; } @@ -32,7 +32,7 @@ pointer-events: unset; opacity: 1; z-index: 2; - transform: scale($CAROUSEL3D_CENTER_SCALE); + transform: scale(global.$CAROUSEL3D_CENTER_SCALE); } } @@ -80,7 +80,7 @@ .carousel3DView-back { top: 0; background: transparent; - width: calc((1 - #{$CAROUSEL3D_CENTER_SCALE} * 0.33) / 2 * 100%); + width: calc((1 - #{global.$CAROUSEL3D_CENTER_SCALE} * 0.33) / 2 * 100%); height: 100%; } diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index a747ef45f..7c19d39da 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .lm_root { position: relative; @@ -285,7 +285,7 @@ background: transparent; border: solid 0px transparent; cursor: grab; - color: $black; + color: global.$black; } .collectiondockingview-container .lm_splitter { opacity: 0.2; @@ -378,7 +378,7 @@ ul.lm_tabs::before { z-index: 1; text-align: center; font-size: 18; - color: $dark-gray; + color: global.$dark-gray; img { position: relative; @@ -491,7 +491,7 @@ ul.lm_tabs::before { } .lm_content { - background: $white; + background: global.$white; } .lm_controls { @@ -557,7 +557,7 @@ ul.lm_tabs::before { } .flexlayout__splitter { - background-color: $dark-gray; + background-color: global.$dark-gray; } .flexlayout__splitter:hover { @@ -626,7 +626,7 @@ ul.lm_tabs::before { position: absolute; box-sizing: border-box; background-color: #222; - color: $dark-gray; + color: global.$dark-gray; } .flexlayout__tab_button { @@ -709,7 +709,7 @@ ul.lm_tabs::before { } .flexlayout__tab_header_outer { - background-color: $dark-gray; + background-color: global.$dark-gray; position: absolute; left: 0; right: 0; @@ -769,28 +769,28 @@ ul.lm_tabs::before { } .flexlayout__border_top { - background-color: $dark-gray; + background-color: global.$dark-gray; border-bottom: 1px solid #ddd; box-sizing: border-box; overflow: hidden; } .flexlayout__border_bottom { - background-color: $dark-gray; + background-color: global.$dark-gray; border-top: 1px solid #333; box-sizing: border-box; overflow: hidden; } .flexlayout__border_left { - background-color: $dark-gray; + background-color: global.$dark-gray; border-right: 1px solid #333; box-sizing: border-box; overflow: hidden; } .flexlayout__border_right { - background-color: $dark-gray; + background-color: global.$dark-gray; border-left: 1px solid #333; box-sizing: border-box; overflow: hidden; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 45d9394ed..11fce720c 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,13 +1,13 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .collectionMenu-container { display: flex; position: relative; align-content: center; justify-content: space-between; - background-color: $dark-gray; + background-color: global.$dark-gray; height: 40px; - border-bottom: $standard-border; + border-bottom: global.$standard-border; padding: 0 10px; align-items: center; overflow-x: auto; diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index 95fda7b0a..0d24a56b5 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .collectionNoteTakingView-DocumentButtons { opacity: 0; @@ -58,7 +58,7 @@ .documentButtonMenu { position: relative; height: fit-content; - border-bottom: $standard-border; + border-bottom: global.$standard-border; display: flex; justify-content: center; flex-direction: column; @@ -70,11 +70,11 @@ width: 90%; margin: 5px; font-size: 11px; - background-color: $light-blue; - color: $medium-blue; + background-color: global.$light-blue; + color: global.$medium-blue; padding: 10px; border-radius: 10px; - border: solid 2px $medium-blue; + border: solid 2px global.$medium-blue; } } @@ -146,9 +146,9 @@ padding: 10px; height: 2vw; width: 100%; - font-family: $sans-serif; - background: $dark-gray; - color: $white; + font-family: global.$sans-serif; + background: global.$dark-gray; + color: global.$white; } .collectionNoteTakingView-columnDragger { @@ -206,7 +206,7 @@ margin-left: 2px; margin-right: 2px; margin-top: 2px; - background: $medium-gray; + background: global.$medium-gray; height: 5px; &.active { @@ -258,7 +258,7 @@ text-align: center; margin: auto; margin-bottom: 10px; - background: $medium-gray; + background: global.$medium-gray; // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong .editableView-input:hover, @@ -279,7 +279,7 @@ display: flex; align-items: center; justify-content: center; - color: $dark-gray; + color: global.$dark-gray; .editableView-container-editing-oneLine, .editableView-container-editing { diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index 0ced3f9e3..d05c0ffde 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .collectionStackedTimeline-timelineContainer { height: 100%; @@ -6,7 +6,7 @@ overflow-x: auto; overflow-y: hidden; border: none; - background-color: $white; + background-color: global.$white; border-width: 0 2px 0 2px; &:hover { @@ -28,7 +28,7 @@ .collectionStackedTimeline { position: absolute; - background: $off-white; + background: global.$off-white; z-index: 1000; height: 100%; overflow: hidden; @@ -36,7 +36,7 @@ .collectionStackedTimeline-trim-shade { position: absolute; height: 100%; - background-color: $dark-gray; + background-color: global.$dark-gray; opacity: 0.3; top: 0; } @@ -45,7 +45,7 @@ height: 100%; position: absolute; box-sizing: border-box; - border: 2px solid $medium-blue; + border: 2px solid global.$medium-blue; display: flex; justify-content: space-between; max-width: 100%; @@ -53,7 +53,7 @@ left: 0; .collectionStackedTimeline-trim-handle { - background-color: $medium-blue; + background-color: global.$medium-blue; height: 100%; width: 5px; cursor: ew-resize; @@ -65,12 +65,12 @@ width: 10px; top: 2.5%; height: 95%; - background: $light-blue; + background: global.$light-blue; border-radius: 3px; opacity: 0.3; z-index: 500; border-style: solid; - border-color: $medium-blue; + border-color: global.$medium-blue; border-width: 1px; } @@ -84,12 +84,12 @@ } .collectionStackedTimeline-current { - background-color: $pink; + background-color: global.$pink; } .collectionStackedTimeline-hover { display: none; - background-color: $medium-blue; + background-color: global.$medium-blue; } .collectionStackedTimeline-marker-timeline { @@ -97,14 +97,14 @@ top: 2.5%; height: 95%; border-radius: 4px; - //background: $light-gray; + //background: global.$light-gray; &:hover { opacity: 1; } .collectionStackedTimeline-left-resizer, .collectionStackedTimeline-resizer { - background: $dark-gray; + background: global.$dark-gray; position: absolute; top: 0; height: 100%; @@ -141,7 +141,7 @@ .hoverTime { position: absolute; - color: $dark-gray; + color: global.$dark-gray; transform: translate(0, -100%); font-weight: bold; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 6400a0a8e..5237bdffb 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .collectionMasonryView { display: inline; @@ -18,7 +18,7 @@ .documentButtonMenu { position: relative; height: fit-content; - border-bottom: $standard-border; + border-bottom: global.$standard-border; display: flex; justify-content: center; flex-direction: column; @@ -30,10 +30,10 @@ width: 90%; margin: 5px; font-size: 11px; - color: $medium-blue; + color: global.$medium-blue; padding: 10px; border-radius: 5px; - border: solid 0.5px $medium-blue; + border: solid 0.5px global.$medium-blue; } } @@ -115,9 +115,9 @@ padding: 10px; height: 2vw; width: 100%; - font-family: $sans-serif; - background: $dark-gray; - color: $white; + font-family: global.$sans-serif; + background: global.$dark-gray; + color: global.$white; } .collectionStackingView-columnDragger { @@ -149,7 +149,7 @@ .collectionStackingView-collapseBar { margin-top: 2px; - background: $medium-gray; + background: global.$medium-gray; height: 5px; width: 100%; display: none; @@ -207,11 +207,11 @@ text-align: center; margin: auto; margin-bottom: 10px; - background: $medium-gray; + background: global.$medium-gray; // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong .editableView-input { - color: $dark-gray; + color: global.$dark-gray; } .editableView-input:hover, @@ -232,7 +232,7 @@ display: flex; align-items: center; justify-content: center; - color: $dark-gray; + color: global.$dark-gray; .editableView-container-editing-oneLine, .editableView-container-editing { diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index bbbef78b4..2a03ea708 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .collectionTreeView-container { transform-origin: top left; @@ -12,7 +12,7 @@ width: 100%; position: relative; top: 0; - // background: $light-gray; + // background: global.$light-gray; font-size: 13px; overflow: auto; user-select: none; @@ -21,7 +21,7 @@ ul { list-style: none; - padding-left: $TREE_BULLET_WIDTH; + padding-left: global.$TREE_BULLET_WIDTH; margin-bottom: 1px; // otherwise vertical scrollbars may pop up for no apparent reason.... > .contentFittingDocumentView { width: unset; @@ -47,7 +47,7 @@ } .delete-button { - color: $medium-gray; + color: global.$medium-gray; // float: right; margin-left: 15px; // margin-top: 3px; @@ -90,7 +90,7 @@ .collectionTreeView-subtitle { font-style: italic; font-size: 8pt; - color: $medium-gray; + color: global.$medium-gray; } .docContainer { diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index de53a2c62..06c324bd0 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -1,10 +1,10 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .collectionView { border-width: 0; - border-color: $light-gray; + border-color: global.$light-gray; border-style: solid; - border-radius: 0 0 $border-radius $border-radius; + border-radius: 0 0 global.$border-radius global.$border-radius; box-sizing: border-box; border-radius: inherit; width: 100%; diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index dd4c0b881..397e35ca9 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .tabDocView-content { height: 100%; diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 2ab1a5ac1..78794d112 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .treeView-label { max-height: 1.5em; @@ -14,7 +14,7 @@ .bullet-outline { position: relative; width: fit-content; - color: $medium-gray; + color: global.$medium-gray; transform: scale(0.5); display: inline-flex; align-items: center; @@ -66,7 +66,7 @@ min-height: 20px; min-width: 15px; margin-right: 3px; - color: $medium-gray; + color: global.$medium-gray; border: #80808030 1px solid; border-radius: 5px; z-index: 1; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 46bd37f6d..cce0ff684 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.module.scss'; +@use '../../global/globalCssVariables.module.scss' as global; .collectionfreeformview-none { position: inherit; @@ -32,9 +32,9 @@ .collectionfreeformview-mask-empty, .collectionfreeformview-mask { z-index: 5000; - width: $INK_MASK_SIZE; - height: $INK_MASK_SIZE; - transform: translate($INK_MASK_SIZE_HALF, $INK_MASK_SIZE_HALF); + width: global.$INK_MASK_SIZE; + height: global.$INK_MASK_SIZE; + transform: translate(global.$INK_MASK_SIZE_HALF, global.$INK_MASK_SIZE_HALF); pointer-events: none; position: absolute; background-color: transparent; @@ -211,11 +211,11 @@ //nested freeform views // .collectionfreeformview-container { - // background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px), - // linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); + // background-image: linear-gradient(to right, global.$light-color-secondary 1px, transparent 1px), + // linear-gradient(to bottom, global.$light-color-secondary 1px, transparent 1px); // background-size: 30px 30px; // } - border: 0px solid $light-gray; + border: 0px solid global.$light-gray; border-radius: inherit; box-sizing: border-box; position: absolute; @@ -233,7 +233,7 @@ box-sizing: border-box; width: 98%; height: 98%; - border-radius: $border-radius; + border-radius: global.$border-radius; } //this is an animation for the blinking cursor! diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelHandler.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelHandler.tsx index f050b9846..1a44e094d 100644 --- a/src/client/views/collections/collectionFreeForm/ImageLabelHandler.tsx +++ b/src/client/views/collections/collectionFreeForm/ImageLabelHandler.tsx @@ -9,7 +9,8 @@ import { MarqueeOptionsMenu } from './MarqueeOptionsMenu'; import './ImageLabelHandler.scss'; @observer -export class ImageLabelHandler extends ObservableReactComponent<{}> { +export class ImageLabelHandler extends ObservableReactComponent { + // eslint-disable-next-line no-use-before-define static Instance: ImageLabelHandler; @observable _display: boolean = false; @@ -19,11 +20,10 @@ export class ImageLabelHandler extends ObservableReactComponent<{}> { @observable _currentLabel: string = ''; @observable _labelGroups: string[] = []; - constructor(props: any) { + constructor(props: object) { super(props); makeObservable(this); ImageLabelHandler.Instance = this; - console.log('Instantiated label handler!'); } @action @@ -41,8 +41,8 @@ export class ImageLabelHandler extends ObservableReactComponent<{}> { }; @action - addLabel = (label: string) => { - label = label.toUpperCase().trim(); + addLabel = (labelIn: string) => { + const label = labelIn.toUpperCase().trim(); if (label.length > 0) { if (!this._labelGroups.includes(label)) { this._labelGroups = [...this._labelGroups, label]; @@ -96,10 +96,10 @@ export class ImageLabelHandler extends ObservableReactComponent<{}> {
{this._labelGroups.map(group => { return ( -
+

{group}

{ this.removeLabel(group); }} diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss index b8ceec139..0dfaed38a 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss @@ -1,12 +1,12 @@ -@import '../../global/globalCssVariables.module.scss'; -@import '../../_nodeModuleOverrides'; +@use '../../global/globalCssVariables.module.scss' as global; +// bcz fix @import '../../_nodeModuleOverrides'; .collectionLinearView { width: 100%; } .collectionLinearView-label { color: black; - background-color: $light-gray; + background-color: global.$light-gray; width: 100%; } .collectionLinearView-outer { @@ -32,8 +32,8 @@ } > span { - background: $dark-gray; - color: $white; + background: global.$dark-gray; + color: global.$white; border-radius: 18px; margin-right: 6px; cursor: pointer; @@ -44,7 +44,7 @@ } .bottomPopup-background { - background: $medium-blue; + background: global.$medium-blue; display: flex; border-radius: 10px; height: 35; @@ -55,7 +55,7 @@ } .bottomPopup-text { - color: $white; + color: global.$white; display: inline; white-space: nowrap; padding-left: 8px; @@ -72,7 +72,7 @@ padding-left: 8px; padding-right: 8px; vertical-align: middle; - background-color: $light-gray; + background-color: global.$light-gray; border-radius: 3px; color: black; margin-right: 5px; @@ -86,7 +86,7 @@ padding-left: 8px; padding-right: 8px; vertical-align: middle; - background-color: $close-red; + background-color: global.$close-red; border-radius: 3px; color: black; } @@ -94,13 +94,13 @@ > label { pointer-events: all; cursor: pointer; - background-color: $medium-blue; + background-color: global.$medium-blue; padding: 5; border-radius: 2px; height: 100%; min-width: 25; margin: 0; - color: $white; + color: global.$white; display: flex; font-weight: 100; transition: transform 0.2s; diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 817ceac97..0bf78f57c 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.module.scss'; +@use '../../global/globalCssVariables.module.scss' as global; .collectionSchemaView { cursor: default; @@ -7,7 +7,7 @@ flex-direction: row; .schema-table { - background-color: $white; + background-color: global.$white; cursor: grab; width: 100%; @@ -49,10 +49,10 @@ .schema-column-menu, .schema-filter-menu { - background: $light-gray; + background: global.$light-gray; position: absolute; - border: 1px solid $medium-gray; - border-bottom: 2px solid $medium-gray; + border: 1px solid global.$medium-gray; + border-bottom: 2px solid global.$medium-gray; max-height: 201px; display: flex; overflow: hidden; @@ -66,7 +66,7 @@ width: 100%; &:hover { - background-color: $medium-gray; + background-color: global.$medium-gray; } .schema-search-result-type { font-family: 'Courier New', Courier, monospace; @@ -74,8 +74,8 @@ .schema-search-result-type, .schema-search-result-desc { - color: $dark-gray; - font-size: $body-text; + color: global.$dark-gray; + font-size: global.$body-text; } .schema-search-result-desc { font-style: italic; @@ -120,9 +120,9 @@ .schema-column-menu-button { cursor: pointer; padding: 2px 5px; - background: $medium-blue; + background: global.$medium-blue; border-radius: 9999px; - color: $white; + color: global.$white; width: fit-content; margin: 5px; align-self: center; @@ -141,7 +141,7 @@ } .schema-column-header { - background-color: $light-gray; + background-color: global.$light-gray; font-weight: bold; display: flex; flex-direction: row; @@ -149,7 +149,7 @@ align-items: center; padding: 0; z-index: 1; - border: 1px solid $medium-gray; + border: 1px solid global.$medium-gray; .schema-column-title { flex-grow: 2; @@ -175,7 +175,7 @@ cursor: ew-resize; &:hover { - background-color: $light-blue; + background-color: global.$light-blue; } } @@ -188,7 +188,7 @@ min-width: 5px; transform: translate(-3px, 0px); align-self: flex-start; - background-color: $medium-gray; + background-color: global.$medium-gray; }*/ // creates awkward thick gray borders between colheaders } @@ -202,7 +202,7 @@ } .schema-header-row { - background-color: $light-gray; + background-color: global.$light-gray; overflow: hidden; } @@ -226,7 +226,7 @@ .schema-table-cell, .row-menu { - border: 1px solid $medium-gray; + border: 1px solid global.$medium-gray; overflow-x: hidden; overflow-y: auto; display: inline-flex; @@ -264,7 +264,7 @@ .row-menu-infos { position: absolute; top: 3; - left: 3; + left: 3; z-index: 1; display: flex; justify-content: flex-end; @@ -278,7 +278,7 @@ .schema-row-button, .schema-header-button { - color: $dark-gray; + color: global.$dark-gray; margin: 3px; cursor: pointer; display: flex; @@ -294,7 +294,7 @@ width: 17px; height: 17px; border-radius: 30%; - background-color: $dark-gray; + background-color: global.$dark-gray; color: white; margin: 3px; cursor: pointer; @@ -311,5 +311,3 @@ outline: none; height: 100%; } - - diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 636b6415c..ebf60b287 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .linkMenu { width: auto; diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 66ddd6eca..3cd60c87f 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -1,7 +1,7 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .linkMenu-item { - // border-top: 0.5px solid $medium-gray; + // border-top: 0.5px solid global.$medium-gray; position: relative; display: flex; border-top: 0.5px solid #cdcdcd; @@ -120,7 +120,7 @@ border-radius: 50%; pointer-events: auto; background-color: red; - color: $white; + color: global.$white; font-size: 65%; transition: transform 0.2s; text-align: center; @@ -138,7 +138,7 @@ } &:hover { - background: $medium-gray; + background: global.$medium-gray; cursor: pointer; } } diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss index 74fbfbb2c..cb1e11780 100644 --- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss +++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.scss @@ -1,15 +1,15 @@ -@import '../NewLightboxStyles.scss'; +@use '../NewLightboxStyles.scss' as newstyles; .newLightboxButtonMeny-container { width: 100vw; height: 100vh; - + &.dark { - background: $black; + background: newstyles.$black; } - + &.light, &.default { - background: $white; + background: newstyles.$white; } -} \ No newline at end of file +} diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.scss b/src/client/views/newlightbox/ExploreView/ExploreView.scss index 5a8ab2f87..2c264c514 100644 --- a/src/client/views/newlightbox/ExploreView/ExploreView.scss +++ b/src/client/views/newlightbox/ExploreView/ExploreView.scss @@ -1,4 +1,4 @@ -@import '../NewLightboxStyles.scss'; +@use '../NewLightboxStyles.scss' as newstyles; .exploreView-container { width: 100%; @@ -6,39 +6,39 @@ border-radius: 20px; position: relative; // transform: scale(1); - background: $gray-l1; - border-top: $standard-border; - border-color: $gray-l2; + background: newstyles.$gray-l1; + border-top: newstyles.$standard-border; + border-color: newstyles.$gray-l2; border-radius: 0px 0px 20px 20px; transform-origin: 50% 50%; overflow: hidden; &.dark { - background: $black; + background: newstyles.$black; } - + &.light, &.default { - background: $gray-l1; + background: newstyles.$gray-l1; } .exploreView-doc { - width: 60px; - height: 80px; - position: absolute; - background: $blue-l2; - // opacity: 0.8; - transform-origin: 50% 50%; - transform: translate(-50%, -50%) scale(1); - cursor: pointer; - transition: 0.2s ease; - overflow: hidden; - font-size: 9px; - padding: 10px; - border-radius: 5px; + width: 60px; + height: 80px; + position: absolute; + background: newstyles.$blue-l2; + // opacity: 0.8; + transform-origin: 50% 50%; + transform: translate(-50%, -50%) scale(1); + cursor: pointer; + transition: 0.2s ease; + overflow: hidden; + font-size: 9px; + padding: 10px; + border-radius: 5px; - &:hover { - transform: translate(calc(-50% * 1.125), calc(-50% * 1.125)) scale(1.5); - } + &:hover { + transform: translate(calc(-50% * 1.125), calc(-50% * 1.125)) scale(1.5); + } } -} \ No newline at end of file +} diff --git a/src/client/views/newlightbox/Header/LightboxHeader.scss b/src/client/views/newlightbox/Header/LightboxHeader.scss index a9e60ea98..5b316890d 100644 --- a/src/client/views/newlightbox/Header/LightboxHeader.scss +++ b/src/client/views/newlightbox/Header/LightboxHeader.scss @@ -1,9 +1,9 @@ -@import '../NewLightboxStyles.scss'; +@use '../NewLightboxStyles.scss' as newstyles; .newLightboxHeader-container { width: 100%; height: 100%; - background: $gray-l1; + background: newstyles.$gray-l1; border-radius: 20px 20px 0px 0px; padding: 20px; display: grid; @@ -29,13 +29,13 @@ grid-row: 2; .type { padding: 2px 7px !important; - background: $gray-l2; + background: newstyles.$gray-l2; } } .lb-label { - color: $gray-l3; - font-weight: $h1-weight; + color: newstyles.$gray-l3; + font-weight: newstyles.$h1-weight; } .lb-button { @@ -47,25 +47,25 @@ justify-content: space-evenly; align-items: center; transition: 0.2s ease; - gap: 5px; - font-size: $body-size; + gap: 5px; + font-size: newstyles.$body-size; height: fit-content; &:hover { - background: $gray-l2; + background: newstyles.$gray-l2; } &.true { - background: $blue-l1; + background: newstyles.$blue-l1; } } - + &.dark { - background: $black; + background: newstyles.$black; } - + &.light, &.default { - background: $white; + background: newstyles.$white; } -} \ No newline at end of file +} diff --git a/src/client/views/newlightbox/RecommendationList/RecommendationList.scss b/src/client/views/newlightbox/RecommendationList/RecommendationList.scss index 40dd47e47..99c935e0c 100644 --- a/src/client/views/newlightbox/RecommendationList/RecommendationList.scss +++ b/src/client/views/newlightbox/RecommendationList/RecommendationList.scss @@ -1,4 +1,4 @@ -@import '../NewLightboxStyles.scss'; +@use '../NewLightboxStyles.scss' as newstyles; .recommendationlist-container { height: calc(100% - 40px); @@ -7,111 +7,110 @@ overflow-y: scroll; .recommendations { - height: fit-content; - padding: 20px; - display: flex; - flex-direction: column; - gap: 20px; - background: $gray-l1; - border-radius: 0px 0px 20px 20px; + height: fit-content; + padding: 20px; + display: flex; + flex-direction: column; + gap: 20px; + background: newstyles.$gray-l1; + border-radius: 0px 0px 20px 20px; } .header { - top: 0px; - position: sticky; - background: $gray-l1; - border-bottom: $standard-border; - border-color: $gray-l2; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; - border-radius: 20px 20px 0px 0px; - padding: 20px; - z-index: 2; - gap: 10px; - color: $text-color-lm; - - .lb-label { - color: $gray-l3; - font-weight: $h1-weight; - font-size: $body-size; - } - - .lb-caret { + top: 0px; + position: sticky; + background: newstyles.$gray-l1; + border-bottom: newstyles.$standard-border; + border-color: newstyles.$gray-l2; display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - gap: 5px; - cursor: pointer; - width: 100%; - user-select: none; - font-size: $body-size; - } + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + border-radius: 20px 20px 0px 0px; + padding: 20px; + z-index: 2; + gap: 10px; + color: newstyles.$text-color-lm; - .more { - width: 100%; - } + .lb-label { + color: newstyles.$gray-l3; + font-weight: newstyles.$h1-weight; + font-size: newstyles.$body-size; + } - &.dark { - color: $text-color-dm; - } + .lb-caret { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + gap: 5px; + cursor: pointer; + width: 100%; + user-select: none; + font-size: newstyles.$body-size; + } - .title { - height: 30px; - min-height: 30px; - font-size: $h1-size; - font-weight: $h1-weight; - text-align: left; - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - } + .more { + width: 100%; + } - .keywords { - display: flex; - flex-flow: row wrap; - gap: 5px; + &.dark { + color: newstyles.$text-color-dm; + } - .keyword-input { - padding: 3px 7px; - background: $gray-l2; - outline: none; - border: none; - height: 21.5px; - color: $text-color-lm; + .title { + height: 30px; + min-height: 30px; + font-size: newstyles.$h1-size; + font-weight: newstyles.$h1-weight; + text-align: left; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; } - .keyword { - padding: 3px 7px; - width: fit-content; - background: $gray-l2; - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - gap: 10px; - font-size: $body-size; - font-weight: $body-weight; + .keywords { + display: flex; + flex-flow: row wrap; + gap: 5px; - &.loading { - animation: skeleton-loading-l2 1s linear infinite alternate; - min-width: 70px; - height: 21.5px; - } - } + .keyword-input { + padding: 3px 7px; + background: newstyles.$gray-l2; + outline: none; + border: none; + height: 21.5px; + color: newstyles.$text-color-lm; + } + + .keyword { + padding: 3px 7px; + width: fit-content; + background: newstyles.$gray-l2; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + gap: 10px; + font-size: newstyles.$body-size; + font-weight: newstyles.$body-weight; - } + &.loading { + animation: skeleton-loading-l2 1s linear infinite alternate; + min-width: 70px; + height: 21.5px; + } + } + } } - + &.dark { - background: $black; + background: newstyles.$black; } - + &.light, &.default { - background: $gray-l1; + background: newstyles.$gray-l1; } -} \ No newline at end of file +} diff --git a/src/client/views/newlightbox/components/EditableText/EditableText.scss b/src/client/views/newlightbox/components/EditableText/EditableText.scss index 7828538ab..8007e8d43 100644 --- a/src/client/views/newlightbox/components/EditableText/EditableText.scss +++ b/src/client/views/newlightbox/components/EditableText/EditableText.scss @@ -1,34 +1,34 @@ -@import '../../NewLightboxStyles.scss'; +@use '../../NewLightboxStyles.scss' as newstyles; .lb-editableText, .lb-displayText { padding: 4px 7px !important; - border: $standard-border !important; - border-color: $gray-l2 !important; + border: newstyles.$standard-border !important; + border-color: newstyles.$gray-l2 !important; } .lb-editableText { - -webkit-appearance: none; - overflow: hidden; - font-size: inherit; - border: none; - outline: none; - width: 100%; - margin: 0px; - padding: 0px; - box-shadow: none !important; - background: none; - - &:focus { + -webkit-appearance: none; + overflow: hidden; + font-size: inherit; + border: none; outline: none; - background-color: $blue-l1; - } + width: 100%; + margin: 0px; + padding: 0px; + box-shadow: none !important; + background: none; + + &:focus { + outline: none; + background-color: newstyles.$blue-l1; + } } .lb-displayText { - cursor: text !important; - width: 100%; - display: flex; - align-items: center; - font-size: inherit; -} \ No newline at end of file + cursor: text !important; + width: 100%; + display: flex; + align-items: center; + font-size: inherit; +} diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.scss b/src/client/views/newlightbox/components/Recommendation/Recommendation.scss index c86c63ba0..cf6b5ccb1 100644 --- a/src/client/views/newlightbox/components/Recommendation/Recommendation.scss +++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.scss @@ -1,4 +1,4 @@ -@import '../../NewLightboxStyles.scss'; +@use '../../NewLightboxStyles.scss' as newstyles; .recommendation-container { width: 100%; @@ -8,22 +8,22 @@ display: grid; grid-template-columns: 0% 100%; grid-template-rows: auto auto auto auto auto; - gap: 5px 0px; + gap: 5px 0px; padding: 10px; cursor: pointer; transition: 0.2s ease; - border: $standard-border; - border-color: $gray-l2; + border: newstyles.$standard-border; + border-color: newstyles.$gray-l2; background: white; &:hover { - // background: white !important; - transform: scale(1.02); - z-index: 0; + // background: white !important; + transform: scale(1.02); + z-index: 0; - .title { - text-decoration: underline; - } + .title { + text-decoration: underline; + } } &.previewUrl { @@ -39,18 +39,18 @@ grid-template-rows: auto auto auto auto auto; gap: 5px 10px; - .image-container, - .title, - .info, - .source, - .explainer, - .hide-rec { - animation: skeleton-loading-l3 1s linear infinite alternate; - } + .image-container, + .title, + .info, + .source, + .explainer, + .hide-rec { + animation: skeleton-loading-l3 1s linear infinite alternate; + } - .title { - border-radius: 20px; - } + .title { + border-radius: 20px; + } } .distance-container, @@ -64,62 +64,62 @@ } .image-container { - grid-row: 2/5; - grid-column: 1; - border-radius: 20px; - overflow: hidden; + grid-row: 2/5; + grid-column: 1; + border-radius: 20px; + overflow: hidden; - .image { - width: 100%; - height: 100%; - object-fit: cover; - } + .image { + width: 100%; + height: 100%; + object-fit: cover; + } } .title { - grid-row: 1; - grid-column: 1/3; - border-radius: 20px; - font-size: $h2-size; - font-weight: $h2-weight; - overflow: hidden; - border-radius: 0px; - min-height: 30px; + grid-row: 1; + grid-column: 1/3; + border-radius: 20px; + font-size: newstyles.$h2-size; + font-weight: newstyles.$h2-weight; + overflow: hidden; + border-radius: 0px; + min-height: 30px; } .info { - grid-row: 2; - grid-column: 2; - border-radius: 20px; - display: flex; - flex-direction: row; - gap: 5px; - font-size: $body-size; + grid-row: 2; + grid-column: 2; + border-radius: 20px; + display: flex; + flex-direction: row; + gap: 5px; + font-size: newstyles.$body-size; .lb-type { padding: 2px 7px !important; - background: $gray-l2; + background: newstyles.$gray-l2; } } .lb-label { - color: $gray-l3; - font-weight: $h1-weight; - font-size: $body-size; + color: newstyles.$gray-l3; + font-weight: newstyles.$h1-weight; + font-size: newstyles.$body-size; } .source { grid-row: 3; grid-column: 2; border-radius: 20px; - font-size: $body-size; + font-size: newstyles.$body-size; display: flex; justify-content: flex-start; align-items: center; .lb-source { padding: 2px 7px !important; - background: $gray-l2; + background: newstyles.$gray-l2; border-radius: 10px; white-space: nowrap; max-width: 130px; @@ -134,7 +134,7 @@ border-radius: 20px; font-size: 10px; width: 100%; - background: $blue-l1; + background: newstyles.$blue-l1; border-radius: 0; padding: 10px; @@ -145,7 +145,7 @@ gap: 3px; .concept { padding: 2px 7px !important; - background: $gray-l2; + background: newstyles.$gray-l2; } } } @@ -154,7 +154,7 @@ grid-row: 5; grid-column: 2; border-radius: 20px; - font-size: $body-size; + font-size: newstyles.$body-size; display: flex; align-items: center; margin-top: 5px; @@ -162,15 +162,15 @@ justify-content: flex-end; text-transform: underline; } - + &.dark { - background: $black; - border-color: $white; + background: newstyles.$black; + border-color: newstyles.$white; } - + &.light, &.default { - background: $white; - border-color: $white; + background: newstyles.$white; + border-color: newstyles.$white; } -} \ No newline at end of file +} diff --git a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss index e541e3f3c..bbc730144 100644 --- a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss +++ b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss @@ -1,82 +1,81 @@ -@import '../../NewLightboxStyles.scss'; +@use '../../NewLightboxStyles.scss' as newstyles; .skeletonDoc-container { - display: flex; - flex-direction: column; - height: calc(100% - 40px); - margin: 20px; - gap: 20px; + display: flex; + flex-direction: column; + height: calc(100% - 40px); + margin: 20px; + gap: 20px; - .header { - width: calc(100% - 20px); - height: 80px; - background: $gray-l2; - animation: skeleton-loading-l2 1s linear infinite alternate; - display: grid; - grid-template-rows: 60% 40%; - padding: 10px; - grid-template-columns: auto auto auto auto; - border-radius: 20px; + .header { + width: calc(100% - 20px); + height: 80px; + background: newstyles.$gray-l2; + animation: skeleton-loading-l2 1s linear infinite alternate; + display: grid; + grid-template-rows: 60% 40%; + padding: 10px; + grid-template-columns: auto auto auto auto; + border-radius: 20px; - .title { - grid-row: 1; - grid-column: 1 / 5; - display: flex; - width: fit-content; - height: 100%; - min-width: 500px; - font-size: $title-size; - animation: skeleton-loading-l3 1s linear infinite alternate; - border-radius: 20px; - } + .title { + grid-row: 1; + grid-column: 1 / 5; + display: flex; + width: fit-content; + height: 100%; + min-width: 500px; + font-size: newstyles.$title-size; + animation: skeleton-loading-l3 1s linear infinite alternate; + border-radius: 20px; + } - .type { - display: flex; - padding: 3px 7px; - width: fit-content; - height: fit-content; - margin-top: 8px; - min-height: 15px; - min-width: 60px; - grid-row: 2; - grid-column: 1; - animation: skeleton-loading-l3 1s linear infinite alternate; - border-radius: 20px; - } + .type { + display: flex; + padding: 3px 7px; + width: fit-content; + height: fit-content; + margin-top: 8px; + min-height: 15px; + min-width: 60px; + grid-row: 2; + grid-column: 1; + animation: skeleton-loading-l3 1s linear infinite alternate; + border-radius: 20px; + } - .buttons-container { - grid-row: 1 / 3; - grid-column: 5; - display: flex; - justify-content: flex-end; - align-items: center; - gap: 10px; + .buttons-container { + grid-row: 1 / 3; + grid-column: 5; + display: flex; + justify-content: flex-end; + align-items: center; + gap: 10px; - .button { - width: 50px; - height: 50px; - border-radius: 100%; - animation: skeleton-loading-l3 1s linear infinite alternate; - } + .button { + width: 50px; + height: 50px; + border-radius: 100%; + animation: skeleton-loading-l3 1s linear infinite alternate; + } + } } - } - - .content { - width: 100%; - flex: 1; - -webkit-flex: 1; /* Chrome */ - background: $gray-l2; - animation: skeleton-loading-l2 1s linear infinite alternate; - border-radius: 20px; - } + .content { + width: 100%; + flex: 1; + -webkit-flex: 1; /* Chrome */ + background: newstyles.$gray-l2; + animation: skeleton-loading-l2 1s linear infinite alternate; + border-radius: 20px; + } // &.dark { - // background: $black; + // background: newstyles.$black; // } - + // &.light, // &.default { - // background: $white; + // background: newstyles.$white; // } -} \ No newline at end of file +} diff --git a/src/client/views/newlightbox/components/Template/Template.scss b/src/client/views/newlightbox/components/Template/Template.scss index 5b72ddaf9..c2fb9fba4 100644 --- a/src/client/views/newlightbox/components/Template/Template.scss +++ b/src/client/views/newlightbox/components/Template/Template.scss @@ -1,15 +1,15 @@ -@import '../../NewLightboxStyles.scss'; +@use '../../NewLightboxStyles.scss' as newstyles; .template-container { width: 100vw; height: 100vh; - + &.dark { - background: $black; + background: newstyles.$black; } - + &.light, &.default { - background: $white; + background: newstyles.$white; } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 4337401e3..933a383ea 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .audiobox-container { width: 100%; @@ -19,30 +19,30 @@ .audiobox-dictation { width: 40px; - background: $medium-gray; - color: $dark-gray; + background: global.$medium-gray; + color: global.$dark-gray; display: flex; justify-content: center; align-items: center; &:hover { - color: $black; + color: global.$black; } } .audiobox-start-record { - color: $white; - background: $dark-gray; + color: global.$white; + background: global.$dark-gray; display: flex; align-items: center; justify-content: center; - font-size: $body-text; + font-size: global.$body-text; width: 100%; height: 100%; gap: 5px; &:hover { - background: $black; + background: global.$black; } } @@ -54,11 +54,11 @@ gap: 5px; width: 100%; height: 100%; - background: $dark-gray; + background: global.$dark-gray; color: white; .record-timecode { - font-size: $large-header; + font-size: global.$large-header; } .record-button { @@ -66,7 +66,7 @@ width: 30px; height: 30px; border-radius: 50%; - background: $dark-gray; + background: global.$dark-gray; display: flex; align-items: center; justify-content: center; @@ -76,7 +76,7 @@ } &:hover { - background: $black; + background: global.$black; } } } @@ -87,10 +87,10 @@ display: flex; flex-direction: column; align-items: center; - background: $dark-gray; + background: global.$dark-gray; width: 100%; height: 100%; - color: $white; + color: global.$white; .audiobox-button { margin: 2.5px; @@ -98,7 +98,7 @@ width: 25px; height: 25px; border-radius: 50%; - background: $dark-gray; + background: global.$dark-gray; display: flex; align-items: center; justify-content: center; @@ -108,7 +108,7 @@ } &:hover { - background: $black; + background: global.$black; } } @@ -132,7 +132,7 @@ height: 6px; cursor: pointer; box-shadow: 0; - background: $light-gray; + background: global.$light-gray; border-radius: 3px; } @@ -142,7 +142,7 @@ height: 10px; width: 10px; border-radius: 10px; - background: $medium-blue; + background: global.$medium-blue; cursor: pointer; -webkit-appearance: none; margin-top: -2px; @@ -180,12 +180,12 @@ .audiobox-playback { width: 100%; height: 100%; - background: $white; + background: global.$white; .audiobox-timeline { height: calc(100% - 50px); width: 100%; - background: $white; + background: global.$white; position: absolute; } @@ -203,7 +203,7 @@ width: 100%; height: 20px; padding: 3px; - font-size: $small-text; + font-size: global.$small-text; .bottom-controls-middle { display: flex; diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index 0eb27b65b..ff1fa343d 100644 --- a/src/client/views/nodes/DataVizBox/components/Chart.scss +++ b/src/client/views/nodes/DataVizBox/components/Chart.scss @@ -1,4 +1,4 @@ -@import '../../../global/globalCssVariables.module.scss'; +@use '../../../global/globalCssVariables.module.scss' as global; .chart-container { display: flex; flex-direction: column; @@ -108,7 +108,7 @@ } } tr td { - height: $DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack. you can't set a height directly, but you can set the height of all of it's s. So this is the height of a tableBox row. + height: global.$DATA_VIZ_TABLE_ROW_HEIGHT !important; // bcz: hack. you can't set a height directly, but you can set the height of all of it's s. So this is the height of a tableBox row. padding: 0 !important; vertical-align: middle !important; } @@ -135,7 +135,7 @@ } .tableBox-filterPopup { - background: $light-gray; + background: global.$light-gray; position: absolute; min-width: 235px; top: 60px; @@ -152,7 +152,7 @@ .tableBox-filterPopup-selectColumn-each { margin-left: 25px; border-radius: 3px; - background: $light-gray; + background: global.$light-gray; } } .tableBox-filterPopup-setValue { @@ -162,7 +162,7 @@ .tableBox-filterPopup-setValue-each { margin-right: 5px; border-radius: 3px; - background: $light-gray; + background: global.$light-gray; } .tableBox-filterPopup-setValue-input { margin: 5px; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index b32b27e65..e1b83dc59 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .documentLinksButton-wrapper { transform-origin: top left; @@ -29,7 +29,7 @@ pointer-events: auto; display: flex; align-items: center; - background-color: $light-blue; + background-color: global.$light-blue; color: black; } .documentLinksButton, @@ -59,30 +59,30 @@ } } .documentLinksButton { - background-color: $dark-gray; - color: $white; + background-color: global.$dark-gray; + color: global.$white; font-weight: bold; font-size: 100%; font-family: 'Roboto'; transition: 0.2s ease all; &:hover { - background-color: $black; + background-color: global.$black; } } .documentLinksButton.startLink { - background-color: $medium-blue; + background-color: global.$medium-blue; width: 75%; height: 75%; - color: $white; + color: global.$white; font-weight: bold; font-size: 100%; transition: 0.2s ease all; } .documentLinksButton-endLink { - border: $medium-blue 2px dashed; - color: $medium-blue; + border: global.$medium-blue 2px dashed; + color: global.$medium-blue; background-color: none !important; font-size: 100%; transition: 0.2s ease all; diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 7e5507586..294af4d96 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .documentView-effectsWrapper { border-radius: inherit; @@ -28,7 +28,7 @@ // overflow: hidden; // need this so that title will be clipped when borderRadius is set // transition: outline 0.3s linear; - // background: $white; //overflow: hidden; + // background: global.$white; //overflow: hidden; transform-origin: center; &.minimized { @@ -180,7 +180,7 @@ .documentView-titleWrapper, .documentView-titleWrapper-hover { - color: $black; + color: global.$black; transform-origin: top left; top: 0; width: 100%; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 441d6053f..b40ead03a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -778,7 +778,7 @@ export class DocumentViewInternal extends DocComponent {this._props.DocumentView?.() ? : null}
diff --git a/src/client/views/nodes/EquationBox.scss b/src/client/views/nodes/EquationBox.scss index 55e0f5184..bcbb44e68 100644 --- a/src/client/views/nodes/EquationBox.scss +++ b/src/client/views/nodes/EquationBox.scss @@ -1,5 +1,3 @@ -@import '../global/globalCssVariables.module.scss'; - .equationBox-cont { transform-origin: center; width: fit-content; diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss index 2405889cf..186d24e92 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.module.scss'; +@use '../../global/globalCssVariables.module.scss' as global; // bcz: something's messed up with the IconButton css. this mostly fixes the fit-all button, the color buttons, the undo +/- expander and the dropdown doc type list (eg 'text') .iconButton-container { @@ -23,7 +23,7 @@ justify-content: center; align-items: center; font-size: 80%; - border-radius: $standard-border-radius; + border-radius: global.$standard-border-radius; transition: 0.15s; .menuButton-wrap { @@ -34,7 +34,7 @@ } .fontIconBox-label { - color: $white; + color: global.$white; bottom: -1; position: absolute; text-align: center; @@ -124,17 +124,17 @@ width: 21px; left: 2px; bottom: 2px; - background-color: $white; + background-color: global.$white; -webkit-transition: 0.4s; transition: 0.4s; } input:checked + .slider { - background-color: $medium-blue; + background-color: global.$medium-blue; } input:focus + .slider { - box-shadow: 0 0 1px $medium-blue; + box-shadow: 0 0 1px global.$medium-blue; } input:checked + .slider:before { @@ -145,11 +145,11 @@ /* Rounded sliders */ .slider.round { - border-radius: $standard-border-radius; + border-radius: global.$standard-border-radius; } .slider.round:before { - border-radius: $standard-border-radius; + border-radius: global.$standard-border-radius; } } @@ -259,12 +259,12 @@ height: fit-content; top: 100%; z-index: 21; - background-color: $white; + background-color: global.$white; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); padding: 1px; .list-item { - color: $black; + color: global.$black; width: 100%; height: 25px; font-weight: 400; @@ -285,7 +285,7 @@ background: transparent; &.slider { - color: $white; + color: global.$white; cursor: pointer; flex-direction: column; background: transparent; @@ -302,7 +302,7 @@ z-index: 21; background-color: #e3e3e3; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - border-radius: $standard-border-radius; + border-radius: global.$standard-border-radius; .menu-slider { height: 10px; @@ -340,7 +340,7 @@ border: none; text-align: right; width: 100%; - color: $white; + color: global.$white; height: 100%; text-align: center; } @@ -354,7 +354,7 @@ &.list { width: 100%; justify-content: space-around; - border: $standard-border; + border: global.$standard-border; .menuButton-dropdownList { position: absolute; @@ -365,12 +365,12 @@ overflow-y: scroll; top: 100%; z-index: 21; - background-color: $white; + background-color: global.$white; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); padding: 1px; .list-item { - color: $black; + color: global.$black; width: 100%; height: 25px; font-weight: 400; @@ -394,7 +394,7 @@ padding-left: 10px; justify-content: flex-start; color: black; - background-color: $light-gray; + background-color: global.$light-gray; padding: 5px; padding-left: 10px; width: 100%; @@ -417,7 +417,7 @@ top: 100%; background-color: #e3e3e3; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - border-radius: $standard-border-radius; + border-radius: global.$standard-border-radius; } } diff --git a/src/client/views/nodes/IconTagBox.scss b/src/client/views/nodes/IconTagBox.scss index c79d662f4..202b0c701 100644 --- a/src/client/views/nodes/IconTagBox.scss +++ b/src/client/views/nodes/IconTagBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .card-button-container { display: flex; @@ -18,7 +18,7 @@ margin: auto; padding: 0; border-radius: 50%; - background-color: $dark-gray; + background-color: global.$dark-gray; background-color: transparent; } } diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss index a44f614b2..441fceba4 100644 --- a/src/client/views/nodes/KeyValueBox.scss +++ b/src/client/views/nodes/KeyValueBox.scss @@ -1,11 +1,11 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .keyValueBox-cont { overflow-y: scroll; width: 100%; height: 100%; - background-color: $white; - border: 1px solid $medium-gray; - border-radius: $border-radius; + background-color: global.$white; + border: 1px solid global.$medium-gray; + border-radius: global.$border-radius; box-sizing: border-box; display: inline-block; cursor: default; @@ -56,8 +56,8 @@ $header-height: 30px; width: 100%; position: relative; display: inline-block; - background: $medium-gray; - color: $white; + background: global.$medium-gray; + color: global.$white; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; @@ -66,7 +66,7 @@ $header-height: 30px; th { font-weight: normal; &:first-child { - border-right: 1px solid $white; + border-right: 1px solid global.$white; } } } @@ -76,9 +76,9 @@ $header-height: 30px; display: flex; width: 100%; height: $header-height; - background: $white; + background: global.$white; .formattedTextBox-cont { - background: $white; + background: global.$white; } } .keyValueBox-cont { @@ -116,8 +116,8 @@ $header-height: 30px; display: flex; width: 100%; height: 30px; - background: $light-gray; + background: global.$light-gray; .formattedTextBox-cont { - background: $light-gray; + background: global.$light-gray; } } diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss index 46ea9c18e..913ab641c 100644 --- a/src/client/views/nodes/KeyValuePair.scss +++ b/src/client/views/nodes/KeyValuePair.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .keyValuePair-td-key { display: inline-block; diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss index 104301656..b44b69af5 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.scss +++ b/src/client/views/nodes/LinkDescriptionPopup.scss @@ -1,12 +1,12 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .linkDescriptionPopup { display: flex; flex-direction: row; justify-content: center; align-items: center; - border: 2px solid $medium-blue; - background-color: $white; + border: 2px solid global.$medium-blue; + background-color: global.$white; width: auto; position: absolute; @@ -35,7 +35,7 @@ white-space: nowrap; padding: 5px; vertical-align: middle; - background-color: $close-red; + background-color: global.$close-red; border-radius: 3px; color: black; } @@ -46,7 +46,7 @@ white-space: nowrap; padding: 5px; vertical-align: middle; - background-color: $light-blue; + background-color: global.$light-blue; border-radius: 3px; color: black; } diff --git a/src/client/views/nodes/MapBox/AnimationUtility.ts b/src/client/views/nodes/MapBox/AnimationUtility.ts index f4bae66bb..3eac50f1f 100644 --- a/src/client/views/nodes/MapBox/AnimationUtility.ts +++ b/src/client/views/nodes/MapBox/AnimationUtility.ts @@ -65,7 +65,7 @@ export class AnimationUtility { const coords: mapboxgl.LngLatLike = [this.previousLngLat.lng, this.previousLngLat.lat]; // console.log('MAP REF: ', this.MAP_REF) // console.log("current elevation: ", this.MAP_REF?.queryTerrainElevation(coords)); - let altitude = this.MAP_REF ? this.MAP_REF.queryTerrainElevation(coords) ?? 0 : 0; + let altitude = this.MAP_REF ? (this.MAP_REF.queryTerrainElevation(coords) ?? 0) : 0; if (altitude === 0) { altitude += 50; } @@ -178,7 +178,7 @@ export class AnimationUtility { this.ROUTE_COORDINATES = routeCoordinates; this.PATH = turf.lineString(routeCoordinates); - this.PATH_DISTANCE = turf.lineDistance(this.PATH); + this.PATH_DISTANCE = turf.length(this.PATH); this.terrainDisplayed = terrainDisplayed; const bearing = this.calculateBearing( diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index 25b4587a5..fdd8a29d7 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -1,4 +1,6 @@ -@import '../../global/globalCssVariables.module.scss'; +@use 'sass:color'; +@use '../../global/globalCssVariables.module.scss' as global; + .mapBox { width: 100%; height: 100%; @@ -25,14 +27,6 @@ gap: 5px; align-items: center; width: calc(100% - 40px); - - // .editableText-container { - // width: 100%; - // font-size: 16px !important; - // } - // input { - // width: 100%; - // } } .mapbox-settings-panel { @@ -83,7 +77,7 @@ width: 100%; padding: 10px; &:hover { - background-color: lighten(rgb(187, 187, 187), 10%); + background-color: color.adjust(rgb(187, 187, 187), $lightness: 10%); } } } @@ -167,7 +161,7 @@ pointer-events: all; z-index: 1; // so it appears on top of the document's title, if shown - box-shadow: $standard-box-shadow; + box-shadow: global.$standard-box-shadow; transition: 0.2s; &:hover { diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index f6908d5fd..f2160feb7 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .pdfBox, .pdfBox-interactive { @@ -22,11 +22,11 @@ // glr: This should really be the same component as text and PDFs .pdfBox-sidebarBtn { - background: $black; + background: global.$black; height: 25px; width: 25px; right: 5px; - color: $white; + color: global.$white; display: flex; position: absolute; align-items: center; @@ -35,7 +35,7 @@ pointer-events: all; z-index: 1; // so it appears on top of the document's title, if shown - box-shadow: $standard-box-shadow; + box-shadow: global.$standard-box-shadow; transition: 0.2s; &:hover { diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index 460155446..b5405f0fb 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .mini-viewer { cursor: grab; @@ -22,7 +22,7 @@ height: 100%; border-radius: inherit; opacity: 0.99; // hack! overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger - background: $dark-gray; + background: global.$dark-gray; } .inkingCanvas-paths-markers { @@ -93,7 +93,7 @@ align-items: center; justify-content: center; display: flex; - background-color: $dark-gray; + background-color: global.$dark-gray; color: white; border-radius: 100px; height: 40px; @@ -128,13 +128,13 @@ width: 25px; height: 25px; border-radius: 50%; - background: $dark-gray; + background: global.$dark-gray; display: flex; align-items: center; justify-content: center; &:hover { - background: $black; + background: global.$black; } svg { @@ -157,7 +157,7 @@ cursor: pointer; &:hover { - background-color: $medium-gray; + background-color: global.$medium-gray; } } @@ -198,7 +198,7 @@ input[type='range']::-webkit-slider-runnable-track { height: 10px; cursor: pointer; box-shadow: 0; - background: $light-gray; + background: global.$light-gray; border-radius: 10px; } @@ -208,7 +208,7 @@ input[type='range']::-webkit-slider-thumb { height: 12px; width: 12px; border-radius: 10px; - background: $medium-blue; + background: global.$medium-blue; cursor: pointer; -webkit-appearance: none; margin-top: -1px; diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index a1686adaf..05d5babf9 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.module.scss'; +@use '../global/globalCssVariables.module.scss' as global; .webBox { height: 100%; @@ -120,7 +120,7 @@ pointer-events: all; z-index: 1; // so it appears on top of the document's title, if shown - box-shadow: $standard-box-shadow; + box-shadow: global.$standard-box-shadow; transition: 0.2s; &:hover { diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss index 9cf760a12..3d27fa887 100644 --- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss +++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); $primary-color: #3f51b5; @@ -68,7 +69,7 @@ $transition: all 0.2s ease-in-out; &:focus { outline: none; border-color: $primary-color; - box-shadow: 0 0 0 2px rgba($primary-color, 0.2); + box-shadow: 0 0 0 2px color.adjust($primary-color, $alpha: -0.8); } &:disabled { @@ -92,11 +93,11 @@ $transition: all 0.2s ease-in-out; transition: $transition; &:hover { - background-color: darken($primary-color, 10%); + background-color: color.adjust($primary-color, $lightness: -10%); } &:disabled { - background-color: lighten($primary-color, 20%); + background-color: color.adjust($primary-color, $lightness: 20%); cursor: not-allowed; } @@ -178,7 +179,7 @@ $transition: all 0.2s ease-in-out; margin-bottom: 16px; &:hover { - background-color: rgba($primary-color, 0.1); + background-color: color.adjust($primary-color, $alpha: -0.9); } } @@ -220,7 +221,7 @@ $transition: all 0.2s ease-in-out; transition: $transition; &:hover { - background-color: rgba($primary-color, 0.2); + background-color: color.adjust($primary-color, $alpha: -0.8); color: #fff; } } diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss index d79df4272..78bbb520e 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.scss +++ b/src/client/views/nodes/formattedText/DashFieldView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.module.scss'; +@use '../../global/globalCssVariables.module.scss' as global; .dashFieldView-active, .dashFieldView { @@ -64,5 +64,5 @@ } .ProseMirror-selectedNode { - outline: solid 1px $light-blue !important; + outline: solid 1px global.$light-blue !important; } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 84859b94d..f9de4ab5a 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.module.scss'; +@use '../../global/globalCssVariables.module.scss' as global; .ProseMirror { width: 100%; @@ -22,7 +22,7 @@ &.h-left * { display: flex; - justify-content: flex-start; + justify-content: flex-start; } &.h-right * { @@ -32,7 +32,7 @@ &.template * { ::-webkit-scrollbar-track { - background: none; + background: none; } } @@ -64,7 +64,7 @@ audiotag:hover { background: inherit; padding: 0; border-width: 0px; - border-color: $medium-gray; + border-color: global.$medium-gray; box-sizing: border-box; background-color: inherit; border-style: solid; @@ -79,7 +79,6 @@ audiotag:hover { transform-origin: left top; top: 0; left: 0; - } .formattedTextBox-cont { @@ -88,7 +87,7 @@ audiotag:hover { padding: 0; border-width: 0px; border-radius: inherit; - border-color: $medium-gray; + border-color: global.$medium-gray; box-sizing: border-box; background-color: inherit; border-style: solid; @@ -147,13 +146,13 @@ audiotag:hover { font-size: 11px; border-radius: 3px; color: white; - background: $medium-gray; + background: global.$medium-gray; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: grabbing; - box-shadow: $standard-box-shadow; + box-shadow: global.$standard-box-shadow; // transition: 0.2s; opacity: 0.3; &:hover { @@ -646,7 +645,7 @@ footnote::before { } @media only screen and (max-width: 1000px) { - @import '../../global/globalCssVariables.module.scss'; + // @import '../../global/globalCssVariables.module.scss'; .ProseMirror { width: 100%; @@ -664,7 +663,7 @@ footnote::before { padding: 0; border-width: 0px; border-radius: inherit; - border-color: $medium-gray; + border-color: global.$medium-gray; box-sizing: border-box; background-color: inherit; border-style: solid; @@ -1074,4 +1073,3 @@ footnote::before { } } } - diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss index d6ed5ebee..fcc816447 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.scss +++ b/src/client/views/nodes/formattedText/RichTextMenu.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.module.scss'; +@use '../../global/globalCssVariables.module.scss' as global; .button-dropdown-wrapper { position: relative; @@ -25,7 +25,7 @@ top: 35px; left: 0; background-color: #323232; - color: $light-gray; + color: global.$light-gray; border: 1px solid #4d4d4d; border-radius: 0 6px 6px 6px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx index 3c0ab3da5..657e689bb 100644 --- a/src/client/views/nodes/imageEditor/ImageEditor.tsx +++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx @@ -610,7 +610,9 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc Date: Fri, 7 Mar 2025 13:46:59 -0500 Subject: fixed columnWidth settings for sidebar. fixed color picker and other dropdowns to toggle when button is clicked. fixed dash field views to collapse properly. fixed rtf to honor marks that were set before text box is created and typing starts. --- .../src/components/ColorPicker/ColorPicker.tsx | 336 +++++++++------------ .../src/components/IconButton/IconButton.tsx | 280 +++++++++-------- packages/components/src/components/Popup/Popup.tsx | 61 ++-- src/client/documents/DocUtils.ts | 4 +- src/client/documents/Documents.ts | 3 +- src/client/util/CurrentUserUtils.ts | 8 +- .../collectionSchema/SchemaTableCell.tsx | 2 +- .../views/nodes/FontIconBox/FontIconBox.scss | 20 +- src/client/views/nodes/FontIconBox/FontIconBox.tsx | 5 +- .../views/nodes/formattedText/DashFieldView.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 3 +- 11 files changed, 340 insertions(+), 386 deletions(-) (limited to 'src/client/views/nodes/FontIconBox/FontIconBox.scss') diff --git a/packages/components/src/components/ColorPicker/ColorPicker.tsx b/packages/components/src/components/ColorPicker/ColorPicker.tsx index 51b820a37..632b470f0 100644 --- a/packages/components/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/components/src/components/ColorPicker/ColorPicker.tsx @@ -1,204 +1,156 @@ -import React, { useState } from 'react' -import { GithubPicker, ChromePicker, BlockPicker, SliderPicker, SketchPicker } from 'react-color' -import { IGlobalProps, Size, Type , getFormLabelSize } from '../../global' -import { Button } from '../Button' -import { IconButton } from '../IconButton' -import { Popup, PopupTrigger } from '../Popup' -import './ColorPicker.scss' -import { Dropdown, DropdownType } from '../Dropdown' +import React, { useRef, useState } from 'react'; +import { GithubPicker, ChromePicker, BlockPicker, SliderPicker, SketchPicker } from 'react-color'; +import { IGlobalProps, Size, Type, getFormLabelSize } from '../../global'; +import { Button } from '../Button'; +import { IconButton } from '../IconButton'; +import { Popup, PopupTrigger } from '../Popup'; +import './ColorPicker.scss'; +import { Dropdown, DropdownType } from '../Dropdown'; -export const ColorPickerArray= ["Classic", "Chrome", "GitHub", "Block", "Slider"] -export type ColorPickerType= typeof ColorPickerArray[number]; +export const ColorPickerArray = ['Classic', 'Chrome', 'GitHub', 'Block', 'Slider']; +export type ColorPickerType = (typeof ColorPickerArray)[number]; export interface IColorPickerProps extends IGlobalProps { - text?: string - icon?: JSX.Element | string - colorPickerType?: ColorPickerType - defaultPickerType?: ColorPickerType - selectedColor?: string - setSelectedColor: (color: any) => unknown - setFinalColor: (color:any) => unknown + text?: string; + icon?: JSX.Element | string; + colorPickerType?: ColorPickerType; + defaultPickerType?: ColorPickerType; + selectedColor?: string; + setSelectedColor: (color: any) => unknown; + setFinalColor: (color: any) => unknown; } export const ColorPicker = (props: IColorPickerProps) => { - const [selectedColorLoc, setSelectedColorLoc] = useState(); - const { defaultPickerType, text, colorPickerType, fillWidth, formLabelPlacement, size = Size.SMALL, type = Type.TERT, icon, selectedColor = selectedColorLoc, setSelectedColor = setSelectedColorLoc, setFinalColor = setSelectedColorLoc, tooltip, color='black', formLabel } = props - const [isOpen, setOpen] = useState(false) - const [pickerSelectorOpen, setPickerSelectorOpen] = useState(false); - const decimalToHexString = (number: number) => { - if (number < 0) { - number = 0xffffffff + number + 1; - } - return (number < 16 ? '0' : '') + number.toString(16).toUpperCase(); -} - const colorString = (color: any ) => { - return color.hex === 'transparent' ? color.hex: color.hex + (color.rgb.a ? decimalToHexString(Math.round(color.rgb.a * 255)) : 'ff'); - } - const onChange = (color: any) => { - setSelectedColor(colorString(color) as any); - } - const onChangeComplete = (color: any) => { - setFinalColor(colorString(color) as any); - } - const [picker, setPicker] = useState(defaultPickerType ?? "Classic") + const [selectedColorLoc, setSelectedColorLoc] = useState(); + const { + defaultPickerType, + text, + colorPickerType, + fillWidth, + formLabelPlacement, + size = Size.SMALL, + type = Type.TERT, + icon, + selectedColor = selectedColorLoc, + setSelectedColor = setSelectedColorLoc, + setFinalColor = setSelectedColorLoc, + tooltip, + color = 'black', + formLabel, + } = props; + const [isOpen, setOpen] = useState(false); + const [pickerSelectorOpen, setPickerSelectorOpen] = useState(false); + const decimalToHexString = (number: number) => { + if (number < 0) { + number = 0xffffffff + number + 1; + } + return (number < 16 ? '0' : '') + number.toString(16).toUpperCase(); + }; + const colorString = (color: any) => { + return color.hex === 'transparent' ? color.hex : color.hex + (color.rgb.a ? decimalToHexString(Math.round(color.rgb.a * 255)) : 'ff'); + }; + const onChange = (color: any) => { + setSelectedColor(colorString(color) as any); + }; + const onChangeComplete = (color: any) => { + setFinalColor(colorString(color) as any); + }; + const [picker, setPicker] = useState(defaultPickerType ?? 'Classic'); - const getToggle = () => { - if (icon && !text) { - return ( - - ) - } else if (text) { - return ( -
+ ); - const getColorPicker = (pickerType: ColorPickerType):JSX.Element => { - const colorPalette = ["FFFFFF", "#F9F6F2", "#E2E2E2", "#D1D1D1", "#737576", "#4b4a4d", "#222021", - '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB', "transparent" - ] - switch(pickerType) { - case "Block": - return ( - - ); - case "Classic": - return (); - case "Chrome": - default: - return ( - - ); - case "GitHub": - return ( - - ); - case "Slider": - return ( -
- -
- ); - } - } - const openChanged = (isOpen:boolean) => setPickerSelectorOpen(isOpen); + const getColorPicker = (pickerType: ColorPickerType): JSX.Element => { + const colorPalette = ['FFFFFF', '#F9F6F2', '#E2E2E2', '#D1D1D1', '#737576', '#4b4a4d', '#222021', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB', 'transparent']; + switch (pickerType) { + case 'Classic': return ( + + ); + case 'Chrome': + default: return ; + case 'GitHub': return ; + case 'Block': return ; + case 'Slider': return ( +
+ +
+ ); + } // prettier-ignore + }; + const openChanged = (isOpen: boolean) => setPickerSelectorOpen(isOpen); - const getPopup = ():JSX.Element => { - if (colorPickerType){ - return getColorPicker(colorPickerType) - } else { - // Todo: this would be much easier if the selectedColor was a Color, not a string. - const newColor = (selectedColor === 'transparent' ? 'white': selectedColor?.startsWith("#") ? selectedColor.substring(0,7): - selectedColor?.startsWith('rgba') ? selectedColor?.replace(/,[0-9]*\)/,"1)") : selectedColor); - return
- { - return { - text: item, - val: item, - } - }) - } - activeChanged={openChanged} - placement={'right'} - color={newColor} - type={Type.PRIM} - dropdownType={DropdownType.SELECT} - selectedVal={picker} - setSelectedVal={(val) => setPicker(val as string)} - fillWidth - /> - {getColorPicker(picker)} -
- } - } + const getPopup = (): JSX.Element => { + if (colorPickerType) { + return getColorPicker(colorPickerType); + } else { + // Todo: this would be much easier if the selectedColor was a Color, not a string. + const newColor = selectedColor === 'transparent' ? 'white' : selectedColor?.startsWith('#') ? selectedColor.substring(0, 7) : selectedColor?.startsWith('rgba') ? selectedColor?.replace(/,[0-9]*\)/, '1)') : selectedColor; + return ( +
+ { + return { + text: item, + val: item, + }; + })} + activeChanged={openChanged} + placement={'right'} + color={newColor} + type={Type.PRIM} + dropdownType={DropdownType.SELECT} + selectedVal={picker} + setSelectedVal={val => setPicker(val as string)} + fillWidth + /> + {getColorPicker(picker)} +
+ ); + } + }; - const popupContainsPt = (x:number, y:number) => pickerSelectorOpen; + const popupContainsPt = (x: number, y: number) => { + const rect = toggleRef.current?.getBoundingClientRect(); + return rect && rect.left < x && rect.top < y && rect.right > x && rect.bottom > y; + }; - const colorPicker: JSX.Element = - ( - - ) + const colorPicker: JSX.Element = ( + + ); - return ( - formLabel ? -
-
{formLabel}
- {colorPicker} -
- : - colorPicker - ) -} + return formLabel ? ( +
+
+ {formLabel} +
+ {colorPicker} +
+ ) : ( + colorPicker + ); +}; diff --git a/packages/components/src/components/IconButton/IconButton.tsx b/packages/components/src/components/IconButton/IconButton.tsx index 7d273e23f..954a0ae44 100644 --- a/packages/components/src/components/IconButton/IconButton.tsx +++ b/packages/components/src/components/IconButton/IconButton.tsx @@ -1,157 +1,153 @@ -import { Tooltip } from '@mui/material' -import React from 'react' -import { Colors, Size, Type, getFontSize, getHeight, isDark, getFormLabelSize } from '../../global' -import { IButtonProps } from '../Button' -import './IconButton.scss' +import { Tooltip } from '@mui/material'; +import React from 'react'; +import { Colors, Size, Type, getFontSize, getHeight, isDark, getFormLabelSize } from '../../global'; +import { IButtonProps } from '../Button'; +import './IconButton.scss'; export interface IIconButtonProps extends IButtonProps {} export const IconButton = (props: IButtonProps) => { - const { - active, - icon, - onClick, - onDoubleClick, - onPointerDown, - inactive, - type = Type.PRIM, - color = Colors.MEDIUM_BLUE, - background, - label, - height, - size = Size.SMALL, - style, - tooltip, - tooltipPlacement = 'top', - colorPicker, - formLabel, - formLabelPlacement, - hideLabel, - fillWidth - } = props + const { + active, + icon, + onClick, + onDoubleClick, + onPointerDown, + inactive, + type = Type.PRIM, + color = Colors.MEDIUM_BLUE, + background, + label, + height, + size = Size.SMALL, + style, + tooltip, + tooltipPlacement = 'top', + colorPicker, + formLabel, + formLabelPlacement, + hideLabel, + fillWidth, + } = props; - /** - * Pointer down - * @param e - */ - const handlePointerDown = (e: React.PointerEvent) => { - - if (!inactive && onPointerDown) { - e.stopPropagation(); - e.preventDefault(); - onPointerDown(e) - } - } + /** + * Pointer down + * @param e + */ + const handlePointerDown = (e: React.PointerEvent) => { + if (!inactive && onPointerDown) { + e.stopPropagation(); + e.preventDefault(); + onPointerDown(e); + } + }; - /** - * In the event that there is a single click - * @param e - */ - const handleClick = (e: React.MouseEvent) => { - if (!inactive && onClick) { - e.stopPropagation(); - e.preventDefault(); - onClick(e) - } - } + /** + * In the event that there is a single click + * @param e + */ + const handleClick = (e: React.MouseEvent) => { + if (!inactive && onClick) { + e.stopPropagation(); + e.preventDefault(); + onClick(e); + } + }; - /** - * Double click - * @param e - */ - const handleDoubleClick = (e: React.MouseEvent) => { - if (!inactive && onDoubleClick){ - e.stopPropagation(); - e.preventDefault(); - onDoubleClick(e) - } - } + /** + * Double click + * @param e + */ + const handleDoubleClick = (e: React.MouseEvent) => { + if (!inactive && onDoubleClick) { + e.stopPropagation(); + e.preventDefault(); + onDoubleClick(e); + } + }; - const getBorderColor = (): Colors | string | undefined => { - switch(type){ - case Type.PRIM: - return undefined; - case Type.SEC: - return color; - case Type.TERT: - if (colorPicker) return colorPicker; - if (active) return color; - else return color; - } - } + const getBorderColor = (): Colors | string | undefined => { + switch (type) { + case Type.PRIM: + return undefined; + case Type.SEC: + return color; + case Type.TERT: + if (colorPicker) return colorPicker; + if (active) return color; + else return color; + } + }; - const getColor = (): Colors | string | undefined => { - if (color && background) return color; - switch(type){ - case Type.PRIM: - return color; - case Type.SEC: - return color; - case Type.TERT: - if (colorPicker) { - if (isDark(colorPicker)) return Colors.WHITE; - else return Colors.BLACK + const getColor = (): Colors | string | undefined => { + if (color && background) return color; + switch (type) { + case Type.PRIM: + return color; + case Type.SEC: + return color; + case Type.TERT: + if (colorPicker) { + if (isDark(colorPicker)) return Colors.WHITE; + else return Colors.BLACK; + } + if (isDark(color)) return Colors.WHITE; + else return Colors.BLACK; } - if (isDark(color)) return Colors.WHITE; - else return Colors.BLACK - } - } + }; - const getBackground = (): Colors | string | undefined => { - if(background) return background; - switch(type){ - case Type.PRIM: - return color; - case Type.SEC: - return color; - case Type.TERT: - if (colorPicker) return colorPicker - else return color - } - } + const getBackground = (): Colors | string | undefined => { + if (background) return background; + switch (type) { + case Type.PRIM: + return color; + case Type.SEC: + return color; + case Type.TERT: + if (colorPicker) return colorPicker; + else return color; + } + }; - const defaultProperties: React.CSSProperties = { - height: getHeight(height, size), - width: fillWidth ? '100%' : getHeight(height, size), - minWidth: getHeight(height, size), - fontWeight: 500, - fontSize: getFontSize(size, true), - borderColor: getBorderColor(), - color: getColor() - } + const defaultProperties: React.CSSProperties = { + height: getHeight(height, size), + width: fillWidth ? '100%' : getHeight(height, size), + minWidth: getHeight(height, size), + fontWeight: 500, + fontSize: getFontSize(size, true), + borderColor: getBorderColor(), + color: getColor(), + }; - const backgroundProperties: React.CSSProperties = { - background: getBackground() - } + const backgroundProperties: React.CSSProperties = { + background: getBackground(), + }; - const iconButton: JSX.Element = ( - -
-
- {icon} - {colorPicker && type !== (Type.TERT) &&
} - {label && !hideLabel &&
{label}
} -
-
-
- - ) + const iconButton: JSX.Element = ( + +
+
+ {icon} + {colorPicker && type !== Type.TERT &&
} + {label && !hideLabel && ( +
+ {label} +
+ )} +
+
+
+ + ); - return ( - formLabel ? -
-
{formLabel}
- {iconButton} -
- : - iconButton - ) -} + return formLabel ? ( +
+
+ {formLabel} +
+ {iconButton} +
+ ) : ( + iconButton + ); +}; diff --git a/packages/components/src/components/Popup/Popup.tsx b/packages/components/src/components/Popup/Popup.tsx index f0920b723..5a58fee29 100644 --- a/packages/components/src/components/Popup/Popup.tsx +++ b/packages/components/src/components/Popup/Popup.tsx @@ -63,12 +63,19 @@ export const Popup = (props: IPopupProps) => { const triggerRef = useRef(null); const popperRef = useRef(null); + const toggleRef = useRef(null); let timeout = setTimeout(() => {}); const handlePointerAwayDown = (e: PointerEvent) => { const rect = popperRef.current?.getBoundingClientRect(); - if (rect && !(rect.left < e.clientX && rect.top < e.clientY && rect.right > e.clientX && rect.bottom > e.clientY) && !popupContainsPt?.(e.clientX, e.clientY)) { + const rect2 = toggleRef.current?.getBoundingClientRect(); + if ( + (!rect2 || !(rect2.left < e.clientX && rect2.top < e.clientY && rect2.right > e.clientX && rect2.bottom > e.clientY)) && + rect && + !(rect.left < e.clientX && rect.top < e.clientY && rect.right > e.clientX && rect.bottom > e.clientY) && + !popupContainsPt?.(e.clientX, e.clientY) + ) { e.preventDefault(); setOpen(false); e.stopPropagation(); @@ -79,9 +86,7 @@ export const Popup = (props: IPopupProps) => { if (isOpen) { window.removeEventListener('pointerdown', handlePointerAwayDown, { capture: true }); window.addEventListener('pointerdown', handlePointerAwayDown, { capture: true }); - return () => { - window.removeEventListener('pointerdown', handlePointerAwayDown, { capture: true }); - }; + return () => window.removeEventListener('pointerdown', handlePointerAwayDown, { capture: true }); } }, [isOpen, popupContainsPt]); @@ -104,31 +109,31 @@ export const Popup = (props: IPopupProps) => { timeout = setTimeout(() => setOpen(false), 1000); } }}> - {toggle ? ( - toggle - ) : ( - { - if (trigger === PopupTrigger.CLICK) { - if (!props.isToggle || props.toggleStatus) { - setOpen(!isOpen); + {toggle ?? ( +
+ { + if (trigger === PopupTrigger.CLICK) { + if (!props.isToggle || props.toggleStatus) { + setOpen(!isOpen); + } + props.toggleFunc?.(); } - props.toggleFunc?.(); - } - }} - fillWidth={fillWidth} - /> + }} + fillWidth={fillWidth} + /> +
)}
diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts index 42ccd0810..b216551d5 100644 --- a/src/client/documents/DocUtils.ts +++ b/src/client/documents/DocUtils.ts @@ -372,7 +372,9 @@ export namespace DocUtils { * @param pivotValue */ export function addDocumentCreatorMenuItems(docTextAdder: (d: Doc) => void, docAdder: (d: Doc) => void, x: number, y: number, simpleMenu: boolean = false, pivotField?: string, pivotValue?: string | number | boolean): void { - const documentList: ContextMenuProps[] = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data) + const foo = DocListCast(DocListCast(Doc.MyTools?.data)[0]?.data).concat(...DocListCast(DocListCast(Doc.MyTools?.data)[1]?.data)); + + const documentList: ContextMenuProps[] = foo .filter(btnDoc => !btnDoc.hidden) .map(btnDoc => Cast(btnDoc?.dragFactory, Doc, null)) .filter(doc => doc && doc !== Doc.UserDoc().emptyTrail && doc.title) diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index e1aa9aca2..61b370da4 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -274,6 +274,8 @@ export class DocumentOptions { _layout_noSidebar?: BOOLt = new BoolInfo('whether to display the sidebar toggle button'); layout_boxShadow?: string; // box-shadow css string OR "standard" to use dash standard box shadow layout_maxShown?: NUMt = new NumInfo('maximum number of children to display at one time (see multicolumnview)'); + _layout_columnWidth?: NUMt = new NumInfo('width of table column', false); + _layout_columnCount?: NUMt = new NumInfo('number of columns in a masonry view'); _layout_dontCenter?: STRt = new StrInfo("whether collections will center their content - values of 'x', 'xy', or 'y'"); _layout_autoHeight?: BOOLt = new BoolInfo('whether document automatically resizes vertically to display contents'); _layout_autoHeightMargins?: NUMt = new NumInfo('Margin heights to be added to the computed auto height of a Doc'); @@ -297,7 +299,6 @@ export class DocumentOptions { _xPadding?: NUMt = new NumInfo('x padding', false); _yPadding?: NUMt = new NumInfo('y padding', false); _createDocOnCR?: boolean; // whether carriage returns and tabs create new text documents - _columnWidth?: NUMt = new NumInfo('width of table column', false); _columnsHideIfEmpty?: BOOLt = new BoolInfo('whether stacking view column headings should be hidden'); _caption_xMargin?: NUMt = new NumInfo('x margin of caption inside of a carousel collection', false, true); _caption_yMargin?: NUMt = new NumInfo('y margin of caption inside of a carousel collection', false, true); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index ce875ff6c..778b522c4 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -92,7 +92,7 @@ export class CurrentUserUtils { const reqdOpts:DocumentOptions = { title: "User Tools", _xMargin: 0, _layout_showTitle: "title", _chromeHidden: true, hidden: false, _dragOnlyWithinContainer: true, layout_hideContextMenu: true, isSystem: true, _forceActive: true, - _layout_autoHeight: true, _width: 500, _height: 300, _layout_fitWidth: true, _columnWidth: 35, ignoreClick: true, _lockedPosition: true, + _layout_autoHeight: true, _width: 500, _height: 300, _layout_fitWidth: true, _layout_columnWidth: 35, ignoreClick: true, _lockedPosition: true, }; const reqdScripts = { dropConverter : "convertToButtons(dragData)" }; const reqdFuncs = { /* hidden: "IsNoviceMode()" */ }; @@ -181,7 +181,7 @@ export class CurrentUserUtils { const reqdOpts:DocumentOptions = { title: "Stickers", _xMargin: 0, _layout_showTitle: "title", hidden: false, _chromeHidden: true, _dragOnlyWithinContainer: true, layout_hideContextMenu: true, isSystem: true, _forceActive: true, - _layout_autoHeight: true, _width: 500, _height: 300, _layout_fitWidth: true, _columnWidth: 35, ignoreClick: true, _lockedPosition: true, + _layout_autoHeight: true, _width: 500, _height: 300, _layout_fitWidth: true, _layout_columnWidth: 35, ignoreClick: true, _lockedPosition: true, }; const reqdScripts = { dropConverter: "convertToButtons(dragData)" }; const savedAnnos = DocCast(doc[field]); @@ -469,7 +469,7 @@ pie title Minerals in my tap water const reqdOpts:DocumentOptions = { title: "Document Creators", _layout_showTitle: "title", _xMargin: 0, _dragOnlyWithinContainer: true, layout_hideContextMenu: true, _chromeHidden: true, isSystem: true, - _layout_autoHeight: true, _width: 500, _height: 300, _layout_fitWidth: true, _columnWidth: 40, ignoreClick: true, _lockedPosition: true, _forceActive: true, + _layout_autoHeight: true, _width: 500, _height: 300, _layout_fitWidth: true, _layout_columnWidth: 40, ignoreClick: true, _lockedPosition: true, _forceActive: true, childDragAction: dropActionType.embed }; const reqdScripts = { dropConverter: "convertToButtons(dragData)" }; @@ -516,7 +516,7 @@ pie title Minerals in my tap water const reqdStackOpts:DocumentOptions ={ title: "menuItemPanel", childDragAction: dropActionType.same, layout_boxShadow: "rgba(0,0,0,0)", dontRegisterView: true, ignoreClick: true, _layout_dontCenter: 'y', - _chromeHidden: true, _gridGap: 0, _yMargin: 0, _xMargin: 0, _layout_autoHeight: false, _width: 60, _columnWidth: 60, _lockedPosition: true, isSystem: true, + _chromeHidden: true, _gridGap: 0, _yMargin: 0, _xMargin: 0, _layout_autoHeight: false, _width: 60, _layout_columnWidth: 60, _lockedPosition: true, isSystem: true, }; return DocUtils.AssignDocField(doc, field, (opts, items) => Docs.Create.StackingDocument(items??[], opts), reqdStackOpts, menuBtns, { dropConverter: "convertToButtons(dragData)" }); } diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index cd46ae824..c847bc546 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -402,7 +402,7 @@ export class SchemaDateCell extends ObservableReactComponent {pointerEvents === 'none' ? null : ( } + icon={} size={Size.XSMALL} type={Type.TERT} color={SnappingManager.userColor} diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss index 186d24e92..8bc68c131 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss @@ -1,21 +1,21 @@ @use '../../global/globalCssVariables.module.scss' as global; -// bcz: something's messed up with the IconButton css. this mostly fixes the fit-all button, the color buttons, the undo +/- expander and the dropdown doc type list (eg 'text') -.iconButton-container { - width: unset !important; - min-width: 30px !important; - height: unset !important; - min-height: 30px; - .color { - height: 3px !important; - } -} .fonticonbox { margin: auto; width: 100%; .formLabel { height: 5px; } + // bcz: something's messed up with the IconButton css. this mostly fixes the fit-all button, the color buttons, the undo +/- expander and the dropdown doc type list (eg 'text') + .iconButton-container { + width: unset !important; + min-width: 30px !important; + height: unset !important; + min-height: 30px; + .color { + height: 3px !important; + } + } } .menuButton { height: 100%; diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 7e0236b74..f699568f1 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -257,10 +257,7 @@ export class FontIconBox extends ViewBoxBaseComponent() { const tooltip: string = StrCast(this.Document.toolTip); return ( -
{ - e.stopPropagation(); - }}> +
e.stopPropagation()}> { if (!this.colorBatch) this.colorBatch = UndoManager.StartBatch(`Set ${tooltip} color`); diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index 0684daeb6..18cf36603 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -155,8 +155,8 @@ export class DashFieldViewInternal extends ObservableReactComponent { - this._expanded = !this._props.editable ? !this._expanded : true; + onPointerDown={action(() => { + this._expanded = !this._props.editable ? false : !this._expanded; })} style={{ fontSize: 'smaller', width: !this._hideKey && this._expanded ? this.columnWidth() : undefined }}>