aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/CurrentUserUtils.ts1
-rw-r--r--src/client/util/SettingsManager.scss71
-rw-r--r--src/client/util/SettingsManager.tsx98
-rw-r--r--src/client/views/MainView.tsx4
4 files changed, 54 insertions, 120 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8023df8b4..95e02b5fd 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -890,6 +890,7 @@ export class CurrentUserUtils {
doc.fontFamily = StrCast(doc.fontFamily, "Arial");
doc.fontColor = StrCast(doc.fontColor, "black");
doc.fontHighlight = StrCast(doc.fontHighlight, "");
+ doc.defaultColor = StrCast(doc.defaultColor, "white");
doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 075879198..2a4a4241c 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -93,6 +93,10 @@
margin-right: 65px;
color: black;
border-radius: 5px;
+
+ &:hover{
+ cursor: pointer;
+ }
}
.modes-playground {
@@ -100,6 +104,9 @@
.playground-check {
margin-right: 5px;
+ &:hover{
+ cursor: pointer;
+ }
}
.playground-text {
@@ -112,6 +119,10 @@
margin-top: 2px;
margin-right: 25px;
+ &:hover{
+ cursor: pointer;
+ }
+
.colorFlyout-button {
width: 20px;
height: 20px;
@@ -151,6 +162,9 @@
font-size: 9;
margin-right: 6;
border-radius: 5px;
+ &:hover{
+ cursor: pointer;
+ }
}
.size-select {
@@ -158,6 +172,9 @@
color: black;
font-size: 9;
border-radius: 5px;
+ &:hover{
+ cursor: pointer;
+ }
}
}
}
@@ -190,10 +207,6 @@
cursor: pointer;
}
- // .settings-heading {
- // letter-spacing: .5em;
- // }
-
.settings-content {
background: #e4e4e4;
border-radius: 6px;
@@ -206,56 +219,6 @@
margin-bottom: 10px;
}
- // .settings-body {
- // display: flex;
- // justify-content: space-between;
- // margin-top: -10;
-
- // .settings-type {
- // display: flex;
- // flex-direction: column;
- // flex-basis: 45%;
-
- // }
-
- // .settings-content {
- // background: whitesmoke;
- // border-radius: 6px;
-
- // // padding-left: 1em;
- // // padding-right: 1em;
- // // display: flex;
- // // flex-direction: column;
- // // flex-basis: 70%;
- // // justify-content: space-around;
- // // text-align: left;
-
- // ::placeholder {
- // color: $intermediate-color;
- // }
-
- // input {
- // border-radius: 5px;
- // border: none;
- // padding: 4px;
- // min-width: 100%;
- // margin: 2px 0;
- // }
-
- // .error-text {
- // color: #C40233;
- // }
-
- // .success-text {
- // color: #009F6B;
- // }
-
- // p {
- // padding: 0 0 .1em .2em;
- // }
-
- // }
- // }
.error-text {
color: #C40233;
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 9282559e2..a12cc2cb6 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,4 +1,4 @@
-import { observable, runInAction, action } from "mobx";
+import { observable, runInAction, action, computed } from "mobx";
import * as React from "react";
import MainViewModal from "../views/MainViewModal";
import { observer } from "mobx-react";
@@ -15,7 +15,7 @@ import GroupManager from "./GroupManager";
import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
import { DocServer } from "../DocServer";
-import { BoolCast } from "../../fields/Types";
+import { BoolCast, StrCast, NumCast } from "../../fields/Types";
import { undoBatch } from "./UndoManager";
import { ColorState, SketchPicker } from "react-color";
const higflyout = require("@hig/flyout");
@@ -40,7 +40,7 @@ export default class SettingsManager extends React.Component<{}> {
private new_confirm_ref = React.createRef<HTMLInputElement>();
- @observable private backgroundColor = "white";
+ @computed get backgroundColor() { return Doc.UserDoc().defaultColor; }
public open = action(() => {
SelectionManager.DeselectAll();
@@ -125,57 +125,25 @@ export default class SettingsManager extends React.Component<{}> {
}
}
+ @action
+ changeFontFamily = (e: any) => {
+ Doc.UserDoc().fontFamily = e.currentTarget.value;
+ }
+
+ @action
+ changeFontSize = (e: any) => {
+ Doc.UserDoc().fontSize = e.currentTarget.value;
+ }
+
@action @undoBatch
switchColor = (color: ColorState) => {
const val = String(color.hex);
- this.backgroundColor = val;
+ Doc.UserDoc().defaultColor = val;
return true;
}
private get settingsInterface() {
- const oldSettings = <div className={"settings-interface"}>
- <div className="settings-heading">
- <h1>Settings</h1>
- <div className={"close-button"} onClick={this.close}>
- <FontAwesomeIcon icon={fa.faTimes} color="black" size={"lg"} />
- </div>
- </div>
- <div className="settings-body">
- <div className="settings-type">
- <button onClick={this.onClick} value="password">reset password</button>
- <button onClick={this.noviceToggle} value="data">{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}</button>
- <button onClick={this.togglePlaygroundMode}>{`${this.playgroundMode ? "Disable" : "Enable"} playground mode`}</button>
- <button onClick={this.googleAuthorize} value="data">{`Link to Google`}</button>
- <button onClick={this.hypothesisAuthorize} value="data">{`Link to Hypothes.is`}</button>
- <button onClick={() => GroupManager.Instance.open()}>Manage groups</button>
- <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
- {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
- </button>
- </div>
- {this.settingsContent === "password" ?
- <div className="settings-content">
- <input placeholder="current password" ref={this.curr_password_ref} />
- <input placeholder="new password" ref={this.new_password_ref} />
- <input placeholder="confirm new password" ref={this.new_confirm_ref} />
- {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
- {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
- <button onClick={this.dispatchRequest}>submit</button>
- <a style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a>
-
- </div>
- : undefined}
- {this.settingsContent === "data" ?
- <div className="settings-content">
- <p>WARNING: <br />
- THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.</p>
- <button className="delete-button">DELETE</button>
- </div>
- : undefined}
- </div>
-
- </div>;
-
const passwordContent = <div className="password-content">
<div className="password-content-inputs">
@@ -220,20 +188,23 @@ export default class SettingsManager extends React.Component<{}> {
presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
'#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
'#FFFFFF', '#f1efeb', 'transparent']}
- color={this.backgroundColor} />;
+ color={StrCast(this.backgroundColor)} />;
const colorFlyout = <div className="colorFlyout">
<Flyout anchorPoint={anchorPoints.LEFT_TOP}
content={colorBox}>
<div>
- <div className="colorFlyout-button" style={{ backgroundColor: this.backgroundColor }}
+ <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }}
onPointerDown={e => e.stopPropagation()} >
- <FontAwesomeIcon icon="palette" size="sm" color={this.backgroundColor} />
+ <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
</div>
</div>
</Flyout>
</div>;
+ const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
+ const fontSizes: number[] = [7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 32, 48, 72];
+
const preferencesContent = <div className="preferences-content">
<div className="preferences-color">
<div className="preferences-color-text">Background Color</div> {colorFlyout}
@@ -241,25 +212,20 @@ export default class SettingsManager extends React.Component<{}> {
<div className="preferences-font">
<div className="preferences-font-text">Default Font</div>
<select className="font-select"
- onChange={e => this.changeMode(e)}>
- <option key={"Times New Roman"} value={"Times New Roman"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
- Times New Roman
- </option>
- <option key={"Georgia"} value={"Georgia"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
- Georgia
- </option>
- <option key={"Georgia"} value={"Georgia"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
- Georgia
- </option>
+ onChange={e => this.changeFontFamily(e)}>
+ {fontFamilies.map((font) => {
+ return <option key={font} value={font} selected={StrCast(Doc.UserDoc().fontFamily) === font}>
+ {font}
+ </option>;
+ })}
</select>
<select className="size-select"
- onChange={e => this.changeMode(e)}>
- <option key={"5px"} value={"5px"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
- 5px
- </option>
- <option key={"8px"} value={"8px"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
- 8px
- </option>
+ onChange={e => this.changeFontSize(e)}>
+ {fontSizes.map((size) => {
+ return <option key={size} value={size} selected={NumCast(Doc.UserDoc().fontSize) === size}>
+ {size + "pt"}
+ </option>;
+ })}
</select>
</div>
</div>;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index e9b9be49d..bbf36a04f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -313,6 +313,10 @@ export class MainView extends React.Component {
defaultBackgroundColors = (doc: Opt<Doc>) => {
if (this.panelContent === doc?.title) return "lightgrey";
+
+ if (doc?.type === DocumentType.COL) {
+ return StrCast(Doc.UserDoc().defaultColor);
+ }
if (this.darkScheme) {
switch (doc?.type) {
case DocumentType.FONTICON: return "white";
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 16:09:44 +0000