From 18774b42e3c8e1e899978fe9f16a4d123adee803 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts Date: Wed, 1 Jan 2025 22:32:19 -0800 Subject: monorepo setup --- .../collectionSchema/CollectionSchemaView.tsx | 2 +- .../collectionSchema/SchemaColumnHeader.tsx | 80 ++++++++++++---------- .../collections/collectionSchema/SchemaRowBox.tsx | 2 +- .../collectionSchema/SchemaTableCell.tsx | 2 +- 4 files changed, 47 insertions(+), 39 deletions(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index aef97e723..5a5cc3622 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { IconButton, Size } from 'browndash-components'; +import { IconButton, Size } from '@dash/components'; import { IReactionDisposer, Lambda, ObservableMap, action, computed, makeObservable, observable, observe, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx index 9ffdd812f..81a2d8e64 100644 --- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx +++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx @@ -17,7 +17,7 @@ import { DocCast } from '../../../../fields/Types'; import { computedFn } from 'mobx-utils'; import { CollectionSchemaView } from './CollectionSchemaView'; import { undoable } from '../../../util/UndoManager'; -import { IconButton, Size } from 'browndash-components'; +import { IconButton, Size } from '@dash/components'; export enum SchemaFieldType { Header, @@ -122,45 +122,53 @@ export class SchemaColumnHeader extends ObservableReactComponent { - SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown(); - this._props.schemaView.deselectAllCells(); - }} - style={{ - color, - width: '100%', - pointerEvents, - }}> - {this._inputRef = r; this._props.autoFocus && r?.setIsFocused(true)}} - oneLine={true} - allowCRs={false} - contents={''} - onClick={this.openKeyDropdown} - fieldContents={fieldProps} - editing={undefined} - placeholder={'Add key'} - updateAlt={this.updateAlt} // alternate title to display - updateSearch={this.updateKeyDropdown} - inputString={true} - inputStringPlaceholder={'Add key'} - GetValue={() => { - if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return ''; - else if (this._altTitle) return this._altTitle; - else return this.fieldKey; + return ( +
{ + SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown(); + this._props.schemaView.deselectAllCells(); }} - SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => { - if (enterKey) { - // if shift & enter, set value of each cell in column - this.setColumnValues(value, ''); - this._altTitle = undefined; + style={{ + color, + width: '100%', + pointerEvents, + }}> + { + this._inputRef = r; + this._props.autoFocus && r?.setIsFocused(true); + }} + oneLine={true} + allowCRs={false} + contents={''} + onClick={this.openKeyDropdown} + fieldContents={fieldProps} + editing={undefined} + placeholder={'Add key'} + updateAlt={this.updateAlt} // alternate title to display + updateSearch={this.updateKeyDropdown} + inputString={true} + inputStringPlaceholder={'Add key'} + GetValue={() => { + if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return ''; + else if (this._altTitle) return this._altTitle; + else return this.fieldKey; + }} + SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => { + if (enterKey) { + // if shift & enter, set value of each cell in column + this.setColumnValues(value, ''); + this._altTitle = undefined; + this._props.finishEdit?.(); + return true; + } this._props.finishEdit?.(); return true; - } - this._props.finishEdit?.(); - return true; - }, 'edit column header')}/> + }, 'edit column header')} + />
+ ); } public static isDefaultField = (key: string) => { diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 7f519b065..16f8b86f3 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -1,4 +1,4 @@ -import { IconButton, Size } from 'browndash-components'; +import { IconButton, Size } from '@dash/components'; import { computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { computedFn } from 'mobx-utils'; diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index f036ff843..cd46ae824 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-use-before-define */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Popup, Size, Type } from 'browndash-components'; +import { Popup, Size, Type } from '@dash/components'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { extname } from 'path'; -- cgit v1.2.3-70-g09d2 From 3bc00bae7d7569920d3d6f6221c7a57cabd80e35 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 27 Jan 2025 11:41:40 -0500 Subject: adjusted dash field views to work with new schemacells (eg mermaids docs) --- src/client/views/collections/collectionSchema/SchemaRowBox.tsx | 8 ++------ src/client/views/nodes/formattedText/DashFieldView.tsx | 9 +++++++-- 2 files changed, 9 insertions(+), 8 deletions(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 16f8b86f3..da203abfa 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -100,9 +100,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { return infos; } - isolatedSelection = (doc: Doc) => { - return this.schemaView?.selectionOverlap(doc); - }; + isolatedSelection = (doc: Doc) => this.schemaView?.selectionOverlap(doc); setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY); selectedCol = () => this.schemaView._selectedCol; getFinfo = computedFn((fieldKey: string) => this.schemaView?.fieldInfos.get(fieldKey)); @@ -113,9 +111,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent() { columnWidth = computedFn((index: number) => () => this.schemaView?.displayColumnWidths[index] ?? CollectionSchemaView._minColWidth); computeRowIndex = () => this.schemaView?.rowIndex(this.Document); highlightCells = (text: string) => this.schemaView?.highlightCells(text); - selectReference = (doc: Doc, col: number) => { - this.schemaView.selectReference(doc, col); - }; + selectReference = (doc: Doc, col: number) => this.schemaView.selectReference(doc, col); eqHighlightFunc = (text: string) => { const info = this.schemaView.findCellRefs(text); const cells: HTMLDivElement[] = []; diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index f0313fba4..0684daeb6 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -5,7 +5,7 @@ import { observer } from 'mobx-react'; import { NodeSelection } from 'prosemirror-state'; import * as React from 'react'; import * as ReactDOM from 'react-dom/client'; -import { returnFalse, returnZero, setupMoveUpEvents } from '../../../../ClientUtils'; +import { returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../../../ClientUtils'; import { Doc, DocListCast, Field } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; import { listSpec } from '../../../../fields/Schema'; @@ -169,12 +169,17 @@ export class DashFieldViewInternal extends ObservableReactComponent []} // fix + isolatedSelection={() => [true, true]} // fix + rowSelected={returnTrue} //fix rowHeight={returnZero} isRowActive={this.isRowActive} padding={0} getFinfo={emptyFunction} setColumnValues={returnFalse} - setSelectedColumnValues={returnFalse} allowCRs oneLine={!this._expanded && !this._props.nodeSelected()} finishEdit={this.finishEdit} -- 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/collections/collectionSchema') 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/collections/collectionSchema') 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 }}> Date: Fri, 7 Mar 2025 23:13:33 -0500 Subject: fixed following text hyperlinks to Docs. fixed using fieldinfos for DashFieldViews to get appropriate Schmema cell input. fixed dashFieldView to show correct input editor for field type. --- src/client/documents/Documents.ts | 2 +- .../collections/collectionSchema/CollectionSchemaView.tsx | 12 +++++++----- .../views/collections/collectionSchema/SchemaCellField.tsx | 2 +- .../views/collections/collectionSchema/SchemaTableCell.tsx | 6 +++--- src/client/views/nodes/formattedText/DashFieldView.tsx | 11 +++++++---- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 6 files changed, 20 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 61b370da4..4b5979965 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -35,7 +35,7 @@ export enum FInfoFieldType { enumeration = 'enum', date = 'date', list = 'list', - rtf = 'rich text', + rtf = 'richtext', map = 'map', } export class FInfo { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 5a5cc3622..8e9e8e1cc 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -12,7 +12,7 @@ import { List } from '../../../../fields/List'; import { ColumnType } from '../../../../fields/SchemaHeaderField'; import { BoolCast, NumCast, StrCast } from '../../../../fields/Types'; import { DocUtils } from '../../../documents/DocUtils'; -import { Docs, DocumentOptions, FInfo } from '../../../documents/Documents'; +import { Docs, DocumentOptions, FInfo, FInfoFieldType } from '../../../documents/Documents'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; import { dropActionType } from '../../../util/DropActionTypes'; @@ -49,14 +49,16 @@ import { SchemaRowBox } from './SchemaRowBox'; // eslint-disable-next-line @typescript-eslint/no-require-imports const { SCHEMA_NEW_NODE_HEIGHT } = require('../../global/globalCssVariables.module.scss'); // prettier-ignore -export const FInfotoColType: { [key: string]: ColumnType } = { +export const FInfotoColType: { [key in FInfoFieldType]: ColumnType } = { string: ColumnType.String, number: ColumnType.Number, boolean: ColumnType.Boolean, date: ColumnType.Date, - image: ColumnType.Image, - rtf: ColumnType.RTF, - enumeration: ColumnType.Enumeration, + richtext: ColumnType.RTF, + enum: ColumnType.Enumeration, + Doc: ColumnType.Any, + list: ColumnType.Any, + map: ColumnType.Any, }; const defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', 'text']; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 5a64ecc62..20ec2f151 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -21,7 +21,7 @@ import DOMPurify from 'dompurify'; */ export interface SchemaCellFieldProps { - contents: FieldType; + contents: FieldType | undefined; fieldContents?: FieldViewProps; editing?: boolean; oneLine?: boolean; diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx index c847bc546..d404378eb 100644 --- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx +++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx @@ -136,7 +136,7 @@ export class SchemaTableCell extends ObservableReactComponent e.stopPropagation()} style={{ marginRight: 4 }} type="checkbox" checked={BoolCast(this._props.Document[this._props.fieldKey])} diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx index 18cf36603..e899b49bc 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.tsx +++ b/src/client/views/nodes/formattedText/DashFieldView.tsx @@ -25,6 +25,7 @@ import './DashFieldView.scss'; import { FormattedTextBox } from './FormattedTextBox'; import { Node } from 'prosemirror-model'; import { EditorView } from 'prosemirror-view'; +import { DocumentOptions, FInfo } from '../../../documents/Documents'; @observer export class DashFieldViewMenu extends AntimodeMenu { @@ -151,6 +152,8 @@ export class DashFieldViewInternal extends ObservableReactComponent (this._dashDoc ? [this._dashDoc] : undefined); columnWidth = () => Math.min(this._props.tbox._props.PanelWidth(), Math.max(50, this._props.tbox._props.PanelWidth() - 100)); // try to leave room for the fieldKey + finfo = (fieldKey: string) => (new DocumentOptions() as Record)[fieldKey]; + // set the display of the field's value (checkbox for booleans, span of text for strings) @computed get fieldValueContent() { return !this._dashDoc ? null : ( @@ -165,7 +168,7 @@ export class DashFieldViewInternal extends ObservableReactComponent undefined : returnZero} selectedCells={this.selectedCells} selectedCol={returnZero} fieldKey={this._fieldKey} @@ -178,7 +181,7 @@ export class DashFieldViewInternal extends ObservableReactComponent diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index a0eb6067e..3844616fd 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1652,7 +1652,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent Date: Sun, 9 Mar 2025 17:40:08 -0400 Subject: removed simulation doc. fixed empty imageBox uploading. fixed script typechecking. fixed metadata doc. fixed setting background colors of docs that have a template. --- src/client/documents/DocUtils.ts | 7 +++++-- src/client/documents/DocumentTypes.ts | 1 - src/client/documents/Documents.ts | 4 ---- src/client/util/CurrentUserUtils.ts | 16 ++++++++-------- src/client/util/Scripting.ts | 7 +++---- src/client/views/Main.tsx | 2 -- src/client/views/StyleProvider.tsx | 2 +- .../collections/collectionSchema/SchemaCellField.tsx | 2 -- src/client/views/nodes/DiagramBox.tsx | 5 ++++- src/client/views/nodes/DocumentContentsView.tsx | 11 ++++------- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/ImageBox.tsx | 18 +++++++----------- src/fields/Doc.ts | 1 - 13 files changed, 33 insertions(+), 45 deletions(-) (limited to 'src/client/views/collections/collectionSchema') diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts index b216551d5..1c7ccadd1 100644 --- a/src/client/documents/DocUtils.ts +++ b/src/client/documents/DocUtils.ts @@ -691,6 +691,7 @@ export namespace DocUtils { } generatedDocuments.push(doc); } + return doc; } export function GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, annotationOn?: Doc, backgroundColor?: string) { @@ -841,7 +842,7 @@ export namespace DocUtils { export function uploadFileToDoc(file: File, options: DocumentOptions, overwriteDoc: Doc) { const generatedDocuments: Doc[] = []; // Since this file has an overwriteDoc, we can set the client tracking guid to the overwriteDoc's guid. - Networking.UploadFilesToServer([{ file, guid: overwriteDoc[Id] }]).then(upfiles => { + return Networking.UploadFilesToServer([{ file, guid: overwriteDoc[Id] }]).then(upfiles => { const { source: { newFilename, mimetype }, result, @@ -851,7 +852,9 @@ export namespace DocUtils { overwriteDoc.loadingError = result.message; Doc.removeCurrentlyLoading(overwriteDoc); } - } else newFilename && mimetype && processFileupload(generatedDocuments, newFilename, mimetype, result, options, overwriteDoc); + return undefined; + } + return newFilename && mimetype ? processFileupload(generatedDocuments, newFilename, mimetype, result, options, overwriteDoc) : undefined; }); } diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 00f5dedd6..03626107f 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -31,7 +31,6 @@ export enum DocumentType { DATAVIZ = 'dataviz', ANNOPALETTE = 'annopalette', LOADING = 'loading', - SIMULATION = 'simulation', // physics simulation MESSAGE = 'message', // chat message // special purpose wrappers that either take no data or are compositions of lower level types diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 4b5979965..317bb7feb 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1150,9 +1150,5 @@ export namespace Docs { export function DelegateDocument(proto: Doc, options: DocumentOptions = {}) { return InstanceFromProto(proto, undefined, options); } - - export function SimulationDocument(options?: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.SIMULATION), undefined, { ...(options || {}) }); - } } } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 778b522c4..21e1d3e12 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -109,7 +109,7 @@ export class CurrentUserUtils { const reqdClickList = reqdTempOpts.map(opts => { const allOpts = {...reqdClickOpts, ...opts.opts}; const clickDoc = tempClicks ? DocListCast(tempClicks.data).find(fdoc => fdoc.title === opts.opts.title): undefined; - return DocUtils.AssignOpts(clickDoc, allOpts) ?? Docs.Create.ScriptingDocument(ScriptField.MakeScript(opts.script, allOpts),allOpts); + return DocUtils.AssignOpts(clickDoc, allOpts) ?? Docs.Create.ScriptingDocument(ScriptField.MakeScript(opts.script),allOpts); }); const reqdOpts:DocumentOptions = { title: "child click editors", _height:75, isSystem: true}; @@ -270,21 +270,23 @@ export class CurrentUserUtils { // "
" + // " " + - // " " + + // " " + // "
"; const headerBtnHgt = 10; const headerTemplate = (opts:DocumentOptions) => MakeTemplate(Docs.Create.RTFDocument(new RichTextField(JSON.stringify(json), ""), { ...opts, title: "Header Template", - layout:` + layout:` - Metadata + Metadata + ` }, "header")); const slideView = (opts:DocumentOptions) => MakeTemplate(Docs.Create.MultirowDocument( [ - Docs.Create.MulticolumnDocument([], { title: "hero", _height: 200, isSystem: true }), + Docs.Create.MulticolumnDocument([], { title: "hero", _xMargin: 10, _height: 200, isSystem: true }), Docs.Create.TextDocument("", { title: "text", _layout_fitWidth:true, _height: 100, isSystem: true, text_fontFamily: StrCast(Doc.UserDoc().fontFamily), text_fontSize: StrCast(Doc.UserDoc().fontSize) }) ], {...opts, title: "Slide View Template"})); const plotlyApi = () => { @@ -390,7 +392,6 @@ pie title Minerals in my tap water {key: "Image", creator: opts => Docs.Create.ImageDocument("", opts), opts: { _width: 400, _height:400 }}, {key: "Equation", creator: opts => Docs.Create.EquationDocument("",opts), opts: { _width: 50, _height: 50, nativeWidth: 40, nativeHeight: 40, _xMargin: 10, _yMargin: 10}}, {key: "Noteboard", creator: opts => Docs.Create.NoteTakingDocument([], opts), opts: { _width: 250, _height: 200, _layout_fitWidth: true}}, - {key: "Simulation", creator: opts => Docs.Create.SimulationDocument(opts), opts: { _width: 300, _height: 300, }}, {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts), opts: { _width: 150, _height: 100, _layout_fitWidth: true }}, {key: "Webpage", creator: opts => Docs.Create.WebDocument("",opts), opts: { _width: 400, _height: 512, _nativeWidth: 850, data_useCors: true, }}, {key: "Comparison", creator: opts => Docs.Create.ComparisonDocument("", opts), opts: { _width: 300, _height: 300 }}, @@ -428,7 +429,6 @@ pie title Minerals in my tap water { toolTip: "Tap or drag to create an equation", title: "Math", icon: "calculator", dragFactory: doc.emptyEquation as Doc, clickFactory: DocCast(doc.emptyEquation)}, { toolTip: "Tap or drag to create a mermaid node", title: "Mermaids", icon: "rocket", dragFactory: doc.emptyMermaids as Doc, clickFactory: DocCast(doc.emptyMermaids)}, { toolTip: "Tap or drag to create a plotly node", title: "Plotly", icon: "rocket", dragFactory: doc.emptyPlotly as Doc, clickFactory: DocCast(doc.emptyMermaids)}, - { toolTip: "Tap or drag to create a physics simulation",title: "Simulation", icon: "rocket",dragFactory: doc.emptySimulation as Doc, clickFactory: DocCast(doc.emptySimulation), funcs: { hidden: "IsNoviceMode()"}}, { toolTip: "Tap or drag to create a note board", title: "Notes", icon: "book", dragFactory: doc.emptyNoteboard as Doc, clickFactory: DocCast(doc.emptyNoteboard)}, { toolTip: "Tap or drag to create an image", title: "Image", icon: "image", dragFactory: doc.emptyImage as Doc, clickFactory: DocCast(doc.emptyImage)}, { toolTip: "Tap or drag to create a collection", title: "Col", icon: "folder", dragFactory: doc.emptyCollection as Doc, clickFactory: DocCast(doc.emptyTab)}, @@ -443,7 +443,7 @@ pie title Minerals in my tap water { toolTip: "Tap or drag to create a button", title: "Button", icon: "circle", dragFactory: doc.emptyButton as Doc, clickFactory: DocCast(doc.emptyButton)}, { toolTip: "Tap or drag to create a scripting box", title: "Script", icon: "terminal", dragFactory: doc.emptyScript as Doc, clickFactory: DocCast(doc.emptyScript), funcs: { hidden: "IsNoviceMode()"}}, { toolTip: "Tap or drag to create a data viz node", title: "DataViz", icon: "chart-bar", dragFactory: doc.emptyDataViz as Doc, clickFactory: DocCast(doc.emptyDataViz)}, - { toolTip: "Tap or drag to create a journal entry", title: "Journal", icon: "note", dragFactory: doc.emptyDailyJournal as Doc,clickFactory:DocCast(doc.emptyDataJournal), }, + { toolTip: "Tap or drag to create a journal entry", title: "Journal", icon: "book", dragFactory: doc.emptyDailyJournal as Doc,clickFactory:DocCast(doc.emptyDataJournal), }, { toolTip: "Tap or drag to create a bullet slide", title: "PPT Slide", icon: "person-chalkboard", dragFactory: doc.emptySlide as Doc, clickFactory: DocCast(doc.emptySlide), openFactoryLocation: OpenWhere.overlay,funcs: { hidden: "IsNoviceMode()"}}, { 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()"} }, diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts index c6d98496a..b0886a67c 100644 --- a/src/client/util/Scripting.ts +++ b/src/client/util/Scripting.ts @@ -54,6 +54,7 @@ function Run(script: string | undefined, customParams: string[], diagnostics: ts (diag.code !== 2552 ||!Object.keys(scriptingGlobals).includes(diagnostics[0].messageText.toString().match(/Cannot find name '([A-Za-z0-9$-_]+)'/)?.[1]??"-------")) ); // prettier-ignore if ((options.typecheck !== false && errors.length) || !script) { + console.log('Script Compile Failed: ' + script + ' ', errors); return { compiled: false, errors }; } @@ -228,10 +229,8 @@ export function CompileScript(script: string, options: ScriptOptions = {}): Comp } paramNames.push(...Object.keys(params).filter(p => p !== 'this' && !Object.keys(capturedVariables).includes(p))); - const paramList = paramNames.map(key => { - const val = typeof params[key] === 'string' && params[key].length && !'"\'`'.includes(params[key][0]) ? `"${params[key]}"` : params[key]; - return `${key}: ${val}`; - }); + const paramList = paramNames.map(key => `${key}: ${params[key] === Doc.name ? 'any' : params[key]}`); + for (const key in capturedVariables) { if (key !== 'this') { const val = capturedVariables[key]; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index e5347e692..22725a2b9 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -45,7 +45,6 @@ import { LoadingBox } from './nodes/LoadingBox'; import { MapBox } from './nodes/MapBox/MapBox'; import { MapPushpinBox } from './nodes/MapBox/MapPushpinBox'; import { PDFBox } from './nodes/PDFBox'; -import { PhysicsSimulationBox } from './nodes/PhysicsBox/PhysicsSimulationBox'; import { RecordingBox } from './nodes/RecordingBox'; import { ScreenshotBox } from './nodes/ScreenshotBox'; import { ScriptingBox } from './nodes/ScriptingBox'; @@ -154,7 +153,6 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; CalendarBox, ComparisonBox, LoadingBox, - PhysicsSimulationBox, SchemaRowBox, ImportElementBox, MapPushpinBox, diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index b04b1ae65..331ee1707 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -254,7 +254,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey+alternate], StrCast(doc?.['backgroundColor' +alternate], isCaption ? 'rgba(0,0,0,0.4)' : '')); - if (doc?.[StrCast(doc?.layout_fieldKey)] instanceof Doc) docColor = StrCast(doc._backgroundColor,docColor) + if (!docColor && doc?.[StrCast(doc?.layout_fieldKey)] instanceof Doc) docColor = StrCast(doc._backgroundColor,docColor) // prettier-ignore switch (layoutDoc?.type) { case DocumentType.PRESELEMENT: docColor = docColor || ""; break; diff --git a/src/client/views/collections/collectionSchema/SchemaCellField.tsx b/src/client/views/collections/collectionSchema/SchemaCellField.tsx index 20ec2f151..e6acff061 100644 --- a/src/client/views/collections/collectionSchema/SchemaCellField.tsx +++ b/src/client/views/collections/collectionSchema/SchemaCellField.tsx @@ -107,7 +107,6 @@ export class SchemaCellField extends ObservableReactComponent this._props.GetValue(), fieldVal => { - console.log('Update: ' + this._props.Document.title, this._props.fieldKey, fieldVal); this._unrenderedContent = fieldVal ?? ''; this.finalizeEdit(false, false, false); } @@ -127,7 +126,6 @@ export class SchemaCellField extends ObservableReactComponent disposer?.()); this.finalizeEdit(false, true, false); diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx index e77cde431..a49c69be3 100644 --- a/src/client/views/nodes/DiagramBox.tsx +++ b/src/client/views/nodes/DiagramBox.tsx @@ -18,6 +18,7 @@ import { InkingStroke } from '../InkingStroke'; import './DiagramBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; +import { Tooltip } from '@mui/material'; /** * this is a class for the diagram box doc type that can be found in the tools section of the side bar */ @@ -208,7 +209,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent() { - (this._showCode = !this._showCode))} /> + + (this._showCode = !this._showCode))} /> +
{this._showCode ? ( diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index aab8a183a..47c5734f7 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -23,7 +23,6 @@ interface HTMLtagProps { htmltag: string; onClick?: ScriptField; onInput?: ScriptField; - scaling: number; children?: JSX.Element[]; } @@ -43,7 +42,7 @@ interface HTMLtagProps { export class HTMLtag extends React.Component { click = () => { const clickScript = this.props.onClick as Opt; - clickScript?.script.run({ this: this.props.Document, scale: this.props.scaling }); + clickScript?.script.run({ this: this.props.Document }); }; onInput = (e: React.FormEvent) => { const onInputScript = this.props.onInput as Opt; @@ -56,7 +55,6 @@ export class HTMLtag extends React.Component { 'dragStarting', 'dragEnding', 'htmltag', - 'scaling', 'Document', 'key', 'onInput', @@ -65,7 +63,7 @@ export class HTMLtag extends React.Component { ]).omit; const replacer = (match: string, expr: string) => // bcz: this executes a script to convert a property expression string: { script } into a value - (ScriptField.MakeFunction(expr, { this: Doc.name, scale: 'number' })?.script.run({ this: this.props.Document, scale: this.props.scaling }).result as string) || ''; + (ScriptField.MakeFunction(expr, { this: Doc.name })?.script.run({ this: this.props.Document }).result as string) || ''; Object.keys(divKeys).forEach((prop: string) => { const p = (this.props as unknown as { [key: string]: string })[prop] as string; style[prop] = p?.replace(/{([^.'][^}']+)}/g, replacer); @@ -166,12 +164,11 @@ export class DocumentContentsView extends ObservableReactComponent[^{]*)[^=]\{([^.'][^<}]+)\}([^}]*<)/g, replacer); // replace HTML with corresponding HTML tag as in: becomes - const replacer2 = (match: string, p1: string) => ` ` with as in: becomes const replacer3 = (/* match: any, p1: string, offset: any, string: any */) => `; } // prettier-ignore @computed get showCaption() { return this.style(this.layoutDoc, StyleProp.ShowCaption) as string ?? ""; } // prettier-ignore @computed get headerMargin() { return this.style(this.layoutDoc, StyleProp.HeaderMargin) as number ?? 0; } // prettier-ignore diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 017ef7191..5b06e9fc5 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -148,9 +148,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { ); const { layoutDoc } = this; this._disposers.path = reaction( - () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width) }), - ({ nativeSize, width }) => { - if ((layoutDoc === this.layoutDoc && !this.layoutDoc._layout_nativeDimEditable) || !this.layoutDoc._height) { + () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width), height: this.layoutDoc._height }), + ({ nativeSize, width, height }) => { + if ((layoutDoc === this.layoutDoc && !this.layoutDoc._layout_nativeDimEditable) || !height) { this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth; } }, @@ -834,14 +834,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { const file = input.files?.[0]; if (file) { const disposer = OverlayView.ShowSpinner(); - const [{ result }] = await Networking.UploadFilesToServer({ file }); - if (result instanceof Error) { - alert('Error uploading files - possibly due to unsupported file types'); - } else { - this.dataDoc[this.fieldKey] = new ImageField(result.accessPaths.agnostic.client); - !(result instanceof Error) && DocUtils.assignImageInfo(result, this.dataDoc); - } - disposer(); + DocUtils.uploadFileToDoc(file, {}, this.Document).then(doc => { + disposer(); + doc && (doc.height = undefined); + }); } else { console.log('No file selected'); } diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index dc4a5a011..fc89dcbe7 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1517,7 +1517,6 @@ export namespace Doc { case DocumentType.MAP: return 'map-marker-alt'; case DocumentType.DATAVIZ: return 'chart-bar'; case DocumentType.EQUATION: return 'calculator'; - case DocumentType.SIMULATION: return 'rocket'; case DocumentType.CONFIG: return 'folder-closed'; default: } -- cgit v1.2.3-70-g09d2