From 0eede4546f2ddc862a42a43e0daa1fc02dfe6cae Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 20 Aug 2021 13:05:04 -0400 Subject: more updates --- src/client/views/global/globalCssVariables.scss | 9 +++++++-- src/client/views/global/globalEnums.tsx | 1 + 2 files changed, 8 insertions(+), 2 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index 7556f8b8a..a1baed7d9 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -8,6 +8,7 @@ $black: #000000; $light-blue: #bdddf5; $medium-blue: #4476f7; +$medium-blue-alt: #4476f73d; $pink: #e0217d; $yellow: #f5d747; @@ -24,7 +25,8 @@ $large-padding: 32px; $icon-size: 28px; // fonts -$sans-serif: "Roboto", sans-serif; +$sans-serif: "Roboto", +sans-serif; $large-header: 16px; $body-text: 12px; $small-text: 9px; @@ -43,6 +45,9 @@ $radialMenu-zindex: 100000; // context menu shows up over everything // borders $standard-border: solid 1px #9f9f9f; +// border radius +$standard-border-radius: 3px; + $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 @@ -67,4 +72,4 @@ $TREE_BULLET_WIDTH: 20px; DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; MENU_PANEL_WIDTH: $MENU_PANEL_WIDTH; TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH; -} +} \ No newline at end of file diff --git a/src/client/views/global/globalEnums.tsx b/src/client/views/global/globalEnums.tsx index 2aeb8e338..074a3aab3 100644 --- a/src/client/views/global/globalEnums.tsx +++ b/src/client/views/global/globalEnums.tsx @@ -5,6 +5,7 @@ export enum Colors { LIGHT_GRAY = "#DFDFDF", WHITE = "#FFFFFF", MEDIUM_BLUE = "#4476F7", + MEDIUM_BLUE_ALT = "#4476f73d", // REDUCED OPACITY LIGHT_BLUE = "#BDDDF5", PINK = "#E0217D", YELLOW = "#F5D747", -- cgit v1.2.3-70-g09d2 From 101f04d82e49335fb2a55301a4ef4e7b04f081e6 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Mon, 23 Aug 2021 22:15:40 -0400 Subject: menu getting closer :cry: --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 134 ++++++++++++-------- src/client/views/collections/TabDocView.scss | 30 +++-- src/client/views/collections/TabDocView.tsx | 12 +- .../collectionLinearView/CollectionLinearView.scss | 2 +- .../collectionLinearView/CollectionLinearView.tsx | 10 +- src/client/views/global/globalCssVariables.scss | 5 + src/client/views/global/globalEnums.tsx | 4 + src/client/views/nodes/button/FontIconBox.scss | 120 +++++++++++++++++- src/client/views/nodes/button/FontIconBox.tsx | 137 +++++++++++++++++---- 10 files changed, 362 insertions(+), 93 deletions(-) (limited to 'src/client/views/global') 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(list), - ignoreClick: ignoreClick, - _stayInCollection: true, - _hideContextMenu: true, - system: true, - dontUndo: true, - title, - color: Colors.WHITE, - backgroundColor: "transparent", - _dropAction: "alias", - _removeDropProperties: new List(["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 { background={this.miniMapColor} document={this._document} tabView={this.tabView} /> - {"toggle minimap"}}> -
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} > + {this._document.hideMinimap ? "Open minimap" : "Close minimap"}
}> +
e.stopPropagation()} + onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
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()} > -
+
{BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : "–" : icon ? icon : "+"}
; @@ -181,7 +185,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
; })} - {DocumentLinksButton.StartLink ? 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(Fon @computed get numberButton() { const numType: string = StrCast(this.rootDoc.numButtonType); - return ( -
+ const dropdown = numType ? +
+ {/* DROPDOWN BOX CONTENTS */} +
: null; + return ( +
+ {this.rootDoc.dropDownOpen ? dropdown : null}
); } @@ -130,7 +140,7 @@ export class FontIconBox extends DocComponent(Fon } /** - * Dropdown button + * Dropdown list */ @computed get dropdownListButton() { const active: string = StrCast(this.rootDoc.dropDownOpen); @@ -221,7 +231,7 @@ export class FontIconBox extends DocComponent(Fon } /** - * Colour button + * Color button */ @computed get colorButton() { const active: string = StrCast(this.rootDoc.dropDownOpen); @@ -229,10 +239,18 @@ export class FontIconBox extends DocComponent(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) => ; + presetColors={colorOptions} />; const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
{this.label} @@ -242,10 +260,9 @@ export class FontIconBox extends DocComponent(Fon style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
; - 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(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) :
{this.label}
; + return ( -
- - {label} -
+ switchToggle ? +
+ +
+ : +
+ + {label} +
); } @@ -314,6 +358,19 @@ export class FontIconBox extends DocComponent(Fon ); } + @computed get editableText() { + const setValue = (value: string, shiftDown?: boolean): boolean => { + console.log("setValue"); + return true; + }; + + return
+ TEST + ""} SetValue={setValue} contents="..."> + +
; + } + render() { const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); @@ -342,6 +399,8 @@ export class FontIconBox extends DocComponent(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 -- cgit v1.2.3-70-g09d2 From d1ea2f764d0207963788eb4238ede79bcffa23f6 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 24 Aug 2021 10:48:38 -0400 Subject: more bits and pieces (ahhhh) --- src/client/documents/Documents.ts | 3 +- src/client/util/CurrentUserUtils.ts | 22 ++++++--- src/client/util/SettingsManager.scss | 5 +- src/client/views/MainViewModal.scss | 4 +- src/client/views/global/globalCssVariables.scss | 1 + src/client/views/nodes/DocumentLinksButton.scss | 1 + src/client/views/nodes/DocumentLinksButton.tsx | 1 + src/client/views/nodes/button/FontIconBox.tsx | 66 ++++++++++++++++++------- 8 files changed, 71 insertions(+), 32 deletions(-) (limited to 'src/client/views/global') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 9ba31da3b..63acd004f 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1151,8 +1151,7 @@ export namespace DocUtils { description: ":" + StrCast(note.title), event: undoBatch((args: { x: number, y: number }) => { const textDoc = Docs.Create.TextDocument("", { - _fontFamily: StrCast(Doc.UserDoc()._fontFamily), - _fontSize: StrCast(Doc.UserDoc()._fontSize), + _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), _width: 200, x, y, _autoHeight: note._autoHeight !== false, title: StrCast(note.title) + "#" + (note.aliasCount = NumCast(note.aliasCount) + 1) }); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8abac9975..73a66332f 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -99,7 +99,7 @@ export class CurrentUserUtils { const slideTemplate = Docs.Create.MultirowDocument( [ Docs.Create.MulticolumnDocument([], { title: "data", _height: 200, system: true }), - Docs.Create.TextDocument("", { title: "text", _height: 100, system: true }) + Docs.Create.TextDocument("", { title: "text", _height: 100, system: true, _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize) }) ], { _width: 400, _height: 300, title: "slideView", _xMargin: 3, _yMargin: 3, system: true } ); @@ -271,24 +271,28 @@ export class CurrentUserUtils { // setup the different note type skins static setupNoteTemplates(doc: Doc) { if (doc["template-note-Note"] === undefined) { - const noteView = Docs.Create.TextDocument("", { title: "text", isTemplateDoc: true, backgroundColor: "yellow", system: true }); + const noteView = Docs.Create.TextDocument("", { title: "text", isTemplateDoc: true, backgroundColor: "yellow", system: true, + _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), }); noteView.isTemplateDoc = makeTemplate(noteView, true, "Note"); doc["template-note-Note"] = new PrefetchProxy(noteView); } if (doc["template-note-Idea"] === undefined) { - const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "pink", system: true }); + const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "pink", system: true, + _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), }); noteView.isTemplateDoc = makeTemplate(noteView, true, "Idea"); doc["template-note-Idea"] = new PrefetchProxy(noteView); } if (doc["template-note-Topic"] === undefined) { - const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "lightblue", system: true }); + const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "lightblue", system: true, + _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), }); noteView.isTemplateDoc = makeTemplate(noteView, true, "Topic"); doc["template-note-Topic"] = new PrefetchProxy(noteView); } if (doc["template-note-Todo"] === undefined) { const noteView = Docs.Create.TextDocument("", { title: "text", backgroundColor: "orange", _autoHeight: false, _height: 100, _showCaption: "caption", - layout: FormattedTextBox.LayoutString("Todo"), caption: RichTextField.DashField("taskStatus"), system: true + layout: FormattedTextBox.LayoutString("Todo"), caption: RichTextField.DashField("taskStatus"), system: true, + _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), }); noteView.isTemplateDoc = makeTemplate(noteView, true, "Todo"); doc["template-note-Todo"] = new PrefetchProxy(noteView); @@ -472,7 +476,9 @@ export class CurrentUserUtils { ((doc.emptyAudio as Doc).proto as Doc)["dragFactory-count"] = 0; } if (doc.emptyNote === undefined) { - doc.emptyNote = Docs.Create.TextDocument("", { _width: 200, title: "text note", _autoHeight: true, system: true, cloneFieldFilter: new List(["system"]) }); + doc.emptyNote = Docs.Create.TextDocument("", { _width: 200, title: "text note", _autoHeight: true, system: true, + _fontFamily: StrCast(Doc.UserDoc()._fontFamily), _fontSize: StrCast(Doc.UserDoc()._fontSize), + cloneFieldFilter: new List(["system"]) }); ((doc.emptyNote as Doc).proto as Doc)["dragFactory-count"] = 0; } if (doc.emptyImage === undefined) { @@ -940,7 +946,7 @@ export class CurrentUserUtils { "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"], script: 'changeFont' }, - { title: "Font size", toolTip: "Font size", btnType: ButtonType.NumberButton, numType: NumButtonType.DropdownOptions, script: 'changeFontSize'}, + { title: "Font size", toolTip: "Font size", btnType: ButtonType.NumberButton, numType: NumButtonType.DropdownOptions, ignoreClick: true, 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' }, @@ -964,7 +970,7 @@ export class CurrentUserUtils { { title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", click: 'setActiveInkTool("circle")' }, { title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", click: 'setActiveInkTool("square")' }, { title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "fill-drip", click: 'setActiveInkTool("line")' }, - { title: "Stroke width", toolTip: "Stroke width", btnType: ButtonType.NumberButton, numType: NumButtonType.Slider, script: 'setLineWidth'}, + { title: "Stroke width", toolTip: "Stroke width", width:75, btnType: ButtonType.NumberButton, numType: NumButtonType.Slider, ignoreClick: true, script: 'setLineWidth'}, ]; return tools; } diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index c9db94419..b7199f433 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -360,17 +360,18 @@ flex-direction: row; position: relative; min-height: 250px; + height: 100%; width: 100%; .settings-content { - background-color: #fdfdfd; + background-color: $off-white; } } .settings-panel { position: relative; min-width: 150px; - background-color: #e4e4e4; + background-color: $light-blue; .settings-user { position: absolute; diff --git a/src/client/views/MainViewModal.scss b/src/client/views/MainViewModal.scss index 5f19590b4..03cb5cc84 100644 --- a/src/client/views/MainViewModal.scss +++ b/src/client/views/MainViewModal.scss @@ -4,6 +4,7 @@ z-index: 10000; width: 100%; height: 100%; + .dialogue-box { position: absolute; z-index: 1000; @@ -11,11 +12,8 @@ justify-content: center; align-self: center; align-content: center; - padding: 20px; - // background: gainsboro; background: white; border-radius: 10px; - border: 0.5px solid black; box-shadow: #00000044 5px 5px 10px; transform: translate(-50%, -50%); top: 50%; diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss index 2fd67a8dc..caa9f4fe5 100644 --- a/src/client/views/global/globalCssVariables.scss +++ b/src/client/views/global/globalCssVariables.scss @@ -1,6 +1,7 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); // colors $white: #ffffff; +$off-white: #fdfdfd; $light-gray: #dfdfdf; $medium-gray: #9f9f9f; $dark-gray: #323232; diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index b37b68249..228e1bdcb 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -50,6 +50,7 @@ width: 80%; height: 80%; font-size: 100%; + font-family: 'Roboto'; transition: 0.2s ease all; &:hover { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 7648e866e..bf9499d1d 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -266,6 +266,7 @@ export class DocumentLinksButton extends React.Component diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 7ff3e388f..f78bb6842 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -106,21 +106,15 @@ export class FontIconBox extends DocComponent(Fon }; // Script for checking the outcome of the toggle - const checkScript: string = StrCast(this.rootDoc.script) + "(true)"; + const checkScript: string = StrCast(this.rootDoc.script) + "(0, true)"; const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result; - const dropdown = -
- {/* DROPDOWN BOX CONTENTS */} -
; if (numType === NumButtonType.Slider) { - return ( + const dropdown =
(Fon onPointerUp={() => { if (this._batch) this._batch.end(); }} onChange={(e: React.ChangeEvent) => { e.stopPropagation(); setValue(Number(e.target.value)); }} /> +
; + return ( +
this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} + > + {checkResult} + {dropdown}
); } else if (numType === NumButtonType.DropdownOptions) { + const items: number[] = []; + for (let i = 0; i < 100; i++) { + if (i % 2 === 0) { + items.push(i); + } + } + items.map((value) => { + return
setValue(value)}> + {value} +
; + }); return (
this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} > -
+
setValue(checkResult - 1))}>
-
+
e.stopPropagation()} + onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} + > setValue(Number(e.target.value)))} />
-
+
setValue(checkResult + 1))}>
- {this.rootDoc.dropDownOpen ? dropdown : null} + {this.rootDoc.dropDownOpen ? +
+
+ {items} +
+
{ e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> +
: null} +
); } else { @@ -576,9 +604,13 @@ Scripting.addGlobal(function changeFontHighlight(color?: string, checkResult?: b // toggle: Set overlay status of selected document -Scripting.addGlobal(function changeFontSize(size: string) { +Scripting.addGlobal(function changeFontSize(size: string, checkResult?: boolean) { + if (checkResult) { + const size: number = parseInt(StrCast(Doc.UserDoc()._fontSize), 10); + return size; + } console.log(size); - Doc.UserDoc()._fontSize = size; + Doc.UserDoc()._fontSize = size + "px"; }); Scripting.addGlobal(function toggleBold(checkResult?: boolean) { -- cgit v1.2.3-70-g09d2