aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/CaptureManager.scss465
-rw-r--r--src/client/util/CaptureManager.tsx75
2 files changed, 540 insertions, 0 deletions
diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
new file mode 100644
index 000000000..5ca54517c
--- /dev/null
+++ b/src/client/util/CaptureManager.scss
@@ -0,0 +1,465 @@
+@import "../views/globalCssVariables";
+
+.settings-interface {
+ //background-color: whitesmoke !important;
+ color: grey;
+ width: 450px;
+
+ button {
+ background: #315a96;
+ outline: none;
+ border-radius: 5px;
+ border: 0px;
+ color: #fcfbf7;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 75%;
+ padding: 10px;
+ margin: 10px;
+ transition: transform 0.2s;
+ margin: 2px;
+ }
+}
+
+.settings-title {
+ font-size: 25px;
+ font-weight: bold;
+ padding-right: 10px;
+ color: black;
+}
+
+.settings-username {
+ font-size: 12px;
+ padding-right: 15px;
+ color: black;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ /* right: 135; */
+ // position: absolute;
+ // left: 243;
+}
+
+.settings-section {
+ display: flex;
+ border-bottom: 1px solid grey;
+ padding-bottom: 8px;
+ padding-top: 6px;
+
+ .settings-section-title {
+ font-size: 16;
+ font-weight: bold;
+ text-align: left;
+ color: black;
+ width: 80;
+ margin-right: 50px;
+ }
+
+ &:last-child {
+ border-bottom: none;
+ }
+}
+
+
+.password-content {
+ display: flex;
+ flex-direction: column;
+
+ .password-content-inputs {
+ width: 100;
+ // margin-bottom: 10px;
+ font-size: 10px;
+
+ .password-inputs {
+ border: 1px solid rgb(160, 160, 160);
+ margin-bottom: 8px;
+ width: 130;
+ color: black;
+ border-radius: 5px;
+ padding:7px;
+
+ }
+ }
+
+ .password-content-buttons {
+ //margin-left: 84px;
+ //width: 100;
+ padding: 7px;
+
+ .password-submit {
+ //margin-left: 85px;
+ margin-top: 5px;
+ }
+
+ .password-forgot {
+ //margin-left: 65px;
+ //margin-top: -20px;
+ font-size: 12px;
+ white-space: nowrap;
+ }
+ }
+}
+
+.accounts-content {
+ display: flex;
+}
+
+.modes-content {
+ display: flex;
+ margin-left: 10px;
+ font-size: 12px;
+
+ .modes-select {
+ // width: 170px;
+ width: 80%;
+ height: 35px;
+ margin-right: 10px;
+ color: black;
+ border-radius: 5px;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .modes-playground,
+ .default-acl {
+ display: flex;
+ margin-left: 10px;
+ margin-top: 10px;
+ font-size: 10px;
+
+ .playground-check,
+ .acl-check {
+ margin-right: 5px;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .playground-text {
+ color: black;
+ margin-right: 10px;
+ margin-top: 2;
+ }
+
+ .acl-text {
+ color: black;
+ margin-top: 2;
+ text-align: left;
+ }
+
+ }
+}
+
+.colorFlyout {
+ margin-top: 2px;
+ //margin-right: 18px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .colorFlyout-button {
+ width: 20px;
+ height: 20px;
+ border: 0.5px solid black;
+ border-radius: 5px;
+ padding-top: 3px;
+ }
+}
+
+.prefs-content{
+ text-align: left;
+}
+
+.appearances-content {
+ display: flex;
+ margin-top: 4px;
+ color: black;
+ font-size: 10px;
+
+ .preferences-color {
+ display: flex;
+ margin-top: 2px;
+
+ .preferences-color-text {
+ margin-top: 3px;
+ margin-right: 4;
+ flex: 1 1 auto;
+ text-align: left;
+ }
+
+ .colorFlyout {
+ align-self: flex-end;
+ }
+ }
+
+ .preferences-font {
+ //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 {
+ height: 35px;
+ color: black;
+ font-size: 9;
+ margin-right: 6;
+ border-radius: 5px;
+ width: 65%;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .size-select {
+ 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 {
+ display: flex;
+ flex-direction: column;
+
+ button {
+ width: auto;
+ align-self: center;
+ background: #252b33;
+ margin-right: 15px;
+
+ //margin-top: 4px;
+
+ &:hover {
+ background: $main-accent;
+ }
+ }
+
+ // .delete-button {
+ // background: rgb(227, 86, 86);
+ // }
+
+ .close-button {
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ cursor: pointer;
+ }
+
+ // .logout-button {
+ // right: 355;
+ // position: absolute;
+ // }
+
+ .settings-content {
+ background: #e4e4e4;
+ //border-radius: 6px;
+ padding: 10px;
+ //width: 560px;
+ flex: 1 1 auto;
+ }
+
+ .settings-top {
+ display: flex;
+ margin-bottom: 10px;
+ }
+
+
+ .error-text {
+ color: #C40233;
+ width: 300;
+ margin-left: -20;
+ font-size: 10;
+ margin-bottom: 4;
+ margin-top: -3;
+ }
+
+ .success-text {
+ width: 300;
+ margin-left: -20;
+ font-size: 10;
+ margin-bottom: 4;
+ margin-top: -3;
+ color: #009F6B;
+ }
+
+ .focus-span {
+ text-decoration: underline;
+ }
+
+ h1 {
+ color: #121721;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 19;
+ margin-top: 0;
+ font-weight: bold;
+ }
+
+ .container {
+ display: block;
+ position: relative;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-size: 22px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ width: 700px;
+ min-width: 700px;
+ max-width: 700px;
+ text-align: left;
+ font-style: normal;
+ font-size: 15;
+ font-weight: normal;
+ padding: 0;
+
+ .padding {
+ padding: 0 0 0 20px;
+ color: black;
+ }
+
+ }
+}
+
+.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;
+ height: 400px;
+ }
+
+ .settings-interface .settings-body .settings-content input {
+ font-size: 30;
+ }
+
+ .settings-interface button {
+ width: 100%;
+ font-size: 30px;
+ background: #315a96;
+ }
+
+ .settings-interface .settings-heading {
+ font-size: 25;
+ }
+}
diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx
new file mode 100644
index 000000000..f01fcd0d2
--- /dev/null
+++ b/src/client/util/CaptureManager.tsx
@@ -0,0 +1,75 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { ColorState, SketchPicker } from "react-color";
+import { Doc } from "../../fields/Doc";
+import { BoolCast, StrCast, Cast } from "../../fields/Types";
+import { addStyleSheet, addStyleSheetRule, Utils } from "../../Utils";
+import { GoogleAuthenticationManager } from "../apis/GoogleAuthenticationManager";
+import { DocServer } from "../DocServer";
+import { Networking } from "../Network";
+import { MainViewModal } from "../views/MainViewModal";
+import { CurrentUserUtils } from "./CurrentUserUtils";
+import { GroupManager } from "./GroupManager";
+import "./CaptureManager.scss";
+import { undoBatch } from "./UndoManager";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
+
+@observer
+export class CaptureManager extends React.Component<{}> {
+ public static Instance: CaptureManager;
+ static _settingsStyle = addStyleSheet();
+ @observable isOpen: boolean = false; // whether the CaptureManager is to be displayed or not.
+
+
+ constructor(props: {}) {
+ super(props);
+ CaptureManager.Instance = this;
+ }
+
+ public close = action(() => this.isOpen = false);
+ public open = action(() => this.isOpen = true);
+
+
+ @computed get colorsContent() {
+
+ return <div className="colors-content">
+
+ </div>;
+ }
+
+ @computed get formatsContent() {
+ return <div className="prefs-content">
+
+ </div>;
+ }
+
+
+
+
+
+ private get captureInterface() {
+ return <div className="settings-interface">
+ <div className="settings-panel">
+
+ </div>
+
+ <div className="close-button" onClick={this.close}>
+ <FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
+ </div>
+ </div>;
+
+ }
+
+ render() {
+ return <MainViewModal
+ contents={this.captureInterface}
+ isDisplayed={this.isOpen}
+ interactive={true}
+ closeOnExternalClick={this.close}
+ 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 13:45:36 +0000