aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/MainView.tsx6
-rw-r--r--src/client/views/PropertiesView.scss5
-rw-r--r--src/client/views/PropertiesView.tsx19
-rw-r--r--src/client/views/collections/collectionLinearView/CollectionLinearView.tsx2
-rw-r--r--src/client/views/nodes/button/ButtonInterface.ts12
-rw-r--r--src/client/views/nodes/button/FontIconBox.scss4
-rw-r--r--src/client/views/nodes/button/FontIconBox.tsx49
-rw-r--r--src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx77
-rw-r--r--src/client/views/nodes/button/colorDropdown/index.ts1
-rw-r--r--src/client/views/nodes/button/textButton/TextButton.tsx17
-rw-r--r--src/client/views/nodes/button/textButton/index.ts1
-rw-r--r--src/client/views/nodes/button/toggleButton/ToggleButton.tsx34
-rw-r--r--src/client/views/nodes/button/toggleButton/index.ts1
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx2
14 files changed, 202 insertions, 28 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9047951ee..60016fc3d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -227,8 +227,8 @@ export class MainView extends React.Component {
@action
createNewPresentation = async () => {
- if (!await this.userDoc.myPresentations) {
- this.userDoc.myPresentations = new PrefetchProxy(Docs.Create.TreeDocument([], {
+ if (!await this.userDoc.myTrails) {
+ this.userDoc.myTrails = new PrefetchProxy(Docs.Create.TreeDocument([], {
title: "PRESENTATION TRAILS", childDontRegisterViews: true, _height: 100, _forceActive: true, boxShadow: "0 0", _lockedPosition: true, treeViewOpen: true, system: true
}));
}
@@ -236,7 +236,7 @@ export class MainView extends React.Component {
{ title: "Untitled Presentation", _viewType: CollectionViewType.Stacking, _width: 400, _height: 500, targetDropAction: "alias", _chromeHidden: true, boxShadow: "0 0" });
CollectionDockingView.AddSplit(pres, "right");
this.userDoc.activePresentation = pres;
- Doc.AddDocToList(this.userDoc.myPresentations as Doc, "data", pres);
+ Doc.AddDocToList(this.userDoc.myTrails as Doc, "data", pres);
}
getPWidth = () => this._panelWidth - this.propertiesWidth();
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 321b83f52..554f137cb 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -825,9 +825,8 @@
}
.editable-title {
- padding: 6px;
- padding-bottom: 2px;
- border: solid 1px $dark-gray;
+ border: solid 1px #323232;
+ height: fit-content;
&:hover {
border: 0.75px solid $medium-blue;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 17b137c31..09e12443b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -2,17 +2,19 @@ import React = require("react");
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Checkbox, Tooltip } from "@material-ui/core";
import { intersection } from "lodash";
-import { action, autorun, computed, Lambda, observable, reaction, runInAction } from "mobx";
+import { action, autorun, computed, Lambda, observable } from "mobx";
import { observer } from "mobx-react";
import { ColorState, SketchPicker } from "react-color";
-import { AclAugment, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym, AclSelfEdit } from "../../fields/Doc";
+import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc";
import { Id } from "../../fields/FieldSymbols";
import { InkField } from "../../fields/InkField";
+import { List } from "../../fields/List";
import { ComputedField } from "../../fields/ScriptField";
-import { Cast, NumCast, StrCast } from "../../fields/Types";
+import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types";
import { denormalizeEmail, GetEffectiveAcl, SharingPermissions } from "../../fields/util";
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../Utils";
import { DocumentType } from "../documents/DocumentTypes";
+import { CurrentUserUtils } from "../util/CurrentUserUtils";
import { DocumentManager } from "../util/DocumentManager";
import { SelectionManager } from "../util/SelectionManager";
import { SharingManager } from "../util/SharingManager";
@@ -29,8 +31,6 @@ import { PropertiesButtons } from "./PropertiesButtons";
import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector";
import "./PropertiesView.scss";
import { DefaultStyleProvider } from "./StyleProvider";
-import { CurrentUserUtils } from "../util/CurrentUserUtils";
-import { List } from "../../fields/List";
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -1086,6 +1086,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
// }
render() {
+ const isNovice = BoolCast(Doc.UserDoc().noviceMode);
if (!this.selectedDoc && !this.isPres) {
return <div className="propertiesView" style={{ width: this.props.width }}>
<div className="propertiesView-title" style={{ width: this.props.width }}>
@@ -1110,15 +1111,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{this.sharingSubMenu}
- {this.filtersSubMenu}
+ {isNovice ? null : this.filtersSubMenu}
{this.inkSubMenu}
- {this.fieldsSubMenu}
+ {isNovice ? null : this.fieldsSubMenu}
- {this.contextsSubMenu}
+ {isNovice ? null : this.contextsSubMenu}
- {this.layoutSubMenu}
+ {isNovice ? null : this.layoutSubMenu}
</div>;
}
if (this.isPres) {
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index 6b1fd9e1b..f3ffb4e0b 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -126,7 +126,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
}}
onPointerDown={e => e.stopPropagation()} >
<div className="collectionLinearView-menuOpener">
- {BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : <FontAwesomeIcon icon={"plus"}/> : icon ? icon : <FontAwesomeIcon icon={"minus"}/>}
+ {BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : <FontAwesomeIcon icon={"minus"}/> : icon ? icon : <FontAwesomeIcon icon={"plus"}/>}
</div>
</label>;
diff --git a/src/client/views/nodes/button/ButtonInterface.ts b/src/client/views/nodes/button/ButtonInterface.ts
new file mode 100644
index 000000000..0aa2ac8e1
--- /dev/null
+++ b/src/client/views/nodes/button/ButtonInterface.ts
@@ -0,0 +1,12 @@
+import { Doc } from "../../../../fields/Doc";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { ButtonType } from "./FontIconBox";
+
+export interface IButtonProps {
+ type: string | ButtonType;
+ rootDoc: Doc;
+ label: any;
+ icon: IconProp;
+ color: string;
+ backgroundColor: string;
+} \ No newline at end of file
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index b080f1dab..48fb2c8dc 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -49,6 +49,10 @@
}
}
+ &.textBtn {
+ width: 100%;
+ }
+
&.tglBtn {
cursor: pointer;
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index a6887cbba..96db929eb 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -27,11 +27,15 @@ import { StyleProp } from '../../StyleProvider';
import { FieldView, FieldViewProps } from '.././FieldView';
import './FontIconBox.scss';
import { RichTextMenu } from '../formattedText/RichTextMenu';
+import { TextButton } from './textButton';
+import { ToggleButton } from './toggleButton';
+import { IButtonProps } from './ButtonInterface';
const FontIconSchema = createSchema({
icon: "string",
});
export enum ButtonType {
+ TextButton = "textBtn",
MenuButton = "menuBtn",
DropdownList = "drpdownList",
DropdownButton = "drpdownBtn",
@@ -331,13 +335,13 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
let stroke: boolean = false;
let strokeIcon: any;
- if (script === "setStrokeColor") {
- stroke = true;
- const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result;
- const width = 20 + (checkWidth / 100) * 70;
- const height = 20 + (checkWidth / 100) * 70;
- strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />);
- }
+ // if (script === "setStrokeColor") {
+ // stroke = true;
+ // const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result;
+ // const width = 20 + (checkWidth / 100) * 70;
+ // const height = 20 + (checkWidth / 100) * 70;
+ // strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />);
+ // }
const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
'#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
@@ -473,25 +477,47 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
render() {
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
- // Variables called through eval (from button)
- const numSelected = SelectionManager.Views().length;
-
const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark;
- const active: string = StrCast(this.rootDoc.dropDownOpen);
const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
{this.label}
</div>;
+
const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) :
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
{this.label}
</div>;
+ const buttonProps:IButtonProps = {
+ type: this.type,
+ rootDoc: this.rootDoc,
+ label: label,
+ backgroundColor: backgroundColor,
+ icon: this.icon,
+ color: color
+ }
+
+ const buttonText = StrCast(this.rootDoc.buttonText);
+
// TODO:glr Add label of button type
let button = this.defaultButton;
switch (this.type) {
+ case ButtonType.TextButton:
+ button = (
+ <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1 }}>
+ <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
+ {buttonText ?
+ <div className="button-text">
+ {buttonText}
+ </div>
+ : null}
+ {label}
+ </div>
+ );
+ // button = <TextButton {...buttonProps}></TextButton>
+ break;
case ButtonType.EditableText:
console.log("Editable text");
button = this.editableText;
@@ -518,6 +544,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
break;
case ButtonType.ToggleButton:
button = this.toggleButton;
+ // button = <ToggleButton {...buttonProps}></ToggleButton>
break;
case ButtonType.ClickButton:
button = (
diff --git a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
new file mode 100644
index 000000000..1809f4e2e
--- /dev/null
+++ b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
@@ -0,0 +1,77 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+import { BoolCast, StrCast } from '../../../../../fields/Types';
+import { IButtonProps } from '../ButtonInterface';
+import { ColorState, SketchPicker } from 'react-color';
+import { ScriptField } from '../../../../../fields/ScriptField';
+import { Doc } from '../../../../../fields/Doc';
+
+export class ColorDropdown extends Component<IButtonProps> {
+ render() {
+ const active: string = StrCast(this.props.rootDoc.dropDownOpen);
+
+ const script: string = StrCast(this.props.rootDoc.script);
+ const scriptCheck: string = script + "(undefined, true)";
+ const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result;
+
+ let stroke: boolean = false;
+ let strokeIcon: any;
+ // if (script === "setStrokeColor") {
+ // stroke = true;
+ // const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result;
+ // const width = 20 + (checkWidth / 100) * 70;
+ // const height = 20 + (checkWidth / 100) * 70;
+ // strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />);
+ // }
+
+ const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+ '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+ '#FFFFFF', '#f1efeb'];
+
+ const colorBox = (func: (color: ColorState) => void) => <SketchPicker
+ disableAlpha={!stroke}
+ onChange={func} color={boolResult ? boolResult : "#FFFFFF"}
+ presetColors={colorOptions} />;
+ const label = !this.props.label || !Doc.UserDoc()._showLabel ? (null) :
+ <div className="fontIconBox-label" style={{ color: this.props.color, backgroundColor: this.props.backgroundColor, position: "absolute" }}>
+ {this.props.label}
+ </div>;
+
+ const dropdownCaret = <div
+ className="menuButton-dropDown"
+ style={{ borderBottomRightRadius: active ? 0 : undefined }}>
+ <FontAwesomeIcon icon={'caret-down'} color={this.props.color} size="sm" />
+ </div>;
+
+ const click = (value: ColorState) => {
+ const hex: string = value.hex;
+ const s = ScriptField.MakeScript(script + '("' + hex + '", false)');
+ if (s) {
+ s.script.run().result;
+ }
+ };
+ return (
+ <div className={`menuButton ${this.props.type} ${active}`}
+ style={{ color: this.props.color, borderBottomLeftRadius: active ? 0 : undefined }}
+ onClick={() => this.props.rootDoc.dropDownOpen = !this.props.rootDoc.dropDownOpen}
+ onPointerDown={e => e.stopPropagation()}>
+ {stroke ? strokeIcon : <><FontAwesomeIcon className={`fontIconBox-icon-${this.props.type}`} icon={this.props.icon} color={this.props.color} />
+ <div className="colorButton-color"
+ style={{ backgroundColor: boolResult ? boolResult : "#FFFFFF" }}
+ ></div></>}
+ {label}
+ {/* {dropdownCaret} */}
+ {this.props.rootDoc.dropDownOpen ?
+ <div>
+ <div className="menuButton-dropdownBox"
+ onPointerDown={e => e.stopPropagation()}
+ onClick={e => e.stopPropagation()}>
+ {colorBox(click)}
+ </div>
+ <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.props.rootDoc.dropDownOpen = false; }} />
+ </div>
+ : null}
+ </div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/button/colorDropdown/index.ts b/src/client/views/nodes/button/colorDropdown/index.ts
new file mode 100644
index 000000000..1147d6457
--- /dev/null
+++ b/src/client/views/nodes/button/colorDropdown/index.ts
@@ -0,0 +1 @@
+export * from './ColorDropdown'; \ No newline at end of file
diff --git a/src/client/views/nodes/button/textButton/TextButton.tsx b/src/client/views/nodes/button/textButton/TextButton.tsx
new file mode 100644
index 000000000..414b50dcb
--- /dev/null
+++ b/src/client/views/nodes/button/textButton/TextButton.tsx
@@ -0,0 +1,17 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+import { BoolCast } from '../../../../../fields/Types';
+import { IButtonProps } from '../ButtonInterface';
+
+export class TextButton extends Component<IButtonProps> {
+ render() {
+ const type = this.props.type;
+ // Determine the type of toggle button
+ const buttonText: boolean = BoolCast(this.props.rootDoc.switchToggle);
+
+ return (<div className={`menuButton ${this.props.type}`} style={{ opacity: 1, backgroundColor: this.props.backgroundColor, color: this.props.color }}>
+ <FontAwesomeIcon className={`fontIconBox-icon-${this.props.type}`} icon={this.props.icon} color={this.props.color} />
+ {this.props.label}
+ </div>)
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/button/textButton/index.ts b/src/client/views/nodes/button/textButton/index.ts
new file mode 100644
index 000000000..01fcde54f
--- /dev/null
+++ b/src/client/views/nodes/button/textButton/index.ts
@@ -0,0 +1 @@
+export * from './TextButton' \ No newline at end of file
diff --git a/src/client/views/nodes/button/toggleButton/ToggleButton.tsx b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx
new file mode 100644
index 000000000..dca6487d8
--- /dev/null
+++ b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx
@@ -0,0 +1,34 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { Component } from 'react';
+import { BoolCast } from '../../../../../fields/Types';
+import { Colors } from '../../../global/globalEnums';
+import { IButtonProps } from '../ButtonInterface';
+
+export class ToggleButton extends Component<IButtonProps> {
+ render() {
+ const type = this.props.type;
+ // Determine the type of toggle button
+ const switchToggle: boolean = BoolCast(this.props.rootDoc.switchToggle);
+
+ if (switchToggle) {
+ return (
+ <div className={`menuButton ${type} ${'switch'}`}>
+ <label className="switch">
+ <input type="checkbox"
+ checked={this.props.backgroundColor === Colors.MEDIUM_BLUE}
+ />
+ <span className="slider round"></span>
+ </label>
+ </div>
+ );
+ } else {
+ return (
+ <div className={`menuButton ${type}`}
+ style={{ opacity: 1, backgroundColor: this.props.backgroundColor, color: this.props.color }}>
+ <FontAwesomeIcon className={`fontIconBox-icon-${type}`} icon={this.props.icon} color={this.props.color} />
+ {this.props.label}
+ </div>
+ );
+ }
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/button/toggleButton/index.ts b/src/client/views/nodes/button/toggleButton/index.ts
new file mode 100644
index 000000000..48b28fb4c
--- /dev/null
+++ b/src/client/views/nodes/button/toggleButton/index.ts
@@ -0,0 +1 @@
+export * from './ToggleButton' \ No newline at end of file
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index cfc3e75cc..b805aa6ae 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -166,7 +166,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
this.layoutDoc._gridGap = 0;
this.layoutDoc._yMargin = 0;
this.turnOffEdit(true);
- DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(pres =>
+ DocListCastAsync((Doc.UserDoc().myTrails as Doc).data).then(pres =>
!pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc));
this._disposers.selection = reaction(() => SelectionManager.Views(),
views => views.some(view => view.props.Document === this.rootDoc) && this.updateCurrentPresentation());
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-09 01:33:17 +0000