aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/CurrentUserUtils.ts29
-rw-r--r--src/client/util/HypothesisUtils.ts170
-rw-r--r--src/client/util/SettingsManager.scss12
-rw-r--r--src/client/util/SettingsManager.tsx297
4 files changed, 296 insertions, 212 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 37ffcb78e..49377a728 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -248,8 +248,8 @@ export class CurrentUserUtils {
if (doc["template-buttons"] === undefined) {
doc["template-buttons"] = new PrefetchProxy(Docs.Create.MasonryDocument(requiredTypes, {
title: "Advanced Item Prototypes", _xMargin: 0, _showTitle: "title",
- hidden: ComputedField.MakeFunction("self.target.noviceMode") as any,
- target: doc,
+ hidden: ComputedField.MakeFunction("self.userDoc.noviceMode") as any,
+ userDoc: doc,
_autoHeight: true, _width: 500, _columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
}));
@@ -387,7 +387,7 @@ export class CurrentUserUtils {
static creatorBtnDescriptors(doc: Doc): {
title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean,
- click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc
+ click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean
}[] {
if (doc.emptyPresentation === undefined) {
doc.emptyPresentation = Docs.Create.PresDocument(new List<Doc>(),
@@ -427,16 +427,16 @@ export class CurrentUserUtils {
this.setupActiveMobileMenu(doc);
}
return [
- { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
- { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
+ { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true },
+ { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc, noviceMode: true },
{ toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc },
- { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
+ { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true },
{ toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc },
// { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
- { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc },
- { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc },
+ { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true },
+ { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true },
- { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc },
+ { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true },
{ toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc },
{ toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
// { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
@@ -447,8 +447,9 @@ export class CurrentUserUtils {
// { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
// { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "pink", activeInkPen: doc },
// { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
- { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyDocHolder as Doc },
+ { toolTip: "Drag a document previewer", title: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
{ toolTip: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
+ { toolTip: "Connect a Google Account", title: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
];
}
@@ -465,7 +466,7 @@ export class CurrentUserUtils {
}
}
const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
- const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
+ const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode }) => Docs.Create.FontIconDocument({
_nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
icon,
title,
@@ -479,6 +480,8 @@ export class CurrentUserUtils {
backgroundColor,
removeDropProperties: new List<string>(["dropAction"]),
dragFactory,
+ userDoc: noviceMode ? undefined as any : doc,
+ hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.userDoc.noviceMode")
}));
if (dragCreatorSet === undefined) {
@@ -532,8 +535,8 @@ export class CurrentUserUtils {
onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
}));
const userDoc = menuBtns[menuBtns.length - 1];
- userDoc.target = doc;
- userDoc.hidden = ComputedField.MakeFunction("self.target.noviceMode");
+ userDoc.userDoc = doc;
+ userDoc.hidden = ComputedField.MakeFunction("self.userDoc.noviceMode");
doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
title: "menuItemPanel",
diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts
new file mode 100644
index 000000000..9ede94e4b
--- /dev/null
+++ b/src/client/util/HypothesisUtils.ts
@@ -0,0 +1,170 @@
+import { StrCast, Cast } from "../../fields/Types";
+import { SearchUtil } from "./SearchUtil";
+import { action, runInAction } from "mobx";
+import { Doc, Opt } from "../../fields/Doc";
+import { DocumentType } from "../documents/DocumentTypes";
+import { Docs } from "../documents/Documents";
+import { SelectionManager } from "./SelectionManager";
+import { WebField } from "../../fields/URLField";
+import { DocumentManager } from "./DocumentManager";
+import { DocumentLinksButton } from "../views/nodes/DocumentLinksButton";
+import { simulateMouseClick, Utils } from "../../Utils";
+import { DocumentView } from "../views/nodes/DocumentView";
+import { Id } from "../../fields/FieldSymbols";
+
+export namespace Hypothesis {
+
+ /**
+ * Retrieve a WebDocument with the given url, prioritizing results that are on screen.
+ * If none exist, create and return a new WebDocument.
+ */
+ export const getSourceWebDoc = async (uri: string) => {
+ const result = await findWebDoc(uri);
+ console.log(result ? "existing doc found" : "existing doc NOT found");
+ return result || Docs.Create.WebDocument(uri, { title: uri, _nativeWidth: 850, _nativeHeight: 962, _width: 400, UseCors: true }); // create and return a new Web doc with given uri if no matching docs are found
+ };
+
+
+ /**
+ * Search for a WebDocument whose url field matches the given uri, return undefined if not found
+ */
+ export const findWebDoc = async (uri: string) => {
+ const currentDoc = SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0].props.Document;
+ if (currentDoc && Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the currently selected doc is the annotation's source, only use Search otherwise
+
+ const results: Doc[] = [];
+ await SearchUtil.Search("web", true).then(action(async (res: SearchUtil.DocSearchResult) => {
+ const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc));
+ const filteredDocs = docs.filter(doc =>
+ doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data
+ );
+ filteredDocs.forEach(doc => {
+ uri === Cast(doc.data, WebField)?.url.href && results.push(doc); // TODO check visited sites history?
+ });
+ }));
+
+ const onScreenResults = results.filter(doc => DocumentManager.Instance.getFirstDocumentView(doc));
+ return onScreenResults.length ? onScreenResults[0] : (results.length ? results[0] : undefined); // prioritize results that are currently on the screen
+ };
+
+ /**
+ * listen for event from Hypothes.is plugin to link an annotation to Dash
+ */
+ export const linkListener = async (e: any) => {
+ const annotationId: string = e.detail.id;
+ const annotationUri: string = StrCast(e.detail.uri).split("#annotations:")[0]; // clean hypothes.is URLs that reference a specific annotation
+ const sourceDoc: Doc = await getSourceWebDoc(annotationUri);
+
+ if (!DocumentLinksButton.StartLink || sourceDoc === DocumentLinksButton.StartLink) { // start new link if there were none already started, or if the old startLink came from the same web document (prevent links to itself)
+ runInAction(() => {
+ DocumentLinksButton.AnnotationId = annotationId;
+ DocumentLinksButton.AnnotationUri = annotationUri;
+ DocumentLinksButton.StartLink = sourceDoc;
+ });
+ } else { // if a link has already been started, complete the link to sourceDoc
+ runInAction(() => {
+ DocumentLinksButton.AnnotationId = annotationId;
+ DocumentLinksButton.AnnotationUri = annotationUri;
+ });
+ const endLinkView = DocumentManager.Instance.getFirstDocumentView(sourceDoc);
+ const rect = document.body.getBoundingClientRect();
+ const x = rect.x + rect.width / 2;
+ const y = 250;
+ DocumentLinksButton.finishLinkClick(x, y, DocumentLinksButton.StartLink, sourceDoc, false, endLinkView);
+ }
+ };
+
+ /**
+ * Send message to Hypothes.is client to edit an annotation to add a Dash hyperlink
+ */
+ export const makeLink = async (title: string, url: string, annotationId: string, annotationSourceDoc: Doc) => {
+ // if the annotation's source webpage isn't currently loaded in Dash, we're not able to access and edit the annotation from the client
+ // so we're loading the webpage and its annotations invisibly in a WebBox in MainView.tsx, until the editing is done
+ !DocumentManager.Instance.getFirstDocumentView(annotationSourceDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = annotationSourceDoc);
+
+ var success = false;
+ const onSuccess = action(() => {
+ console.log("Edit success!!");
+ success = true;
+ clearTimeout(interval);
+ DocumentLinksButton.invisibleWebDoc = undefined;
+ document.removeEventListener("editSuccess", onSuccess);
+ });
+
+ const newHyperlink = `[${title}\n](${url})`;
+ const interval = setInterval(() => // keep trying to edit until annotations have loaded and editing is successful
+ !success && document.dispatchEvent(new CustomEvent<{ newHyperlink: string, id: string }>("addLink", {
+ detail: { newHyperlink: newHyperlink, id: annotationId },
+ bubbles: true
+ })), 300);
+
+ setTimeout(action(() => {
+ if (!success) {
+ clearInterval(interval);
+ DocumentLinksButton.invisibleWebDoc = undefined;
+ }
+ }), 10000); // give up if no success after 10s
+ document.addEventListener("editSuccess", onSuccess);
+ };
+
+ /**
+ * Send message Hypothes.is client request to edit an annotation to find and delete the target Dash hyperlink
+ */
+ export const deleteLink = async (linkDoc: Doc, sourceDoc: Doc, destinationDoc: Doc) => {
+ if (Cast(destinationDoc.data, WebField)?.url.href !== StrCast(linkDoc.annotationUri)) return; // check that the destinationDoc is a WebDocument containing the target annotation
+
+ !DocumentManager.Instance.getFirstDocumentView(destinationDoc) && runInAction(() => DocumentLinksButton.invisibleWebDoc = destinationDoc); // see note in makeLink
+
+ var success = false;
+ const onSuccess = action(() => {
+ console.log("Edit success!");
+ success = true;
+ clearTimeout(interval);
+ DocumentLinksButton.invisibleWebDoc = undefined;
+ document.removeEventListener("editSuccess", onSuccess);
+ });
+
+ const annotationId = StrCast(linkDoc.annotationId);
+ const linkUrl = Utils.prepend("/doc/" + sourceDoc[Id]);
+ const interval = setInterval(() => {// keep trying to edit until annotations have loaded and editing is successful
+ !success && document.dispatchEvent(new CustomEvent<{ targetUrl: string, id: string }>("deleteLink", {
+ detail: { targetUrl: linkUrl, id: annotationId },
+ bubbles: true
+ }));
+ }, 300);
+
+ setTimeout(action(() => {
+ if (!success) {
+ clearInterval(interval);
+ DocumentLinksButton.invisibleWebDoc = undefined;
+ }
+ }), 10000); // give up if no success after 10s
+ document.addEventListener("editSuccess", onSuccess);
+ };
+
+ /**
+ * Send message to Hypothes.is client to scroll to an annotation when it loads
+ */
+ export const scrollToAnnotation = (annotationId: string, target: Doc) => {
+ var success = false;
+ const onSuccess = () => {
+ console.log("Scroll success!!");
+ document.removeEventListener('scrollSuccess', onSuccess);
+ clearInterval(interval);
+ success = true;
+ };
+
+ const interval = setInterval(() => { // keep trying to scroll every 250ms until annotations have loaded and scrolling is successful
+ document.dispatchEvent(new CustomEvent('scrollToAnnotation', {
+ detail: annotationId,
+ bubbles: true
+ }));
+ const targetView: Opt<DocumentView> = DocumentManager.Instance.getFirstDocumentView(target);
+ const position = targetView?.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+ targetView && position && simulateMouseClick(targetView.ContentDiv!, position[0], position[1], position[0], position[1], false);
+ }, 300);
+
+ document.addEventListener('scrollSuccess', onSuccess); // listen for success message from client
+ setTimeout(() => !success && clearInterval(interval), 10000); // give up if no success after 10s
+ };
+} \ No newline at end of file
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 41bce8a1b..ca27cfa3c 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -30,10 +30,13 @@
}
.settings-username {
- font-size: 14px;
+ font-size: 12px;
padding-right: 15px;
color: black;
- margin-top: 10px;
+ margin-top: 4px;
+ /* right: 135; */
+ position: absolute;
+ left: 235;
}
.settings-section {
@@ -217,6 +220,11 @@
cursor: pointer;
}
+ .logout-button {
+ right: 35;
+ position: absolute;
+ }
+
.settings-content {
background: #e4e4e4;
border-radius: 6px;
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 68ed32c0f..8b58880d4 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -2,7 +2,6 @@ import { observable, runInAction, action, computed } from "mobx";
import * as React from "react";
import MainViewModal from "../views/MainViewModal";
import { observer } from "mobx-react";
-import { library } from '@fortawesome/fontawesome-svg-core';
import * as fa from '@fortawesome/free-solid-svg-icons';
import { SelectionManager } from "./SelectionManager";
import "./SettingsManager.scss";
@@ -12,7 +11,6 @@ import { CurrentUserUtils } from "./CurrentUserUtils";
import { Utils, addStyleSheet, addStyleSheetRule, removeStyleSheetRule } from "../../Utils";
import { Doc } from "../../fields/Doc";
import GroupManager from "./GroupManager";
-import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
import { DocServer } from "../DocServer";
import { BoolCast, StrCast, NumCast } from "../../fields/Types";
@@ -22,220 +20,140 @@ const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
-library.add(fa.faTimes);
-
@observer
export default class SettingsManager extends React.Component<{}> {
public static Instance: SettingsManager;
static _settingsStyle = addStyleSheet();
@observable private isOpen = false;
- @observable private dialogueBoxOpacity = 1;
- @observable private overlayOpacity = 0.4;
- @observable private settingsContent = "password";
- @observable private errorText = "";
- @observable private successText = "";
+ @observable private passwordResultText = "";
@observable private playgroundMode = false;
- private curr_password_ref = React.createRef<HTMLInputElement>();
- private new_password_ref = React.createRef<HTMLInputElement>();
- private new_confirm_ref = React.createRef<HTMLInputElement>();
+ @observable private curr_password = "";
+ @observable private new_password = "";
+ @observable private new_confirm = "";
@computed get backgroundColor() { return Doc.UserDoc().defaultColor; }
- public open = action(() => {
- SelectionManager.DeselectAll();
- this.isOpen = true;
- });
-
- public close = action(() => {
- this.isOpen = false;
- });
-
constructor(props: {}) {
super(props);
SettingsManager.Instance = this;
}
- @action
- private dispatchRequest = async () => {
- const curr_pass = this.curr_password_ref.current?.value;
- const new_pass = this.new_password_ref.current?.value;
- const new_confirm = this.new_confirm_ref.current?.value;
-
- if (!(curr_pass && new_pass && new_confirm)) {
- this.changeAlertText("Hey, we're missing some fields!", "");
- return;
- }
+ public close = action(() => this.isOpen = false);
+ public open = action(() => (this.isOpen = true) && SelectionManager.DeselectAll());
- const passwordBundle = {
- curr_pass,
- new_pass,
- new_confirm
- };
-
- const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
- if (error) {
- this.changeAlertText("Uh oh! " + error[0].msg + "...", "");
- return;
+ private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true));
+ private changePassword = async () => {
+ if (!(this.curr_password && this.new_password && this.new_confirm)) {
+ runInAction(() => this.passwordResultText = "Error: Hey, we're missing some fields!");
+ } else {
+ const passwordBundle = { curr_pass: this.curr_password, new_pass: this.new_password, new_confirm: this.new_confirm };
+ const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+ runInAction(() => this.passwordResultText = error ? "Error: " + error[0].msg + "..." : "Password successfully updated!");
}
-
- this.changeAlertText("", "Password successfully updated!");
- }
-
- @action
- private changeAlertText = (errortxt: string, successtxt: string) => {
- this.errorText = errortxt;
- this.successText = successtxt;
- }
-
- @action
- onClick = (event: any) => {
- this.settingsContent = event.currentTarget.value;
- this.errorText = "";
- this.successText = "";
- }
- @action
- noviceToggle = (event: any) => {
- Doc.UserDoc().noviceMode = !Doc.UserDoc().noviceMode;
- }
- @action
- googleAuthorize = (event: any) => {
- GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true);
- }
- @action
- hypothesisAuthorize = (event: any) => {
- HypothesisAuthenticationManager.Instance.fetchAccessToken(true);
}
- @action
- togglePlaygroundMode = () => {
+ @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any)?.value === "Novice");
+ @undoBatch changeFontFamily = action((e: React.ChangeEvent) => Doc.UserDoc().fontFamily = (e.currentTarget as any).value);
+ @undoBatch changeFontSize = action((e: React.ChangeEvent) => Doc.UserDoc().fontSize = (e.currentTarget as any).value);
+ @undoBatch switchColor = action((color: ColorState) => Doc.UserDoc().defaultColor = String(color.hex));
+ @undoBatch
+ playgroundModeToggle = action(() => {
this.playgroundMode = !this.playgroundMode;
- if (this.playgroundMode) DocServer.Control.makeReadOnly();
+ if (this.playgroundMode) {
+ DocServer.Control.makeReadOnly();
+ addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" });
+ }
else DocServer.Control.makeEditable();
+ });
- addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" });
- }
+ @computed get preferencesContent() {
+ const colorBox = <SketchPicker onChange={this.switchColor} color={StrCast(this.backgroundColor)}
+ presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+ '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+ '#FFFFFF', '#f1efeb', 'transparent']} />;
- @action
- changeMode = (e: any) => {
- if (e.currentTarget.value === "Novice") {
- Doc.UserDoc().noviceMode = true;
- } else {
- Doc.UserDoc().noviceMode = false;
- }
- }
+ const colorFlyout = <div className="colorFlyout">
+ <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={colorBox}>
+ <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }} onPointerDown={e => e.stopPropagation()} >
+ <FontAwesomeIcon icon="palette" size="sm" color={StrCast(this.backgroundColor)} />
+ </div>
+ </Flyout>
+ </div>;
- @action
- changeFontFamily = (e: any) => {
- Doc.UserDoc().fontFamily = e.currentTarget.value;
- }
+ const fontFamilies = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
+ const fontSizes = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"];
- @action
- changeFontSize = (e: any) => {
- Doc.UserDoc().fontSize = e.currentTarget.value;
+ return <div className="preferences-content">
+ <div className="preferences-color">
+ <div className="preferences-color-text">Background Color</div>
+ {colorFlyout}
+ </div>
+ <div className="preferences-font">
+ <div className="preferences-font-text">Default Font</div>
+ <select className="font-select" onChange={this.changeFontFamily}>
+ {fontFamilies.map(font => <option key={font} value={font} defaultValue={StrCast(Doc.UserDoc().fontFamily)}> {font} </option>)}
+ </select>
+ <select className="size-select" onChange={this.changeFontSize}>
+ {fontSizes.map(size => <option key={size} value={size} defaultValue={StrCast(Doc.UserDoc().fontSize)}> {size} </option>)}
+ </select>
+ </div>
+ </div>;
}
- @action @undoBatch
- switchColor = (color: ColorState) => {
- const val = String(color.hex);
- Doc.UserDoc().defaultColor = val;
- return true;
+ @action
+ changeVal = (e: React.ChangeEvent, pass: string) => {
+ const value = (e.target as any).value;
+ switch (pass) {
+ case "curr": this.curr_password = value; break;
+ case "new": this.new_password = value; break;
+ case "conf": this.new_confirm = value; break;
+ }
}
- private get settingsInterface() {
-
-
- const passwordContent = <div className="password-content">
+ @computed get passwordContent() {
+ return <div className="password-content">
<div className="password-content-inputs">
- <input className="password-inputs" type="password" placeholder="current password" ref={this.curr_password_ref} />
- <input className="password-inputs" type="password" placeholder="new password" ref={this.new_password_ref} />
- <input className="password-inputs" type="password" placeholder="confirm new password" ref={this.new_confirm_ref} />
+ <input className="password-inputs" type="password" placeholder="current password" onChange={e => this.changeVal(e, "curr")} />
+ <input className="password-inputs" type="password" placeholder="new password" onChange={e => this.changeVal(e, "new")} />
+ <input className="password-inputs" type="password" placeholder="confirm new password" onChange={e => this.changeVal(e, "conf")} />
</div>
<div className="password-content-buttons">
- {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
- {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
- <button className="password-submit" onClick={this.dispatchRequest}>submit</button>
- <a className="password-forgot" style={{ marginLeft: 65, marginTop: -20 }}
- href="/forgotPassword">forgot password?</a>
+ {!this.passwordResultText ? (null) : <div className={`${this.passwordResultText.startsWith("Error") ? "error" : "success"}-text`}>{this.passwordResultText}</div>}
+ <button className="password-submit" onClick={this.changePassword}>submit</button>
+ <a className="password-forgot" href="/forgotPassword">forgot password?</a>
</div>
</div>;
+ }
- const modesContent = <div className="modes-content">
- <select className="modes-select"
- onChange={e => this.changeMode(e)}>
- <option key={"Novice"} value={"Novice"} selected={BoolCast(Doc.UserDoc().noviceMode)}>
- Novice
- </option>
- <option key={"Developer"} value={"Developer"} selected={!BoolCast(Doc.UserDoc().noviceMode)}>
- Developer
- </option>
+ @computed get modesContent() {
+ return <div className="modes-content">
+ <select className="modes-select" onChange={this.selectUserMode} defaultValue={Doc.UserDoc().noviceMode ? "Novice" : "Developer"}>
+ <option key={"Novice"} value={"Novice"}> Novice </option>
+ <option key={"Developer"} value={"Developer"}> Developer</option>
</select>
<div className="modes-playground">
- <input className="playground-check" type="checkbox"
- checked={this.playgroundMode}
- onChange={undoBatch(action(() => this.togglePlaygroundMode()))}
- /><div className="playground-text">Playground Mode</div>
+ <input className="playground-check" type="checkbox" checked={this.playgroundMode} onChange={this.playgroundModeToggle} />
+ <div className="playground-text">Playground Mode</div>
</div>
</div>;
+ }
- const accountsContent = <div className="accounts-content">
- <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>
- </div>;
-
- const colorBox = <SketchPicker onChange={this.switchColor}
- presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
- '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
- '#FFFFFF', '#f1efeb', 'transparent']}
- color={StrCast(this.backgroundColor)} />;
-
- const colorFlyout = <div className="colorFlyout">
- <Flyout anchorPoint={anchorPoints.LEFT_TOP}
- content={colorBox}>
- <div>
- <div className="colorFlyout-button" style={{ backgroundColor: StrCast(this.backgroundColor) }}
- onPointerDown={e => e.stopPropagation()} >
- <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: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"];
-
- const preferencesContent = <div className="preferences-content">
- <div className="preferences-color">
- <div className="preferences-color-text">Background Color</div> {colorFlyout}
- </div>
- <div className="preferences-font">
- <div className="preferences-font-text">Default Font</div>
- <select className="font-select"
- 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.changeFontSize(e)}>
- {fontSizes.map((size) => {
- return <option key={size} value={size} selected={StrCast(Doc.UserDoc().fontSize) === size}>
- {size}
- </option>;
- })}
- </select>
- </div>
+ @computed get accountsContent() {
+ return <div className="accounts-content">
+ <button onClick={this.googleAuthorize} value="data">Link to Google</button>
+ <button onClick={GroupManager.Instance?.open}>Manage groups</button>
</div>;
+ }
- return (<div className="settings-interface">
+ private get settingsInterface() {
+ const pairs = [{ title: "Password", ele: this.passwordContent }, { title: "Modes", ele: this.modesContent },
+ { title: "Accounts", ele: this.accountsContent }, { title: "Preferences", ele: this.preferencesContent }];
+ return <div className="settings-interface">
<div className="settings-top">
<div className="settings-title">Settings</div>
<div className="settings-username">{Doc.CurrentUserEmail}</div>
- <button onClick={() => window.location.assign(Utils.prepend("/logout"))}
- style={{ right: 35, position: "absolute" }} >
+ <button className="logout-button" onClick={() => window.location.assign(Utils.prepend("/logout"))} >
{CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
</button>
<div className="close-button" onClick={this.close}>
@@ -243,36 +161,21 @@ export default class SettingsManager extends React.Component<{}> {
</div>
</div>
<div className="settings-content">
- <div className="settings-section">
- <div className="settings-section-title">Password</div>
- <div className="settings-section-context">{passwordContent}</div>
- </div>
- <div className="settings-section">
- <div className="settings-section-title">Modes</div>
- <div className="settings-section-context">{modesContent}</div>
- </div>
- <div className="settings-section">
- <div className="settings-section-title">Accounts</div>
- <div className="settings-section-context">{accountsContent}</div>
- </div>
- <div className="settings-section" style={{ paddingBottom: 4 }}>
- <div className="settings-section-title">Preferences</div>
- <div className="settings-section-context">{preferencesContent}</div>
+ {pairs.map(pair => <div className="settings-section" key={pair.title}>
+ <div className="settings-section-title">{pair.title}</div>
+ <div className="settings-section-context">{pair.ele}</div>
</div>
+ )}
</div>
- </div>);
+ </div>;
}
render() {
- return (
- <MainViewModal
- contents={this.settingsInterface}
- isDisplayed={this.isOpen}
- interactive={true}
- closeOnExternalClick={this.close}
- dialogueBoxStyle={{ width: "600px", height: "340px" }}
- />
- );
+ return <MainViewModal
+ contents={this.settingsInterface}
+ isDisplayed={this.isOpen}
+ interactive={true}
+ closeOnExternalClick={this.close}
+ dialogueBoxStyle={{ width: "600px", height: "340px" }} />;
}
-
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 02:03:45 +0000