From ba8549220295d03fb7eb7d7d31c90af72b30b1a6 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Thu, 30 Jul 2020 10:38:57 -0700 Subject: remove unnecessary authentication/database stuff --- src/client/util/SettingsManager.tsx | 6 ------ 1 file changed, 6 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 90d59aa51..a9c2d5e15 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -12,7 +12,6 @@ import { CurrentUserUtils } from "./CurrentUserUtils"; import { Utils } from "../../Utils"; import { Doc } from "../../fields/Doc"; import GroupManager from "./GroupManager"; -import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager"; import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager"; import { togglePlaygroundMode } from "../../fields/util"; @@ -92,10 +91,6 @@ export default class SettingsManager extends React.Component<{}> { googleAuthorize = (event: any) => { GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true); } - @action - hypothesisAuthorize = (event: any) => { - HypothesisAuthenticationManager.Instance.fetchAccessToken(true); - } @action togglePlaygroundMode = () => { @@ -118,7 +113,6 @@ export default class SettingsManager extends React.Component<{}> { - + + + + + + -
-
- - - - - - - + {this.settingsContent === "password" ? +
+ + + + {this.errorText ?
{this.errorText}
: undefined} + {this.successText ?
{this.successText}
: undefined} + + forgot password? + +
+ : undefined} + {this.settingsContent === "data" ? +
+

WARNING:
+ THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.

+ +
+ : undefined} +
+ +
; + + + const passwordContent =
+
+ + + +
+
+ {this.errorText ?
{this.errorText}
: undefined} + {this.successText ?
{this.successText}
: undefined} + + forgot password? +
+
; + + const modesContent =
+ +
+ this.togglePlaygroundMode()))} + />
Playground Mode
+
+
; + + const accountsContent =
+ + + +
; + + const colorBox = ; + + const colorFlyout =
+ +
+
e.stopPropagation()} > +
- {this.settingsContent === "password" ? -
- - - - {this.errorText ?
{this.errorText}
: undefined} - {this.successText ?
{this.successText}
: undefined} - - forgot password? - -
- : undefined} - {this.settingsContent === "data" ? -
-

WARNING:
- THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.

- -
- : undefined}
+ +
; + const preferencesContent =
+
+
Background Color
{colorFlyout}
- ); +
+
Default Font
+ + +
+
; + + return (
+
+
Settings
+ +
+ +
+
+
+
+
Password
+
{passwordContent}
+
+
+
Modes
+
{modesContent}
+
+
+
Accounts
+
{accountsContent}
+
+
+
Preferences
+
{preferencesContent}
+
+
+
); } render() { @@ -160,6 +302,8 @@ export default class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} + width={600} + height={340} /> ); } diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index 66ea2dbf8..c7b752b60 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -10,6 +10,8 @@ export interface MainViewOverlayProps { overlayStyle?: React.CSSProperties; dialogueBoxDisplayedOpacity?: number; overlayDisplayedOpacity?: number; + width?: number; + height?: number; closeOnExternalClick?: () => void; // the close method of a MainViewModal, triggered if there is a click on the overlay (closing the modal) } @@ -21,13 +23,17 @@ export default class MainViewModal extends React.Component const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1; const overlayOpacity = p.overlayDisplayedOpacity || 0.4; return !p.isDisplayed ? (null) : ( -
+
{p.contents}
Date: Tue, 4 Aug 2020 22:53:44 -0500 Subject: finishing touches on settings --- src/client/util/CurrentUserUtils.ts | 1 + src/client/util/SettingsManager.scss | 71 +++++++------------------- src/client/util/SettingsManager.tsx | 98 ++++++++++++------------------------ src/client/views/MainView.tsx | 4 ++ 4 files changed, 54 insertions(+), 120 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') 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(); - @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 =
-
-

Settings

-
- -
-
-
-
- - - - - - - -
- {this.settingsContent === "password" ? -
- - - - {this.errorText ?
{this.errorText}
: undefined} - {this.successText ?
{this.successText}
: undefined} - - forgot password? - -
- : undefined} - {this.settingsContent === "data" ? -
-

WARNING:
- THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.

- -
- : undefined} -
- -
; - const passwordContent =
@@ -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 =
-
e.stopPropagation()} > - +
; + 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 =
Background Color
{colorFlyout} @@ -241,25 +212,20 @@ export default class SettingsManager extends React.Component<{}> {
Default Font
; 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) => { 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"; -- cgit v1.2.3-70-g09d2 From 0d6a6991ae39406f80530bcaaa6e5b328bd64b67 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 5 Aug 2020 12:59:07 -0500 Subject: UI changes and bug fixes found with UV --- src/client/util/CurrentUserUtils.ts | 3 ++- src/client/util/SettingsManager.scss | 20 ++++++++++++---- src/client/util/SettingsManager.tsx | 13 +++++----- src/client/views/MainView.tsx | 7 ++++++ src/client/views/MainViewModal.tsx | 6 +---- src/client/views/PropertiesButtons.tsx | 28 +++++++++++++++++----- src/client/views/collections/CollectionMenu.tsx | 9 +++---- .../collectionFreeForm/PropertiesView.tsx | 3 +-- 8 files changed, 60 insertions(+), 29 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 95e02b5fd..630952ccf 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -8,7 +8,7 @@ import { Doc, DocListCast, DocListCastAsync, DataSym } from "../../fields/Doc"; import { List } from "../../fields/List"; import { listSpec } from "../../fields/Schema"; import { ScriptField, ComputedField } from "../../fields/ScriptField"; -import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types"; +import { Cast, PromiseValue, StrCast, NumCast, BoolCast } from "../../fields/Types"; import { nullAudio } from "../../fields/URLField"; import { DragManager } from "./DragManager"; import { Scripting } from "./Scripting"; @@ -891,6 +891,7 @@ export class CurrentUserUtils { doc.fontColor = StrCast(doc.fontColor, "black"); doc.fontHighlight = StrCast(doc.fontHighlight, ""); doc.defaultColor = StrCast(doc.defaultColor, "white"); + doc.noviceMode = BoolCast(doc.noviceMode, true); 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 2a4a4241c..41bce8a1b 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -25,8 +25,15 @@ .settings-title { font-size: 25px; font-weight: bold; + padding-right: 10px; + color: black; +} + +.settings-username { + font-size: 14px; padding-right: 15px; color: black; + margin-top: 10px; } .settings-section { @@ -94,7 +101,7 @@ color: black; border-radius: 5px; - &:hover{ + &:hover { cursor: pointer; } } @@ -104,7 +111,8 @@ .playground-check { margin-right: 5px; - &:hover{ + + &:hover { cursor: pointer; } } @@ -119,7 +127,7 @@ margin-top: 2px; margin-right: 25px; - &:hover{ + &:hover { cursor: pointer; } @@ -162,7 +170,8 @@ font-size: 9; margin-right: 6; border-radius: 5px; - &:hover{ + + &:hover { cursor: pointer; } } @@ -172,7 +181,8 @@ color: black; font-size: 9; border-radius: 5px; - &:hover{ + + &:hover { cursor: pointer; } } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index a12cc2cb6..fce28a466 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -147,9 +147,9 @@ export default class SettingsManager extends React.Component<{}> { const passwordContent =
- - - + + +
{this.errorText ?
{this.errorText}
: undefined} @@ -233,7 +233,9 @@ export default class SettingsManager extends React.Component<{}> { return (
Settings
-
@@ -268,8 +270,7 @@ export default class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - width={600} - height={340} + dialogueBoxStyle={{ width: "600px", height: "340px" }} /> ); } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index bbf36a04f..4bbcddd79 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -315,6 +315,12 @@ export class MainView extends React.Component { if (this.panelContent === doc?.title) return "lightgrey"; if (doc?.type === DocumentType.COL) { + if (doc.title === "Basic Item Creators" || doc.title === "sidebar-tools" + || doc.title === "sidebar-recentlyClosed" || doc.title === "sidebar-catalog" + || doc.title === "Mobile Uploads" || doc.title === "COLLECTION_PROTO" + || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") { + return "lightgrey"; + } return StrCast(Doc.UserDoc().defaultColor); } if (this.darkScheme) { @@ -450,6 +456,7 @@ export class MainView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} relative={true} + forcedBackgroundColor={() => "lightgrey"} />
{this.docButtons}
; diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index c7b752b60..19387f619 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -10,8 +10,6 @@ export interface MainViewOverlayProps { overlayStyle?: React.CSSProperties; dialogueBoxDisplayedOpacity?: number; overlayDisplayedOpacity?: number; - width?: number; - height?: number; closeOnExternalClick?: () => void; // the close method of a MainViewModal, triggered if there is a click on the overlay (closing the modal) } @@ -31,9 +29,7 @@ export default class MainViewModal extends React.Component style={{ borderColor: "black", ...(p.dialogueBoxStyle || {}), - opacity: p.isDisplayed ? dialogueOpacity : 0, - width: this.props.width ? this.props.width : "auto", - height: this.props.height ? this.props.height : "auto" + opacity: p.isDisplayed ? dialogueOpacity : 0 }} >{p.contents}
{ } }}> { switch (this.openHover) { @@ -207,7 +208,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { })()} />
-
Fetch
+
Fetch
; } @@ -226,7 +227,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { />
-
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
+
{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}
; } @@ -339,11 +344,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { "Unlock Position" : "Lock Position"}
} placement="top">
{}
-
Position
+
Position
; } @@ -535,13 +545,16 @@ export class PropertiesButtons extends React.Component<{}, {}> { title={<>
{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}
} placement="top">
{}
-
clusters
+
clusters
; } @@ -569,7 +582,10 @@ export class PropertiesButtons extends React.Component<{}, {}> { color={this.selectedDoc?._fitToBox ? "black" : "white"} icon="expand" size="lg" />}
-
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
+
{this.selectedDoc?._fitToBox ? "unfit" : "fit"}
; } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 511735f2d..6eed4eba1 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -673,15 +673,16 @@ export class CollectionStackingViewChrome extends React.Component key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 || - (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); - return keys.filter(key => key.toLowerCase().startsWith(value)); + (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_")); + return keys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1); } else { const keys = new Set(); docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 || - key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL")); - return noviceKeys.filter(key => key.toLowerCase().startsWith(value)); + key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && + key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_")); + return noviceKeys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1); } } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index a6b1849b1..7f21c63da 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -161,7 +161,7 @@ export class PropertiesView extends React.Component { doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); const rows: JSX.Element[] = []; for (const key of Object.keys(ids).slice().sort()) { - if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL") + if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL" && key !== "UseCors") || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) { @@ -354,7 +354,6 @@ export class PropertiesView extends React.Component { />; } - @undoBatch @action toggleCheckbox = () => { this.layoutFields = !this.layoutFields; -- cgit v1.2.3-70-g09d2 From 38b33d2891a5e07de450015bcf4d34ae334c292d Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 5 Aug 2020 16:15:48 -0400 Subject: fixed display of fontsizes in richtexts dropdownmenu --- src/client/util/SettingsManager.tsx | 6 +++--- src/client/views/nodes/formattedText/RichTextMenu.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index fce28a466..68ed32c0f 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -203,7 +203,7 @@ export default class SettingsManager extends React.Component<{}> {
; 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 fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"]; const preferencesContent =
@@ -222,8 +222,8 @@ export default class SettingsManager extends React.Component<{}> { diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 6e268be48..f040cd26d 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -274,7 +274,7 @@ export default class RichTextMenu extends AntimodeMenu { } !activeFamilies.length && (activeFamilies.push(StrCast(this.TextView.layoutDoc._fontFamily, StrCast(Doc.UserDoc().fontFamily)))); !activeSizes.length && (activeSizes.push(StrCast(this.TextView.layoutDoc._fontSize, StrCast(Doc.UserDoc().fontSize)))); - !activeColors.length && (activeSizes.push(StrCast(this.TextView.layoutDoc.color, StrCast(Doc.UserDoc().fontColor)))); + !activeColors.length && (activeColors.push(StrCast(this.TextView.layoutDoc.color, StrCast(Doc.UserDoc().fontColor)))); } !activeFamilies.length && (activeFamilies.push(StrCast(Doc.UserDoc().fontFamily))); !activeSizes.length && (activeSizes.push(StrCast(Doc.UserDoc().fontSize))); -- cgit v1.2.3-70-g09d2 From ea855ecda2c3df9e5d0881d43e2fdbceb9dccafc Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 5 Aug 2020 22:25:24 -0500 Subject: finishing touches on settings --- src/client/util/SettingsManager.scss | 30 +++++++++++++- src/client/util/SettingsManager.tsx | 78 +++++++++++++++++++++++++++--------- 2 files changed, 87 insertions(+), 21 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 41bce8a1b..2d0fb4e95 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -30,10 +30,36 @@ } .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; +} + +.grey-submit { + width: 71.1875px; + align-self: center; + background: #75787c; + outline: none; + border-radius: 5px; + border: 0px; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 10px; + transition: transform 0.2s; + margin: 2px; + margin-left: 85px; + height: 32px; + + &:hover { + cursor: not-allowed; + } + } .settings-section { diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 68ed32c0f..155c7f60c 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -39,6 +39,9 @@ export default class SettingsManager extends React.Component<{}> { private new_password_ref = React.createRef(); private new_confirm_ref = React.createRef(); + @observable private curr_password: string = ""; + @observable private new_password: string = ""; + @observable private new_confirm: string = ""; @computed get backgroundColor() { return Doc.UserDoc().defaultColor; } @@ -142,25 +145,44 @@ export default class SettingsManager extends React.Component<{}> { return true; } - private get settingsInterface() { + @computed get allowSubmit() { + return this.curr_password.length > 3 && + this.new_password.length > 3 && + this.new_confirm.length > 3 && this.new_confirm === this.new_password && + this.new_password !== this.curr_password ? true : false; + } + @action + changeVal = (e: any, pass: string) => { + if (pass === "curr") { + this.curr_password = e.target.value; + } else if (pass === "new") { + this.new_password = e.target.value; + } else if (pass === "conf") { + this.new_confirm = e.target.value; + } + } - const passwordContent =
+ @computed get passwordContent() { + return
- - - + this.changeVal(e, "curr")} ref={this.curr_password_ref} /> + this.changeVal(e, "new")} ref={this.new_password_ref} /> + this.changeVal(e, "conf")} ref={this.new_confirm_ref} />
{this.errorText ?
{this.errorText}
: undefined} {this.successText ?
{this.successText}
: undefined} - + {this.allowSubmit ? :
submit
} forgot password?
; + } - const modesContent =
+ @computed get modesContent() { + return
-
+
;
; + return preferencesContent; + } + + + @computed private get settingsInterface() { + return (
Settings
-
{Doc.CurrentUserEmail}
+
+
Signed in as:
+
{Doc.CurrentUserEmail}
+
@@ -245,19 +285,19 @@ export default class SettingsManager extends React.Component<{}> {
Password
-
{passwordContent}
+
{this.passwordContent}
Modes
-
{modesContent}
+
{this.modesContent}
Accounts
-
{accountsContent}
+
{this.accountsContent}
Preferences
-
{preferencesContent}
+
{this.preferencesContent}
); -- cgit v1.2.3-70-g09d2 From ecadf91fa662a45b7e0c2302f9423a2032589909 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 6 Aug 2020 11:21:33 -0500 Subject: ink fix --- src/client/util/SettingsManager.tsx | 2 +- .../collectionFreeForm/PropertiesView.tsx | 37 ++++++++++++++-------- 2 files changed, 24 insertions(+), 15 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 155c7f60c..8124b7676 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -257,7 +257,7 @@ export default class SettingsManager extends React.Component<{}> { ; })} -
; +
; return preferencesContent; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 3b449d941..8aeb80ace 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -83,6 +83,8 @@ export class PropertiesView extends React.Component { @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } + @observable scrolling: boolean = true; + @action rtfWidth = () => { if (this.selectedDoc) { @@ -598,21 +600,28 @@ export class PropertiesView extends React.Component { set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); } colorButton(value: string, type: string, setter: () => {}) { - return
- -
setter()))}> -
- {value === "" || value === "transparent" ?

☒

: ""} -
- + // return
this.changeScrolling(false)} + // onPointerLeave={e => this.changeScrolling(true)}> + // + return
setter()))}> +
+ {value === "" || value === "transparent" ?

☒

: ""}
; + // + //
; } + @action + changeScrolling = (scroll: boolean) => { + console.log(scroll); + this.scrolling = scroll; + } + @undoBatch @action switchStk = (color: ColorState) => { @@ -654,8 +663,8 @@ export class PropertiesView extends React.Component {
{this.lineButton}
- {/* {this._fillBtn ? this.fillPicker : ""} - {this._lineBtn ? this.linePicker : ""} */} + {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""}
; } @@ -771,7 +780,7 @@ export class PropertiesView extends React.Component { if (this.selectedDoc && !this.isPres) { return
Properties -- cgit v1.2.3-70-g09d2 From 59a03f711c48aa51a53759dcece88cd6d6204010 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 6 Aug 2020 16:29:46 -0500 Subject: trying novice tools --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 144 ++++++++++++++++++++++++--------- src/client/util/SettingsManager.tsx | 9 ++- src/client/views/nodes/FontIconBox.tsx | 8 +- 4 files changed, 117 insertions(+), 45 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 7719b3eef..3b5f10050 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -201,6 +201,7 @@ export interface DocumentOptions { linearViewIsExpanded?: boolean; // is linear view expanded border?: string; //for searchbox hovercolor?: string; + developerFeature?: boolean; } class EmptyBox { diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 1f140e145..822979e32 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -387,7 +387,8 @@ 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, hidden?: any, + developerFeature?: boolean }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List(), @@ -426,30 +427,90 @@ export class CurrentUserUtils { if (doc.activeMobileMenu === undefined) { 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 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 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 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 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 })' }, - { toolTip: "Drag a mobile view", title: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc }, - // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, - // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, - // { 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: "Toggle a Calculator REPL", title: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, - ]; + + // { title: "Drag an instance of the device collection", title: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, + // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, + // { 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 }, + // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, + // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, + + const collection = { + toolTip: "Drag a collection", title: "Col", + icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc + }; + const web = { + 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 + }; + const cat = { + 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 + }; + const compare = { + 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 + } + const screen = { + 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, + developerFeature: true, + }; + const audio = { + 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 + }; + const button = { + toolTip: "Drag a button", title: "Button", + icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', + drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc + }; + const pres = { + toolTip: "Drag a presentation view", title: "Pres", icon: "tv", + click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', + drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, + dragFactory: doc.emptyPresentation as Doc + }; + const search = { + 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, developerFeature: true, + }; + const script = { + 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, + developerFeature: true, + }; + const mobile = { + toolTip: "Drag a mobile view", title: "Phone", + icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', + drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc, + developerFeature: true, + }; + const preview = { + 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, + developerFeature: true, + }; + const repl = { + toolTip: "Toggle a Calculator REPL", title: "repl", + icon: "calculator", + click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })', + developerFeature: true, + }; + + // novice : [collection, web, compare, audio, button, pres] + return [collection, web, compare, screen, audio, button, pres, search, script, preview, repl]; } @@ -465,21 +526,24 @@ 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({ - _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, - icon, - title, - toolTip, - ignoreClick, - dropAction: "copy", - onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined, - onClick: click ? ScriptField.MakeScript(click) : undefined, - ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined, - activeInkPen, - backgroundColor, - removeDropProperties: new List(["dropAction"]), - dragFactory, - })); + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, + click, ischecked, activeInkPen, backgroundColor, dragFactory, + developerFeature }) => Docs.Create.FontIconDocument({ + _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, + icon, + title, + toolTip, + ignoreClick, + dropAction: "copy", + onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined, + onClick: click ? ScriptField.MakeScript(click) : undefined, + ischecked: ischecked ? ComputedField.MakeFunction(ischecked) : undefined, + activeInkPen, + backgroundColor, + removeDropProperties: new List(["dropAction"]), + dragFactory, + developerFeature, + })); if (dragCreatorSet === undefined) { doc.myItemCreators = new PrefetchProxy(Docs.Create.MasonryDocument(creatorBtns, { diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 8124b7676..1a419b7c6 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -203,9 +203,12 @@ export default class SettingsManager extends React.Component<{}> { @computed get accountsContent() { return
- - - + + {/* */} +
; } diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index c0eb78d98..71832b0dc 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -64,14 +64,18 @@ export class FontIconBox extends DocComponent( const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc))); const shape = StrCast(this.layoutDoc.iconShape, "round"); const button = ; - return !this.layoutDoc.toolTip ? button : + return !this.layoutDoc.toolTip || (this.layoutDoc.developerFeature && Doc.UserDoc().noviceMode) ? button : {StrCast(this.layoutDoc.toolTip)}
}> {button} ; -- cgit v1.2.3-70-g09d2 From d6bbd8bd52231ffaea6d0f01c9e1447087e17914 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 22:48:37 -0400 Subject: code cleanup --- src/client/documents/Documents.ts | 1 + src/client/util/SettingsManager.scss | 5 + src/client/util/SettingsManager.tsx | 281 +++++++-------------- .../collectionFreeForm/PropertiesView.tsx | 2 +- 4 files changed, 97 insertions(+), 192 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index a06b4a581..f902da0a2 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -94,6 +94,7 @@ export interface DocumentOptions { title?: string; label?: string; hidden?: boolean; + userDoc?: Doc; // the userDocument toolTip?: string; // tooltip to display on hover style?: string; page?: number; diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 41bce8a1b..3bae095d0 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -217,6 +217,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..a6c5e518e 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"; @@ -22,220 +21,135 @@ 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 playgroundMode = false; private curr_password_ref = React.createRef(); private new_password_ref = React.createRef(); private new_confirm_ref = React.createRef(); - + @observable private isOpen = false; + @observable private passwordResultText = ""; + @observable private playgroundMode = false; @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 () => { + public close = action(() => this.isOpen = false); + public open = action(() => (this.isOpen = true) && SelectionManager.DeselectAll()); + + private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)); + private hypothesisAuthorize = action(() => HypothesisAuthenticationManager.Instance.fetchAccessToken(true)); + private changePassword = 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; - } - - 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; + runInAction(() => this.passwordResultText = "Error: Hey, we're missing some fields!"); + } else { + const passwordBundle = { curr_pass, new_pass, 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" }); - } - - @action - changeMode = (e: any) => { - if (e.currentTarget.value === "Novice") { - Doc.UserDoc().noviceMode = true; - } else { - Doc.UserDoc().noviceMode = false; - } - } + @computed get preferencesContent() { + const colorBox = ; - @action - changeFontFamily = (e: any) => { - Doc.UserDoc().fontFamily = e.currentTarget.value; - } + const colorFlyout =
+ +
e.stopPropagation()} > + +
+ +
; - @action - changeFontSize = (e: any) => { - Doc.UserDoc().fontSize = 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 @undoBatch - switchColor = (color: ColorState) => { - const val = String(color.hex); - Doc.UserDoc().defaultColor = val; - return true; + return
+
+
Background Color
+ {colorFlyout} +
+
+
Default Font
+ + +
+
; } - private get settingsInterface() { - - - const passwordContent =
+ @computed get passwordContent() { + return
- {this.errorText ?
{this.errorText}
: undefined} - {this.successText ?
{this.successText}
: undefined} - - forgot password? + {!this.passwordResultText ??
{this.passwordResultText}
} + + forgot password?
; + } - const modesContent =
- + +
- this.togglePlaygroundMode()))} - />
Playground Mode
+ +
Playground Mode
; + } - const accountsContent =
- - - -
; - - const colorBox = ; - - const colorFlyout =
- -
-
e.stopPropagation()} > - -
-
- -
; - - 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 =
-
-
Background Color
{colorFlyout} -
-
-
Default Font
- - -
+ @computed get accountsContent() { + return
+ + +
; + } - return (
+ 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
Settings
{Doc.CurrentUserEmail}
-
@@ -243,36 +157,21 @@ export default class SettingsManager extends React.Component<{}> {
-
-
Password
-
{passwordContent}
-
-
-
Modes
-
{modesContent}
-
-
-
Accounts
-
{accountsContent}
-
-
-
Preferences
-
{preferencesContent}
+ {pairs.map(pair =>
+
{pair.title}
+
{pair.ele}
+ )}
-
); +
; } render() { - return ( - - ); + return ; } - } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 15900aa33..baa32e59b 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -248,7 +248,7 @@ export class PropertiesView extends React.Component { } @observable transform: Transform = Transform.Identity(); - getTransform = () => { return this.transform; } + getTransform = () => this.transform; propertiesDocViewRef = (ref: HTMLDivElement) => { const observer = new _global.ResizeObserver(action((entries: any) => { const cliRect = ref.getBoundingClientRect(); -- cgit v1.2.3-70-g09d2 From 3dab659503e98fe75a9c0671057771ff666d7e10 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 10 Aug 2020 11:16:02 +0530 Subject: default acl private setting created + bugfix --- src/client/documents/Documents.ts | 2 ++ src/client/util/SettingsManager.scss | 16 ++++++++++++---- src/client/util/SettingsManager.tsx | 6 +++++- src/client/views/DocComponent.tsx | 3 ++- src/client/views/collections/CollectionView.tsx | 2 +- src/fields/Doc.ts | 2 ++ 6 files changed, 24 insertions(+), 7 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 7b11cf0b7..a6a697574 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -577,6 +577,8 @@ export namespace Docs { viewDoc.author = Doc.CurrentUserEmail; viewDoc.type !== DocumentType.LINK && DocUtils.MakeLinkToActiveAudio(viewDoc); + if (Doc.UserDoc()?.defaultAclPrivate) viewDoc["ACL-Public"] = dataDoc["ACL-Public"] = "Not Shared"; + return Doc.assign(viewDoc, delegateProps, true); } diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index ca27cfa3c..01dda0aca 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -99,8 +99,8 @@ display: flex; .modes-select { - width: 170px; - margin-right: 65px; + // width: 170px; + margin-right: 10px; color: black; border-radius: 5px; @@ -109,10 +109,12 @@ } } - .modes-playground { + .modes-playground, + .default-acl { display: flex; - .playground-check { + .playground-check, + .acl-check { margin-right: 5px; &:hover { @@ -122,7 +124,13 @@ .playground-text { color: black; + margin-right: 10px; } + + .acl-text { + color: black; + } + } } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 8b58880d4..513cece40 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -40,7 +40,7 @@ export default class SettingsManager extends React.Component<{}> { } public close = action(() => this.isOpen = false); - public open = action(() => (this.isOpen = true) && SelectionManager.DeselectAll()); + public open = action(() => this.isOpen = true); private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)); private changePassword = async () => { @@ -136,6 +136,10 @@ export default class SettingsManager extends React.Component<{}> {
Playground Mode
+
+ Doc.UserDoc().defaultAclPrivate = !Doc.UserDoc().defaultAclPrivate)} /> +
Default access private
+
; } diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 831c246d1..eea133ed9 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -158,7 +158,8 @@ export function ViewBoxAnnotatableComponent

{ for (const [key, value] of Object.entries(this.props.Document[AclSym])) { - distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true); + if (d.author === key.substring(4).replace("_", ".") && !d.aliasOf) distributeAcls(key, SharingPermissions.Admin, d, true); + else distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true); } }); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 837ae7e86..0feec3fbd 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -151,7 +151,7 @@ export class CollectionView extends Touchable { for (const [key, value] of Object.entries(this.props.Document[AclSym])) { - if (d.author === Doc.CurrentUserEmail && !d.aliasOf) distributeAcls(key, SharingPermissions.Admin, d, true); + if (d.author === key.substring(4).replace("_", ".") && !d.aliasOf) distributeAcls(key, SharingPermissions.Admin, d, true); else distributeAcls(key, this.AclMap.get(value) as SharingPermissions, d, true); } }); diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 6bfe91378..b535fea5a 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -770,6 +770,7 @@ export namespace Doc { } }); copy.author = Doc.CurrentUserEmail; + Doc.UserDoc().defaultAclPrivate && (copy["ACL-Public"] = "Not Shared"); return copy; } @@ -794,6 +795,7 @@ export namespace Doc { const applied = ApplyTemplateTo(templateDoc, target, targetKey, templateDoc.title + "(..." + _applyCount++ + ")"); target.layoutKey = targetKey; applied && (Doc.GetProto(applied).type = templateDoc.type); + Doc.UserDoc().defaultAclPrivate && (applied["ACL-Public"] = "Not Shared"); return applied; } return undefined; -- cgit v1.2.3-70-g09d2 From 03ae3477dac354eff9178dac701ee40e394434c9 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 10 Aug 2020 10:37:07 -0400 Subject: fixed issues with presentationBox grabbing all keyboard events and preventing title edits among others. fixed runtime errors. fixed groupManager to open again. --- src/client/util/SettingsManager.tsx | 2 +- src/client/views/GlobalKeyHandler.ts | 4 +++- .../views/collections/CollectionDockingView.tsx | 12 +++++++---- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 12 ++++------- src/client/views/nodes/PresBox.tsx | 24 ++++++++++++++++++---- 5 files changed, 36 insertions(+), 18 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 513cece40..e3b91925a 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -146,7 +146,7 @@ export default class SettingsManager extends React.Component<{}> { @computed get accountsContent() { return

- +
; } diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 0ea02e3cb..182f6397c 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -108,7 +108,9 @@ export default class KeyManager { GoogleAuthenticationManager.Instance.cancel(); SharingManager.Instance.close(); GroupManager.Instance.close(); - CollectionFreeFormViewChrome.Instance.clearKeep(); + CollectionFreeFormViewChrome.Instance?.clearKeep(); + window.getSelection()?.empty(); + document.body.focus(); break; case "delete": case "backspace": diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 7e096fa37..0c93b4e63 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -513,7 +513,11 @@ export class CollectionDockingView extends React.Component tab.titleElement[0].focus(); + tab.titleElement[0].onclick = (e: any) => { + if (Date.now() - tab.titleElement[0].lastClick < 1000) tab.titleElement[0].select(); + tab.titleElement[0].lastClick = Date.now(); + tab.titleElement[0].focus(); + } tab.titleElement[0].onchange = (e: any) => { tab.titleElement[0].size = e.currentTarget.value.length + 1; Doc.GetProto(doc).title = e.currentTarget.value, true; @@ -691,8 +695,8 @@ export class DockedFrameRenderer extends React.Component { return (this.props as any).glContainer.parent.parent; } get _tab(): any { - const tab = (this.props as any).glContainer.tab.element[0] as HTMLElement; - return tab.getElementsByClassName("lm_title")?.[0]; + const tab = (this.props as any).glContainer.tab?.element[0] as HTMLElement; + return tab?.getElementsByClassName("lm_title")?.[0]; } constructor(props: any) { super(props); @@ -757,7 +761,7 @@ export class DockedFrameRenderer extends React.Component { this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }), (data) => { const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document)); - this._tab.style.backgroundColor = selected ? data.color : ""; + this._tab && (this._tab.style.backgroundColor = selected ? data.color : ""); } ); } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index d27ca7c3a..f1df7998b 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -25,34 +25,30 @@ export default class MarqueeOptionsMenu extends AntimodeMenu { render() { const buttons = [ -
Create a Collection
} placement="bottom"> +
Create a Collection
} placement="bottom"> , -
Summarize Documents
} placement="bottom"> +
Summarize Documents
} placement="bottom"> , -
Delete Documents
} placement="bottom"> +
Delete Documents
} placement="bottom"> , -
Change to Text
} placement="bottom"> +
Change to Text
} placement="bottom"> diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index b7af4683e..849fc4076 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -83,6 +83,7 @@ export class PresBox extends ViewBoxBaseComponent } @computed get isPres(): boolean { if (this.selectedDoc?.type === DocumentType.PRES) { + document.removeEventListener("keydown", this.keyEvents, true); document.addEventListener("keydown", this.keyEvents, true); return true; } else { @@ -91,6 +92,9 @@ export class PresBox extends ViewBoxBaseComponent } } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + componentWillUnmount() { + document.removeEventListener("keydown", this.keyEvents, true); + } componentDidMount() { this.rootDoc.presBox = this.rootDoc; @@ -517,29 +521,41 @@ export class PresBox extends ViewBoxBaseComponent // Key for when the presentaiton is active (according to Selection Manager) @action keyEvents = (e: KeyboardEvent) => { - e.stopPropagation(); - e.preventDefault(); - + let handled = false; + const anchorNode = document.activeElement as HTMLDivElement; + if (anchorNode && anchorNode.className?.includes("lm_title")) return; if (e.keyCode === 27) { // Escape key if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; + handled = true; } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all - if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; + if (this.layoutDoc.presStatus === "edit") { + this._selectedArray = this.childDocs; + handled = true; + } } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back this.back(); + handled = true; } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next this.next(); + handled = true; } if (e.keyCode === 32) { // spacebar to 'present' or autoplay if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); else this.layoutDoc.presStatus = "manual"; + handled = true; } if (e.keyCode === 8) { // delete selected items if (this.layoutDoc.presStatus === "edit") { this._selectedArray.forEach((doc, i) => { this.removeDocument(doc); }); + handled = true; } } + if (handled) { + e.stopPropagation(); + e.preventDefault(); + } } /** -- cgit v1.2.3-70-g09d2