aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/ContextMenu.scss4
-rw-r--r--src/client/views/MainView.scss39
-rw-r--r--src/client/views/MainView.tsx9
-rw-r--r--src/client/views/PropertiesView.scss8
-rw-r--r--src/client/views/PropertiesView.tsx16
-rw-r--r--src/client/views/collections/TabDocView.scss1
-rw-r--r--src/client/views/collections/TabDocView.tsx3
-rw-r--r--src/client/views/nodes/ColorBox.tsx4
8 files changed, 57 insertions, 27 deletions
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 7467bc043..b514de5f2 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -43,7 +43,6 @@
.contextMenu-item {
// width: 11vw; //10vw
height: 25px; //2vh
- background: whitesmoke;
display: flex; //comment out to allow search icon to be inline with search text
justify-content: left;
align-items: center;
@@ -58,7 +57,6 @@
// padding: 10px 0px 10px 0px;
white-space: nowrap;
font-size: 13px;
- color: grey;
letter-spacing: 2px;
text-transform: uppercase;
padding-right: 30px;
@@ -75,7 +73,6 @@
.contextMenu-description {
// width: 11vw; //10vw
- background: whitesmoke;
display: flex; //comment out to allow search icon to be inline with search text
justify-content: left;
-webkit-touch-callout: none;
@@ -89,7 +86,6 @@
// padding: 10px 0px 10px 0px;
white-space: nowrap;
font-size: 10px;
- color: grey;
letter-spacing: 1px;
text-transform: uppercase;
padding-right: 30px;
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index d571a0428..b49990433 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -153,7 +153,7 @@
cursor: auto;
}
-.mainView-innerContent {
+.mainView-innerContent, .mainView-innerContent-dark {
display: contents;
flex-direction: row;
position: relative;
@@ -174,6 +174,43 @@
right: 0;
position: absolute;
z-index: 2;
+ background-color: rgb(159, 159, 159);
+ .editable-title {
+ background-color: lightgrey;
+ }
+ }
+
+}
+.mainView-innerContent-dark
+{
+ .propertiesView {
+ background-color: #252525;
+ input {
+ background-color: dimgrey;
+ }
+ .propertiesView-sharingTable
+ {
+ background-color: dimgrey;
+ }
+ .editable-title {
+ background-color: dimgrey;
+ }
+ .propertiesView-field {
+ background-color: dimgrey;
+ }
+ }
+ .mainView-propertiesDragger,
+ .mainView-libraryHandle {
+ background: #353535;
+ }
+}
+.mainView-container-dark {
+ .contextMenu-cont {
+ background: dimgrey;
+ color: white;
+ input::placeholder {
+ color:white;
+ }
}
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b3d198bd1..3a3dbc68f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -232,6 +232,7 @@ export class MainView extends React.Component {
if (this.darkScheme) {
switch (doc?.type) {
case DocumentType.PRESELEMENT: return "dimgrey";
+ case DocumentType.PRES: return "#3e3e3e";
case DocumentType.FONTICON: return "black";
case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d";
case DocumentType.LINK:
@@ -414,18 +415,18 @@ export class MainView extends React.Component {
@computed get mainInnerContent() {
return <>
{this.menuPanel}
- <div className="mainView-innerContent" >
+ <div className={`mainView-innerContent${this.darkScheme ? "-dark" : ""}`}>
{this.flyout}
- <div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, background: this.darkScheme ? "black" : "lightgrey" }} onPointerDown={this.onFlyoutPointerDown} >
+ < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
<FontAwesomeIcon icon="chevron-left" color={this.darkScheme ? "white" : "black"} size="sm" />
</div>
{this.dockingContent}
<div className="mainView-propertiesDragger" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}>
- <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color="black" size="sm" />
+ <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color={this.darkScheme ? "white" : "black"} size="sm" />
</div>
- {this.propertiesWidth() < 10 ? (null) : <PropertiesView width={this.propertiesWidth()} height={this.getContentsHeight()} />}
+ {this.propertiesWidth() < 10 ? (null) : <PropertiesView backgroundColor={this.defaultBackgroundColors} width={this.propertiesWidth()} height={this.getContentsHeight()} />}
</div>
</>;
}
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index ce2a87733..1365725cb 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -1,6 +1,4 @@
.propertiesView {
-
- background-color: rgb(205, 205, 205);
height: 100%;
font-family: "Noto Sans";
cursor: auto;
@@ -9,7 +7,6 @@
overflow-y: auto;
.propertiesView-title {
- background-color: rgb(159, 159, 159);
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
@@ -335,7 +332,6 @@
}
}
}
-
.propertiesView-fields {
//border-bottom: 1px solid black;
//padding: 8.5px;
@@ -390,7 +386,7 @@
}
}
- .field {
+ .propertiesView-field {
display: flex;
font-size: 7px;
background-color: #e8e8e8;
@@ -400,7 +396,7 @@
padding-left: 3px;
}
- .uneditable-field {
+ .propertiesView-uneditable-field {
display: flex;
overflow-y: visible;
margin-bottom: 2px;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 4dea0ddaa..2a13ab937 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -5,7 +5,7 @@ import { intersection } from "lodash";
import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
import { ColorState, SketchPicker } from "react-color";
-import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc";
+import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym, Opt } from "../../fields/Doc";
import { Id } from "../../fields/FieldSymbols";
import { InkField } from "../../fields/InkField";
import { ComputedField } from "../../fields/ScriptField";
@@ -36,6 +36,7 @@ const _global = (window /* browser */ || global /* node */) as any;
interface PropertiesViewProps {
width: number;
height: number;
+ backgroundColor: (doc: Opt<Doc>, renderDepth: number) => Opt<string>;
}
@observer
@@ -144,7 +145,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>);
}
}
- rows.push(<div className="field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
+ rows.push(<div className="propertiesView-field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
<EditableView
key="editableView"
contents={"add key:value or #tags"}
@@ -172,14 +173,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
docs.forEach(doc => docvals.add(doc[key]));
const contents = Array.from(docvals.keys()).length > 1 ? "-multiple" : docs[0][key];
if (key[0] === "#") {
- rows.push(<div className="uneditable-field" key={key}>
+ rows.push(<div className="propertiesView-uneditable-field" key={key}>
<span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
&nbsp;
</div>);
} else if (contents !== undefined) {
const value = Field.toString(contents as Field);
if (noviceReqFields.includes(key) || key.indexOf("lastModified") !== -1) {
- rows.push(<div className="uneditable-field" key={key}>
+ rows.push(<div className="propertiesView-uneditable-field" key={key}>
<span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ": "}</span>
<div style={{ whiteSpace: "nowrap", overflowX: "hidden" }}>{value}</div>
</div>);
@@ -200,7 +201,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
}
}
- rows.push(<div className="field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
+ rows.push(<div className="propertiesView-field" key={"newKeyValue"} style={{ marginTop: "3px" }}>
<EditableView
key="editableView"
contents={"add key:value or #tags"}
@@ -253,7 +254,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return !this.selectedDoc ? (null) : <PropertiesDocContextSelector Document={this.selectedDoc} hideTitle={true} addDocTab={(doc, where) => CollectionDockingView.AddSplit(doc, "right")} />;
}
- previewBackground = () => "lightgrey";
@computed get layoutPreview() {
if (SelectionManager.SelectedDocuments().length > 1) {
return "-- multiple selected --";
@@ -270,7 +270,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
renderDepth={1}
rootSelected={returnFalse}
treeViewDoc={undefined}
- backgroundColor={this.previewBackground}
+ backgroundColor={this.props.backgroundColor}
fitToBox={true}
FreezeDimensions={true}
dontCenter={true}
@@ -856,7 +856,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
if (this.selectedDoc && !this.isPres) {
return <div className="propertiesView" style={{
width: this.props.width,
- minWidth: this.props.width
+ minWidth: this.props.width,
//overflowY: this.scrolling ? "scroll" : "visible"
}} >
<div className="propertiesView-title" style={{ width: this.props.width }}>
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss
index edf556c9f..9acbc4f85 100644
--- a/src/client/views/collections/TabDocView.scss
+++ b/src/client/views/collections/TabDocView.scss
@@ -43,7 +43,6 @@ input.lm_title {
right: 0;
width: 45px;
height: 45px;
- background: white;
transform: translate(20px, 20px) rotate(45deg);
border-radius: 30px;
padding: 2px;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 82530c26d..38b9b399d 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -336,7 +336,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
</div>
<Tooltip title={<div className="dash-tooltip">{"toggle minimap"}</div>}>
- <div className="miniMap-hidden" onPointerDown={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
+ <div className="miniMap-hidden" onPointerDown={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })}
+ style={{ background: CollectionDockingView.Instance.props.backgroundColor?.(this._document, 0) }} >
<FontAwesomeIcon icon={"globe-asia"} size="lg" />
</div>
</Tooltip>
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index fcc9e50f5..4fb350b55 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -69,11 +69,11 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
SetActiveInkWidth(e.target.value);
SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value));
}} />
- <div> {ActiveInkBezierApprox() ?? 2}</div>
+ {/* <div> {ActiveInkBezierApprox() ?? 2}</div>
<input type="range" defaultValue={ActiveInkBezierApprox() ?? 2} min={0} max={300} onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetActiveBezierApprox(e.target.value);
SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value);
- }} />
+ }} /> */}
<br />
<br />
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 07:13:15 +0000