From aae3fe10d4f996dfc811977ce457ae33d5fe3bcc Mon Sep 17 00:00:00 2001 From: Sally Chen Date: Sun, 29 Nov 2020 23:26:33 +0800 Subject: redesigned settings popup --- src/client/util/SettingsManager.tsx | 174 ++++++++++++++++++++++++------------ 1 file changed, 115 insertions(+), 59 deletions(-) (limited to 'src/client/util/SettingsManager.tsx') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 9934f26d3..cdddd1a59 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -29,9 +29,11 @@ export class SettingsManager extends React.Component<{}> { @observable private curr_password = ""; @observable private new_password = ""; @observable private new_confirm = ""; + @observable activeTab = "Accounts"; @computed get backgroundColor() { return Doc.UserDoc().activeCollectionBackground; } + constructor(props: {}) { super(props); SettingsManager.Instance = this; @@ -51,7 +53,7 @@ export class SettingsManager extends React.Component<{}> { } } - @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any)?.value === "Novice"); + @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any) ?.value === "Novice"); @undoBatch changeShowTitle = action((e: React.ChangeEvent) => Doc.UserDoc().showTitle = (e.currentTarget as any).value ? "title" : undefined); @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); @@ -67,7 +69,7 @@ export class SettingsManager extends React.Component<{}> { else DocServer.Control.makeEditable(); }); - @computed get preferencesContent() { + @computed get colorsContent() { const colorBox = (func: (color: ColorState) => void) => { const fontFamilies = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; const fontSizes = ["7px", "8px", "9px", "10px", "12px", "14px", "16px", "18px", "20px", "24px", "32px", "48px", "72px"]; - return
+ return
-
Back. Color
+
Background Color
{colorFlyout}
-
User Color
+
Border/Header Color
{userColorFlyout}
-
Font
- - -
-
Show header
- Doc.UserDoc().showTitle = Doc.UserDoc().showTitle ? undefined : "creationDate"} checked={Doc.UserDoc().showTitle !== undefined} /> -
-
-
Full Toolbar
- Doc.UserDoc()["documentLinksButton-fullMenu"] = !Doc.UserDoc()["documentLinksButton-fullMenu"]} - checked={BoolCast(Doc.UserDoc()["documentLinksButton-fullMenu"])} /> -
-
-
Raise on drag
- Doc.UserDoc()._raiseWhenDragged = !Doc.UserDoc()._raiseWhenDragged} - checked={BoolCast(Doc.UserDoc()._raiseWhenDragged)} /> +
Default Font
+
+ +
; } + @computed get formatsContent() { + return
+
+ Doc.UserDoc().showTitle = Doc.UserDoc().showTitle ? undefined : "creationDate"} checked={Doc.UserDoc().showTitle !== undefined} /> +
Show doc header
+
+
+ Doc.UserDoc()["documentLinksButton-fullMenu"] = !Doc.UserDoc()["documentLinksButton-fullMenu"]} + checked={BoolCast(Doc.UserDoc()["documentLinksButton-fullMenu"])} /> +
Show full toolbar
+
+
+ Doc.UserDoc()._raiseWhenDragged = !Doc.UserDoc()._raiseWhenDragged} + checked={BoolCast(Doc.UserDoc()._raiseWhenDragged)} /> +
Raise on drag
+
+
; + } + + @computed get appearanceContent() { + + return
+
+
Colors
+
{this.colorsContent}
+
+
+
Formats
+
{this.formatsContent}
+
+
; + } + @action changeVal = (e: React.ChangeEvent, pass: string) => { const value = (e.target as any).value; @@ -145,58 +168,91 @@ export class SettingsManager extends React.Component<{}> {
{!this.passwordResultText ? (null) :
{this.passwordResultText}
} - forgot password? +
; } - @computed get modesContent() { - return
- -
- -
Playground Mode
-
-
- Doc.UserDoc().defaultAclPrivate = !Doc.UserDoc().defaultAclPrivate)} /> -
Default access private
-
+ @computed get accountOthersContent() { + return
+
; } @computed get accountsContent() { - return
- - + return
+
+
Password
+
{this.passwordContent}
+
+
+
Others
+
{this.accountOthersContent}
+
+
; + } + + @computed get modesContent() { + return
+
+
Modes
+
+ +
+ +
Playground Mode
+
+
+
+
+
Permissions
+
+ +
+ Doc.UserDoc().defaultAclPrivate = !Doc.UserDoc().defaultAclPrivate)} /> +
Default access private
+
+
+
+
; } + 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 }]; + // const pairs = [{ title: "Password", ele: this.passwordContent }, { title: "Modes", ele: this.modesContent }, + // { title: "Accounts", ele: this.accountsContent }, { title: "Preferences", ele: this.preferencesContent }]; + + const tabs = [{ title: "Accounts", ele: this.accountsContent }, { title: "Modes", ele: this.modesContent }, + { title: "Appearance", ele: this.appearanceContent }]; + return
-
-
Settings
-
{Doc.CurrentUserEmail}
- -
- +
+
+ {tabs.map(tab =>
this.activeTab = tab.title)}>{tab.title}
)} +
+ +
+
{Doc.CurrentUserEmail}
+
+ +
+ +
+
- {pairs.map(pair =>
-
{pair.title}
-
{pair.ele}
-
- )} + {tabs.map(tab =>
{tab.ele}
)}
; + } render() { @@ -205,6 +261,6 @@ export class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - dialogueBoxStyle={{ width: "600px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />; + dialogueBoxStyle={{ width: "500px", height: "300px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2