aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts1
-rw-r--r--src/client/util/CurrentUserUtils.ts134
-rw-r--r--src/client/views/collections/TabDocView.scss30
-rw-r--r--src/client/views/collections/TabDocView.tsx12
-rw-r--r--src/client/views/collections/collectionLinearView/CollectionLinearView.scss2
-rw-r--r--src/client/views/collections/collectionLinearView/CollectionLinearView.tsx10
-rw-r--r--src/client/views/global/globalCssVariables.scss5
-rw-r--r--src/client/views/global/globalEnums.tsx4
-rw-r--r--src/client/views/nodes/button/FontIconBox.scss120
-rw-r--r--src/client/views/nodes/button/FontIconBox.tsx137
10 files changed, 362 insertions, 93 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b7ba6f1fe..57015e241 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -230,6 +230,7 @@ export class DocumentOptions {
linearViewExpandable?: boolean; // can linear view be expanded
linearViewToggleButton?: string; // button to open close linear view group
linearViewSubMenu?: boolean;
+ linearViewFloating?: boolean;
flexGap?: number; // Linear view flex gap
flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse";
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 2903b84e3..c7aa57ff0 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -38,7 +38,20 @@ import { SharingManager } from "./SharingManager";
import { SnappingManager } from "./SnappingManager";
import { UndoManager } from "./UndoManager";
import { ButtonType } from "../views/nodes/button/FontIconBox";
-
+import { IconName } from "@fortawesome/fontawesome-svg-core";
+
+interface Button {
+ title?: string;
+ toolTip?: string;
+ icon?: string;
+ btnType?: ButtonType;
+ click?: string;
+ switchToggle?: boolean;
+ script?: string;
+ width?: number;
+ list?: string[];
+ ignoreClick?: boolean;
+}
export let resolvedPorts: { server: number, socket: number };
const headerViewVersion = "0.1";
@@ -918,46 +931,71 @@ export class CurrentUserUtils {
}
static textTools(doc: Doc) {
- return [
+ const tools:Button[] =
+ [
{
title: "Font", toolTip: "Font", width: 100, btnType: ButtonType.DropdownList, ignoreClick: true,
list: ["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia",
"Comic Sans MS", "Tahoma", "Impact", "Crimson Text"],
script: 'changeFont'
},
+ { title: "Font size", toolTip: "Font size", btnType: ButtonType.NumberButton, script: 'changeFontSize'},
{ title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", click: 'toggleBold()', script: 'toggleBold' },
{ title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", click: 'toggleItalic()', script: 'toggleItalic' },
{ title: "Underline", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", click: 'toggleUnderline()', script: 'toggleUnderline' },
// { title: "Strikethrough", tooltip: "Strikethrough", btnType: ButtonType.ToggleButton, icon: "strikethrough", click: 'toggleStrikethrough()'},
// { title: "Superscript", tooltip: "Superscript", btnType: ButtonType.ToggleButton, icon: "superscript", click: 'toggleSuperscript()'},
// { title: "Subscript", tooltip: "Subscript", btnType: ButtonType.ToggleButton, icon: "subscript", click: 'toggleSubscript()'},
- { title: "Highlight", toolTip: "Highlight", btnType: ButtonType.ColorButton, icon: "highlighter", ignoreClick: true, script:'changeFontColor' },
+ { title: "Left align", toolTip: "Left align", btnType: ButtonType.ToggleButton, icon: "align-left", ignoreClick: true, script:'changeAlignment("left")' },
+ { title: "Center align", toolTip: "Center align", btnType: ButtonType.ToggleButton, icon: "align-center", ignoreClick: true, script:'changeAlignment("center")' },
+ { title: "Right align", toolTip: "Right align", btnType: ButtonType.ToggleButton, icon: "align-right", ignoreClick: true, script:'changeAlignment("right")' },
+
+ { title: "Highlight", toolTip: "Highlight", btnType: ButtonType.ColorButton, icon: "font", ignoreClick: true, script:'changeFontColor' },
{ title: "Text color", toolTip: "Text color", btnType: ButtonType.ColorButton, icon: "highlighter", ignoreClick: true, script:'changeHighlightColor' },
];
+ return tools;
}
static inkTools(doc: Doc) {
- return [
+ const tools:Button[] = [
{ title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen", click: 'togglePen()', script: 'togglePen' },
- { title: "Highlighter", toolTip: "Highlighter (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter", click: 'toggleHighlighter()', script: 'toggleHighlighter' },
+ { title: "Highlighter", toolTip: "Highlighter (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter", click: 'setHighlighter()', script: 'toggleHighlighter' },
{ title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", click: 'toggleCircle()', script: 'toggleCircle' },
{ title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", click: 'toggleSquare()', script: 'toggleSquare' },
{ title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "fill-drip", click: 'toggleLine()', script: 'toggleLine' },
];
+ return tools;
}
- static webTools(doc: Doc) {
- return [
- {
- title: "Font", toolTip: "Font", width: 100, btnType: ButtonType.DropdownList, ignoreClick: true,
- list: ["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia",
- "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"],
- script: 'changeFont'
+ static schemaTools(doc: Doc) {
+ const tools:Button[] =
+ [
+ {
+ title: "Show preview",
+ toolTip: "Show preview of selected document",
+ btnType: ButtonType.ToggleButton,
+ switchToggle: true,
+ icon: "eye",
+ click: 'toggleSchemaShow()',
+ script: 'toggleSchemaShow'
},
];
+ return tools;
+ }
+
+ static webTools(doc: Doc) {
+ const tools:Button[] =
+ [
+ { title: "Back", toolTip: "Go back", btnType: ButtonType.ClickButton, icon: "arrow-left", click: 'webBack()' },
+ { title: "Forward", toolTip: "Go forward", btnType: ButtonType.ClickButton, icon: "arrow-right", click: 'webForward()' },
+ { title: "Reload", toolTip: "Reload webpage", btnType: ButtonType.ClickButton, icon: "redo-alt", click: 'webReload()' },
+ { title: "URL", toolTip: "URL", width: 150, btnType: ButtonType.EditableText, icon: "lock", script: 'webSetURL' },
+ ];
+
+ return tools;
}
- static async contextMenuBtnDescriptions(doc: Doc) {
+ static async contextMenuTools(doc: Doc) {
return [
{
title: "Perspective", toolTip: "View", width: 100, btnType: ButtonType.DropdownList, ignoreClick: true,
@@ -973,50 +1011,41 @@ export class CurrentUserUtils {
script: "changeBackgroundColor"
},
{ title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()', script:'toggleOverlay'},
- { title: "Text", type: "TextMenu" },
- { title: "Ink & GFX", type: "InkMenu" },
- // { title: "Ink Tools", type: "LinearMenu", icon: "pen-nib" },
- // { title: "GFX Tools", type: "LinearMenu", icon: "shapes" },
- // { title: "Alias", btnType: ButtonType.ClickButton, icon: "copy" },
+ { title: "Alias", btnType: ButtonType.ClickButton, icon: "copy" },
+ { title: "Text", type: "textTools", subMenu: true },
+ { title: "Ink & GFX", type: "inkTools", subMenu: true },
+ { title: "Web", type: "webTools", subMenu: true },
+ { title: "Schema", type: "schemaTools", subMenu: true }
];
}
- // Default context menu buttons
+ // Sets up the default context menu buttons
static async setupContextMenuButtons(doc: Doc) {
const docList: Doc[] = [];
- const contextMenuBtns = (await CurrentUserUtils.contextMenuBtnDescriptions(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, type, btnType, click, script }) => {
- const textDocList: Doc[] = [];
- if (type === "TextMenu") {
- const textBtns = (CurrentUserUtils.textTools(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, btnType, click, script, userColorBtn }) => {
- textDocList.push(Docs.Create.FontIconDocument({
- _nativeWidth: width ? width : 25,
- _nativeHeight: 25,
- _width: width ? width : 25,
- _height: 25,
- icon,
- toolTip,
- userColorBtn,
- script,
- btnType: btnType,
- btnList: new List<string>(list),
- ignoreClick: ignoreClick,
- _stayInCollection: true,
- _hideContextMenu: true,
- system: true,
- dontUndo: true,
- title,
- color: Colors.WHITE,
- backgroundColor: "transparent",
- _dropAction: "alias",
- _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
- onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
- }));
- });
- docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
- } else if (type === "InkMenu") {
- const inkBtns = (CurrentUserUtils.inkTools(doc)).map(({ title, toolTip, icon, btnType, click }) => {
- textDocList.push(Docs.Create.FontIconDocument({
+ (await CurrentUserUtils.contextMenuTools(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, type, btnType, click, script, subMenu }) => {
+ const menuDocList: Doc[] = [];
+ if (subMenu) {
+ // default is textTools
+ let tools: Button[];
+ switch(type){
+ case "inkTools":
+ tools = CurrentUserUtils.inkTools(doc);
+ break;
+ case "schemaTools":
+ tools = CurrentUserUtils.schemaTools(doc);
+ break;
+ case "webTools":
+ tools = CurrentUserUtils.webTools(doc);
+ break;
+ case "textTools":
+ tools = CurrentUserUtils.textTools(doc);
+ break;
+ default:
+ break;
+ }
+ tools.map(({ title, toolTip, icon, btnType, click, script, width, list, ignoreClick }) => {
+ menuDocList.push(Docs.Create.FontIconDocument({
_nativeWidth: width ? width : 25,
_nativeHeight: 25,
_width: width ? width : 25,
@@ -1039,7 +1068,7 @@ export class CurrentUserUtils {
onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
}));
});
- docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
+ docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, menuDocList));
} else {
docList.push(Docs.Create.FontIconDocument({
_nativeWidth: width ? width : 25,
@@ -1070,6 +1099,7 @@ export class CurrentUserUtils {
doc.contextMenuBtns = CurrentUserUtils.linearButtonList({ title: "menu buttons", flexGap: 0, ignoreClick: true, linearViewExpandable: false, _height: 35 }, docList);
}
}
+
// sets up the default set of documents to be shown in the Overlay layer
static setupOverlays(doc: Doc) {
if (doc.myOverlayDocs === undefined) {
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss
index a963f1cb9..7f62ecaa0 100644
--- a/src/client/views/collections/TabDocView.scss
+++ b/src/client/views/collections/TabDocView.scss
@@ -1,3 +1,6 @@
+@import "../global/globalCssVariables.scss";
+
+
input.lm_title:focus,
input.lm_title {
max-width: unset !important;
@@ -57,12 +60,11 @@ input.lm_title {
}
}
-.miniMap-hidden,
.miniMap {
position: absolute;
overflow: hidden;
- right: 10;
- bottom: 10;
+ right: 15;
+ bottom: 15;
border: solid 1px;
box-shadow: black 0.4vw 0.4vw 0.8vw;
width: 100%;
@@ -82,17 +84,21 @@ input.lm_title {
}
.miniMap-hidden {
+ cursor: pointer;
position: absolute;
- bottom: 0;
- right: 0;
- width: 45px;
- height: 45px;
- transform: translate(20px, 20px) rotate(45deg);
- border-radius: 30px;
+ bottom: 5;
+ display: flex;
+ right: 5;
+ width: 25px;
+ height: 25px;
+ border-radius: 3px;
padding: 2px;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ background-color: $light-gray;
- >svg {
- margin-top: 3px;
- transform: translate(0px, 7px);
+ &:hover {
+ box-shadow: none;
}
} \ No newline at end of file
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 00de36400..a999512cc 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -34,6 +34,7 @@ import { CollectionView, CollectionViewType } from './CollectionView';
import "./TabDocView.scss";
import React = require("react");
import Color = require('color');
+import { Colors, Shadows } from '../global/globalEnums';
const _global = (window /* browser */ || global /* node */) as any;
interface TabDocViewProps {
@@ -386,8 +387,15 @@ export class TabDocView extends React.Component<TabDocViewProps> {
background={this.miniMapColor}
document={this._document}
tabView={this.tabView} />
- <Tooltip style={{ display: this.disableMinimap() ? "none" : undefined }} key="ttip" title={<div className="dash-tooltip">{"toggle minimap"}</div>}>
- <div className="miniMap-hidden" onPointerDown={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
+ <Tooltip style={{ display: this.disableMinimap() ? "none" : undefined }} key="ttip" title={<div className="dash-tooltip">{this._document.hideMinimap ? "Open minimap" : "Close minimap"}</div>}>
+ <div className="miniMap-hidden"
+ style={{
+ color: this._document.hideMinimap ? Colors.BLACK : Colors.WHITE,
+ backgroundColor: this._document.hideMinimap ? Colors.LIGHT_GRAY : Colors.MEDIUM_BLUE,
+ boxShadow: this._document.hideMinimap ? Shadows.STANDARD_SHADOW : undefined
+ }}
+ onPointerDown={e => e.stopPropagation()}
+ onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
<FontAwesomeIcon icon={"globe-asia"} size="lg" />
</div>
</Tooltip>
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
index 44752e034..24c9bc9cb 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.scss
@@ -89,7 +89,7 @@
padding: 5;
border-radius: 2px;
height: 25;
-
+ min-width: 25;
margin: 0;
color: $white;
display: flex;
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index 48f50cf2d..990c2e4b2 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -17,7 +17,7 @@ import { StyleProp } from '../../StyleProvider';
import "./CollectionLinearView.scss";
import { CollectionSubView } from '.././CollectionSubView';
import { CollectionViewType } from '.././CollectionView';
-import { Colors } from '../../global/globalEnums';
+import { Colors, Shadows } from '../../global/globalEnums';
type LinearDocument = makeInterface<[typeof documentSchema,]>;
@@ -112,6 +112,8 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content
const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content
const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not
+ const floating: boolean = BoolCast(this.props.Document.linearViewFloating); // Specify whether it is expandable or not
+
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle
@@ -121,7 +123,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
backgroundColor: backgroundColor === color ? "black" : BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.LIGHT_GRAY
}}
onPointerDown={e => e.stopPropagation()} >
- <div className="collectionLinearView-menuOpener">
+ <div className="collectionLinearView-menuOpener"
+ style={{ boxShadow: floating ? Shadows.STANDARD_SHADOW : undefined }}
+ >
{BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : "–" : icon ? icon : "+"}
</div>
</label>;
@@ -181,7 +185,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
</div>;
})}
</div>
- {DocumentLinksButton.StartLink ? <span className="bottomPopup-background" style={{
+ {DocumentLinksButton.StartLink && StrCast(this.layoutDoc.title) === "docked buttons" ? <span className="bottomPopup-background" style={{
pointerEvents: "all"
}}
onPointerDown={e => e.stopPropagation()} >
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index a1baed7d9..2fd67a8dc 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -16,6 +16,7 @@ $close-red: #e48282;
$drop-shadow: "#32323215";
+
//padding
$minimum-padding: 4px;
$medium-padding: 16px;
@@ -48,6 +49,10 @@ $standard-border: solid 1px #9f9f9f;
// border radius
$standard-border-radius: 3px;
+// shadow
+$standard-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+
+
$searchpanel-height: 32px;
$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc
$docDecorations-zindex: 998; // then doc decorations appear over everything else
diff --git a/src/client/views/global/globalEnums.tsx b/src/client/views/global/globalEnums.tsx
index 074a3aab3..56779c37c 100644
--- a/src/client/views/global/globalEnums.tsx
+++ b/src/client/views/global/globalEnums.tsx
@@ -36,4 +36,8 @@ export enum IconSizes {
export enum Borders {
STANDARD = "solid 1px #9F9F9F"
+}
+
+export enum Shadows {
+ STANDARD_SHADOW = "0px 3px 4px rgba(0, 0, 0, 0.3)"
} \ 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 fef99ce83..c1f5282d0 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -38,11 +38,15 @@
&.clickBtn {
cursor: pointer;
- width: 40px;
&:hover {
background-color: rgba(0, 0, 0, 0.3) !important;
}
+
+ svg {
+ width: 50% !important;
+ height: 50%;
+ }
}
&.tglBtn {
@@ -157,9 +161,58 @@
}
}
+ &.numBtn {
+ cursor: pointer;
+ background: transparent;
+
+ &.slider {
+ .numberBtn-slider {}
+
+ .menuButton-dropdownBox {
+ position: absolute;
+ width: fit-content;
+ height: fit-content;
+ top: 100%;
+ z-index: 21;
+ background-color: #e3e3e3;
+ box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+ border-radius: $standard-border-radius;
+ }
+ }
+
+ &.dropdown {
+ .menuButton-dropdownList {
+ position: absolute;
+ width: fit-content;
+ height: fit-content;
+ top: 100%;
+ z-index: 21;
+ background-color: $white;
+ box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+ padding: 1px;
+
+ .list-item {
+ color: $black;
+ width: 100%;
+ height: 25px;
+ font-weight: 400;
+ display: flex;
+ justify-content: left;
+ align-items: center;
+ padding-left: 5px;
+ }
+
+ .list-item:hover {
+ background-color: lightgrey;
+ }
+ }
+ }
+ }
+
&.drpDownBtn {
cursor: pointer;
background: transparent;
+ border: solid 0.5px grey;
&.true {
background: rgba(0, 0, 0, 0.3);
@@ -172,7 +225,7 @@
top: 100%;
background-color: #e3e3e3;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
- border-radius: 3px;
+ border-radius: $standard-border-radius;
}
}
@@ -208,4 +261,67 @@
position: fixed;
}
+}
+
+
+//TOGGLE
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 50px;
+ height: 25px;
+}
+
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: lightgrey;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 22px;
+ width: 22px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked+.slider {
+ background-color: $medium-blue;
+}
+
+input:focus+.slider {
+ box-shadow: 0 0 1px $medium-blue;
+}
+
+input:checked+.slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: $standard-border-radius;
+}
+
+.slider.round:before {
+ border-radius: $standard-border-radius;
} \ No newline at end of file
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index aa3a1ada4..46d92cd6e 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -3,9 +3,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
+import { StringifyOptions } from 'querystring';
import * as React from 'react';
import { ColorState, SketchPicker } from 'react-color';
import { Doc, StrListCast } from '../../../../fields/Doc';
+import { InkTool } from '../../../../fields/InkField';
import { createSchema, makeInterface } from '../../../../fields/Schema';
import { ScriptField } from '../../../../fields/ScriptField';
import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types';
@@ -17,9 +19,11 @@ import { UndoManager } from '../../../util/UndoManager';
import { CollectionViewType } from '../../collections/CollectionView';
import { ContextMenu } from '../../ContextMenu';
import { DocComponent } from '../../DocComponent';
+import { EditableView } from '../../EditableView';
import { Colors } from '../../global/globalEnums';
import { StyleProp } from '../../StyleProvider';
import { FieldView, FieldViewProps } from '.././FieldView';
+import { RichTextMenu } from '../formattedText/RichTextMenu';
import './FontIconBox.scss';
const FontIconSchema = createSchema({
icon: "string",
@@ -34,7 +38,8 @@ export enum ButtonType {
ToggleButton = "tglBtn",
ColorButton = "colorBtn",
ToolButton = "toolBtn",
- NumberButton = "numBtn"
+ NumberButton = "numBtn",
+ EditableText = "editableTxt"
}
export enum NumButtonType {
@@ -94,10 +99,15 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
@computed get numberButton() {
const numType: string = StrCast(this.rootDoc.numButtonType);
- return (
- <div className={`menuButton ${this.type}`}
- >
+ const dropdown = numType ?
+ <div className="menuButton-dropdownBox"
+ style={{ left: 0 }}>
+ {/* DROPDOWN BOX CONTENTS */}
+ </div> : null;
+ return (
+ <div className={`menuButton ${this.type} ${numType}`}>
+ {this.rootDoc.dropDownOpen ? dropdown : null}
</div>
);
}
@@ -130,7 +140,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
}
/**
- * Dropdown button
+ * Dropdown list
*/
@computed get dropdownListButton() {
const active: string = StrCast(this.rootDoc.dropDownOpen);
@@ -221,7 +231,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
}
/**
- * Colour button
+ * Color button
*/
@computed get colorButton() {
const active: string = StrCast(this.rootDoc.dropDownOpen);
@@ -229,10 +239,18 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
const numSelected = SelectionManager.Views().length;
const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
+
+ const script: string = StrCast(this.rootDoc.script);
+ const scriptCheck: string = script + "(undefined, true)";
+ const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result;
+ console.log("[boolResul]: ", boolResult);
+
+ const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+ '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+ '#FFFFFF', '#f1efeb', 'transparent'];
+
const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={selectedDoc ? selectedDoc._backgroundColor : backgroundColor}
- presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
- '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
- '#FFFFFF', '#f1efeb', 'transparent']} />;
+ presetColors={colorOptions} />;
const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
{this.label}
@@ -242,10 +260,9 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
<FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
</div>;
- const script: string = StrCast(this.rootDoc.script);
const click = (value: ColorState) => {
const hex: string = value.hex;
- const s = ScriptField.MakeScript(script + '("' + hex + '")');
+ const s = ScriptField.MakeScript(script + '("' + hex + '", false)');
if (s) {
s.script.run().result;
}
@@ -277,20 +294,47 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
}
@computed get toggleButton() {
- const script: string = StrCast(this.rootDoc.script) + "(true)";
- const boolResult = ScriptField.MakeScript(script)?.script.run().result;
+ // Determine the type of toggle button
+ const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle);
+
+ // Script for running the toggle
+ const script: string = StrCast(this.rootDoc.script) + "()";
+ // Script for checking the outcome of the toggle
+ const checkScript: string = StrCast(this.rootDoc.script) + "(true)";
+ // Function to run the script
+ const runScript = () => ScriptField.MakeScript(script)?.script.run();
+ const checkResult = ScriptField.MakeScript(checkScript)?.script.run().result;
+
+ // Colors
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+
+ // Button label
const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
{this.label}
</div>;
+
return (
- <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: boolResult ? Colors.MEDIUM_BLUE : "transparent" }}>
- <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={boolResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
- {label}
- </div>
+ switchToggle ?
+ <div>
+ <label className="switch">
+ <input type="checkbox"
+ checked={checkResult}
+ onChange={runScript}
+ />
+ <span className="slider round"></span>
+ </label>
+ </div>
+ :
+ <div className={`menuButton ${this.type}`}
+ style={{ opacity: 1, backgroundColor: checkResult ? Colors.MEDIUM_BLUE : "transparent" }}
+ onClick={this.layoutDoc.ignoreClick ? runScript : undefined}
+ >
+ <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={checkResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
+ {label}
+ </div>
);
}
@@ -314,6 +358,19 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
);
}
+ @computed get editableText() {
+ const setValue = (value: string, shiftDown?: boolean): boolean => {
+ console.log("setValue");
+ return true;
+ };
+
+ return <div className={`menuButton ${this.type}`}>
+ TEST
+ <EditableView GetValue={() => ""} SetValue={setValue} contents="...">
+ </EditableView>
+ </div>;
+ }
+
render() {
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
@@ -342,6 +399,8 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
let button = this.defaultButton;
switch (this.type) {
+ case ButtonType.EditableText:
+ button = this.editableText;
case ButtonType.NumberButton:
button = this.numberButton;
break;
@@ -420,7 +479,6 @@ Scripting.addGlobal(function changeBackgroundColor(color?: string, checkResult?:
Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
if (checkResult && selected) {
- console.log("z: ", NumCast(selected.Document.z) === 1);
return NumCast(selected.Document.z) === 1;
}
selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed");
@@ -429,17 +487,43 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
// toggle: Set overlay status of selected document
Scripting.addGlobal(function changeFont(font: string) {
SelectionManager.Views().map(dv => dv.props.Document._fontFamily = font);
- console.log(font);
+ console.log("[changeFont]: ", font);
+ console.log(RichTextMenu.Instance.getActiveMarksOnSelection());
Doc.UserDoc()._fontFamily = font;
return Doc.UserDoc()._fontFamily;
});
// toggle: Set overlay status of selected document
-Scripting.addGlobal(function changeFontColor(color: string) {
- console.log(color);
+Scripting.addGlobal(function changeFontColor(color?: string, checkResult?: boolean) {
+ const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+ if (checkResult) {
+ if (selected) {
+ console.log("[Font color] (selected): " + StrCast(selected.Document._fontColor));
+ return selected.Document._fontColor;
+ } else {
+ console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor));
+ return Doc.UserDoc()._fontColor;
+ }
+ }
+ Doc.UserDoc()._fontColor = color;
+});
+
+// toggle: Set overlay status of selected document
+Scripting.addGlobal(function changeFontHighlight(color?: string, checkResult?: boolean) {
+ const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+ if (checkResult) {
+ if (selected) {
+ console.log("[Font color] (selected): " + StrCast(selected.Document._fontColor));
+ return selected.Document._fontColor;
+ } else {
+ console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor));
+ return Doc.UserDoc()._fontColor;
+ }
+ }
Doc.UserDoc()._fontColor = color;
});
+
// toggle: Set overlay status of selected document
Scripting.addGlobal(function changeFontSize(size: string) {
console.log(size);
@@ -471,4 +555,15 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
SelectionManager.Views().map(dv => dv.props.Document.italic = !dv.props.Document.italic);
Doc.UserDoc().bold = !Doc.UserDoc().italic;
return Doc.UserDoc().italic;
+});
+
+Scripting.addGlobal(function setActiveInkTool(checkResult?: boolean, tool?: InkTool) {
+ if (checkResult) {
+ return Doc.UserDoc().activeInkTool === tool;
+ }
+ if (tool) {
+ Doc.UserDoc().activeInkTool = tool;
+ } else {
+ Doc.UserDoc().activeInkTool = InkTool.None;
+ }
}); \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 04:36:35 +0000