aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx11
-rw-r--r--src/client/views/nodes/DocumentLinksButton.scss4
-rw-r--r--src/client/views/nodes/DocumentView.scss6
-rw-r--r--src/client/views/nodes/FontIconBox.scss13
-rw-r--r--src/client/views/nodes/KeyValueBox.scss20
-rw-r--r--src/client/views/nodes/KeyValuePair.scss2
-rw-r--r--src/client/views/nodes/PDFBox.scss5
-rw-r--r--src/client/views/nodes/PresBox.scss142
-rw-r--r--src/client/views/nodes/RadialMenu.scss4
-rw-r--r--src/client/views/nodes/WebBox.scss3
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.scss8
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx11
-rw-r--r--src/client/views/nodes/formattedText/RichTextMenu.scss4
-rw-r--r--src/client/views/nodes/formattedText/TooltipTextMenu.scss10
14 files changed, 123 insertions, 120 deletions
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index a0a40becb..9b75cd8f9 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -64,6 +64,7 @@ interface HTMLtagProps {
htmltag: string;
onClick?: ScriptField;
onInput?: ScriptField;
+ scaling: number;
}
//"<HTMLdiv borderRadius='100px' onClick={this.bannerColor=this.bannerColor==='red'?'green':'red'} overflow='hidden' position='absolute' width='100%' height='100%' transform='rotate({2*this.x+this.y}deg)'> <ImageBox {...props} fieldKey={'data'}/> <HTMLspan width='200px' top='0' height='35px' textAlign='center' paddingTop='10px' transform='translate(-40px, 45px) rotate(-45deg)' position='absolute' color='{this.bannerColor===`green`?`light`:`dark`}blue' backgroundColor='{this.bannerColor===`green`?`dark`:`light`}blue'> {this.title}</HTMLspan></HTMLdiv>"
@@ -82,7 +83,7 @@ interface HTMLtagProps {
export class HTMLtag extends React.Component<HTMLtagProps> {
click = (e: React.MouseEvent) => {
const clickScript = (this.props as any).onClick as Opt<ScriptField>;
- clickScript?.script.run({ this: this.props.Document, self: this.props.RootDoc });
+ clickScript?.script.run({ this: this.props.Document, self: this.props.RootDoc, scale: this.props.scaling });
}
onInput = (e: React.FormEvent<HTMLDivElement>) => {
const onInputScript = (this.props as any).onInput as Opt<ScriptField>;
@@ -90,9 +91,9 @@ export class HTMLtag extends React.Component<HTMLtagProps> {
}
render() {
const style: { [key: string]: any } = {};
- const divKeys = OmitKeys(this.props, ["children", "htmltag", "RootDoc", "Document", "key", "onInput", "onClick", "__proto__"]).omit;
+ const divKeys = OmitKeys(this.props, ["children", "htmltag", "RootDoc", "scaling", "Document", "key", "onInput", "onClick", "__proto__"]).omit;
const replacer = (match: any, expr: string, offset: any, string: any) => { // bcz: this executes a script to convert a propery expression string: { script } into a value
- return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name })?.script.run({ self: this.props.RootDoc, this: this.props.Document }).result as string || "";
+ return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: "number" })?.script.run({ self: this.props.RootDoc, this: this.props.Document, scale: this.props.scaling }).result as string || "";
};
Object.keys(divKeys).map((prop: string) => {
const p = (this.props as any)[prop] as string;
@@ -184,7 +185,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
// replace HTML<tag> with corresponding HTML tag as in: <HTMLdiv> becomes <HTMLtag Document={props.Document} htmltag='div'>
const replacer2 = (match: any, p1: string, offset: any, string: any) => {
- return `<HTMLtag RootDoc={props.RootDoc} Document={props.Document} htmltag='${p1}'`;
+ return `<HTMLtag RootDoc={props.RootDoc} Document={props.Document} scaling='${this.props.scaling?.() || 1}' htmltag='${p1}'`;
};
layoutFrame = layoutFrame.replace(/<HTML([a-zA-Z0-9_-]+)/g, replacer2);
@@ -200,7 +201,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
if (splits.length > 1) {
const code = XRegExp.matchRecursive(splits[1], "{", "}", "", { valueNames: ["between", "left", "match", "right", "between"] });
layoutFrame = splits[0] + ` ${func}={props.${func}} ` + splits[1].substring(code[1].end + 1);
- return ScriptField.MakeScript(code[1].value, { this: Doc.name, self: Doc.name, value: "string" });
+ return ScriptField.MakeScript(code[1].value, { this: Doc.name, self: Doc.name, scale: "number", value: "string" });
}
return undefined;
// add input function to props
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index 735aa669f..daffaf9e7 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables.scss";
+@import "../global/globalCssVariables.scss";
.documentLinksButton-cont {
@@ -37,7 +37,7 @@
font-weight: bold;
&:hover {
- background: $main-accent;
+ background: $medium-gray;
transform: scale(1.05);
cursor: pointer;
}
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index bdbece621..8f86417d6 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
.documentView-effectsWrapper {
border-radius: inherit;
@@ -22,7 +22,7 @@
transition: outline .3s linear;
cursor: grab;
- // background: $light-color; //overflow: hidden;
+ // background: $white; //overflow: hidden;
transform-origin: left top;
&.minimized {
@@ -218,6 +218,6 @@
.documentView-node:first-child {
position: relative;
- background: "#B59B66"; //$light-color;
+ background: "#B59B66"; //$white;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 33ac85a0e..718af2c16 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,5 +1,7 @@
+@import "../global/globalCssVariables";
+
.fontIconBox-label {
- color: white;
+ color: $white;
margin-right: 4px;
margin-top: 1px;
position: relative;
@@ -22,8 +24,8 @@
position: absolute;
top: -10px;
right: -10px;
- color: white;
- background: #f44b42;
+ color: $white;
+ background: $pink;
font-weight: 300;
border-radius: 100%;
width: 25px;
@@ -37,7 +39,7 @@
.menuButton-circle,
.menuButton-round {
border-radius: 100%;
- background-color: black;
+ background-color: $dark-gray;
padding: 0;
.fontIconBox-label {
@@ -47,13 +49,14 @@
}
&:hover {
- background-color: #aaaaa3;
+ background-color: $light-gray;
}
}
.menuButton-square {
padding-top: 3px;
padding-bottom: 3px;
+ background-color: $dark-gray;
.fontIconBox-label {
border-radius: 0px;
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
index eb7c2f32b..ffcba4981 100644
--- a/src/client/views/nodes/KeyValueBox.scss
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -1,10 +1,10 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
.keyValueBox-cont {
overflow-y: scroll;
width:100%;
height: 100%;
- background-color: $light-color;
- border: 1px solid $intermediate-color;
+ background-color: $white;
+ border: 1px solid $medium-gray;
border-radius: $border-radius;
box-sizing: border-box;
display: inline-block;
@@ -56,8 +56,8 @@ $header-height: 30px;
width:100%;
position: relative;
display: inline-block;
- background: $intermediate-color;
- color: $light-color;
+ background: $medium-gray;
+ color: $white;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
@@ -66,7 +66,7 @@ $header-height: 30px;
th {
font-weight: normal;
&:first-child {
- border-right: 1px solid $light-color;
+ border-right: 1px solid $white;
}
}
}
@@ -76,9 +76,9 @@ $header-height: 30px;
display: flex;
width:100%;
height:$header-height;
- background: $light-color;
+ background: $white;
.formattedTextBox-cont {
- background: $light-color;
+ background: $white;
}
}
.keyValueBox-cont {
@@ -116,8 +116,8 @@ $header-height: 30px;
display: flex;
width:100%;
height:30px;
- background: $light-color-secondary;
+ background: $light-gray;
.formattedTextBox-cont {
- background: $light-color-secondary;
+ 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 f78767234..5b660e582 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
.keyValuePair-td-key {
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 0f46da294..72dec6e4c 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -7,7 +7,7 @@
overflow: hidden;
cursor: auto;
transform-origin: top left;
- z-index: 0;
+ //z-index: 0;
.pdfBox-ui {
position: absolute;
@@ -30,6 +30,7 @@
justify-content: center;
border-radius: 3px;
pointer-events: all;
+ z-index: 1; // so it appears on top of the document's title, if shown
}
.pdfBox-pageNums {
@@ -223,7 +224,7 @@
.pdfBox {
width: 100%;
height: 100%;
- pointer-events: none;
+ //pointer-events: none;
.pdfViewerDash-text {
.textLayer {
display: none;
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 1ba86232b..5d1c5f4eb 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -1,7 +1,4 @@
-$light-blue: #AEDDF8;
-$dark-blue: #5B9FDD;
-$light-background: #ececec;
-$dark-grey: #656565;
+@import "../global/globalCssVariables";
.presBox-cont {
cursor: auto;
@@ -10,7 +7,6 @@ $dark-grey: #656565;
pointer-events: inherit;
z-index: 2;
font-family: Roboto;
- box-shadow: #AAAAAA .2vw .2vw .4vw;
width: 100%;
min-width: 20px;
height: 100%;
@@ -47,8 +43,8 @@ $dark-grey: #656565;
align-items: center;
height: 30px;
width: 100%;
- color: white;
- background-color: #323232;
+ color: $white;
+ background-color: $dark-gray;
.toolbar-button {
cursor: pointer;
@@ -110,7 +106,7 @@ $dark-grey: #656565;
}
.toolbar-divider {
- border-left: solid #ffffff70 0.5px;
+ border-left: solid $medium-gray 0.5px;
height: 20px;
}
}
@@ -118,7 +114,7 @@ $dark-grey: #656565;
.dropdown {
font-size: 10;
margin-left: 5px;
- color: darkgrey;
+ color: $medium-gray;
transition: 0.5s ease;
}
@@ -174,7 +170,7 @@ $dark-grey: #656565;
.ribbon-colorBox {
cursor: pointer;
- border: solid 1px black;
+ border: solid 1px $black;
display: flex;
margin-left: 5px;
margin-top: 5px;
@@ -191,9 +187,9 @@ $dark-grey: #656565;
font-size: 11;
font-weight: 200;
height: 20;
- background-color: #ececec;
- color: black;
- border: solid 1px black;
+ background-color: $white;
+ color: $black;
+ border: solid 1px $black;
display: flex;
margin-left: 5px;
margin-top: 5px;
@@ -220,11 +216,11 @@ $dark-grey: #656565;
align-items: center;
height: 100%;
width: 100%;
- background: black;
+ background: $black;
}
.ribbon-propertyUpDownItem:hover {
- background: darkgrey;
+ background: $medium-gray;
transform: scale(1.05);
}
}
@@ -239,7 +235,7 @@ $dark-grey: #656565;
.multiThumb-slider {
display: grid;
- background-color: $light-background;
+ background-color: $white;
height: 10px;
border-radius: 10px;
overflow: hidden;
@@ -257,8 +253,8 @@ $dark-grey: #656565;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
- background: $dark-blue;
- box-shadow: -100vw 0 0 100vw $light-background;
+ background: $medium-blue;
+ box-shadow: -100vw 0 0 100vw $white;
}
.toolbar-slider.end::-webkit-slider-thumb {
@@ -267,7 +263,7 @@ $dark-grey: #656565;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
- background: $dark-blue;
+ background: $medium-blue;
box-shadow: -100vw 0 0 100vw $light-blue;
}
}
@@ -282,7 +278,7 @@ $dark-grey: #656565;
height: 10px;
border-radius: 10px;
-webkit-appearance: none;
- background-color: $light-background;
+ background-color: $white;
}
.toolbar-slider:focus {
@@ -301,7 +297,7 @@ $dark-grey: #656565;
-webkit-appearance: none;
height: 10px;
cursor: ew-resize;
- background: $dark-blue;
+ background: $medium-blue;
box-shadow: -100vw 0 0 100vw $light-blue;
}
@@ -318,7 +314,7 @@ $dark-grey: #656565;
width: 15px;
min-width: 15px;
cursor: pointer;
- background: $light-background;
+ background: $white;
}
.presBox-checkbox:focus {
@@ -326,7 +322,7 @@ $dark-grey: #656565;
}
.presBox-checkbox:hover {
- background: #c0c0c0;
+ background: $light-gray;
}
.presBox-checkbox:checked {
@@ -381,9 +377,9 @@ $dark-grey: #656565;
text-align: center;
font-size: 16;
width: 90%;
- color: black;
+ color: $black;
transform: translate(5%, 0px);
- border-bottom: solid 2px darkgrey;
+ border-bottom: solid 2px $medium-gray;
}
@@ -396,8 +392,8 @@ $dark-grey: #656565;
justify-self: left;
margin-top: 5px;
padding-left: 10px;
- background-color: $light-background;
- border: solid 1px black;
+ background-color: $white;
+ border: solid 1px $black;
min-width: 80px;
max-width: 200px;
width: 100%;
@@ -416,7 +412,7 @@ $dark-grey: #656565;
}
.ribbon-frameSelector {
- border: black solid 1px;
+ border: $black solid 1px;
width: 60px;
height: 20px;
margin-top: 5px;
@@ -433,12 +429,12 @@ $dark-grey: #656565;
cursor: pointer;
position: relative;
height: 100%;
- background: $light-background;
+ background: $white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
- color: black;
+ color: $black;
}
.numKeyframe {
@@ -446,7 +442,7 @@ $dark-grey: #656565;
font-size: 10;
font-weight: 600;
position: relative;
- color: black;
+ color: $black;
display: flex;
width: 100%;
height: 100%;
@@ -489,7 +485,7 @@ $dark-grey: #656565;
padding-left: 10;
padding-right: 10;
border-radius: 10px;
- background-color: #979797;
+ background-color: $medium-gray;
}
.ribbon-final-button:hover {
@@ -508,13 +504,13 @@ $dark-grey: #656565;
align-items: center;
margin-bottom: 5px;
height: 25px;
- color: lightgrey;
+ color: $light-gray;
width: 100%;
max-width: 120;
padding-left: 10;
padding-right: 10;
border-radius: 10px;
- background-color: black;
+ background-color: $black;
}
.ribbon-final-button-hidden:hover {
@@ -525,15 +521,15 @@ $dark-grey: #656565;
.ribbon-frameList {
width: calc(100% - 5px);
height: 50px;
- background-color: #ececec;
- border: 1px solid #9f9f9f;
+ background-color: $white;
+ border: 1px solid $medium-gray;
grid-template-rows: max-content;
.frameList-header {
display: grid;
width: 100%;
height: 20px;
- background-color: #9f9f9f;
+ background-color: $medium-gray;
.frameList-headerButtons {
display: flex;
@@ -588,7 +584,7 @@ $dark-grey: #656565;
font-size: 10.5;
font-weight: 300;
height: 20;
- background-color: #979797;
+ background-color: $medium-gray;
color: white;
display: flex;
margin-top: 5px;
@@ -607,8 +603,8 @@ $dark-grey: #656565;
transition: all 0.4s;
font-weight: 400;
opacity: 1;
- color: white;
- background-color: black;
+ color: $white;
+ background-color: $black;
}
.ribbon-toggle {
@@ -616,10 +612,10 @@ $dark-grey: #656565;
font-size: 10.5;
font-weight: 200;
height: 20;
- background-color: $light-background;
+ background-color: $white;
border: solid 1px rgba(0, 0, 0, 0.5);
display: flex;
- color: black;
+ color: $black;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 5px;
@@ -660,13 +656,13 @@ $dark-grey: #656565;
position: relative;
font-size: 13;
padding-bottom: 10px;
- border-bottom: solid 1px $dark-grey;
+ border-bottom: solid 1px $dark-gray;
.presBox-dropdown:hover {
- border: solid 1px $dark-blue;
+ border: solid 1px $medium-blue;
.presBox-dropdownIcon {
- color: $dark-blue;
+ color: $medium-blue;
}
}
@@ -675,12 +671,12 @@ $dark-grey: #656565;
display: grid;
grid-template-columns: auto 20%;
position: relative;
- border: solid 1px black;
- background-color: $light-background;
+ border: solid 1px $black;
+ background-color: $light-gray;
border-radius: 5px;
font-size: 10;
height: 25;
- color: black;
+ color: $black;
padding-left: 5px;
align-items: center;
margin-top: 5px;
@@ -744,7 +740,7 @@ $dark-grey: #656565;
height: 100px;
padding-top: 5px;
padding-bottom: 5px;
- border: solid 1px black;
+ border: solid 1px $black;
// overflow: auto;
::-webkit-scrollbar {
@@ -794,7 +790,7 @@ $dark-grey: #656565;
cursor: pointer;
position: relative;
text-align: center;
- border-left: solid 1px darkgrey;
+ border-left: solid 1px $medium-gray;
width: 20%;
height: 100%;
display: flex;
@@ -825,7 +821,7 @@ $dark-grey: #656565;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.8);
z-index: 200;
background-color: white;
- color: black;
+ color: $black;
position: absolute;
overflow: hidden;
}
@@ -841,12 +837,12 @@ $dark-grey: #656565;
align-items: center;
justify-content: center;
transform: translate(0px, -1px);
- background-color: $light-background;
+ background-color: $white;
width: 40px;
height: 15px;
align-self: center;
justify-self: center;
- border: solid 1px black;
+ border: solid 1px $black;
border-top: 0px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
@@ -855,15 +851,15 @@ $dark-grey: #656565;
.layout-container {
padding: 5px;
display: grid;
- background-color: $light-background;
+ background-color: $white;
grid-template-columns: repeat(auto-fit, minmax(90px, 100px));
width: 100%;
- border: solid 1px black;
+ border: solid 1px $black;
min-width: 100px;
overflow: hidden;
.layout:hover {
- border: solid 2px #5c9edd;
+ border: solid 2px $medium-blue;
}
.layout {
@@ -878,7 +874,7 @@ $dark-grey: #656565;
width: 90px;
overflow: hidden;
background-color: white;
- border: solid darkgrey 1px;
+ border: solid $medium-gray 1px;
display: grid;
grid-template-rows: auto;
align-items: center;
@@ -893,7 +889,7 @@ $dark-grey: #656565;
height: 13;
font-size: 12;
display: flex;
- background-color: #f1efec;
+ background-color: #white;
}
.subtitle {
@@ -906,7 +902,7 @@ $dark-grey: #656565;
height: 13;
font-size: 9;
display: flex;
- background-color: #f1efec;
+ background-color: $white;
}
.content {
@@ -919,7 +915,7 @@ $dark-grey: #656565;
height: 13;
font-size: 10;
display: flex;
- background-color: #f1efec;
+ background-color: $white;
height: 33;
text-align: left;
font-size: 8px;
@@ -960,8 +956,8 @@ $dark-grey: #656565;
select {
- background: #323232;
- color: white;
+ background: $dark-gray;
+ color: $white;
}
.presBox-button {
@@ -975,8 +971,8 @@ $dark-grey: #656565;
text-align: center;
letter-spacing: normal;
width: inherit;
- background: #323232;
- color: white;
+ background: $dark-gray;
+ color: $white;
}
.presBox-button.active {
@@ -984,7 +980,7 @@ $dark-grey: #656565;
}
.presBox-button.active:hover {
- background-color: #233163;
+ background-color: $medium-blue;
}
.presBox-button.edit {
@@ -1053,8 +1049,8 @@ $dark-grey: #656565;
font-size: 100;
display: flex;
align-items: center;
- background: #323232;
- color: white;
+ background: $dark-gray;
+ color: $white;
}
.presBox-viewPicker {
@@ -1086,7 +1082,7 @@ $dark-grey: #656565;
top: 10;
opacity: 0.1;
transition: all 0.4s;
- color: white;
+ color: $white;
}
.miniPres:hover {
@@ -1094,8 +1090,8 @@ $dark-grey: #656565;
}
.presPanelOverlay {
- background-color: #323232;
- color: white;
+ background-color: $dark-gray;
+ color: $white;
border-radius: 5px;
grid-template-rows: 100%;
height: 25;
@@ -1129,7 +1125,7 @@ $dark-grey: #656565;
.presPanel-divider {
width: 0.5px;
height: 80%;
- border-right: solid 1px #5a5a5a;
+ border-right: solid 1px $medium-gray;
}
.presPanel-button-frame {
@@ -1161,12 +1157,12 @@ $dark-grey: #656565;
}
.presPanel-button:hover {
- background-color: #5a5a5a;
+ background-color: $medium-gray;
transform: scale(1.2);
}
.presPanel-button-text:hover {
- background-color: #5a5a5a;
+ background-color: $medium-gray;
}
diff --git a/src/client/views/nodes/RadialMenu.scss b/src/client/views/nodes/RadialMenu.scss
index daa620d12..312b51013 100644
--- a/src/client/views/nodes/RadialMenu.scss
+++ b/src/client/views/nodes/RadialMenu.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
.radialMenu-cont {
position: absolute;
@@ -53,7 +53,7 @@ s
transition: all .1s;
border-width: .11px;
border-style: none;
- border-color: $intermediate-color; // rgb(187, 186, 186);
+ border-color: $medium-gray; // rgb(187, 186, 186);
// padding: 10px 0px 10px 0px;
white-space: nowrap;
font-size: 13px;
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index ca82c049c..19b69ff5a 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables.scss";
+@import "../global/globalCssVariables.scss";
.webBox {
@@ -17,6 +17,7 @@
justify-content: center;
border-radius: 3px;
pointer-events: all;
+ z-index: 1; // so it appears on top of the document's title, if shown
}
.pdfViewerDash-dragAnnotationBox {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 53aceb533..3cedab1a4 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -1,4 +1,4 @@
-@import "../../globalCssVariables";
+@import "../../global/globalCssVariables";
.ProseMirror {
width: 100%;
@@ -31,7 +31,7 @@ audiotag:hover {
padding: 0;
border-width: 0px;
border-radius: inherit;
- border-color: $intermediate-color;
+ border-color: $medium-gray;
box-sizing: border-box;
background-color: inherit;
border-style: solid;
@@ -363,7 +363,7 @@ footnote::after {
@media only screen and (max-width: 1000px) {
- @import "../../globalCssVariables";
+ @import "../../global/globalCssVariables";
.ProseMirror {
width: 100%;
@@ -381,7 +381,7 @@ footnote::after {
padding: 0;
border-width: 0px;
border-radius: inherit;
- border-color: $intermediate-color;
+ border-color: $medium-gray;
box-sizing: border-box;
background-color: inherit;
border-style: solid;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 95d8f555c..6dd63fb47 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -71,6 +71,7 @@ export interface FormattedTextBoxProps {
xPadding?: number; // used to override document's settings for xMargin --- see CollectionCarouselView
yPadding?: number;
noSidebar?: boolean;
+ dontScale?: boolean;
dontSelectOnLoad?: boolean; // suppress selecting the text box when loaded (and mark as not being associated with scrollTop document field)
}
export const GoogleRef = "googleDocId";
@@ -126,7 +127,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
@computed get scrollHeight() { return NumCast(this.rootDoc[this.fieldKey + "-scrollHeight"]); }
@computed get sidebarHeight() { return !this.sidebarWidth() ? 0 : NumCast(this.rootDoc[this.SidebarKey + "-height"]); }
@computed get titleHeight() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; }
- @computed get autoHeightMargins() { return this.titleHeight + (this.layoutDoc._autoHeightMargins && !this.props.dontSelectOnLoad ? NumCast(this.layoutDoc._autoHeightMargins) : 0); }
+ @computed get autoHeightMargins() { return this.titleHeight + NumCast(this.layoutDoc._autoHeightMargins); }
@computed get _recording() { return this.dataDoc?.mediaState === "recording"; }
set _recording(value) {
!this.dataDoc.recordingSource && (this.dataDoc.mediaState = value ? "recording" : undefined);
@@ -1524,10 +1525,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
<div className="formattedTextBox-cont"
onWheel={e => this.isContentActive() && e.stopPropagation()}
style={{
- transform: `scale(${scale})`,
- transformOrigin: "top left",
- width: `${100 / scale}%`,
- height: `${100 / scale}%`,
+ transform: this.props.dontScale ? undefined : `scale(${scale})`,
+ transformOrigin: this.props.dontScale ? undefined : "top left",
+ width: this.props.dontScale ? undefined : `${100 / scale}%`,
+ height: this.props.dontScale ? undefined : `${100 / scale}%`,
// overflowY: this.layoutDoc._autoHeight ? "hidden" : undefined,
...this.styleFromLayoutString(scale) // this converts any expressions in the format string to style props. e.g., <FormattedTextBox height='{this._headerHeight}px' >
}}>
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss
index 1d24d6833..c94e93541 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.scss
+++ b/src/client/views/nodes/formattedText/RichTextMenu.scss
@@ -1,4 +1,4 @@
-@import "../../globalCssVariables";
+@import "../../global/globalCssVariables";
.button-dropdown-wrapper {
position: relative;
@@ -24,7 +24,7 @@
top: 35px;
left: 0;
background-color: #323232;
- color: $light-color-secondary;
+ color: $light-gray;
border: 1px solid #4d4d4d;
border-radius: 0 6px 6px 6px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
diff --git a/src/client/views/nodes/formattedText/TooltipTextMenu.scss b/src/client/views/nodes/formattedText/TooltipTextMenu.scss
index 0e4b752ac..8c4d77da9 100644
--- a/src/client/views/nodes/formattedText/TooltipTextMenu.scss
+++ b/src/client/views/nodes/formattedText/TooltipTextMenu.scss
@@ -1,4 +1,4 @@
-@import "../views/globalCssVariables";
+@import "../views/global/globalCssVariables";
.ProseMirror-menu-dropdown-wrap {
display: inline-block;
position: relative;
@@ -50,7 +50,7 @@
padding: 3px;
&:hover {
- background-color: $light-color-secondary;
+ background-color: $light-gray;
}
}
}
@@ -294,9 +294,9 @@
top: 31px;
background-color: #323232;
border: 1px solid #4d4d4d;
- color: $light-color-secondary;
+ color: $light-gray;
// border: none;
- // border: 1px solid $light-color-secondary;
+ // border: 1px solid $light-gray;
border-radius: 0 6px 6px 6px;
padding: 3px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
@@ -323,7 +323,7 @@
}
.separated-button {
- border-top: 1px solid $light-color-secondary;
+ border-top: 1px solid $light-gray;
padding-top: 6px;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-03-03 04:21:17 +0000