From f3c02a5df4c589846d47f0c435456f4c83b58484 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Thu, 18 Jul 2019 14:09:43 -0400 Subject: hi --- src/client/views/Main.scss | 38 ++++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 16 deletions(-) (limited to 'src/client/views/Main.scss') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index a16123476..eed2ae4fa 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -24,7 +24,7 @@ div { .jsx-parser { width: 100%; - height:100%; + height: 100%; pointer-events: none; border-radius: inherit; } @@ -119,6 +119,7 @@ button:hover { margin-bottom: 10px; } } + .toolbar-color-picker { background-color: $light-color; border-radius: 5px; @@ -128,6 +129,7 @@ button:hover { left: -3px; box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; } + .toolbar-color-button { border-radius: 11px; width: 22px; @@ -146,7 +148,7 @@ button:hover { bottom: 22px; left: 250px; - > label { + >label { background: $dark-color; color: $light-color; display: inline-block; @@ -168,15 +170,15 @@ button:hover { transform: scale(1.15); } - > input { + >input { display: none; } - > input:not(:checked)~#add-options-content { + >input:not(:checked)~#add-options-content { display: none; } - > input:checked~label { + >input:checked~label { transform: rotate(45deg); transition: transform 0.5s; cursor: pointer; @@ -221,7 +223,7 @@ ul#add-options-list { list-style: none; padding: 5 0 0 0; - > li { + >li { display: inline-block; padding: 0; } @@ -231,7 +233,7 @@ ul#add-options-list { height: 100%; position: absolute; display: flex; - flex-direction:column; + flex-direction: column; } .mainView-libraryHandle { @@ -243,21 +245,25 @@ ul#add-options-list { position: absolute; z-index: 1; } + .svg-inline--fa { vertical-align: unset; } + .mainView-workspace { - height:200px; - position:relative; - display:flex; + height: 200px; + position: relative; + display: flex; } + .mainView-library { - height:75%; - position:relative; - display:flex; + height: 75%; + position: relative; + display: flex; } + .mainView-recentlyClosed { - height:25%; - position:relative; - display:flex; + height: 25%; + position: relative; + display: flex; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 0c7a6d755c3394a027309c5469d170834e2de787 Mon Sep 17 00:00:00 2001 From: Eleanor Eng Date: Fri, 19 Jul 2019 12:31:56 -0400 Subject: gross color button is FIXED --- src/client/views/Main.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/client/views/Main.scss') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index eed2ae4fa..04249506a 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -140,6 +140,8 @@ button:hover { // font-size: 8px; // user-select: none; // } + margin-top: -2.55px; + margin-left: -2.55px; } // add nodes menu. Note that the + button is actually an input label, not an actual button. -- cgit v1.2.3-70-g09d2 From 8a87f7110b56ca96b3960f6fb3917c7ed8c7a814 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 31 Jul 2019 03:21:59 -0400 Subject: overlay completed --- src/client/util/DictationManager.ts | 12 +++---- src/client/views/GlobalKeyHandler.ts | 24 +++++++++---- src/client/views/Main.scss | 68 +++++++++++++++++++++++++++--------- src/client/views/MainView.tsx | 55 +++++++++++++++++++++++++++-- 4 files changed, 127 insertions(+), 32 deletions(-) (limited to 'src/client/views/Main.scss') diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index 6d67f6d6d..80efe12cd 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -1,5 +1,5 @@ import { string } from "prop-types"; -import { observable, action } from "mobx"; +import { observable, action, autorun } from "mobx"; import { SelectionManager } from "./SelectionManager"; import { DocumentView } from "../views/nodes/DocumentView"; import { UndoManager } from "./UndoManager"; @@ -8,6 +8,7 @@ import { Doc } from "../../new_fields/Doc"; import { List } from "../../new_fields/List"; import { Docs } from "../documents/Documents"; import { CollectionViewType } from "../views/collections/CollectionBaseView"; +import { MainView } from "../views/MainView"; namespace CORE { export interface IWindow extends Window { @@ -22,8 +23,8 @@ export type RegexEntry = { key: RegExp, value: DependentAction }; export default class DictationManager { public static Instance = new DictationManager(); - private isListening = false; private recognizer: any; + private isListening = false; constructor() { this.recognizer = new webkitSpeechRecognition(); @@ -31,18 +32,14 @@ export default class DictationManager { this.recognizer.continuous = true; } - @observable public current = ""; - - @action finish = (handler: any, data: any) => { - this.current = data; handler(data); this.stop(); } stop = () => { - this.isListening = false; this.recognizer.stop(); + this.isListening = false; } listen = () => { @@ -55,7 +52,6 @@ export default class DictationManager { this.recognizer.onresult = (e: any) => this.finish(resolve, e.results[0][0].transcript); this.recognizer.onerror = (e: any) => this.finish(reject, e); }); - } private sanitize = (title: string) => { diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 1d3c77ec7..a6020bd3f 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -3,7 +3,7 @@ import { SelectionManager } from "../util/SelectionManager"; import { CollectionDockingView } from "./collections/CollectionDockingView"; import { MainView } from "./MainView"; import { DragManager } from "../util/DragManager"; -import { action } from "mobx"; +import { action, runInAction } from "mobx"; import { Doc } from "../../new_fields/Doc"; import { CognitiveServices } from "../cognitive_services/CognitiveServices"; import DictationManager from "../util/DictationManager"; @@ -74,6 +74,7 @@ export default class KeyManager { MainView.Instance.toggleColorPicker(true); SelectionManager.DeselectAll(); DictationManager.Instance.stop(); + MainView.Instance.dictationOverlayVisible = false; break; case "delete": case "backspace": @@ -107,11 +108,22 @@ export default class KeyManager { switch (keyname) { case " ": - console.log("Listening..."); - let analyzer = DictationManager.Instance; - let transcript = await analyzer.listen(); - console.log(`I heard${transcript ? `: ${transcript.toLowerCase()}` : " nothing: I thought I was still listening from an earlier session."}`); - transcript && analyzer.execute(transcript); + let main = MainView.Instance; + main.dictationOverlayVisible = true; + main.isListening = true; + let manager = DictationManager.Instance; + let command = await manager.listen(); + main.isListening = false; + if (!command) { + break; + } + command = command.toLowerCase(); + main.dictatedPhrase = command; + main.dictationSuccess = await manager.execute(command); + setTimeout(() => { + main.dictationOverlayVisible = false; + main.dictationSuccess = undefined; + }, 3000); } return { diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index a16123476..8e57b88c3 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -24,7 +24,7 @@ div { .jsx-parser { width: 100%; - height:100%; + height: 100%; pointer-events: none; border-radius: inherit; } @@ -119,6 +119,7 @@ button:hover { margin-bottom: 10px; } } + .toolbar-color-picker { background-color: $light-color; border-radius: 5px; @@ -128,6 +129,7 @@ button:hover { left: -3px; box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; } + .toolbar-color-button { border-radius: 11px; width: 22px; @@ -146,7 +148,7 @@ button:hover { bottom: 22px; left: 250px; - > label { + >label { background: $dark-color; color: $light-color; display: inline-block; @@ -168,15 +170,15 @@ button:hover { transform: scale(1.15); } - > input { + >input { display: none; } - > input:not(:checked)~#add-options-content { + >input:not(:checked)~#add-options-content { display: none; } - > input:checked~label { + >input:checked~label { transform: rotate(45deg); transition: transform 0.5s; cursor: pointer; @@ -221,7 +223,7 @@ ul#add-options-list { list-style: none; padding: 5 0 0 0; - > li { + >li { display: inline-block; padding: 0; } @@ -231,7 +233,7 @@ ul#add-options-list { height: 100%; position: absolute; display: flex; - flex-direction:column; + flex-direction: column; } .mainView-libraryHandle { @@ -243,21 +245,55 @@ ul#add-options-list { position: absolute; z-index: 1; } + .svg-inline--fa { vertical-align: unset; } + .mainView-workspace { - height:200px; - position:relative; - display:flex; + height: 200px; + position: relative; + display: flex; } + .mainView-library { - height:75%; - position:relative; - display:flex; + height: 75%; + position: relative; + display: flex; } + .mainView-recentlyClosed { - height:25%; - position:relative; - display:flex; + height: 25%; + position: relative; + display: flex; +} + +.dictation-prompt { + position: absolute; + z-index: 1000; + text-align: center; + justify-content: center; + align-self: center; + align-content: center; + padding: 20px; + background: gainsboro; + border-radius: 10px; + border: 3px solid black; + box-shadow: #00000044 5px 5px 10px; + transform: translate(-50%, -50%); + top: 50%; + font-style: italic; + left: 50%; + transition: 0.5s all ease; + pointer-events: none; +} + +.dictation-prompt-overlay { + width: 100%; + height: 100%; + position: absolute; + background: darkslategray; + z-index: 999; + transition: 0.5s all ease; + pointer-events: none; } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 36ac96907..d6449cffc 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -39,7 +39,6 @@ import { FilterBox } from './search/FilterBox'; import { CollectionTreeView } from './collections/CollectionTreeView'; import { ClientUtils } from '../util/ClientUtils'; import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField'; -import DictationManager from '../util/DictationManager'; @observer export class MainView extends React.Component { @@ -48,6 +47,12 @@ export class MainView extends React.Component { @observable private _workspacesShown: boolean = false; @observable public pwidth: number = 0; @observable public pheight: number = 0; + + @observable private dictationState = "Listening..."; + @observable private dictationSuccessState: boolean | undefined = undefined; + @observable private dictationDisplayState = false; + @observable private dictationListeningState = false; + @computed private get mainContainer(): Opt { return FieldValue(Cast(CurrentUserUtils.UserDocument.activeWorkspace, Doc)); } @@ -65,6 +70,38 @@ export class MainView extends React.Component { } } + public get dictatedPhrase() { + return this.dictationState; + } + + public set dictatedPhrase(value: string) { + runInAction(() => this.dictationState = value); + } + + public get dictationSuccess() { + return this.dictationSuccessState; + } + + public set dictationSuccess(value: boolean | undefined) { + runInAction(() => this.dictationSuccessState = value); + } + + public get dictationOverlayVisible() { + return this.dictationDisplayState; + } + + public set dictationOverlayVisible(value: boolean) { + runInAction(() => this.dictationDisplayState = value); + } + + public get isListening() { + return this.dictationListeningState; + } + + public set isListening(value: boolean) { + runInAction(() => this.dictationListeningState = value); + } + componentWillMount() { var tag = document.createElement('script'); @@ -458,9 +495,23 @@ export class MainView extends React.Component { } render() { + let display = this.dictationOverlayVisible; + let success = this.dictationSuccess; + let result = this.isListening ? "Listening..." : `"${this.dictatedPhrase}"`; return (
-

{DictationManager.Instance.current}

+
{result}
+
{this.mainContent} -- cgit v1.2.3-70-g09d2 From 6d718c8a243e68d23199d35592bfded285385c91 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Sun, 4 Aug 2019 05:09:56 -0400 Subject: now all listen() calls display recording UI --- src/client/util/DictationManager.ts | 24 ++++++++++++++++++++---- src/client/views/GlobalKeyHandler.ts | 21 ++++----------------- src/client/views/Main.scss | 1 - src/client/views/MainView.tsx | 11 ++++++++--- src/client/views/nodes/DocumentView.tsx | 16 +++++++++++++--- 5 files changed, 45 insertions(+), 28 deletions(-) (limited to 'src/client/views/Main.scss') diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index b6f871713..a882994c1 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -10,6 +10,7 @@ import { Cast, CastCtor } from "../../new_fields/Types"; import { listSpec } from "../../new_fields/Schema"; import { AudioField, ImageField } from "../../new_fields/URLField"; import { HistogramField } from "../northstar/dash-fields/HistogramField"; +import { MainView } from "../views/MainView"; /** * This namespace provides a singleton instance of a manager that @@ -37,9 +38,11 @@ export namespace DictationManager { } } const { webkitSpeechRecognition }: CORE.IWindow = window as CORE.IWindow; + export const placeholder = "Listening..."; export namespace Controls { + const infringe = "unable to process: dictation manager still involved in previous session"; const intraSession = ". "; const interSession = " ... "; @@ -52,7 +55,7 @@ export namespace DictationManager { const recognizer: SpeechRecognition = new webkitSpeechRecognition() || new SpeechRecognition(); recognizer.onstart = () => console.log("initiating speech recognition session..."); - export type InterimResultHandler = (results: any) => any; + export type InterimResultHandler = (results: string) => any; export type ContinuityArgs = { indefinite: boolean } | false; export type DelimiterArgs = { inter: string, intra: string }; @@ -61,21 +64,33 @@ export namespace DictationManager { continuous: ContinuityArgs; delimiters: DelimiterArgs; interimHandler: InterimResultHandler; + tryExecute: boolean; } export const listen = async (options?: Partial) => { - let results: any; + let results: string | undefined; + MainView.Instance.dictationOverlayVisible = true; + MainView.Instance.isListening = true; try { results = await listenImpl(options); + if (results) { + MainView.Instance.isListening = false; + MainView.Instance.dictatedPhrase = results = results.toLowerCase(); + MainView.Instance.dictationSuccess = options && options.tryExecute ? await DictationManager.Commands.execute(results) : true; + } } catch (e) { - results = `Dictation Error: ${"error" in e ? e.error : "unknown error"}`; + MainView.Instance.isListening = false; + MainView.Instance.dictatedPhrase = results = `dictation error: ${"error" in e ? e.error : "unknown error"}`; + MainView.Instance.dictationSuccess = false; + } finally { + MainView.Instance.initiateDictationFade(); } return results; }; const listenImpl = (options?: Partial) => { if (isListening) { - return undefined; + return infringe; } isListening = true; @@ -126,6 +141,7 @@ export namespace DictationManager { } else { resolve(current); } + current = undefined; reset(); }; diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index c3e6ae6c8..0989e8db1 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -73,9 +73,11 @@ export default class KeyManager { SelectionManager.DeselectAll(); DictationManager.Controls.stop(); if (main.dictationOverlayVisible) { + main.cancelDictationFade(); main.dictationOverlayVisible = false; + main.isListening = true; + main.dictatedPhrase = ""; main.dictationSuccess = undefined; - main.cancelDictationFade(); } break; case "delete": @@ -110,22 +112,7 @@ export default class KeyManager { switch (keyname) { case " ": - let main = MainView.Instance; - main.dictationOverlayVisible = true; - - main.isListening = true; - // let printer = (results: any) => console.log(results); - let command = await DictationManager.Controls.listen(); - main.isListening = false; - - if (!command) { - break; - } - - main.dictatedPhrase = command = command.toLowerCase(); - main.dictationSuccess = await DictationManager.Commands.execute(command); - main.initiateDictationFade(); - + DictationManager.Controls.listen({ tryExecute: true }); stopPropagation = true; preventDefault = true; } diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 8e57b88c3..f76abaff3 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -292,7 +292,6 @@ ul#add-options-list { width: 100%; height: 100%; position: absolute; - background: darkslategray; z-index: 999; transition: 0.5s all ease; pointer-events: none; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4443eea6d..383efa1e3 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,7 +1,7 @@ import { IconName, library } from '@fortawesome/fontawesome-svg-core'; import { faArrowDown, faCloudUploadAlt, faArrowUp, faClone, faCheck, faPlay, faPause, faCaretUp, faLongArrowAltRight, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faPortrait, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faThumbtack, faTree, faUndoAlt, faCat, faBolt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, configure, observable, runInAction, reaction, trace } from 'mobx'; +import { action, computed, configure, observable, runInAction, reaction, trace, autorun } from 'mobx'; import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; @@ -167,6 +167,8 @@ export class MainView extends React.Component { } } + autorun(() => console.log(`this.isListening = ${this.isListening}`)); + library.add(faFont); library.add(faExclamation); library.add(faPortrait); @@ -523,7 +525,7 @@ export class MainView extends React.Component { render() { let display = this.dictationOverlayVisible; let success = this.dictationSuccess; - let result = this.isListening ? "Listening..." : `"${this.dictatedPhrase}"`; + let result = this.isListening ? DictationManager.placeholder : `"${this.dictatedPhrase}"`; return (
{result}
{this.mainContent} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 1d9cb3c80..a415aefda 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -38,6 +38,7 @@ import "./DocumentView.scss"; import { FormattedTextBox } from './FormattedTextBox'; import React = require("react"); import { DictationManager } from '../../util/DictationManager'; +import { MainView } from '../MainView'; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? library.add(fa.faTrash); @@ -536,9 +537,18 @@ export class DocumentView extends DocComponent(Docu } listen = async () => { - let options = { continuous: { indefinite: true }, delimiter: " " }; - let transcript = await DictationManager.Controls.listen(options); - transcript && (Doc.GetProto(this.props.Document).transcript = transcript); + let dataDoc = Doc.GetProto(this.props.Document); + let options = { + continuous: { indefinite: true }, + delimiter: " ", + interimHandler: (results: string) => { + MainView.Instance.isListening = false; + MainView.Instance.dictationSuccess = true; + MainView.Instance.dictatedPhrase = results; + } + }; + let final = await DictationManager.Controls.listen(options); + final && (dataDoc.transcript = final); } @action -- cgit v1.2.3-70-g09d2 From 81100809b0f824cfc1481b19dbe38c31814539e1 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 14 Aug 2019 17:20:57 -0400 Subject: drag new webpage and easy URL change working --- src/client/views/Main.scss | 11 +++ src/client/views/MainView.tsx | 42 +----------- src/client/views/nodes/WebBox.scss | 133 ++++++++++++++++++++++++++++++++++--- src/client/views/nodes/WebBox.tsx | 87 +++++++++++++++++++++++- 4 files changed, 222 insertions(+), 51 deletions(-) (limited to 'src/client/views/Main.scss') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index f76abaff3..d84decdfe 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -295,4 +295,15 @@ ul#add-options-list { z-index: 999; transition: 0.5s all ease; pointer-events: none; +} + +.webpage-input { + display: none; + height: 60px; + width: 600px; + position: absolute; + + .url-input { + width: 80%; + } } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 51eb79edc..5b19e95ed 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -41,6 +41,7 @@ import { ClientUtils } from '../util/ClientUtils'; import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField'; import { DictationManager } from '../util/DictationManager'; import * as $ from 'jquery'; +import { KeyValueBox } from './nodes/KeyValueBox'; @observer export class MainView extends React.Component { @@ -437,41 +438,6 @@ export class MainView extends React.Component { } } - // @computed - // get webURL() { - // let URL: string = ""; - - // return URL; - // } - @observable private webpageURL: string = ""; - - @action - onURLChange = (e: React.ChangeEvent) => { - this.webpageURL = e.target.value; - } - - @observable webDoc: Doc | undefined = undefined; - - @action - onURLSubmit = () => { - this.webDoc = Docs.Create.WebDocument(this.webpageURL, { width: this.pwidth * .7, height: this.pheight, title: this.webpageURL }); - } - - @action - makeWebDocument() { - let mod = document.getElementById("webpage-input"); - if (mod) mod.style.display = "flex"; - while (true) { - if (this.webDoc !== undefined) { - if (mod) mod.style.display = "none"; - console.log(this.webpageURL) - console.log(this.webDoc) - return this.webDoc; - } - } - } - - @observable private _colorPickerDisplay = false; /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */ nodesMenu() { @@ -483,7 +449,7 @@ export class MainView extends React.Component { //let addTreeNode = action(() => Docs.TreeDocument([CurrentUserUtils.UserDocument], { width: 250, height: 400, title: "Library:" + CurrentUserUtils.email, dropAction: "alias" })); // let addTreeNode = action(() => Docs.TreeDocument(this._northstarSchemas, { width: 250, height: 400, title: "northstar schemas", dropAction: "copy" })); let addColNode = action(() => Docs.Create.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" })); - let addWebNode = action(() => this.makeWebDocument()); + let addWebNode = action(() => Docs.Create.WebDocument("https://en.wikipedia.org/wiki/Hedgehog", { width: 300, height: 300, title: "New Webpage" })); let addDragboxNode = action(() => Docs.Create.DragboxDocument({ width: 40, height: 40, title: "drag collection" })); let addImageNode = action(() => Docs.Create.ImageDocument(imgurl, { width: 200, title: "an image of a cat" })); let addButtonDocument = action(() => Docs.Create.ButtonDocument({ width: 150, height: 50, title: "Button" })); @@ -517,10 +483,6 @@ export class MainView extends React.Component { DocServer.setFieldWriteMode("viewType", mode2); }; return < div id="add-nodes-menu" style={{ left: this.flyoutWidth + 20, bottom: 20 }} > -
- - -
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index eb09b0693..c37f08eca 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,16 +1,18 @@ - -.webBox-cont, .webBox-cont-interactive{ +.webBox-cont, +.webBox-cont-interactive { padding: 0vw; position: absolute; top: 0; - left:0; + left: 0; width: 100%; height: 100%; overflow: auto; - pointer-events: none ; + pointer-events: none; } + .webBox-cont-interactive { pointer-events: all; + span { user-select: text !important; } @@ -18,8 +20,8 @@ #webBox-htmlSpan { position: absolute; - top:0; - left:0; + top: 0; + left: 0; } .webBox-overlay { @@ -29,8 +31,123 @@ } .webBox-button { - padding : 0vw; + padding: 0vw; border: none; - width : 100%; + width: 100%; + height: 100%; +} + +.webView-urlEditor { + position: relative; + opacity: 0.9; + z-index: 9001; + transition: top .5s; + background: lightgrey; + padding: 10px; + + + .urlEditor { + display: grid; + grid-template-columns: 1fr auto; + padding-bottom: 10px; + overflow: hidden; + + .collectionViewBaseChrome { + display: flex; + + .collectionViewBaseChrome-viewPicker { + font-size: 75%; + text-transform: uppercase; + letter-spacing: 2px; + background: rgb(238, 238, 238); + color: grey; + outline-color: black; + border: none; + padding: 12px 10px 11px 10px; + margin-left: 50px; + } + + .collectionViewBaseChrome-viewPicker:active { + outline-color: black; + } + + .collectionViewBaseChrome-collapse { + transition: all .5s, opacity 0.3s; + position: absolute; + width: 40px; + transform-origin: top left; + // margin-top: 10px; + } + + .collectionViewBaseChrome-viewSpecs { + margin-left: 10px; + display: grid; + + + + .collectionViewBaseChrome-viewSpecsMenu { + overflow: hidden; + transition: height .5s, display .5s; + position: absolute; + top: 60px; + z-index: 100; + display: flex; + flex-direction: column; + background: rgb(238, 238, 238); + box-shadow: grey 2px 2px 4px; + + .qs-datepicker { + left: unset; + right: 0; + } + + .collectionViewBaseChrome-viewSpecsMenu-row { + display: grid; + grid-template-columns: 150px 200px 150px; + margin-top: 10px; + margin-right: 10px; + + .collectionViewBaseChrome-viewSpecsMenu-rowLeft, + .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, + .collectionViewBaseChrome-viewSpecsMenu-rowRight { + font-size: 75%; + letter-spacing: 2px; + color: grey; + margin-left: 10px; + padding: 5px; + border: none; + outline-color: black; + } + } + + .collectionViewBaseChrome-viewSpecsMenu-lastRow { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 10px; + margin: 10px; + } + } + } + } + + button:hover { + transform: scale(1); + } + + .collectionStackingViewChrome-sectionFilter:hover { + cursor: text; + } + } +} + +.webpage-urlInput { + padding: 12px 10px 11px 10px; + border: 0px; + color: grey; + letter-spacing: 2px; + outline-color: black; + background: rgb(238, 238, 238); + width: 100%; + margin-right: 10px; height: 100%; } \ No newline at end of file diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index c8749b7cd..ff5297783 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -7,13 +7,23 @@ import { FieldView, FieldViewProps } from './FieldView'; import "./WebBox.scss"; import React = require("react"); import { InkTool } from "../../../new_fields/InkField"; -import { Cast, FieldValue, NumCast } from "../../../new_fields/Types"; +import { Cast, FieldValue, NumCast, StrCast } from "../../../new_fields/Types"; import { Utils } from "../../../Utils"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { observable, action, computed } from "mobx"; +import { listSpec } from "../../../new_fields/Schema"; +import { Field, FieldResult } from "../../../new_fields/Doc"; +import { RefField } from "../../../new_fields/RefField"; +import { ObjectField } from "../../../new_fields/ObjectField"; +import { updateSourceFile } from "typescript"; +import { KeyValueBox } from "./KeyValueBox"; @observer export class WebBox extends React.Component { public static LayoutString() { return FieldView.LayoutString(WebBox); } + @observable private collapsed: boolean = true; + @observable private url: string = ""; componentWillMount() { @@ -30,6 +40,76 @@ export class WebBox extends React.Component { } } + @action + onURLChange = (e: React.ChangeEvent) => { + this.url = e.target.value; + } + + @action + submitURL = () => { + const script = KeyValueBox.CompileKVPScript(`new WebField("${this.url}")`); + if (!script) return; + KeyValueBox.ApplyKVPScript(this.props.Document, "data", script); + let mod = document.getElementById("webpage-input"); + if (mod) mod.style.display = "none"; + } + + @computed + get getURL() { + let urlField: FieldResult = Cast(this.props.Document.data, WebField) + if (urlField) return urlField.url.toString(); + return ""; + } + + onValueKeyDown = async (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + e.stopPropagation(); + this.submitURL(); + } + } + + urlEditor() { + return ( +
+
+
+ +
+ + +
+
+
+
+ ); + } + + @action + toggleCollapse = () => { + // this.props.CollectionView.props.Document.chromeStatus = this.props.CollectionView.props.Document.chromeStatus === "enabled" ? "this.collapsed" : "enabled"; + // if (this.props.collapse) { + // this.props.collapse(this.props.CollectionView.props.Document.chromeStatus !== "enabled"); + // } + this.collapsed = !this.collapsed; + } + _ignore = 0; onPreWheel = (e: React.WheelEvent) => { this._ignore = e.timeStamp; @@ -53,12 +133,13 @@ export class WebBox extends React.Component { if (field instanceof HtmlField) { view = ; } else if (field instanceof WebField) { - view =