From cc75a03d89a4b553a53b55404464cd2ca93d9b48 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 22 Nov 2023 11:52:57 -0500 Subject: fixed more issues with rotation. restrutured how MarqueeAnnotator works to be simpler and more correct. --- src/client/views/nodes/VideoBox.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index f803715ad..f90c19050 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -100,6 +100,7 @@ padding: 0 10px 0 7px; transition: opacity 0.3s; z-index: 10001; + transform-origin: top left; .timecode-controls { display: flex; -- cgit v1.2.3-70-g09d2 From 07c30aed69dfa810ddb0b861ae2dc8e8f3a27356 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 11 Dec 2023 17:04:49 -0500 Subject: fixed includes of scss globals into typescript files. --- package-lock.json | 3 +- package.json | 2 +- src/client/documents/Documents.ts | 5 +- src/client/util/CaptureManager.scss | 7 +- src/client/util/DragManager.ts | 3 +- src/client/util/SettingsManager.scss | 4 +- src/client/util/reportManager/ReportManager.scss | 7 +- src/client/views/AntimodeMenu.scss | 11 +-- src/client/views/ContextMenu.scss | 2 +- src/client/views/DashboardView.scss | 52 +++++------ src/client/views/DocumentButtonBar.scss | 2 +- src/client/views/DocumentDecorations.scss | 2 +- src/client/views/InkingStroke.tsx | 4 +- src/client/views/Main.scss | 2 +- src/client/views/MainView.scss | 2 +- src/client/views/MainView.tsx | 4 +- src/client/views/PropertiesButtons.scss | 45 +++++---- src/client/views/PropertiesSection.scss | 7 +- src/client/views/PropertiesView.scss | 2 +- src/client/views/TemplateMenu.scss | 7 +- src/client/views/_nodeModuleOverrides.scss | 2 +- src/client/views/animationtimeline/Region.scss | 2 +- src/client/views/animationtimeline/Region.tsx | 2 +- src/client/views/animationtimeline/Timeline.scss | 18 +--- .../views/animationtimeline/TimelineMenu.scss | 78 +++++++--------- .../views/animationtimeline/TimelineOverview.scss | 6 +- src/client/views/animationtimeline/Track.scss | 5 +- .../collections/CollectionCarousel3DView.scss | 6 +- .../views/collections/CollectionCarousel3DView.tsx | 5 +- .../views/collections/CollectionDockingView.scss | 2 +- src/client/views/collections/CollectionMenu.scss | 4 +- .../collections/CollectionNoteTakingView.scss | 2 +- .../collections/CollectionStackedTimeline.scss | 2 +- .../views/collections/CollectionStackingView.scss | 2 +- .../views/collections/CollectionTreeView.scss | 2 +- src/client/views/collections/CollectionView.scss | 2 +- src/client/views/collections/TabDocView.scss | 2 +- src/client/views/collections/TreeView.scss | 2 +- src/client/views/collections/TreeView.tsx | 3 +- .../CollectionFreeFormRemoteCursors.scss | 10 +- .../collectionFreeForm/CollectionFreeFormView.scss | 2 +- .../collectionLinear/CollectionLinearView.scss | 2 +- .../collectionSchema/CollectionSchemaView.scss | 2 +- .../views/global/globalCssVariables.module.scss | 96 +++++++++++++++++++ .../global/globalCssVariables.module.scss.d.ts | 21 +++++ src/client/views/global/globalCssVariables.scss | 96 ------------------- .../views/global/globalCssVariables.scss.d.ts | 21 ----- src/client/views/linking/LinkMenu.scss | 6 +- src/client/views/linking/LinkMenuItem.scss | 2 +- src/client/views/nodes/AudioBox.scss | 10 +- .../views/nodes/DataVizBox/components/Chart.scss | 2 +- .../views/nodes/DataVizBox/components/TableBox.tsx | 4 +- src/client/views/nodes/DocumentLinksButton.scss | 2 +- src/client/views/nodes/DocumentView.scss | 2 +- src/client/views/nodes/EquationBox.scss | 2 +- .../views/nodes/FontIconBox/FontIconBox.scss | 2 +- src/client/views/nodes/KeyValueBox.scss | 54 +++++------ src/client/views/nodes/KeyValuePair.scss | 2 +- src/client/views/nodes/LinkAnchorBox.tsx | 7 +- src/client/views/nodes/LinkDescriptionPopup.scss | 8 +- src/client/views/nodes/MapBox/MapBox.scss | 2 +- src/client/views/nodes/PDFBox.scss | 16 +--- src/client/views/nodes/RadialMenu.scss | 14 ++- src/client/views/nodes/VideoBox.scss | 8 +- src/client/views/nodes/WebBox.scss | 2 +- .../views/nodes/formattedText/DashFieldView.scss | 2 +- .../nodes/formattedText/FormattedTextBox.scss | 4 +- .../views/nodes/formattedText/RichTextMenu.scss | 11 +-- .../views/nodes/formattedText/TooltipTextMenu.scss | 102 ++++++++++----------- src/client/views/nodes/trails/PresBox.scss | 2 +- src/client/views/search/CheckBox.scss | 7 +- src/client/views/search/CollectionFilters.scss | 4 +- src/client/views/search/IconBar.scss | 4 +- src/client/views/search/IconButton.scss | 8 +- src/client/views/search/IconButton.tsx | 2 +- src/client/views/search/NaviconButton.scss | 2 +- src/client/views/search/SearchBox.scss | 17 ++-- src/client/views/search/SelectorContextMenu.scss | 4 +- src/client/views/search/ToggleBar.scss | 4 +- src/client/views/topbar/TopBar.scss | 3 +- src/client/views/webcam/DashWebRTCVideo.scss | 9 +- src/mobile/ImageUpload.scss | 13 +-- src/mobile/ImageUpload.tsx | 3 +- webpack.config.js | 28 +++--- 84 files changed, 450 insertions(+), 494 deletions(-) create mode 100644 src/client/views/global/globalCssVariables.module.scss create mode 100644 src/client/views/global/globalCssVariables.module.scss.d.ts delete mode 100644 src/client/views/global/globalCssVariables.scss delete mode 100644 src/client/views/global/globalCssVariables.scss.d.ts (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/package-lock.json b/package-lock.json index 84b087892..4af642fc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -176,6 +176,7 @@ "reveal.js": "^5.0.2", "rimraf": "^5.0.5", "sass": "^1.69.5", + "sass-loader": "^13.3.2", "serializr": "^3.0.2", "shelljs": "^0.8.5", "socket.io": "^4.7.2", @@ -269,7 +270,6 @@ "mocha": "^10.2.0", "prettier": "^3.1.0", "react-type-animation": "^3.2.0", - "sass-loader": "^13.3.2", "scss-loader": "0.0.1", "style-loader": "^3.3.3", "ts-loader": "^9.5.1", @@ -25578,7 +25578,6 @@ "version": "13.3.2", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.2.tgz", "integrity": "sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==", - "dev": true, "dependencies": { "neo-async": "^2.6.2" }, diff --git a/package.json b/package.json index be944ff01..e99bf3734 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,6 @@ "mocha": "^10.2.0", "prettier": "^3.1.0", "react-type-animation": "^3.2.0", - "sass-loader": "^13.3.2", "scss-loader": "0.0.1", "style-loader": "^3.3.3", "ts-loader": "^9.5.1", @@ -262,6 +261,7 @@ "reveal.js": "^5.0.2", "rimraf": "^5.0.5", "sass": "^1.69.5", + "sass-loader": "^13.3.2", "serializr": "^3.0.2", "shelljs": "^0.8.5", "socket.io": "^4.7.2", diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1b39fdb41..dd6d6cdf6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -58,8 +58,9 @@ import { VideoBox } from '../views/nodes/VideoBox'; import { WebBox } from '../views/nodes/WebBox'; import { SearchBox } from '../views/search/SearchBox'; import { CollectionViewType, DocumentType } from './DocumentTypes'; -//import { DFLT_IMAGE_NATIVE_DIM } from '../views/global/globalCssVariables.scss'; -const DFLT_IMAGE_NATIVE_DIM = '900px'; +const { + default: { DFLT_IMAGE_NATIVE_DIM }, +} = require('../views/global/globalCssVariables.module.scss'); const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace('px', '')); class EmptyBox { diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss index 11e31fe2e..8679a0101 100644 --- a/src/client/util/CaptureManager.scss +++ b/src/client/util/CaptureManager.scss @@ -1,4 +1,4 @@ -@import "../views/global/globalCssVariables"; +@import '../views/global/globalCssVariables.module'; .capture-interface { //background-color: whitesmoke !important; @@ -39,7 +39,7 @@ align-items: center; justify-content: center; } - + .recordButtonInner { border-radius: 100%; width: 70%; @@ -106,7 +106,7 @@ display: flex; justify-content: center; align-items: center; - background-color: #BDDBE8; + background-color: #bddbe8; border-radius: 100%; font-weight: 800; margin-right: 5px; @@ -154,4 +154,3 @@ } } } - diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 427b1c85f..4b1cc1702 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -13,8 +13,7 @@ import { ScriptingGlobals } from './ScriptingGlobals'; import { SelectionManager } from './SelectionManager'; import { SnappingManager } from './SnappingManager'; import { UndoManager } from './UndoManager'; -// import * as globalCssVariables from '../views/global/globalCssVariables.scss'; -const contextMenuZindex = 100002; +const { default : { contextMenuZindex } } = require('../views/global/globalCssVariables.module.scss'); // prettier-ignore export type dropActionType = 'embed' | 'copy' | 'move' | 'add' | 'same' | 'inSame' | 'proto' | 'none' | undefined; // undefined = move, "same" = move but don't call dropPropertiesToRemove diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index bca649bc3..dbfc48c63 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -1,4 +1,4 @@ -@import '../views/global/globalCssVariables'; +@import '../views/global/globalCssVariables.module'; .settings-interface { //background-color: whitesmoke !important; @@ -187,14 +187,12 @@ display: flex; flex-direction: column; - .close-button { position: absolute; right: 2px; top: 2px; } - .settings-content { padding: 10px; width: 500px; diff --git a/src/client/util/reportManager/ReportManager.scss b/src/client/util/reportManager/ReportManager.scss index cd6a1d934..d82d7fdeb 100644 --- a/src/client/util/reportManager/ReportManager.scss +++ b/src/client/util/reportManager/ReportManager.scss @@ -1,4 +1,4 @@ -@import '../../views/global/globalCssVariables'; +@import '../../views/global/globalCssVariables.module'; // header @@ -360,5 +360,8 @@ padding: 4px 10px; font-size: 10px; border-radius: 32px; - transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; + transition: + background-color 0.2s ease, + color 0.2s ease, + border-color 0.2s ease; } diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index b205a0f1e..4613cec76 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -1,5 +1,4 @@ -@import "./global/globalCssVariables"; - +@import './global/globalCssVariables.module'; .antimodeMenu-cont { position: absolute; @@ -16,7 +15,7 @@ gap: 3px; &.with-rows { - flex-direction: column + flex-direction: column; } .antimodeMenu-row { @@ -26,8 +25,8 @@ .antimodeMenu-dragger { height: 100%; - transition: width .2s; - background-image: url("https://logodix.com/logo/1020374.png"); + transition: width 0.2s; + background-image: url('https://logodix.com/logo/1020374.png'); background-size: 90% 100%; background-repeat: no-repeat; background-position: left center; @@ -63,4 +62,4 @@ background-color: #121212; } } -} \ No newline at end of file +} diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 588eff1d1..232362c5c 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module.scss'; .contextMenu-cont { position: absolute; diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss index 6be2133ef..90f64b393 100644 --- a/src/client/views/DashboardView.scss +++ b/src/client/views/DashboardView.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables'; +@import './global/globalCssVariables.module'; .dashboard-view { padding: 50px; @@ -7,18 +7,18 @@ width: 100%; position: absolute; height: 100%; - width:100%; + width: 100%; padding-right: 0px; overflow: auto; - .left-menu { - display: flex; - justify-content: flex-start; - flex-direction: column; - width: 250px; - min-width: 250px; - gap: 5px; - } + .left-menu { + display: flex; + justify-content: flex-start; + flex-direction: column; + width: 250px; + min-width: 250px; + gap: 5px; + } .all-dashboards { display: flex; @@ -75,20 +75,20 @@ left: 0; top: 0; z-index: -1; - } + } } .dashboard-container { - border-radius: 10px; - position: relative; - cursor: pointer; - width: 250px; - height: 200px; - outline: solid 2px $light-gray; - display: flex; - flex-direction: column; - margin: 0 0px 30px 30px; - overflow: hidden; + border-radius: 10px; + position: relative; + cursor: pointer; + width: 250px; + height: 200px; + outline: solid 2px $light-gray; + display: flex; + flex-direction: column; + margin: 0 0px 30px 30px; + overflow: hidden; &:hover { outline: solid 2px $light-blue; @@ -122,18 +122,18 @@ background: 'lightgreen'; } - .more { - z-index: 100; - } + .more { + z-index: 100; + } - .background { + .background { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; - } + } } .new-dashboard { diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 1abf33cac..11614d627 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; $linkGap: 3px; diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index bbd951481..ac0ef054c 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; $linkGap: 3px; $headerHeight: 20px; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index d34df8742..15df03682 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -46,9 +46,7 @@ import { FieldView, FieldViewProps } from './nodes/FieldView'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { PinProps, PresBox } from './nodes/trails'; import { StyleProp } from './StyleProvider'; -// import { INK_MASK_SIZE } from './global/globalCssVariables.scss'; -const INK_MASK_SIZE = 1000; - +const { default: { INK_MASK_SIZE } } = require('./global/globalCssVariables.module.scss'); // prettier-ignore @observer export class InkingStroke extends ViewBoxBaseComponent() { static readonly MaskDim = INK_MASK_SIZE; // choose a really big number to make sure mask fits over container (which in theory can be arbitrarily big) diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index a403a10e3..02916e48e 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module'; @import 'nodeModuleOverrides'; :root { diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 4fb2ac279..28a0f7750 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -1,4 +1,4 @@ -@import 'global/globalCssVariables'; +@import 'global/globalCssVariables.module.scss'; @import 'nodeModuleOverrides'; html { overscroll-behavior-x: none; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index a8f4020ee..1e4c1e1d3 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -69,9 +69,7 @@ import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider'; import { TopBar } from './topbar/TopBar'; -// import { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } from './global/globalCssVariables.scss'; -const LEFT_MENU_WIDTH = '60px'; -const TOPBAR_HEIGHT = '37px'; +const { default: { LEFT_MENU_WIDTH, TOPBAR_HEIGHT } } = require('./global/globalCssVariables.module.scss'); // prettier-ignore const _global = (window /* browser */ || global) /* node */ as any; @observer diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index b801b3abf..b8c73b6d3 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -1,6 +1,6 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; -$linkGap : 3px; +$linkGap: 3px; .propertiesButtons-linkFlyout { grid-column: 2/4; @@ -23,7 +23,7 @@ $linkGap : 3px; // margin-right: 7px; // margin-left: 8px; height: 28px; - // width: 226px;//29px; + // width: 226px;//29px; display: flex; align-items: center; // height: 25px; @@ -39,10 +39,9 @@ $linkGap : 3px; // font-size: 75%; transition: transform 0.2s; // text-align: center; - // justify-content: center; - + // margin-right: 10px; // margin-left: 4px; @@ -55,34 +54,34 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty.toggle-on { background-color: $medium-blue; color: $white; - width:100% + width: 100%; } .propertiesButtons-linkButton-empty.toggle-hover { background-color: $light-blue; color: $black; - width:100% + width: 100%; } .propertiesButtons-linkButton-empty.toggle-off { - background-color: white;//$dark-gray; + background-color: white; //$dark-gray; color: black; //white; - width:100% + width: 100%; } .propertiesButtons-icon { - margin-left:8px; + margin-left: 8px; } .propertiesButtons { - position:relative; + position: relative; width: 100%; // margin-top: 3px; -// // grid-column: 1/4; -// width: 100%; -// height: auto; -// display: flex; -// // flex-direction: row; -// // flex-wrap: wrap; -// padding-bottom: 5.5px; + // // grid-column: 1/4; + // width: 100%; + // height: auto; + // display: flex; + // // flex-direction: row; + // // flex-wrap: wrap; + // padding-bottom: 5.5px; } .onClickFlyout-editScript { @@ -95,11 +94,10 @@ $linkGap : 3px; padding: 4px; } - .propertiesButtons-button { pointer-events: auto; - padding-right: 8px;//5px; - width: 100%;//width: 25px; + padding-right: 8px; //5px; + width: 100%; //width: 25px; border-radius: 5px; margin-right: 20px; margin-bottom: 8px; @@ -161,12 +159,11 @@ $linkGap : 3px; margin-left: 4px; &:hover { - filter:brightness(0.85); + filter: brightness(0.85); cursor: pointer; } } - @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); @@ -194,4 +191,4 @@ $linkGap : 3px; 100% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); } -} \ No newline at end of file +} diff --git a/src/client/views/PropertiesSection.scss b/src/client/views/PropertiesSection.scss index 321b6300c..3f92a70f8 100644 --- a/src/client/views/PropertiesSection.scss +++ b/src/client/views/PropertiesSection.scss @@ -1,11 +1,10 @@ -@import './global/globalCssVariables.scss'; +@import './global/globalCssVariables.module.scss'; .propertiesView-section { - .propertiesView-content { padding: 10px; } - + .propertiesView-sectionTitle { text-align: center; display: flex; @@ -14,7 +13,7 @@ font-weight: bold; justify-content: space-between; align-items: center; - + .propertiesView-sectionTitle-icon { width: 20px; height: 20px; diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 2da2ec568..8581bdf73 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables.scss'; +@import './global/globalCssVariables.module.scss'; .propertiesView-presentationTrails-title { display: flex; diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss index f81cbdaab..4d0f1bf00 100644 --- a/src/client/views/TemplateMenu.scss +++ b/src/client/views/TemplateMenu.scss @@ -1,4 +1,4 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; .templating-menu { position: absolute; pointer-events: auto; @@ -40,7 +40,8 @@ height: 100%; width: 100%; - .templateToggle, .chromeToggle { + .templateToggle, + .chromeToggle { text-align: left; color: black; } @@ -48,4 +49,4 @@ input { margin-right: 10px; } -} \ No newline at end of file +} diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss index c99281323..db69d6e44 100644 --- a/src/client/views/_nodeModuleOverrides.scss +++ b/src/client/views/_nodeModuleOverrides.scss @@ -1,4 +1,4 @@ -@import './global/globalCssVariables'; +@import './global/globalCssVariables.module.scss'; // this file is for overriding all the css from installed node modules // goldenlayout stuff diff --git a/src/client/views/animationtimeline/Region.scss b/src/client/views/animationtimeline/Region.scss index f7476ab55..b390ae34e 100644 --- a/src/client/views/animationtimeline/Region.scss +++ b/src/client/views/animationtimeline/Region.scss @@ -1,4 +1,4 @@ -@import './../global/globalCssVariables.scss'; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; diff --git a/src/client/views/animationtimeline/Region.tsx b/src/client/views/animationtimeline/Region.tsx index 53c5c4718..bc87dc94d 100644 --- a/src/client/views/animationtimeline/Region.tsx +++ b/src/client/views/animationtimeline/Region.tsx @@ -6,7 +6,7 @@ import { List } from '../../../fields/List'; import { createSchema, defaultSpec, listSpec, makeInterface } from '../../../fields/Schema'; import { Cast, NumCast } from '../../../fields/Types'; import { Transform } from '../../util/Transform'; -import '../global/globalCssVariables.scss'; +import '../global/globalCssVariables.module.scss'; import './Region.scss'; import './Timeline.scss'; import { TimelineMenu } from './TimelineMenu'; diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss index 48422b789..35ba0fa7f 100644 --- a/src/client/views/animationtimeline/Timeline.scss +++ b/src/client/views/animationtimeline/Timeline.scss @@ -1,4 +1,4 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -30,7 +30,6 @@ $timelineDark: #77a1aa; color: $timelineColor; margin-left: 3px; } - } .grid-box { @@ -61,7 +60,7 @@ $timelineDark: #77a1aa; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); - transition: .2s ease; + transition: 0.2s ease; } } @@ -128,7 +127,6 @@ $timelineDark: #77a1aa; // margin-top: 0.5px; } } - } .time-input { @@ -154,7 +152,7 @@ $timelineDark: #77a1aa; .number-label { color: black; transform: rotate(-90deg) translate(-15px, 8px); - font-size: .85em; + font-size: 0.85em; } .timeline-container { @@ -178,7 +176,6 @@ $timelineDark: #77a1aa; background-color: transparent; height: 30px; width: 100%; - } .scrubber { @@ -217,7 +214,6 @@ $timelineDark: #77a1aa; position: absolute; // box-shadow: -10px 0px 10px 10px red; } - } .currentTime { @@ -266,7 +262,6 @@ $timelineDark: #77a1aa; p { hyphens: auto; } - } } @@ -280,8 +275,6 @@ $timelineDark: #77a1aa; } } - - .overview { position: absolute; height: 50px; @@ -298,7 +291,6 @@ $timelineDark: #77a1aa; } } - .timeline-checker { height: auto; width: auto; @@ -312,11 +304,11 @@ $timelineDark: #77a1aa; width: auto; overflow: hidden; margin: 0px 10px; - cursor: pointer + cursor: pointer; } .check { width: 50px; height: 50px; } -} \ No newline at end of file +} diff --git a/src/client/views/animationtimeline/TimelineMenu.scss b/src/client/views/animationtimeline/TimelineMenu.scss index 43a89419e..de2042f17 100644 --- a/src/client/views/animationtimeline/TimelineMenu.scss +++ b/src/client/views/animationtimeline/TimelineMenu.scss @@ -1,56 +1,49 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; - -.timeline-menu-container{ +.timeline-menu-container { position: absolute; display: flex; box-shadow: $medium-gray 0.2vw 0.2vw 0.4vw; flex-direction: column; background: whitesmoke; z-index: 10000; - width: 200px; + width: 200px; padding-bottom: 10px; border-radius: 15px; - border: solid #BBBBBBBB 1px; - - + border: solid #bbbbbbbb 1px; - .timeline-menu-input{ - font: $sans-serif; - font-size: 13px; - width:100%; - text-transform: uppercase; - letter-spacing: 2px; - margin-left: 10px; - background-color: transparent; - border-width: 0px; - transition: border-width 500ms; + .timeline-menu-input { + font: $sans-serif; + font-size: 13px; + width: 100%; + text-transform: uppercase; + letter-spacing: 2px; + margin-left: 10px; + background-color: transparent; + border-width: 0px; + transition: border-width 500ms; } - .timeline-menu-input:hover{ - border-width: 2px; + .timeline-menu-input:hover { + border-width: 2px; } - - - - .timeline-menu-header{ - border-top-left-radius: 15px; - border-top-right-radius: 15px; - text-transform: uppercase; - background: $dark-gray; - letter-spacing: 2px; + .timeline-menu-header { + border-top-left-radius: 15px; + border-top-right-radius: 15px; + text-transform: uppercase; + background: $dark-gray; + letter-spacing: 2px; - .timeline-menu-header-desc{ - font:$sans-serif; - font-size: 13px; - text-align: center; - color: whitesmoke; + .timeline-menu-header-desc { + font: $sans-serif; + font-size: 13px; + text-align: center; + color: whitesmoke; } } - .timeline-menu-item { // width: 11vw; //10vw height: 30px; //2vh @@ -64,7 +57,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; + transition: all 0.1s; border-style: none; // padding: 10px 0px 10px 0px; white-space: nowrap; @@ -73,22 +66,21 @@ letter-spacing: 2px; text-transform: uppercase; padding-right: 20px; - padding-left: 10px; + padding-left: 10px; } .timeline-menu-item:hover { - border-width: .11px; + border-width: 0.11px; border-style: none; border-color: $medium-gray; border-bottom-style: solid; border-top-style: solid; - background: $medium-blue; + background: $medium-blue; } .timeline-menu-desc { - padding-left: 10px; - font:$sans-serif; - font-size: 13px; + padding-left: 10px; + font: $sans-serif; + font-size: 13px; } - -} \ No newline at end of file +} diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss index c8d96c399..2878232e6 100644 --- a/src/client/views/animationtimeline/TimelineOverview.scss +++ b/src/client/views/animationtimeline/TimelineOverview.scss @@ -1,4 +1,4 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; $timelineColor: #9acedf; $timelineDark: #77a1aa; @@ -66,8 +66,6 @@ $timelineDark: #77a1aa; } } - - .timeline-play-bar { position: relative; padding: 0px; @@ -104,4 +102,4 @@ $timelineDark: #77a1aa; border-radius: 20px; margin-top: -4px; cursor: pointer; -} \ No newline at end of file +} diff --git a/src/client/views/animationtimeline/Track.scss b/src/client/views/animationtimeline/Track.scss index f45e0556d..f56b2fe5f 100644 --- a/src/client/views/animationtimeline/Track.scss +++ b/src/client/views/animationtimeline/Track.scss @@ -1,7 +1,6 @@ -@import "./../global/globalCssVariables.scss"; +@import './../global/globalCssVariables.module.scss'; .track-container { - .track { .inner { top: 0px; @@ -12,4 +11,4 @@ z-index: 100; } } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 1632d44db..a556d0fa7 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionCarousel3DView-outer { height: 100%; position: relative; @@ -17,7 +17,9 @@ .collectionCarousel3DView-item, .collectionCarousel3DView-item-active { flex: 1; - transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); + transition: + opacity 0.3s linear, + transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); pointer-events: none; opacity: 0.5; z-index: 1; diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 330cb93e4..f03e38850 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -13,10 +13,7 @@ import { StyleProp } from '../StyleProvider'; import { DocFocusOptions, DocumentView } from '../nodes/DocumentView'; import './CollectionCarousel3DView.scss'; import { CollectionSubView } from './CollectionSubView'; -// import { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } from '../global/globalCssVariables.scss'; -const CAROUSEL3D_CENTER_SCALE = '1'; -const CAROUSEL3D_SIDE_SCALE = '1'; -const CAROUSEL3D_TOP = '0'; +const { default: { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore @observer export class CollectionCarousel3DView extends CollectionSubView() { @computed get scrollSpeed() { diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 11543bbe5..7fad3e463 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .lm_root { position: relative; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 6eeccc94e..5d46649b2 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .collectionMenu-container { display: flex; @@ -19,4 +19,4 @@ display: flex; flex-direction: row; } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index be1800d81..91a82d40f 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionNoteTakingView-DocumentButtons { display: none; diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss index a19d8e696..0ced3f9e3 100644 --- a/src/client/views/collections/CollectionStackedTimeline.scss +++ b/src/client/views/collections/CollectionStackedTimeline.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .collectionStackedTimeline-timelineContainer { height: 100%; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 165ccbdb1..6225cc52a 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionMasonryView { display: inline; diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 21efeba44..bbbef78b4 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionTreeView-container { transform-origin: top left; diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss index 32b0c138d..de53a2c62 100644 --- a/src/client/views/collections/CollectionView.scss +++ b/src/client/views/collections/CollectionView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .collectionView { border-width: 0; diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index d447991a1..dd4c0b881 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .tabDocView-content { height: 100%; diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index cbcc7c710..0a1946f09 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .treeView-label { max-height: 1.5em; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 27ff7166d..20e7fa071 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -35,8 +35,7 @@ import { CollectionView } from './CollectionView'; import { TreeSort } from './TreeSort'; import './TreeView.scss'; import * as React from 'react'; -// import { TREE_BULLET_WIDTH } from '../global/globalCssVariables.scss'; -const TREE_BULLET_WIDTH = '10px'; +const { default: { TREE_BULLET_WIDTH } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore export interface TreeViewProps { treeView: CollectionTreeView; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss index 5fa01b102..7951aff65 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.scss @@ -1,14 +1,12 @@ -@import "global/globalCssVariables"; +@import 'global/globalCssVariables.module.scss'; .collectionFreeFormRemoteCursors-cont { - - position:absolute; + position: absolute; z-index: $remoteCursors-zindex; transform-origin: 'center center'; } .collectionFreeFormRemoteCursors-canvas { - - position:absolute; + position: absolute; width: 20px; height: 20px; opacity: 0.5; @@ -21,4 +19,4 @@ // fontStyle: "italic", margin-left: -12; margin-top: 4; -} \ No newline at end of file +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 1b596ab65..418c518ad 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .collectionfreeformview-none { position: inherit; diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss index 3c2f5ccd7..b8ceec139 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; @import '../../_nodeModuleOverrides'; .collectionLinearView { diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss index 76bd392a5..02131ae22 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.scss'; +@import '../../global/globalCssVariables.module.scss'; .collectionSchemaView { cursor: default; diff --git a/src/client/views/global/globalCssVariables.module.scss b/src/client/views/global/globalCssVariables.module.scss new file mode 100644 index 000000000..44e8efe23 --- /dev/null +++ b/src/client/views/global/globalCssVariables.module.scss @@ -0,0 +1,96 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +// colors +$white: #ffffff; +$off-white: #fdfdfd; +$light-gray: #dfdfdf; +$medium-gray: #9f9f9f; +$medium-gray-dim: #9f9f9f30; +$dark-gray: #323232; +$black: #000000; + +$close-red: red; +$minimize-yellow: yellow; +$open-green: green; + +$light-blue: #bdddf5; +$light-blue-transparent: #bdddf590; +$medium-blue: #4476f7; +$medium-blue-alt: #0047ff54; +$pink: #e0217d; +$yellow: #f5d747; + +$close-red: #e48282; + +$drop-shadow: '#32323215'; + +$INK_MASK_SIZE: 50000; +$INK_MASK_SIZE_HALF: -25000px; + +//padding +$minimum-padding: 4px; +$medium-padding: 16px; +$large-padding: 32px; + +//icon sizes +$icon-size: 28px; + +// fonts +$sans-serif: 'Roboto', sans-serif; +$large-header: 16px; +$body-text: 13px; +$small-text: 10px; +// $sans-serif: "Roboto Slab", sans-serif; + +// misc values +$border-radius: 0.3em; +$search-thumnail-size: 130; +$topbar-height: 37px; +$antimodemenu-height: 36px; + +// dragged items +$contextMenu-zindex: 100002; // context menu shows up over everything +$radialMenu-zindex: 100000; // context menu shows up over everything + +// borders +$standard-border: solid 1px #9f9f9f; + +// border radius +$standard-border-radius: 3px; + +// shadow +$standard-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); + +$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc +$docDecorations-zindex: 998; // then doc decorations appear over everything else +$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? +$SCHEMA_DIVIDER_WIDTH: 4; +$MINIMIZED_ICON_SIZE: 24; +$MAX_ROW_HEIGHT: 44px; +$DFLT_IMAGE_NATIVE_DIM: 900px; +$LEFT_MENU_WIDTH: 60px; +$TREE_BULLET_WIDTH: 20px; + +$CAROUSEL3D_CENTER_SCALE: 1.3; +$CAROUSEL3D_SIDE_SCALE: 0.6; +$CAROUSEL3D_TOP: 15; + +$DATA_VIZ_TABLE_ROW_HEIGHT: 30; + +:export { + contextMenuZindex: $contextMenu-zindex; + SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; + MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; + MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; + SEARCH_THUMBNAIL_SIZE: $search-thumnail-size; + ANTIMODEMENU_HEIGHT: $antimodemenu-height; + TOPBAR_HEIGHT: $topbar-height; + DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; + LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH; + TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH; + INK_MASK_SIZE: $INK_MASK_SIZE; + MEDIUM_GRAY: $medium-gray; + CAROUSEL3D_CENTER_SCALE: $CAROUSEL3D_CENTER_SCALE; + CAROUSEL3D_SIDE_SCALE: $CAROUSEL3D_SIDE_SCALE; + CAROUSEL3D_TOP: $CAROUSEL3D_TOP; + DATA_VIZ_TABLE_ROW_HEIGHT: $DATA_VIZ_TABLE_ROW_HEIGHT; +} diff --git a/src/client/views/global/globalCssVariables.module.scss.d.ts b/src/client/views/global/globalCssVariables.module.scss.d.ts new file mode 100644 index 000000000..bcbb1f068 --- /dev/null +++ b/src/client/views/global/globalCssVariables.module.scss.d.ts @@ -0,0 +1,21 @@ +interface IGlobalScss { + contextMenuZindex: string; // context menu shows up over everything + SCHEMA_DIVIDER_WIDTH: string; + MINIMIZED_ICON_SIZE: string; + MAX_ROW_HEIGHT: string; + SEARCH_THUMBNAIL_SIZE: string; + ANTIMODEMENU_HEIGHT: string; + TOPBAR_HEIGHT: string; + DFLT_IMAGE_NATIVE_DIM: string; + LEFT_MENU_WIDTH: string; + TREE_BULLET_WIDTH: string; + INK_MASK_SIZE: number; + MEDIUM_GRAY: string; + CAROUSEL3D_CENTER_SCALE: string; + CAROUSEL3D_SIDE_SCALE: string; + CAROUSEL3D_TOP: string; + DATA_VIZ_TABLE_ROW_HEIGHT: string; +} +declare const globalCssVariables: IGlobalScss; + +export = globalCssVariables; diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss deleted file mode 100644 index 44e8efe23..000000000 --- a/src/client/views/global/globalCssVariables.scss +++ /dev/null @@ -1,96 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); -// colors -$white: #ffffff; -$off-white: #fdfdfd; -$light-gray: #dfdfdf; -$medium-gray: #9f9f9f; -$medium-gray-dim: #9f9f9f30; -$dark-gray: #323232; -$black: #000000; - -$close-red: red; -$minimize-yellow: yellow; -$open-green: green; - -$light-blue: #bdddf5; -$light-blue-transparent: #bdddf590; -$medium-blue: #4476f7; -$medium-blue-alt: #0047ff54; -$pink: #e0217d; -$yellow: #f5d747; - -$close-red: #e48282; - -$drop-shadow: '#32323215'; - -$INK_MASK_SIZE: 50000; -$INK_MASK_SIZE_HALF: -25000px; - -//padding -$minimum-padding: 4px; -$medium-padding: 16px; -$large-padding: 32px; - -//icon sizes -$icon-size: 28px; - -// fonts -$sans-serif: 'Roboto', sans-serif; -$large-header: 16px; -$body-text: 13px; -$small-text: 10px; -// $sans-serif: "Roboto Slab", sans-serif; - -// misc values -$border-radius: 0.3em; -$search-thumnail-size: 130; -$topbar-height: 37px; -$antimodemenu-height: 36px; - -// dragged items -$contextMenu-zindex: 100002; // context menu shows up over everything -$radialMenu-zindex: 100000; // context menu shows up over everything - -// borders -$standard-border: solid 1px #9f9f9f; - -// border radius -$standard-border-radius: 3px; - -// shadow -$standard-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); - -$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc -$docDecorations-zindex: 998; // then doc decorations appear over everything else -$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? -$SCHEMA_DIVIDER_WIDTH: 4; -$MINIMIZED_ICON_SIZE: 24; -$MAX_ROW_HEIGHT: 44px; -$DFLT_IMAGE_NATIVE_DIM: 900px; -$LEFT_MENU_WIDTH: 60px; -$TREE_BULLET_WIDTH: 20px; - -$CAROUSEL3D_CENTER_SCALE: 1.3; -$CAROUSEL3D_SIDE_SCALE: 0.6; -$CAROUSEL3D_TOP: 15; - -$DATA_VIZ_TABLE_ROW_HEIGHT: 30; - -:export { - contextMenuZindex: $contextMenu-zindex; - SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; - MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; - MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; - SEARCH_THUMBNAIL_SIZE: $search-thumnail-size; - ANTIMODEMENU_HEIGHT: $antimodemenu-height; - TOPBAR_HEIGHT: $topbar-height; - DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; - LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH; - TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH; - INK_MASK_SIZE: $INK_MASK_SIZE; - MEDIUM_GRAY: $medium-gray; - CAROUSEL3D_CENTER_SCALE: $CAROUSEL3D_CENTER_SCALE; - CAROUSEL3D_SIDE_SCALE: $CAROUSEL3D_SIDE_SCALE; - CAROUSEL3D_TOP: $CAROUSEL3D_TOP; - DATA_VIZ_TABLE_ROW_HEIGHT: $DATA_VIZ_TABLE_ROW_HEIGHT; -} diff --git a/src/client/views/global/globalCssVariables.scss.d.ts b/src/client/views/global/globalCssVariables.scss.d.ts deleted file mode 100644 index bcbb1f068..000000000 --- a/src/client/views/global/globalCssVariables.scss.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -interface IGlobalScss { - contextMenuZindex: string; // context menu shows up over everything - SCHEMA_DIVIDER_WIDTH: string; - MINIMIZED_ICON_SIZE: string; - MAX_ROW_HEIGHT: string; - SEARCH_THUMBNAIL_SIZE: string; - ANTIMODEMENU_HEIGHT: string; - TOPBAR_HEIGHT: string; - DFLT_IMAGE_NATIVE_DIM: string; - LEFT_MENU_WIDTH: string; - TREE_BULLET_WIDTH: string; - INK_MASK_SIZE: number; - MEDIUM_GRAY: string; - CAROUSEL3D_CENTER_SCALE: string; - CAROUSEL3D_SIDE_SCALE: string; - CAROUSEL3D_TOP: string; - DATA_VIZ_TABLE_ROW_HEIGHT: string; -} -declare const globalCssVariables: IGlobalScss; - -export = globalCssVariables; diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 0b9f32eee..636b6415c 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .linkMenu { width: auto; @@ -11,7 +11,9 @@ display: inline-block; position: relative; border: 1px solid #e4e4e4; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.19), + 0 6px 6px rgba(0, 0, 0, 0.23); max-height: 230px; overflow-y: scroll; z-index: 10; diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index e83f631a1..44c74236f 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .linkMenu-item { // border-top: 0.5px solid $medium-gray; diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index d40537776..4337401e3 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .audiobox-container { width: 100%; @@ -116,18 +116,18 @@ width: 10px; } - input[type="range"] { + input[type='range'] { width: 50px; -webkit-appearance: none; background: none; margin: 5px; } - input[type="range"]:focus { + input[type='range']:focus { outline: none; } - input[type="range"]::-webkit-slider-runnable-track { + input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; @@ -136,7 +136,7 @@ border-radius: 3px; } - input[type="range"]::-webkit-slider-thumb { + input[type='range']::-webkit-slider-thumb { box-shadow: 0; border: 0; height: 10px; diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss index c788a64c2..c0c0f10a2 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'; +@import '../../../global/globalCssVariables.module.scss'; .chart-container { display: flex; flex-direction: column; diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx index 33be87f46..3e7d3af8c 100644 --- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx +++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx @@ -11,9 +11,7 @@ import { DragManager } from '../../../../util/DragManager'; import { DocumentView } from '../../DocumentView'; import { DataVizView } from '../DataVizBox'; import './Chart.scss'; -//import { DATA_VIZ_TABLE_ROW_HEIGHT } from '../../../global/globalCssVariables.scss'; -const DATA_VIZ_TABLE_ROW_HEIGHT = '30'; - +const { default: { DATA_VIZ_TABLE_ROW_HEIGHT } } = require('../../../global/globalCssVariables.module.scss'); // prettier-ignore interface TableBoxProps { Document: Doc; layoutDoc: Doc; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 6da0b73ba..b32b27e65 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .documentLinksButton-wrapper { transform-origin: top left; diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 406a1b8fb..c4dab16fb 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .documentView-effectsWrapper { border-radius: inherit; diff --git a/src/client/views/nodes/EquationBox.scss b/src/client/views/nodes/EquationBox.scss index f5871db22..5009ec7a7 100644 --- a/src/client/views/nodes/EquationBox.scss +++ b/src/client/views/nodes/EquationBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .equationBox-cont { transform-origin: center; diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.scss b/src/client/views/nodes/FontIconBox/FontIconBox.scss index 9d9fa26b0..db2ffa756 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox/FontIconBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .menuButton { height: 100%; diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss index ffcba4981..a44f614b2 100644 --- a/src/client/views/nodes/KeyValueBox.scss +++ b/src/client/views/nodes/KeyValueBox.scss @@ -1,7 +1,7 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .keyValueBox-cont { overflow-y: scroll; - width:100%; + width: 100%; height: 100%; background-color: $white; border: 1px solid $medium-gray; @@ -15,45 +15,45 @@ } $header-height: 30px; .keyValueBox-tbody { - width:100%; - height:100%; + width: 100%; + height: 100%; position: absolute; overflow-y: scroll; } .keyValueBox-key { display: inline-block; - height:100%; - width:50%; + height: 100%; + width: 50%; text-align: center; } .keyValueBox-fields { display: inline-block; - height:100%; - width:50%; + height: 100%; + width: 50%; text-align: center; } .keyValueBox-table { position: absolute; - width:100%; - height:100%; + width: 100%; + height: 100%; border-collapse: collapse; } .keyValueBox-td-key { - display:inline-block; - height:30px; + display: inline-block; + height: 30px; } .keyValueBox-td-value { - display:inline-block; - height:30px; + display: inline-block; + height: 30px; } .keyValueBox-valueRow { - width:100%; - height:30px; + width: 100%; + height: 30px; display: inline-block; } .keyValueBox-header { - width:100%; + width: 100%; position: relative; display: inline-block; background: $medium-gray; @@ -74,8 +74,8 @@ $header-height: 30px; .keyValueBox-evenRow { position: relative; display: flex; - width:100%; - height:$header-height; + width: 100%; + height: $header-height; background: $white; .formattedTextBox-cont { background: $white; @@ -86,10 +86,10 @@ $header-height: 30px; position: relative; } } -.keyValueBox-dividerDraggerThumb{ +.keyValueBox-dividerDraggerThumb { position: relative; width: 4px; - float: left; + float: left; height: 30px; width: 5px; z-index: 20; @@ -99,10 +99,10 @@ $header-height: 30px; background: black; pointer-events: all; } -.keyValueBox-dividerDragger{ - position: relative; +.keyValueBox-dividerDragger { + position: relative; width: 100%; - float: left; + float: left; height: 37px; z-index: 20; right: 0; @@ -114,10 +114,10 @@ $header-height: 30px; .keyValueBox-oddRow { position: relative; display: flex; - width:100%; - height:30px; + width: 100%; + height: 30px; background: $light-gray; .formattedTextBox-cont { background: $light-gray; } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss index c29af7817..46ea9c18e 100644 --- a/src/client/views/nodes/KeyValuePair.scss +++ b/src/client/views/nodes/KeyValuePair.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; .keyValuePair-td-key { display: inline-block; diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index 33c9b2e08..09ba0bc95 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -11,10 +11,11 @@ import { ViewBoxBaseComponent } from '../DocComponent'; import { StyleProp } from '../StyleProvider'; import { FieldView, FieldViewProps } from './FieldView'; import './LinkAnchorBox.scss'; -import { LinkDocPreview, LinkInfo } from './LinkDocPreview'; +import { LinkInfo } from './LinkDocPreview'; import * as React from 'react'; -// import globalCssVariables = require('../global/globalCssVariables.scss'); -const MEDIUM_GRAY = 'lightGray'; +const { + default: { MEDIUM_GRAY }, +} = require('../global/globalCssVariables.module.scss'); @observer export class LinkAnchorBox extends ViewBoxBaseComponent() { public static LayoutString(fieldKey: string) { diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss index a8db5d360..104301656 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.scss +++ b/src/client/views/nodes/LinkDescriptionPopup.scss @@ -1,7 +1,6 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .linkDescriptionPopup { - display: flex; flex-direction: row; justify-content: center; @@ -26,7 +25,6 @@ } .linkDescriptionPopup-btn { - float: right; justify-content: center; vertical-align: middle; @@ -53,6 +51,4 @@ color: black; } } - - -} \ No newline at end of file +} diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index 242677231..9b00c30cf 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables.scss'; +@import '../../global/globalCssVariables.module.scss'; .mapBox { width: 100%; height: 100%; diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 8a68f9647..0f5e25a0c 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables.scss"; +@import '../global/globalCssVariables.module.scss'; .pdfBox, .pdfBox-interactive { @@ -38,7 +38,7 @@ box-shadow: $standard-box-shadow; transition: 0.2s; - &:hover{ + &:hover { filter: brightness(0.85); } } @@ -51,7 +51,8 @@ left: 5px; top: 5px; - .pdfBox-fwdBtn, .pdfBox-backBtn { + .pdfBox-fwdBtn, + .pdfBox-backBtn { background: #121721; height: 25px; width: 25px; @@ -119,7 +120,6 @@ background: none; } - .pdfBox-settingsCont { position: absolute; right: 0; @@ -194,7 +194,7 @@ justify-content: center; align-items: center; overflow: hidden; - transition: left .5s; + transition: left 0.5s; pointer-events: all; .pdfBox-searchBar { @@ -204,7 +204,6 @@ } } - .pdfBox-title-outer { width: 100%; height: 100%; @@ -269,7 +268,6 @@ // CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { height: 60px; @@ -288,15 +286,11 @@ } } - - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout { font-size: 30px; } - - .pdfBox .pdfBox-ui .pdfBox-overlayCont, .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont { height: 60px; diff --git a/src/client/views/nodes/RadialMenu.scss b/src/client/views/nodes/RadialMenu.scss index 312b51013..9cd1ee23a 100644 --- a/src/client/views/nodes/RadialMenu.scss +++ b/src/client/views/nodes/RadialMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .radialMenu-cont { position: absolute; @@ -26,7 +26,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; + transition: all 0.1s; border-style: none; white-space: nowrap; font-size: 13px; @@ -34,8 +34,7 @@ text-transform: uppercase; } -s -.radialMenu-itemSelected { +s .radialMenu-itemSelected { border-style: none; } @@ -50,8 +49,8 @@ s -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; - border-width: .11px; + transition: all 0.1s; + border-width: 0.11px; border-style: none; border-color: $medium-gray; // rgb(187, 186, 186); // padding: 10px 0px 10px 0px; @@ -62,9 +61,8 @@ s padding-left: 5px; } - .radialMenu-description { margin-left: 5px; text-align: left; display: inline; //need this? -} \ No newline at end of file +} diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index f90c19050..ae923ad60 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .mini-viewer { cursor: grab; @@ -172,7 +172,11 @@ top: 90%; transform: translate(-50%, -50%); width: 80%; - transition: top 0s, width 0s, opacity 0.3s, visibility 0.3s; + transition: + top 0s, + width 0s, + opacity 0.3s, + visibility 0.3s; } } diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 511c91da0..a1686adaf 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables.scss'; +@import '../global/globalCssVariables.module.scss'; .webBox { height: 100%; diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss index ad315acc8..3426ba1a7 100644 --- a/src/client/views/nodes/formattedText/DashFieldView.scss +++ b/src/client/views/nodes/formattedText/DashFieldView.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .dashFieldView { position: relative; diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 717efd5a9..03ff0436b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .ProseMirror { width: 100%; @@ -592,7 +592,7 @@ footnote::before { } @media only screen and (max-width: 1000px) { - @import '../../global/globalCssVariables'; + @import '../../global/globalCssVariables.module.scss'; .ProseMirror { width: 100%; diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss index 8afa0f6b5..d6ed5ebee 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.scss +++ b/src/client/views/nodes/formattedText/RichTextMenu.scss @@ -1,4 +1,4 @@ -@import "../../global/globalCssVariables"; +@import '../../global/globalCssVariables.module.scss'; .button-dropdown-wrapper { position: relative; @@ -55,7 +55,6 @@ input { color: black; } - } .richTextMenu { @@ -68,12 +67,12 @@ font-size: 12px; height: 100%; margin-right: 3px; - + &:focus, &:hover { background-color: black; } - + &::-ms-expand { color: white; } @@ -126,7 +125,7 @@ display: flex; justify-content: space-between; - >div { + > div { display: flex; } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/formattedText/TooltipTextMenu.scss b/src/client/views/nodes/formattedText/TooltipTextMenu.scss index 8c4d77da9..87320943d 100644 --- a/src/client/views/nodes/formattedText/TooltipTextMenu.scss +++ b/src/client/views/nodes/formattedText/TooltipTextMenu.scss @@ -1,9 +1,9 @@ -@import "../views/global/globalCssVariables"; +@import '../views/global/globalCssVariables.module.scss'; .ProseMirror-menu-dropdown-wrap { display: inline-block; position: relative; } - + .ProseMirror-menu-dropdown { vertical-align: 1px; cursor: pointer; @@ -17,11 +17,11 @@ margin-right: 4px; &:after { - content: ""; + content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; - opacity: .6; + opacity: 0.6; position: absolute; right: 4px; top: calc(50% - 2px); @@ -33,7 +33,7 @@ margin-right: -4px; } -.ProseMirror-menu-dropdown-menu, +.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu { font-size: 12px; background: white; @@ -55,19 +55,18 @@ } } - .ProseMirror-menu-submenu-label:after { - content: ""; + content: ''; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid currentColor; - opacity: .6; + opacity: 0.6; position: absolute; right: 4px; top: calc(50% - 4px); } - - .ProseMirror-icon { + +.ProseMirror-icon { display: inline-block; // line-height: .8; // vertical-align: -2px; /* Compensate for padding */ @@ -79,14 +78,14 @@ } svg { - fill:white; + fill: white; height: 1em; } span { vertical-align: text-top; - } - } + } +} .wrapper { position: absolute; @@ -99,10 +98,10 @@ background: #323232; border-radius: 6px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - } -.tooltipMenu, .basic-tools { +.tooltipMenu, +.basic-tools { z-index: 3000; pointer-events: all; padding: 3px; @@ -111,17 +110,17 @@ align-items: center; .ProseMirror-example-setup-style hr { - padding: 2px 10px; - border: none; - margin: 1em 0; + padding: 2px 10px; + border: none; + margin: 1em 0; } - + .ProseMirror-example-setup-style hr:after { - content: ""; - display: block; - height: 1px; - background-color: silver; - line-height: 2px; + content: ''; + display: block; + height: 1px; + background-color: silver; + line-height: 2px; } } @@ -142,7 +141,7 @@ } } - &> * { + & > * { margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%); @@ -168,7 +167,7 @@ background-color: black; } - &> * { + & > * { margin-top: 50%; margin-left: 50%; transform: translate(-50%, -50%); @@ -208,18 +207,17 @@ margin-top: 13px; } - .font-size-indicator { - font-size: 12px; - padding-right: 0px; - } - .summarize{ - color: white; - height: 20px; - text-align: center; - } - - -.brush{ +.font-size-indicator { + font-size: 12px; + padding-right: 0px; +} +.summarize { + color: white; + height: 20px; + text-align: center; +} + +.brush { display: inline-block; width: 1em; height: 1em; @@ -229,7 +227,7 @@ margin-right: 15px; } -.brush-active{ +.brush-active { display: inline-block; width: 1em; height: 1em; @@ -269,7 +267,6 @@ } .buttonSettings-dropdown { - &.ProseMirror-menu-dropdown { width: 10px; height: 25px; @@ -301,7 +298,7 @@ padding: 3px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - .ProseMirror-menu-dropdown-item{ + .ProseMirror-menu-dropdown-item { cursor: default; &:last-child { @@ -312,7 +309,8 @@ background-color: #323232; } - .button-setting, .button-setting-disabled { + .button-setting, + .button-setting-disabled { padding: 2px; border-radius: 2px; } @@ -328,25 +326,23 @@ } input { - color: black; - border: none; - border-radius: 1px; - padding: 3px; + color: black; + border: none; + border-radius: 1px; + padding: 3px; } button { - padding: 6px; - background-color: #323232; - border: 1px solid black; - border-radius: 1px; + padding: 6px; + background-color: #323232; + border: 1px solid black; + border-radius: 1px; &:hover { - background-color: black; + background-color: black; } } } - - } } diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 0b51813a5..3b34a1f90 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -1,4 +1,4 @@ -@import '../../global/globalCssVariables'; +@import '../../global/globalCssVariables.module.scss'; .presBox-cont { cursor: auto; diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index 2a0085ade..4892facbc 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .checkboxfilter { display: flex; @@ -12,7 +12,7 @@ align-items: center; margin-top: 0px; - .check-container:hover~.check-box { + .check-container:hover ~ .check-box { background-color: $medium-blue; } @@ -55,5 +55,4 @@ text-transform: capitalize; margin-left: 15px; } - -} \ No newline at end of file +} diff --git a/src/client/views/search/CollectionFilters.scss b/src/client/views/search/CollectionFilters.scss index 845b16f67..6105df570 100644 --- a/src/client/views/search/CollectionFilters.scss +++ b/src/client/views/search/CollectionFilters.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .collection-filters { display: flex; @@ -17,4 +17,4 @@ float: right; opacity: 0; } -} \ No newline at end of file +} diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index 6aaf7918d..05aa099f7 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .icon-bar { display: flex; @@ -7,4 +7,4 @@ height: auto; width: 100%; flex-direction: row-reverse; -} \ No newline at end of file +} diff --git a/src/client/views/search/IconButton.scss b/src/client/views/search/IconButton.scss index 3cb08d756..d2a2ea369 100644 --- a/src/client/views/search/IconButton.scss +++ b/src/client/views/search/IconButton.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .type-outer { display: flex; @@ -24,7 +24,7 @@ .fontawesome-icon { height: 15px; - width: 15px + width: 15px; } } @@ -46,8 +46,8 @@ background-color: $medium-blue; opacity: 1; - +.filter-description { + + .filter-description { opacity: 1; } } -} \ No newline at end of file +} diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx index e12e4511c..20084b64d 100644 --- a/src/client/views/search/IconButton.tsx +++ b/src/client/views/search/IconButton.tsx @@ -4,7 +4,7 @@ import { action, IReactionDisposer, observable, reaction, runInAction } from 'mo import { observer } from 'mobx-react'; import * as React from 'react'; import { DocumentType } from '../../documents/DocumentTypes'; -import '../global/globalCssVariables.scss'; +import '../global/globalCssVariables.module.scss'; import { IconBar } from './IconBar'; import './IconButton.scss'; import './SearchBox.scss'; diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss index 13d31bbe9..917635c0b 100644 --- a/src/client/views/search/NaviconButton.scss +++ b/src/client/views/search/NaviconButton.scss @@ -1,4 +1,4 @@ -@import '../global/globalCssVariables'; +@import '../global/globalCssVariables.module.scss'; $height-icon: 15px; $width-line: 30px; diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index a439aea3e..a3c4bd2ed 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -1,5 +1,5 @@ -@import "../global/globalCssVariables"; -@import "./NaviconButton.scss"; +@import '../global/globalCssVariables.module.scss'; +@import './NaviconButton.scss'; .searchBox-container { width: 100%; @@ -47,7 +47,6 @@ } .section-header { - .section-title { font-size: $body-text; font-weight: 600; @@ -57,7 +56,7 @@ display: flex; color: $light-gray; } - + padding: 5px 10px; display: flex; flex-direction: column; @@ -71,7 +70,7 @@ flex-direction: column; width: 100%; height: fit-content; - justify-content: "center"; + justify-content: 'center'; .searchBox-recommendations-view { margin-top: 10px; @@ -81,8 +80,6 @@ flex-direction: column; gap: 10px; padding: 0px 10px; - - } } @@ -91,8 +88,8 @@ flex-direction: column; width: 100%; height: fit-content; - justify-content: "center"; - + justify-content: 'center'; + .searchBox-results-view { display: inline-block; width: 100%; @@ -147,4 +144,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/client/views/search/SelectorContextMenu.scss b/src/client/views/search/SelectorContextMenu.scss index a114f679c..097a6107d 100644 --- a/src/client/views/search/SelectorContextMenu.scss +++ b/src/client/views/search/SelectorContextMenu.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .parents { background: $light-blue; @@ -13,4 +13,4 @@ border-color: $medium-blue; border-bottom-style: solid; } -} \ No newline at end of file +} diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss index 3a164f133..9e27db2bc 100644 --- a/src/client/views/search/ToggleBar.scss +++ b/src/client/views/search/ToggleBar.scss @@ -1,4 +1,4 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .toggle-title { display: flex; @@ -38,4 +38,4 @@ border-radius: 10px; background-color: $white; } -} \ No newline at end of file +} diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index 2237d5ac1..20245104e 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -1,5 +1,4 @@ -@import '../global/globalCssVariables'; - +@import '../global/globalCssVariables.module.scss'; .topbar-container { flex-direction: column; diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss index 249aee9d6..5744ebbcd 100644 --- a/src/client/views/webcam/DashWebRTCVideo.scss +++ b/src/client/views/webcam/DashWebRTCVideo.scss @@ -1,11 +1,11 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables.module.scss'; .webcam-cont { background: whitesmoke; color: grey; border-radius: 15px; box-shadow: #9c9396 0.2vw 0.2vw 0.4vw; - border: solid #BBBBBBBB 5px; + border: solid #bbbbbbbb 5px; pointer-events: all; display: flex; flex-direction: column; @@ -44,7 +44,7 @@ #roomName { outline: none; border-radius: inherit; - border: 1px solid #BBBBBBBB; + border: 1px solid #bbbbbbbb; margin: 10px; padding: 10px; } @@ -79,5 +79,4 @@ margin: 5px; border: 1px solid black; } - -} \ No newline at end of file +} diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 6669a3d21..e4156ee8e 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,4 +1,4 @@ -@import "../client/views/global/globalCssVariables.scss"; +@import '../client/views/global/globalCssVariables.module.scss'; .imgupload_cont { display: flex; @@ -50,7 +50,7 @@ z-index: -1; } - .inputfile+label { + .inputfile + label { font-weight: 700; color: black; background-color: rgba(0, 0, 0, 0); @@ -71,7 +71,7 @@ border-radius: 10px; } - .inputfile.active+label { + .inputfile.active + label { font-style: italic; color: black; background-color: lightgreen; @@ -81,7 +81,6 @@ .status { font-size: 2em; } - } .image-upload { @@ -134,5 +133,7 @@ border-radius: 20px; opacity: 0.2; background-color: black; - transition: all 2s, opacity 1.5s; -} \ No newline at end of file + transition: + all 2s, + opacity 1.5s; +} diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index ee212e4af..d2598c2db 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -14,8 +14,7 @@ import { Utils } from '../Utils'; import './ImageUpload.scss'; import { MobileInterface } from './MobileInterface'; import * as React from 'react'; -//import { DFLT_IMAGE_NATIVE_DIM } from '../client/views/global/globalCssVariables.scss'; -const DFLT_IMAGE_NATIVE_DIM = '50px'; +const { default: { DFLT_IMAGE_NATIVE_DIM } } = require('../client/views/global/globalCssVariables.module.scss'); // prettier-ignore export interface ImageUploadProps { Document: Doc; // Target document for upload (upload location) } diff --git a/webpack.config.js b/webpack.config.js index c1464ac2a..a153616b8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,8 +12,8 @@ const plugins = [ // new ForkTsCheckerWebpackPlugin({ // typescript: { // // useTypescriptIncrementalApi: true, - // // tslint: true, - // memoryLimit: 4096, + // eslint: true, + // memoryLimit: 8192, // }, // // tslint: true, // // memoryLimit: 4096, @@ -108,16 +108,22 @@ module.exports = { }, { test: /\.scss|css$/, + exclude: /\.module\.scss$/i, use: [ - { - loader: 'style-loader', - }, - { - loader: 'css-loader', - }, - { - loader: 'sass-loader', - }, + { loader: 'style-loader' }, // eslint-disable-next-line prettier/prettier + { loader: 'css-loader' }, + { loader: 'sass-loader' }, + ], + }, + + // -------- + // SCSS MODULES - all have .module. in their name and can export to .tsx + { + test: /\.module\.scss$/i, + use: [ + { loader: 'style-loader' }, // eslint-disable-next-line prettier/prettier + { loader: 'css-loader', options: { modules: true } }, + { loader: 'sass-loader' }, ], }, { -- cgit v1.2.3-70-g09d2 From ae27dd1689ae1716591aab094e6d41f3a0160fef Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 4 Jan 2024 13:11:22 -0500 Subject: fixed ffmpeg for uploading videos. fixed getView() to take focus options so that if a sidebar or timeline has to be opened, the didMove flag can be set properly. added video snapshot frame to top menu. fixed using '^' to stop and start a selection region on timelines. --- src/client/documents/Documents.ts | 2 +- src/client/util/CurrentUserUtils.ts | 12 +- src/client/util/DocumentManager.ts | 2 +- src/client/util/PingManager.ts | 20 +-- src/client/views/GlobalKeyHandler.ts | 8 +- src/client/views/UndoStack.tsx | 10 +- .../views/collections/CollectionDockingView.tsx | 2 +- .../collections/CollectionStackedTimeline.tsx | 40 ++++-- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- .../collectionLinear/CollectionLinearView.tsx | 2 +- src/client/views/global/globalScripts.ts | 11 +- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 9 +- src/client/views/nodes/DocumentView.tsx | 9 +- src/client/views/nodes/MapBox/MapBox.tsx | 9 +- .../views/nodes/MapboxMapBox/MapboxContainer.tsx | 9 +- src/client/views/nodes/PDFBox.tsx | 7 +- src/client/views/nodes/VideoBox.scss | 6 +- src/client/views/nodes/VideoBox.tsx | 158 +++------------------ src/client/views/nodes/WebBox.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 7 +- src/server/DashUploadUtils.ts | 15 +- 21 files changed, 129 insertions(+), 215 deletions(-) (limited to 'src/client/views/nodes/VideoBox.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 79285deb5..92a9ddfe8 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -209,7 +209,7 @@ export class DocumentOptions { author?: string; // STRt = new StrInfo('creator of document'); // bcz: don't change this. Otherwise, the userDoc's field Infos will have a FieldInfo assigned to its author field which will render it unreadable author_date?: DATEt = new DateInfo('date the document was created', true); annotationOn?: DOCt = new DocInfo('document annotated by this document', false); - embedContainer?: DOCt = new DocInfo('document that displays (contains) this discument', false); + _embedContainer?: DOCt = new DocInfo('document that displays (contains) this discument', false); rootDocument?: DOCt = new DocInfo('document that supplies the information needed for a rendering template (eg, pres slide for PresElement)'); color?: STRt = new StrInfo('foreground color data doc', false); hidden?: BOOLt = new BoolInfo('whether the document is not rendered by its collection', false); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 3f28f44fc..4391e87d6 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -309,7 +309,7 @@ export class CurrentUserUtils { { toolTip: "Tap or drag to create a bullet slide", title: "PPT Slide", icon: "file", dragFactory: doc.emptySlide as Doc, clickFactory: DocCast(doc.emptySlide), 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 any, 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}, + // { 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)', @@ -695,11 +695,16 @@ export class CurrentUserUtils { static webTools() { return [ - { title: "Back", toolTip: "Go back", btnType: ButtonType.ClickButton, icon: "arrow-left", scripts: { onClick: '{ return webBack(_readOnly_); }' }}, - { title: "Forward", toolTip: "Go forward", btnType: ButtonType.ClickButton, icon: "arrow-right", scripts: { onClick: '{ return webForward(_readOnly_); }'}}, + { title: "Back", toolTip: "Go back", btnType: ButtonType.ClickButton, icon: "arrow-left", scripts: { onClick: '{ return webBack(); }' }}, + { title: "Forward", toolTip: "Go forward", btnType: ButtonType.ClickButton, icon: "arrow-right", scripts: { onClick: '{ return webForward(); }'}}, { title: "URL", toolTip: "URL", width: 250, btnType: ButtonType.EditableText, icon: "lock", ignoreClick: true, scripts: { script: '{ return webSetURL(value, _readOnly_); }'} }, ]; } + static videoTools() { + return [ + { title: "Snapshot",toolTip: "Take snapshot of current frame", btnType: ButtonType.ClickButton, icon: "camera", scripts: { onClick: '{ return videoSnapshot(); }' }}, + ]; + } static contextMenuTools():Button[] { return [ { btnList: new List([CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Tree, @@ -721,6 +726,7 @@ export class CurrentUserUtils { { title: "View", icon: "View", toolTip: "View tools", subMenu: CurrentUserUtils.viewTools(), expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Stack", icon: "View", toolTip: "Stacking tools", subMenu: CurrentUserUtils.stackTools(), expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available { title: "Web", icon: "Web", toolTip: "Web functions", subMenu: CurrentUserUtils.webTools(), expertMode: false, toolType:DocumentType.WEB, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected + { title: "Video", icon: "Video", toolTip: "Video functions", subMenu: CurrentUserUtils.videoTools(), expertMode: false, toolType:DocumentType.VID, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected { title: "Schema", icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(),expertMode: false,toolType:CollectionViewType.Schema,funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Schema is selected ]; } diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 0fab42895..7fef5cc79 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -281,7 +281,7 @@ export class DocumentManager { docContextPath.shift(); const childViewIterator = async (docView: DocumentView) => { const innerDoc = docContextPath.shift(); - return { focused: false, viewSpec: innerDoc, childDocView: innerDoc && !innerDoc.layout_unrendered ? (await docView.ComponentView?.getView?.(innerDoc)) ?? this.getDocumentView(innerDoc) : undefined }; + return { focused: false, viewSpec: innerDoc, childDocView: innerDoc && !innerDoc.layout_unrendered ? (await docView.ComponentView?.getView?.(innerDoc, options)) ?? this.getDocumentView(innerDoc) : undefined }; }; if (rootContextView) { diff --git a/src/client/util/PingManager.ts b/src/client/util/PingManager.ts index 865f8bc02..7638e2ce0 100644 --- a/src/client/util/PingManager.ts +++ b/src/client/util/PingManager.ts @@ -4,11 +4,20 @@ import { CurrentUserUtils } from './CurrentUserUtils'; export class PingManager { // create static instance and getter for global use @observable static _instance: PingManager; + @observable IsBeating = true; static get Instance(): PingManager { return PingManager._instance; } - @observable IsBeating = true; + // not used now, but may need to clear interval + private _interval: NodeJS.Timeout | null = null; + INTERVAL_SECONDS = 1; + constructor() { + makeObservable(this); + PingManager._instance = this; + this._interval = setInterval(this.sendPing, this.INTERVAL_SECONDS * 1000); + } + private setIsBeating = action((status: boolean) => { this.IsBeating = status; setTimeout(this.showAlert, 100); @@ -28,13 +37,4 @@ export class PingManager { } } }; - - // not used now, but may need to clear interval - private _interval: NodeJS.Timeout | null = null; - INTERVAL_SECONDS = 1; - constructor() { - makeObservable(this); - PingManager._instance = this; - this._interval = setInterval(this.sendPing, this.INTERVAL_SECONDS * 1000); - } } diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 77b831e51..d134d9e7b 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -128,10 +128,12 @@ export class KeyManager { var doDeselect = true; if (SnappingManager.IsDragging) { DragManager.AbortDrag(); - } else if (CollectionDockingView.Instance?.HasFullScreen) { + } + if (CollectionDockingView.Instance?.HasFullScreen) { CollectionDockingView.Instance?.CloseFullScreen(); - } else if (CollectionStackedTimeline.SelectingRegion) { - CollectionStackedTimeline.SelectingRegion = undefined; + } + if (CollectionStackedTimeline.SelectingRegions.size) { + CollectionStackedTimeline.StopSelecting(); doDeselect = false; } else { doDeselect = !ContextMenu.Instance.closeMenu(); diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx index ea038250e..068143225 100644 --- a/src/client/views/UndoStack.tsx +++ b/src/client/views/UndoStack.tsx @@ -8,19 +8,13 @@ import { SettingsManager } from '../util/SettingsManager'; import { UndoManager } from '../util/UndoManager'; import './UndoStack.scss'; -interface UndoStackProps { - width?: number; - height?: number; - inline?: boolean; -} +interface UndoStackProps {} @observer export class UndoStack extends React.Component { - @observable static HideInline: boolean = false; - @observable static Expand: boolean = false; render() { const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.userVariantColor; const color = UndoManager.batchCounter.get() ? 'black' : SettingsManager.userColor; - return this.props.inline && UndoStack.HideInline ? null : ( + return (
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index c46f54c70..874cdffd9 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -615,7 +615,7 @@ ScriptingGlobals.add( // prettier-ignore switch (doc) { case '': return OverlayView.Instance.addWindow(, { x: 300, y: 100, width: 200, height: 200, title: 'Scripting REPL' }); - case "": return OverlayView.Instance.addWindow(, { x: 300, y: 100, width: 200, height: 200, title: 'Scripting REPL' }); + case "": return OverlayView.Instance.addWindow(, { x: 300, y: 100, width: 200, height: 200, title: 'Undo stack' }); } Doc.AddToMyOverlay(doc); } diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index d99b4f9de..22a67c501 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -56,8 +56,11 @@ export enum TrimScope { @observer export class CollectionStackedTimeline extends CollectionSubView() { - @observable static SelectingRegion: CollectionStackedTimeline | undefined = undefined; - @observable public static CurrentlyPlaying: DocumentView[] = []; + public static SelectingRegions: Set = new Set(); + public static StopSelecting() { + this.SelectingRegions.forEach(action(region => (region._selectingRegion = false))); + this.SelectingRegions.clear(); + } constructor(props: any) { super(props); makeObservable(this); @@ -69,6 +72,8 @@ export class CollectionStackedTimeline extends CollectionSubView (CollectionStackedTimeline.SelectingRegion = undefined)); + if (this._selectingRegion) { + runInAction(() => (this._selectingRegion = false)); + CollectionStackedTimeline.SelectingRegions.delete(this); } } @@ -154,6 +160,15 @@ export class CollectionStackedTimeline extends CollectionSubView this.childDocList?.some(item => item === doc); + + getView = async (doc: Doc, options: DocFocusOptions): Promise> => + new Promise>(res => { + if (doc.hidden) options.didMove = !(doc.hidden = false); + const findDoc = (finish: (dv: DocumentView) => void) => DocumentManager.Instance.AddViewRenderedCb(doc, dv => finish(dv)); + findDoc(dv => res(dv)); + }); + anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this._props.startTag])); anchorEnd = (anchor: Doc, val: any = null) => NumCast(anchor._timecodeToHide, NumCast(anchor[this._props.endTag], val) ?? null); @@ -191,14 +206,16 @@ export class CollectionStackedTimeline extends CollectionSubView ({ - level: this.getLevel(anchor, overlaps), - anchor, + const drawAnchors = this.childLayoutPairs.map(pair => ({ + level: this.getLevel(pair.layout, overlaps), + anchor: pair.layout, })); const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2; return this.clipDuration === 0 ? null : ( diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index a3cedb9a0..8268a47d8 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -321,9 +321,9 @@ export class CollectionFreeFormView extends CollectionSubView> => + getView = async (doc: Doc, options: DocFocusOptions): Promise> => new Promise>(res => { - if (doc.hidden && this._lightboxDoc !== doc) doc.hidden = false; + if (doc.hidden && this._lightboxDoc !== doc) options.didMove = !(doc.hidden = false); const findDoc = (finish: (dv: DocumentView) => void) => DocumentManager.Instance.AddViewRenderedCb(doc, dv => finish(dv)); findDoc(dv => res(dv)); }); diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx index f1fb68003..d105b04f7 100644 --- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx @@ -147,7 +147,7 @@ export class CollectionLinearView extends CollectionSubView() { switch (doc.layout) { case '': return this.getLinkUI(); case '': return this.getCurrentlyPlayingUI(); - case '': return ; + case '': return ; case '': return Doc.UserDoc().isBranchingMode ? : null; } diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts index 989dd1db0..e57ef4871 100644 --- a/src/client/views/global/globalScripts.ts +++ b/src/client/views/global/globalScripts.ts @@ -19,6 +19,7 @@ import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocum import { DocumentView } from '../nodes/DocumentView'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; import { WebBox } from '../nodes/WebBox'; +import { VideoBox } from '../nodes/VideoBox'; ScriptingGlobals.add(function IsNoneSelected() { return SelectionManager.Views.length <= 0; @@ -390,14 +391,16 @@ ScriptingGlobals.add(function webForward(checkResult?: boolean) { } selected?.forward(); }); -ScriptingGlobals.add(function webBack(checkResult?: boolean) { +ScriptingGlobals.add(function webBack() { const selected = SelectionManager.Views.lastElement()?.ComponentView as WebBox; - if (checkResult) { - return selected?.back(checkResult) ? undefined : 'lightGray'; - } selected?.back(); }); +ScriptingGlobals.add(function videoSnapshot() { + const selected = SelectionManager.Views.lastElement()?.ComponentView as VideoBox; + selected?.Snapshot(); +}); + /** Schema * toggleSchemaPreview **/ diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx index 76cc010f6..5a55ca764 100644 --- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx +++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx @@ -20,7 +20,7 @@ import { SidebarAnnos } from '../../SidebarAnnos'; import { CollectionFreeFormView } from '../../collections/collectionFreeForm'; import { AnchorMenu } from '../../pdf/AnchorMenu'; import { GPTPopup } from '../../pdf/GPTPopup/GPTPopup'; -import { DocumentView } from '../DocumentView'; +import { DocFocusOptions, DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; import { PinProps } from '../trails'; import './DataVizBox.scss'; @@ -228,8 +228,11 @@ export class DataVizBox extends ViewBoxAnnotatableComponent() { () => UndoManager.RunInBatch(this.toggleSidebar, 'toggle sidebar') ); }; - getView = async (doc: Doc) => { - if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(); + getView = async (doc: Doc, options: DocFocusOptions) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { + options.didMove = true; + this.toggleSidebar(); + } return new Promise>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); }; @computed get sidebarWidthPercent() { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 7f1e547e4..6cc61ec62 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -43,7 +43,6 @@ import { GestureOverlay } from '../GestureOverlay'; import { LightboxView } from '../LightboxView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { StyleProp } from '../StyleProvider'; -import { UndoStack } from '../UndoStack'; import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView'; import { DocumentContentsView, ObserverJsxParser } from './DocumentContentsView'; import { DocumentLinksButton } from './DocumentLinksButton'; @@ -119,7 +118,7 @@ export interface DocComponentView { restoreView?: (viewSpec: Doc) => boolean; scrollPreview?: (docView: DocumentView, doc: Doc, focusSpeed: number, options: DocFocusOptions) => Opt; // returns the duration of the focus brushView?: (view: { width: number; height: number; panX: number; panY: number }, transTime: number, holdTime: number) => void; // highlight a region of a view (used by freeforms) - getView?: (doc: Doc) => Promise>; // returns a nested DocumentView for the specified doc or undefined + getView?: (doc: Doc, options: DocFocusOptions) => Promise>; // returns a nested DocumentView for the specified doc or undefined addDocTab?: (doc: Doc, where: OpenWhere) => boolean; // determines how to add a document - used in following links to open the target ina local lightbox addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; // add a document (used only by collections) select?: (ctrlKey: boolean, shiftKey: boolean) => void; @@ -520,11 +519,7 @@ export class DocumentViewInternal extends DocComponent { if (DocumentView.LongPress) { - if (this.Document.undoIgnoreFields) { - runInAction(() => (UndoStack.HideInline = !UndoStack.HideInline)); - } else { - this._props.select(false); - } + this._props.select(false); } }, 1000); if (!GestureOverlay.DownDocView) GestureOverlay.DownDocView = this._props.DocumentView(); diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 41befbbfe..3575b21e4 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -27,7 +27,7 @@ import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocC import { SidebarAnnos } from '../../SidebarAnnos'; import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; import { Colors } from '../../global/globalEnums'; -import { DocumentView } from '../DocumentView'; +import { DocFocusOptions, DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; import { FormattedTextBox } from '../formattedText/FormattedTextBox'; import { PinProps, PresBox } from '../trails'; @@ -504,8 +504,11 @@ export class MapBox extends ViewBoxAnnotatableComponent { - if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(); + getView = async (doc: Doc, options: DocFocusOptions) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { + this.toggleSidebar(); + options.didMove = true; + } return new Promise>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); }; /* diff --git a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx index 8b22a1531..ea8496c99 100644 --- a/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx +++ b/src/client/views/nodes/MapboxMapBox/MapboxContainer.tsx @@ -20,7 +20,7 @@ import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../../DocC import { SidebarAnnos } from '../../SidebarAnnos'; import { MarqueeOptionsMenu } from '../../collections/collectionFreeForm'; import { Colors } from '../../global/globalEnums'; -import { DocumentView } from '../DocumentView'; +import { DocFocusOptions, DocumentView } from '../DocumentView'; import { FieldView, FieldViewProps } from '../FieldView'; import { MapAnchorMenu } from '../MapBox/MapAnchorMenu'; import { FormattedTextBox } from '../formattedText/FormattedTextBox'; @@ -374,8 +374,11 @@ export class MapBoxContainer extends ViewBoxAnnotatableComponent { - if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(); + getView = async (doc: Doc, options: DocFocusOptions) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { + this.toggleSidebar(); + options.didMove = true; + } return new Promise>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); }; /* diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 55a459a5c..959d5d88d 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -224,8 +224,11 @@ export class PDFBox extends ViewBoxAnnotatableComponent { - if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(false); + getView = async (doc: Doc, options: DocFocusOptions) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) { + options.didMove = true; + this.toggleSidebar(false); + } return new Promise>(res => DocumentManager.Instance.AddViewRenderedCb(doc, dv => res(dv))); }; diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss index ae923ad60..460155446 100644 --- a/src/client/views/nodes/VideoBox.scss +++ b/src/client/views/nodes/VideoBox.scss @@ -180,9 +180,9 @@ } } -video::-webkit-media-controls { - display: none !important; -} +// video::-webkit-media-controls { +// display: none !important; +// } input[type='range'] { -webkit-appearance: none; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index ce73d9f37..fb42286af 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -1,9 +1,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction, untracked } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import { basename } from 'path'; import * as React from 'react'; -import { Doc, StrListCast } from '../../../fields/Doc'; +import { Doc, Opt, StrListCast } from '../../../fields/Doc'; import { InkTool } from '../../../fields/InkField'; import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; @@ -12,23 +12,20 @@ import { AudioField, ImageField, VideoField } from '../../../fields/URLField'; import { emptyFunction, formatTime, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; -import { Networking } from '../../Network'; import { DocumentManager } from '../../util/DocumentManager'; import { FollowLinkScript } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { ReplayMovements } from '../../util/ReplayMovements'; -import { SelectionManager } from '../../util/SelectionManager'; -import { SnappingManager } from '../../util/SnappingManager'; import { undoBatch } from '../../util/UndoManager'; import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView'; import { CollectionStackedTimeline, TrimScope } from '../collections/CollectionStackedTimeline'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; -import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent'; +import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { MarqueeAnnotator } from '../MarqueeAnnotator'; import { AnchorMenu } from '../pdf/AnchorMenu'; import { StyleProp } from '../StyleProvider'; -import { DocFocusOptions, DocumentView, OpenWhere } from './DocumentView'; +import { DocFocusOptions, DocumentView } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { RecordingBox } from './RecordingBox'; import { PinProps, PresBox } from './trails'; @@ -40,7 +37,7 @@ import './VideoBox.scss'; * Supporting Components: CollectionStackedTimeline * * VideoBox is a node that supports the playback of video files in Dash. - * When a video file or YouTube video is importeed into Dash, it is immediately rendered as a VideoBox document. + * When a video file is importeed into Dash, it is immediately rendered as a VideoBox document. * CollectionStackedTimline handles AudioBox and VideoBox shared behavior, but VideoBox handles playing, pausing, etc because it contains