diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 1 | ||||
| -rw-r--r-- | src/client/util/SettingsManager.scss | 71 | ||||
| -rw-r--r-- | src/client/util/SettingsManager.tsx | 98 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 4 |
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"; |