aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/CaptureManager.scss450
-rw-r--r--src/client/util/CaptureManager.tsx47
2 files changed, 73 insertions, 424 deletions
diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss
index 5ca54517c..8447bd2d5 100644
--- a/src/client/util/CaptureManager.scss
+++ b/src/client/util/CaptureManager.scss
@@ -1,8 +1,7 @@
@import "../views/globalCssVariables";
-.settings-interface {
+.capture-interface {
//background-color: whitesmoke !important;
- color: grey;
width: 450px;
button {
@@ -21,14 +20,35 @@
}
}
-.settings-title {
- font-size: 25px;
- font-weight: bold;
- padding-right: 10px;
+.capture-t1 {
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ font-size: 20px;
+ font-family: 'Roboto';
+ font-weight: 600;
color: black;
+
+ .recordButtonOutline {
+ border-radius: 100%;
+ width: 25px;
+ height: 25px;
+ margin-right: 10px;
+ border: solid 1px #a94442;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .recordButtonInner {
+ border-radius: 100%;
+ width: 70%;
+ height: 70%;
+ background: #a94442;
+ }
}
-.settings-username {
+.capture-t2 {
font-size: 12px;
padding-right: 15px;
color: black;
@@ -39,13 +59,13 @@
// left: 243;
}
-.settings-section {
+.capture-block {
display: flex;
border-bottom: 1px solid grey;
padding-bottom: 8px;
padding-top: 6px;
- .settings-section-title {
+ .capture-block-title {
font-size: 16;
font-weight: bold;
text-align: left;
@@ -59,407 +79,21 @@
}
}
-
-.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 {
+.close-button {
+ position: absolute;
+ top: 10;
+ right: 10;
+ background:transparent;
+ border-radius:100%;
+ width: 25px;
+ height: 25px;
display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: 0.2s;
}
-.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;
- }
+.close-button:hover {
+ background: rgba(0,0,0,0.1);
}
-.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
index f01fcd0d2..cea0c182f 100644
--- a/src/client/util/CaptureManager.tsx
+++ b/src/client/util/CaptureManager.tsx
@@ -2,16 +2,10 @@ 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");
@@ -22,6 +16,7 @@ export const Flyout = higflyout.default;
export class CaptureManager extends React.Component<{}> {
public static Instance: CaptureManager;
static _settingsStyle = addStyleSheet();
+ @observable _document: any;
@observable isOpen: boolean = false; // whether the CaptureManager is to be displayed or not.
@@ -31,18 +26,27 @@ export class CaptureManager extends React.Component<{}> {
}
public close = action(() => this.isOpen = false);
- public open = action(() => this.isOpen = true);
+ public open = action((doc: Doc) => {
+ this.isOpen = true;
+ this._document = doc;
+ });
- @computed get colorsContent() {
-
- return <div className="colors-content">
+ @computed get visibilityContent() {
+ return <div className="capture-block">
+ <div className="capture-block-title">Visibility
+ <div className="visibility-radio">
+ <input type="radio" value="private" name="visibility" /> Private
+ <input type="radio" value="public" name="visibility" /> Public
+ </div>
+ </div>
</div>;
}
- @computed get formatsContent() {
- return <div className="prefs-content">
+ @computed get linksContent() {
+ return <div className="capture-block">
+ <div className="capture-block-title">Links</div>
</div>;
}
@@ -52,11 +56,19 @@ export class CaptureManager extends React.Component<{}> {
private get captureInterface() {
- return <div className="settings-interface">
- <div className="settings-panel">
-
+ return <div className="capture-interface">
+ <div className="capture-t1">
+ <div className="recordButtonOutline" style={{}}>
+ <div className="recordButtonInner" style={{}}>
+ </div>
+ </div>
+ Conversation Capture
</div>
+ <div className="capture-t2">
+ </div>
+ {this.visibilityContent}
+ {this.linksContent}
<div className="close-button" onClick={this.close}>
<FontAwesomeIcon icon={"times"} color="black" size={"lg"} />
</div>
@@ -70,6 +82,9 @@ export class CaptureManager extends React.Component<{}> {
isDisplayed={this.isOpen}
interactive={true}
closeOnExternalClick={this.close}
- dialogueBoxStyle={{ width: "500px", height: "300px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />;
+ dialogueBoxStyle={{ width: "500px", height: "300px", border: "none", background: Cast(Doc.SharingDoc().userColor, "string", null) }}
+ overlayStyle={{ background: "black" }}
+ overlayDisplayedOpacity={0.6}
+ />
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-10 17:58:30 +0000