aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/SettingsManager.scss194
-rw-r--r--src/client/util/SettingsManager.tsx174
2 files changed, 272 insertions, 96 deletions
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index badba35f4..5ca54517c 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -33,9 +33,10 @@
padding-right: 15px;
color: black;
margin-top: 10px;
+ margin-bottom: 10px;
/* right: 135; */
- position: absolute;
- left: 243;
+ // position: absolute;
+ // left: 243;
}
.settings-section {
@@ -61,30 +62,38 @@
.password-content {
display: flex;
+ flex-direction: column;
.password-content-inputs {
width: 100;
+ // margin-bottom: 10px;
+ font-size: 10px;
.password-inputs {
- border: none;
+ border: 1px solid rgb(160, 160, 160);
margin-bottom: 8px;
- width: 180;
+ width: 130;
color: black;
border-radius: 5px;
+ padding:7px;
+
}
}
.password-content-buttons {
- margin-left: 84px;
- width: 100;
+ //margin-left: 84px;
+ //width: 100;
+ padding: 7px;
.password-submit {
- margin-left: 85px;
+ //margin-left: 85px;
+ margin-top: 5px;
}
.password-forgot {
- margin-left: 65px;
- margin-top: -20px;
+ //margin-left: 65px;
+ //margin-top: -20px;
+ font-size: 12px;
white-space: nowrap;
}
}
@@ -97,10 +106,12 @@
.modes-content {
display: flex;
margin-left: 10px;
- font-size: 12;
+ font-size: 12px;
.modes-select {
// width: 170px;
+ width: 80%;
+ height: 35px;
margin-right: 10px;
color: black;
border-radius: 5px;
@@ -114,7 +125,8 @@
.default-acl {
display: flex;
margin-left: 10px;
- font-size: 12;
+ margin-top: 10px;
+ font-size: 10px;
.playground-check,
.acl-check {
@@ -134,6 +146,7 @@
.acl-text {
color: black;
margin-top: 2;
+ text-align: left;
}
}
@@ -141,7 +154,7 @@
.colorFlyout {
margin-top: 2px;
- margin-right: 18px;
+ //margin-right: 18px;
&:hover {
cursor: pointer;
@@ -156,67 +169,85 @@
}
}
-.preferences-content {
+.prefs-content{
+ text-align: left;
+}
+
+.appearances-content {
display: flex;
margin-top: 4px;
color: black;
- font-size: 11;
+ font-size: 10px;
.preferences-color {
display: flex;
margin-top: 2px;
- width: 55;
.preferences-color-text {
- margin-top: 4;
+ margin-top: 3px;
margin-right: 4;
+ flex: 1 1 auto;
+ text-align: left;
+ }
+
+ .colorFlyout {
+ align-self: flex-end;
}
}
.preferences-font {
- display: flex;
- height: 23px;
+ //height: 23px;
margin-top: 2px;
.preferences-font-text {
color: black;
margin-top: 4;
margin-right: 4;
+ margin-bottom: 2px;
+ text-align: left;
+ }
+
+ .preferences-font-controls {
+ display: flex;
+ justify-content: space-between;
}
.font-select {
- width: 100px;
+ height: 35px;
color: black;
font-size: 9;
margin-right: 6;
border-radius: 5px;
+ width: 65%;
&:hover {
cursor: pointer;
}
}
- .preferences-check {
- color: black;
- font-size: 9;
- /* margin-top: 4; */
- margin-right: 4;
- margin-bottom: -3;
- margin-left: 5;
- margin-top: -1px;
- }
-
.size-select {
- width: 60px;
+ height: 35px;
color: black;
font-size: 9;
border-radius: 5px;
+ width: 30%;
&:hover {
cursor: pointer;
}
}
}
+
+ .preferences-check {
+ color: black;
+ margin-right: 4;
+ margin-bottom: -3;
+ margin-left: 5;
+ margin-top: -1px;
+ display: inline-block;
+ padding-left: 5px;
+ text-align: left;
+ }
}
.settings-interface {
@@ -247,16 +278,17 @@
cursor: pointer;
}
- .logout-button {
- right: 355;
- position: absolute;
- }
+ // .logout-button {
+ // right: 355;
+ // position: absolute;
+ // }
.settings-content {
background: #e4e4e4;
- border-radius: 6px;
+ //border-radius: 6px;
padding: 10px;
- width: 560px;
+ //width: 560px;
+ flex: 1 1 auto;
}
.settings-top {
@@ -323,6 +355,94 @@
}
}
+.settings-interface {
+ flex-direction: row;
+ position: relative;
+ min-height: 250px;
+ width: 100%;
+
+ .settings-content {
+ background-color: #fdfdfd;
+ }
+}
+
+.settings-panel {
+ position: relative;
+ min-width: 150px;
+ background-color: #e4e4e4;
+
+ .settings-user {
+ position: absolute;
+ bottom: 10px;
+ text-align: center;
+ left: 0;
+ right: 0;
+
+ .settings-username {
+ padding-right: 0px;
+ }
+
+ .logout-button {
+ margin-right: 2px;
+ }
+ }
+}
+
+.settings-tabs {
+ // font-size: 16px;
+ font-weight: 600;
+ color: black;
+
+ .tab-control {
+ padding: 10px;
+ border-bottom: 1px solid #9f9e9e;
+ cursor: pointer;
+
+ &.active {
+ background-color: #fdfdfd;
+ }
+ }
+}
+
+.settings-section-context {
+ width: 100%;
+}
+
+.tab-section {
+ display: none;
+ height: 200px;
+
+ &.active {
+ display: block;
+ }
+}
+
+.tab-content {
+ display: flex;
+ margin: 20px 0;
+
+ .tab-column {
+ flex: 0 0 50%;
+
+ .tab-column-title {
+ color: black;
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 16px;
+ }
+
+ .tab-column-title, .tab-column-content {
+ padding-left: 16px;
+ }
+
+ }
+
+}
+
+.tab-column button {
+ font-size: 9px;
+}
+
@media only screen and (max-device-width: 480px) {
.settings-interface {
width: 80vw;
@@ -342,4 +462,4 @@
.settings-interface .settings-heading {
font-size: 25;
}
-} \ No newline at end of file
+}
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) => <SketchPicker onChange={func} color={StrCast(this.backgroundColor)}
presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
'#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
@@ -91,41 +93,62 @@ export class SettingsManager extends React.Component<{}> {
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 <div className="preferences-content">
+ return <div className="colors-content">
<div className="preferences-color">
- <div className="preferences-color-text">Back. Color</div>
+ <div className="preferences-color-text">Background Color</div>
{colorFlyout}
</div>
<div className="preferences-color">
- <div className="preferences-color-text">User Color</div>
+ <div className="preferences-color-text">Border/Header Color</div>
{userColorFlyout}
</div>
<div className="preferences-font">
- <div className="preferences-font-text">Font</div>
- <select className="font-select" onChange={this.changeFontFamily} value={StrCast(Doc.UserDoc().fontFamily, "Times New Roman")} >
- {fontFamilies.map(font => <option key={font} value={font} defaultValue={StrCast(Doc.UserDoc().fontFamily)}> {font} </option>)}
- </select>
- <select className="size-select" style={{ marginRight: "10px" }} onChange={this.changeFontSize} value={StrCast(Doc.UserDoc().fontSize, "7px")}>
- {fontSizes.map(size => <option key={size} value={size} defaultValue={StrCast(Doc.UserDoc().fontSize)}> {size} </option>)}
- </select>
- <div>
- <div className="preferences-check">Show header</div>
- <input type="checkbox" onChange={e => Doc.UserDoc().showTitle = Doc.UserDoc().showTitle ? undefined : "creationDate"} checked={Doc.UserDoc().showTitle !== undefined} />
- </div>
- <div>
- <div className="preferences-check">Full Toolbar</div>
- <input type="checkbox" onChange={e => Doc.UserDoc()["documentLinksButton-fullMenu"] = !Doc.UserDoc()["documentLinksButton-fullMenu"]}
- checked={BoolCast(Doc.UserDoc()["documentLinksButton-fullMenu"])} />
- </div>
- <div>
- <div className="preferences-check">Raise on drag</div>
- <input type="checkbox" onChange={e => Doc.UserDoc()._raiseWhenDragged = !Doc.UserDoc()._raiseWhenDragged}
- checked={BoolCast(Doc.UserDoc()._raiseWhenDragged)} />
+ <div className="preferences-font-text">Default Font</div>
+ <div className="preferences-font-controls">
+ <select className="size-select" onChange={this.changeFontSize} value={StrCast(Doc.UserDoc().fontSize, "7px")}>
+ {fontSizes.map(size => <option key={size} value={size} defaultValue={StrCast(Doc.UserDoc().fontSize)}> {size} </option>)}
+ </select>
+ <select className="font-select" onChange={this.changeFontFamily} value={StrCast(Doc.UserDoc().fontFamily, "Times New Roman")} >
+ {fontFamilies.map(font => <option key={font} value={font} defaultValue={StrCast(Doc.UserDoc().fontFamily)}> {font} </option>)}
+ </select>
</div>
</div>
</div>;
}
+ @computed get formatsContent() {
+ return <div className="prefs-content">
+ <div>
+ <input type="checkbox" onChange={e => Doc.UserDoc().showTitle = Doc.UserDoc().showTitle ? undefined : "creationDate"} checked={Doc.UserDoc().showTitle !== undefined} />
+ <div className="preferences-check">Show doc header</div>
+ </div>
+ <div>
+ <input type="checkbox" onChange={e => Doc.UserDoc()["documentLinksButton-fullMenu"] = !Doc.UserDoc()["documentLinksButton-fullMenu"]}
+ checked={BoolCast(Doc.UserDoc()["documentLinksButton-fullMenu"])} />
+ <div className="preferences-check">Show full toolbar</div>
+ </div>
+ <div>
+ <input type="checkbox" onChange={e => Doc.UserDoc()._raiseWhenDragged = !Doc.UserDoc()._raiseWhenDragged}
+ checked={BoolCast(Doc.UserDoc()._raiseWhenDragged)} />
+ <div className="preferences-check">Raise on drag</div>
+ </div>
+ </div>;
+ }
+
+ @computed get appearanceContent() {
+
+ return <div className="tab-content appearances-content">
+ <div className="tab-column">
+ <div className="tab-column-title">Colors</div>
+ <div className="tab-column-content">{this.colorsContent}</div>
+ </div>
+ <div className="tab-column">
+ <div className="tab-column-title">Formats</div>
+ <div className="tab-column-content">{this.formatsContent}</div>
+ </div>
+ </div>;
+ }
+
@action
changeVal = (e: React.ChangeEvent, pass: string) => {
const value = (e.target as any).value;
@@ -145,58 +168,91 @@ export class SettingsManager extends React.Component<{}> {
</div>
<div className="password-content-buttons">
{!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>
+ <button className="password-submit" onClick={this.changePassword}>submit</button>
</div>
</div>;
}
- @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={this.playgroundModeToggle} />
- <div className="playground-text">Playground Mode</div>
- </div>
- <div className="default-acl">
- <input className="acl-check" type="checkbox" checked={BoolCast(Doc.UserDoc()?.defaultAclPrivate)} onChange={action(() => Doc.UserDoc().defaultAclPrivate = !Doc.UserDoc().defaultAclPrivate)} />
- <div className="acl-text">Default access private</div>
- </div>
+ @computed get accountOthersContent() {
+ return <div className="account-others-content">
+ <button onClick={this.googleAuthorize} value="data">Authorize Google Acc</button>
</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>
+ return <div className="tab-content accounts-content">
+ <div className="tab-column">
+ <div className="tab-column-title">Password</div>
+ <div className="tab-column-content">{this.passwordContent}</div>
+ </div>
+ <div className="tab-column">
+ <div className="tab-column-title">Others</div>
+ <div className="tab-column-content">{this.accountOthersContent}</div>
+ </div>
+ </div>;
+ }
+
+ @computed get modesContent() {
+ return <div className="tab-content modes-content">
+ <div className="tab-column">
+ <div className="tab-column-title">Modes</div>
+ <div className="tab-column-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={this.playgroundModeToggle} />
+ <div className="playground-text">Playground Mode</div>
+ </div>
+ </div>
+ </div>
+ <div className="tab-column">
+ <div className="tab-column-title">Permissions</div>
+ <div className="tab-column-content">
+ <button onClick={() => GroupManager.Instance ?.open()}>Manage groups</button>
+ <div className="default-acl">
+ <input className="acl-check" type="checkbox" checked={BoolCast(Doc.UserDoc() ?.defaultAclPrivate)} onChange={action(() => Doc.UserDoc().defaultAclPrivate = !Doc.UserDoc().defaultAclPrivate)} />
+ <div className="acl-text">Default access private</div>
+ </div>
+ </div>
+ </div>
+
</div>;
}
+
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 <div className="settings-interface">
- <div className="settings-top">
- <div className="settings-title">Settings</div>
- <div className="settings-username">{Doc.CurrentUserEmail}</div>
- <button className="logout-button" onClick={() => window.location.assign(Utils.prepend("/logout"))} >
- {CurrentUserUtils.GuestDashboard ? "Exit" : "Log Out"}
- </button>
- <div className="close-button" onClick={this.close}>
- <FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
+ <div className="settings-panel">
+ <div className="settings-tabs">
+ {tabs.map(tab => <div className={"tab-control " + (this.activeTab === tab.title ? "active" : "inactive")} onClick={action(() => this.activeTab = tab.title)}>{tab.title}</div>)}
+ </div>
+
+ <div className="settings-user">
+ <div className="settings-username">{Doc.CurrentUserEmail}</div>
+ <button className="logout-button" onClick={() => window.location.assign(Utils.prepend("/logout"))} >
+ {CurrentUserUtils.GuestDashboard ? "Exit" : "Log Out"}
+ </button>
</div>
</div>
+
+ <div className="close-button" onClick={this.close}>
+ <FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
+ </div>
+
<div className="settings-content">
- {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>
- )}
+ {tabs.map(tab => <div className={"tab-section " + (this.activeTab === tab.title ? "active" : "inactive")}>{tab.ele}</div>)}
</div>
</div>;
+
}
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 09:23:52 +0000