From 4788eddb018ce764c7152e4d39149ee7a7e3aa73 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 17 Jul 2019 12:40:38 -0400 Subject: pushing --- src/client/views/ContextMenu.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index c163c56a0..e68e5c73f 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -27,12 +27,18 @@ export class ContextMenu extends React.Component { @observable private _width: number = 0; @observable private _height: number = 0; + @observable private _mouseDown: boolean = false; + constructor(props: Readonly<{}>) { super(props); ContextMenu.Instance = this; } + componentDidMount = () => { + + } + @action clearItems() { this._items = []; @@ -79,6 +85,8 @@ export class ContextMenu extends React.Component { //maxX and maxY will change if the UI/font size changes, but will work for any amount //of items added to the menu + console.log("opening?") + this._pageX = x; this._pageY = y; -- cgit v1.2.3-70-g09d2 From 1b6e2dbab9a3d06b1ae5999324c7bd15899b75e1 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 17 Jul 2019 12:51:56 -0400 Subject: changes --- src/client/views/ContextMenu.tsx | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index e68e5c73f..0a8c98ec9 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -36,7 +36,12 @@ export class ContextMenu extends React.Component { } componentDidMount = () => { - + document.addEventListener("pointerdown", e => { + this._mouseDown = true; + }); + document.addEventListener("pointerup", e => { + this._mouseDown = false; + }) } @action @@ -85,14 +90,20 @@ export class ContextMenu extends React.Component { //maxX and maxY will change if the UI/font size changes, but will work for any amount //of items added to the menu - console.log("opening?") + if (!this._mouseDown) { + this._pageX = x; + this._pageY = y; + this._searchString = ""; + this._display = true; + } - this._pageX = x; - this._pageY = y; - this._searchString = ""; + // this._pageX = x; + // this._pageY = y; + + // this._searchString = ""; - this._display = true; + // this._display = true; } @action -- cgit v1.2.3-70-g09d2 From 45d955f32f1896731bde03e885566026ae1d6d77 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 17 Jul 2019 13:13:39 -0400 Subject: contexrt menu mac fixed --- src/client/views/ContextMenu.tsx | 47 ++++++++++++++++++++++++---------------- 1 file changed, 28 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 0a8c98ec9..0b14b68f6 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -1,6 +1,6 @@ import React = require("react"); import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem"; -import { observable, action, computed } from "mobx"; +import { observable, action, computed, runInAction } from "mobx"; import { observer } from "mobx-react"; import "./ContextMenu.scss"; import { library } from '@fortawesome/fontawesome-svg-core'; @@ -27,7 +27,9 @@ export class ContextMenu extends React.Component { @observable private _width: number = 0; @observable private _height: number = 0; - @observable private _mouseDown: boolean = false; + @observable private _mouseX: number = -1; + @observable private _mouseY: number = -1; + @observable private _shouldDisplay: boolean = false; constructor(props: Readonly<{}>) { super(props); @@ -35,12 +37,28 @@ export class ContextMenu extends React.Component { ContextMenu.Instance = this; } + @action componentDidMount = () => { document.addEventListener("pointerdown", e => { - this._mouseDown = true; + runInAction(() => { + this._mouseX = e.clientX; + this._mouseY = e.clientY; + }); }); document.addEventListener("pointerup", e => { - this._mouseDown = false; + let curX = e.clientX; + let curY = e.clientY; + if (this._mouseX !== curX || this._mouseY !== curY) { + runInAction(() => { + this._shouldDisplay = false; + }); + } + + if (this._shouldDisplay) { + runInAction(() => { + this._display = true; + }); + } }) } @@ -86,30 +104,21 @@ export class ContextMenu extends React.Component { } @action - displayMenu(x: number, y: number) { + displayMenu = (x: number, y: number) => { //maxX and maxY will change if the UI/font size changes, but will work for any amount //of items added to the menu - if (!this._mouseDown) { - this._pageX = x; - this._pageY = y; - this._searchString = ""; - this._display = true; - } - - - // this._pageX = x; - // this._pageY = y; - - // this._searchString = ""; - - // this._display = true; + this._pageX = x; + this._pageY = y; + this._searchString = ""; + this._shouldDisplay = true; } @action closeMenu = () => { this.clearItems(); this._display = false; + this._shouldDisplay = false; } @computed get filteredItems(): (OriginalMenuProps | string[])[] { -- cgit v1.2.3-70-g09d2 From 6bf6cad2fd500f9bb5b527f6950373566f1d6810 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 17 Jul 2019 13:38:47 -0400 Subject: mght work --- src/client/views/ContextMenu.tsx | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 0b14b68f6..c97cbd076 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -1,6 +1,6 @@ import React = require("react"); import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem"; -import { observable, action, computed, runInAction } from "mobx"; +import { observable, action, computed, runInAction, IReactionDisposer, reaction } from "mobx"; import { observer } from "mobx-react"; import "./ContextMenu.scss"; import { library } from '@fortawesome/fontawesome-svg-core'; @@ -31,6 +31,8 @@ export class ContextMenu extends React.Component { @observable private _mouseY: number = -1; @observable private _shouldDisplay: boolean = false; + private _reactionDisposer?: IReactionDisposer; + constructor(props: Readonly<{}>) { super(props); @@ -54,12 +56,23 @@ export class ContextMenu extends React.Component { }); } - if (this._shouldDisplay) { - runInAction(() => { - this._display = true; - }); - } - }) + // if (this._shouldDisplay) { + // runInAction(() => { + // this._display = true; + // }); + // } + }); + + this._reactionDisposer = reaction( + () => this._shouldDisplay, + () => { + if (this._shouldDisplay) { + runInAction(() => { + this._display = true; + }); + } + }, + ); } @action -- cgit v1.2.3-70-g09d2 From 9d16c6d15809c7691e7f32be238a3b22cd0edcb5 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 17 Jul 2019 13:45:01 -0400 Subject: does this work --- src/client/views/ContextMenu.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index c97cbd076..1347d4197 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -30,6 +30,7 @@ export class ContextMenu extends React.Component { @observable private _mouseX: number = -1; @observable private _mouseY: number = -1; @observable private _shouldDisplay: boolean = false; + @observable private _mouseDown: boolean = false; private _reactionDisposer?: IReactionDisposer; @@ -43,11 +44,15 @@ export class ContextMenu extends React.Component { componentDidMount = () => { document.addEventListener("pointerdown", e => { runInAction(() => { + this._mouseDown = true; this._mouseX = e.clientX; this._mouseY = e.clientY; }); }); document.addEventListener("pointerup", e => { + runInAction(() => { + this._mouseDown = false; + }) let curX = e.clientX; let curY = e.clientY; if (this._mouseX !== curX || this._mouseY !== curY) { @@ -56,17 +61,17 @@ export class ContextMenu extends React.Component { }); } - // if (this._shouldDisplay) { - // runInAction(() => { - // this._display = true; - // }); - // } + if (this._shouldDisplay) { + runInAction(() => { + this._display = true; + }); + } }); this._reactionDisposer = reaction( () => this._shouldDisplay, () => { - if (this._shouldDisplay) { + if (this._shouldDisplay && !this._mouseDown) { runInAction(() => { this._display = true; }); -- cgit v1.2.3-70-g09d2 From b78da60d91e37889c30b4428a88c838a9dafe5ca Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 17 Jul 2019 15:02:33 -0400 Subject: search auto focuses --- src/client/views/ContextMenu.tsx | 2 +- src/client/views/MainView.tsx | 5 +- src/client/views/SearchBox.tsx | 182 ---------------------------------- src/client/views/search/SearchBox.tsx | 15 ++- 4 files changed, 18 insertions(+), 186 deletions(-) delete mode 100644 src/client/views/SearchBox.tsx (limited to 'src') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 1347d4197..60658b7f0 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -52,7 +52,7 @@ export class ContextMenu extends React.Component { document.addEventListener("pointerup", e => { runInAction(() => { this._mouseDown = false; - }) + }); let curX = e.clientX; let curY = e.clientY; if (this._mouseX !== curX || this._mouseY !== curY) { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ce7369220..5cb1d06cb 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -39,6 +39,8 @@ import { PreviewCursor } from './PreviewCursor'; import { FilterBox } from './search/FilterBox'; import { CollectionTreeView } from './collections/CollectionTreeView'; import { ClientUtils } from '../util/ClientUtils'; +import { SearchBox } from './search/SearchBox'; + @observer export class MainView extends React.Component { @@ -439,12 +441,11 @@ export class MainView extends React.Component { } @observable isSearchVisible = false; - @action + @action.bound toggleSearch = () => { this.isSearchVisible = !this.isSearchVisible; } - render() { return (
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx deleted file mode 100644 index 1b9be841f..000000000 --- a/src/client/views/SearchBox.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faObjectGroup, faSearch } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable, runInAction } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import * as rp from 'request-promise'; -import { Doc } from '../../new_fields/Doc'; -import { Id } from '../../new_fields/FieldSymbols'; -import { NumCast } from '../../new_fields/Types'; -import { DocServer } from '../DocServer'; -import { Docs } from '../documents/Documents'; -import { SetupDrag } from '../util/DragManager'; -import { SearchItem } from './search/SearchItem'; -import "./SearchBox.scss"; - -library.add(faSearch); -library.add(faObjectGroup); - -@observer -export class SearchBox extends React.Component { - @observable - searchString: string = ""; - - @observable private _open: boolean = false; - @observable private _resultsOpen: boolean = false; - - @observable - private _results: Doc[] = []; - - @action.bound - onChange(e: React.ChangeEvent) { - this.searchString = e.target.value; - } - - @action - submitSearch = async () => { - let query = this.searchString; - //gets json result into a list of documents that can be used - const results = await this.getResults(query); - - runInAction(() => { - this._resultsOpen = true; - this._results = results; - }); - } - - @action - getResults = async (query: string) => { - let response = await rp.get(DocServer.prepend('/search'), { - qs: { - query - } - }); - let res: string[] = JSON.parse(response); - const fields = await DocServer.GetRefFields(res); - const docs: Doc[] = []; - for (const id of res) { - const field = fields[id]; - if (field instanceof Doc) { - docs.push(field); - } - } - return docs; - } - - @action - handleClickFilter = (e: Event): void => { - var className = (e.target as any).className; - var id = (e.target as any).id; - if (className !== "filter-button" && className !== "filter-form") { - this._open = false; - } - - } - - @action - handleClickResults = (e: Event): void => { - var className = (e.target as any).className; - var id = (e.target as any).id; - if (id !== "result") { - this._resultsOpen = false; - this._results = []; - } - - } - - componentWillMount() { - document.addEventListener('mousedown', this.handleClickFilter, false); - document.addEventListener('mousedown', this.handleClickResults, false); - } - - componentWillUnmount() { - document.removeEventListener('mousedown', this.handleClickFilter, false); - document.removeEventListener('mousedown', this.handleClickResults, false); - } - - @action - toggleFilterDisplay = () => { - this._open = !this._open; - } - - enter = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - this.submitSearch(); - } - } - - collectionRef = React.createRef(); - startDragCollection = async () => { - const results = await this.getResults(this.searchString); - const docs = results.map(doc => { - const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); - if (isProto) { - return Doc.MakeDelegate(doc); - } else { - return Doc.MakeAlias(doc); - } - }); - let x = 0; - let y = 0; - for (const doc of docs) { - doc.x = x; - doc.y = y; - const size = 200; - const aspect = NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1); - if (aspect > 1) { - doc.height = size; - doc.width = size / aspect; - } else if (aspect > 0) { - doc.width = size; - doc.height = size * aspect; - } else { - doc.width = size; - doc.height = size; - } - doc.zoomBasis = 1; - x += 250; - if (x > 1000) { - x = 0; - y += 300; - } - } - return Docs.Create.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this.searchString}"` }); - } - - // Useful queries: - // Delegates of a document: {!join from=id to=proto_i}id:{protoId} - // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} - render() { - return ( -
-
-
- - - - - {/* */} - {/* */} -
- {this._resultsOpen ? ( -
- {this._results.map(result => )} -
- ) : null} -
- {this._open ? ( -
- -
- filter by collection, key, type of node -
- -
- ) : null} -
- ); - } -} \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 8399605fb..b2a44f448 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -15,6 +15,9 @@ import { Id } from '../../../new_fields/FieldSymbols'; import { SearchUtil } from '../../util/SearchUtil'; import { RouteStore } from '../../../server/RouteStore'; import { FilterBox } from './FilterBox'; +import { ReadStream } from 'fs'; +import * as $ from 'jquery'; + @observer @@ -29,6 +32,7 @@ export class SearchBox extends React.Component { @observable private _visibleElements: JSX.Element[] = []; private resultsRef = React.createRef(); + public inputRef = React.createRef(); private _isSearch: ("search" | "placeholder" | undefined)[] = []; private _numTotalResults = -1; @@ -46,6 +50,15 @@ export class SearchBox extends React.Component { this.resultsScrolled = this.resultsScrolled.bind(this); } + componentDidMount = () => { + if (this.inputRef.current) { + this.inputRef.current.focus(); + runInAction(() => { + this._searchbarOpen = true; + }); + } + } + @action getViews = async (doc: Doc) => { const results = await SearchUtil.GetViewsOfDocument(doc); @@ -321,7 +334,7 @@ export class SearchBox extends React.Component { - -- cgit v1.2.3-70-g09d2 From bb6c9fd9ac199e0eaf51170e5cb014205991108b Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 17 Jul 2019 16:31:36 -0400 Subject: just centering --- src/client/views/ContextMenu.tsx | 2 +- src/client/views/DocumentDecorations.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 1347d4197..60658b7f0 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -52,7 +52,7 @@ export class ContextMenu extends React.Component { document.addEventListener("pointerup", e => { runInAction(() => { this._mouseDown = false; - }) + }); let curX = e.clientX; let curY = e.clientY; if (this._mouseX !== curX || this._mouseY !== curY) { diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 0b7411fca..5557bff94 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -96,6 +96,7 @@ $linkGap : 3px; grid-column-end: 4; pointer-events: auto; overflow: hidden; + text-align: center; } } -- cgit v1.2.3-70-g09d2 From 16337a910fa40a145c9906ff865b7c3a621efc41 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 17 Jul 2019 17:12:31 -0400 Subject: grays --- src/client/views/DocumentDecorations.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 5557bff94..23d78b39f 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -92,6 +92,7 @@ $linkGap : 3px; .title { background: $alt-accent; + opacity: 0.8; grid-column-start: 3; grid-column-end: 4; pointer-events: auto; -- cgit v1.2.3-70-g09d2 From 98d6476cc1d18617399b28fa670848f97160ffa1 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 17 Jul 2019 17:59:45 -0400 Subject: smol changes --- src/client/views/DocumentDecorations.scss | 12 +++++++----- src/client/views/DocumentDecorations.tsx | 7 +++++-- 2 files changed, 12 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 23d78b39f..537444a93 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -24,13 +24,13 @@ $linkGap : 3px; .documentDecorations-resizer { pointer-events: auto; background: $alt-accent; - opacity: 0.8; + opacity: 1; } .documentDecorations-radius { pointer-events: auto; background: black; - opacity: 0.8; + opacity: 1; transform: translate(10px, 10px); grid-row: 4; } @@ -92,7 +92,7 @@ $linkGap : 3px; .title { background: $alt-accent; - opacity: 0.8; + opacity: 1; grid-column-start: 3; grid-column-end: 4; pointer-events: auto; @@ -104,17 +104,18 @@ $linkGap : 3px; .documentDecorations-closeButton { background: $alt-accent; - opacity: 0.8; + opacity: 1; grid-column-start: 4; grid-column-end: 6; pointer-events: all; text-align: center; cursor: pointer; + padding-right: 10px; } .documentDecorations-minimizeButton { background: $alt-accent; - opacity: 0.8; + opacity: 1; grid-column-start: 1; grid-column-end: 3; pointer-events: all; @@ -123,6 +124,7 @@ $linkGap : 3px; position: absolute; left: 0px; top: 0px; + padding-top: 5px; width: $MINIMIZED_ICON_SIZE; height: $MINIMIZED_ICON_SIZE; } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index fb5104915..d8a4bd071 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,5 +1,5 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faLink, faTag } from '@fortawesome/free-solid-svg-icons'; +import { faLink, faTag, faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -34,6 +34,7 @@ export const Flyout = higflyout.default; library.add(faLink); library.add(faTag); +library.add(faTimes); @observer export class DocumentDecorations extends React.Component<{}, { value: string }> { @@ -726,7 +727,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> {this._edtingTitle ? :
{`${this.selectionTitle}`}
} -
X
+
+ +
e.preventDefault()}>
e.preventDefault()}>
e.preventDefault()}>
-- cgit v1.2.3-70-g09d2 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/DocumentDecorations.scss | 5 ++++ src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/Main.scss | 38 ++++++++++++++++++------------- 3 files changed, 28 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 537444a93..3627edaae 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -223,6 +223,11 @@ $linkGap : 3px; margin-top: 3px; } +.documentdecorations-times { + margin-top: 3px; + padding-right: 3px; +} + .templating-button, .docDecs-tagButton { width: 20px; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index d8a4bd071..3be5146f6 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -728,7 +728,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> :
{`${this.selectionTitle}`}
}
- +
e.preventDefault()}>
e.preventDefault()}>
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 c1fa702ae9e748617121f28cbe65d21cdfdc1f7d Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 19 Jul 2019 10:43:52 -0400 Subject: search x --- src/client/views/search/SearchBox.scss | 5 +++++ src/client/views/search/SearchBox.tsx | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 109b88ac9..481ee5789 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -37,6 +37,11 @@ margin-left: 2px; margin-right: 2px } + + &.searchBox-close { + color: $light-color; + max-height: 32px; + } } } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index b2a44f448..c45c3aaee 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -4,6 +4,8 @@ import { observable, action, runInAction, flow, computed } from 'mobx'; import "./SearchBox.scss"; import "./FilterBox.scss"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faTimes } from '@fortawesome/free-solid-svg-icons'; +import { library } from '@fortawesome/fontawesome-svg-core'; import { SetupDrag } from '../../util/DragManager'; import { Docs } from '../../documents/Documents'; import { NumCast, Cast } from '../../../new_fields/Types'; @@ -17,8 +19,9 @@ import { RouteStore } from '../../../server/RouteStore'; import { FilterBox } from './FilterBox'; import { ReadStream } from 'fs'; import * as $ from 'jquery'; +import { MainView } from '../MainView'; - +library.add(faTimes); @observer export class SearchBox extends React.Component { @@ -242,6 +245,7 @@ export class SearchBox extends React.Component { @action.bound closeSearch = () => { + console.log("closing search") FilterBox.Instance.closeFilter(); this.closeResults(); this._searchbarOpen = false; @@ -339,6 +343,7 @@ export class SearchBox extends React.Component { style={{ width: this._searchbarOpen ? "500px" : "100px" }} /> +
Date: Fri, 19 Jul 2019 10:47:56 -0400 Subject: lets try this again --- src/client/views/search/SearchBox.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index c45c3aaee..2e1017d27 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -354,5 +354,4 @@ export class SearchBox extends React.Component {
); } - } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From e0709211b80f5e69384318ebe007c877cd6dbfd5 Mon Sep 17 00:00:00 2001 From: Eleanor Eng Date: Fri, 19 Jul 2019 11:38:10 -0400 Subject: mac resize fix --- src/client/views/DocumentDecorations.tsx | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 3be5146f6..bf880b9c3 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -63,6 +63,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> @observable private _opacity = 1; @observable private _removeIcon = false; @observable public Interacting = false; + @observable private _isMoving = false; constructor(props: Readonly<{}>) { super(props); @@ -337,9 +338,14 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> document.addEventListener("pointermove", this.onRadiusMove); document.addEventListener("pointerup", this.onRadiusUp); } + if (!this._isMoving) { + let dist = Math.sqrt((e.clientX - this._radiusDown[0]) * (e.clientX - this._radiusDown[0]) + (e.clientY - this._radiusDown[1]) * (e.clientY - this._radiusDown[1])); + SelectionManager.SelectedDocuments().map(dv => dv.props.Document.borderRounding = Doc.GetProto(dv.props.Document).borderRounding = `${Math.min(100, dist)}%`); + } } onRadiusMove = (e: PointerEvent): void => { + this._isMoving = true; let dist = Math.sqrt((e.clientX - this._radiusDown[0]) * (e.clientX - this._radiusDown[0]) + (e.clientY - this._radiusDown[1]) * (e.clientY - this._radiusDown[1])); SelectionManager.SelectedDocuments().map(dv => dv.props.Document.borderRounding = Doc.GetProto(dv.props.Document).borderRounding = `${Math.min(100, dist)}%`); e.stopPropagation(); @@ -351,6 +357,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> e.preventDefault(); this._isPointerDown = false; this._resizeUndo && this._resizeUndo.end(); + this._isMoving = false; document.removeEventListener("pointermove", this.onRadiusMove); document.removeEventListener("pointerup", this.onRadiusUp); } -- cgit v1.2.3-70-g09d2 From 87b4d7ab7a28a01335dd081fc85c010a22aae5d1 Mon Sep 17 00:00:00 2001 From: Eleanor Eng Date: Fri, 19 Jul 2019 11:42:25 -0400 Subject: it's just 0 --- src/client/views/DocumentDecorations.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index bf880b9c3..60dcf06cd 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -339,8 +339,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> document.addEventListener("pointerup", this.onRadiusUp); } if (!this._isMoving) { - let dist = Math.sqrt((e.clientX - this._radiusDown[0]) * (e.clientX - this._radiusDown[0]) + (e.clientY - this._radiusDown[1]) * (e.clientY - this._radiusDown[1])); - SelectionManager.SelectedDocuments().map(dv => dv.props.Document.borderRounding = Doc.GetProto(dv.props.Document).borderRounding = `${Math.min(100, dist)}%`); + SelectionManager.SelectedDocuments().map(dv => dv.props.Document.borderRounding = Doc.GetProto(dv.props.Document).borderRounding = `${Math.min(100, 0)}%`); } } -- 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') 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 0191d5dfb07b6e50e5bda4523b79ff9769159541 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 19 Jul 2019 16:33:19 -0400 Subject: changed min --- src/client/views/DocumentDecorations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 60dcf06cd..8e63ea4c3 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -339,7 +339,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> document.addEventListener("pointerup", this.onRadiusUp); } if (!this._isMoving) { - SelectionManager.SelectedDocuments().map(dv => dv.props.Document.borderRounding = Doc.GetProto(dv.props.Document).borderRounding = `${Math.min(100, 0)}%`); + SelectionManager.SelectedDocuments().map(dv => dv.props.Document.borderRounding = Doc.GetProto(dv.props.Document).borderRounding = `0%`); } } -- cgit v1.2.3-70-g09d2 From 17cab0166753aee765585e1eb700fd85583e7cbb Mon Sep 17 00:00:00 2001 From: monikahedman Date: Mon, 5 Aug 2019 19:11:54 -0400 Subject: clickable text box appears --- src/client/util/RichTextSchema.tsx | 70 +++++++++++++++++++++++++++++ src/client/util/TooltipTextMenu.tsx | 26 +++++++++++ src/client/views/nodes/FormattedTextBox.tsx | 8 ++-- 3 files changed, 101 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index ce9e29b26..491208c4c 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -110,6 +110,33 @@ export const nodes: { [index: string]: NodeSpec } = { // } // }] }, + + // TODO + checkbox: { + inline: true, + attrs: { + visibility: { default: false }, + // text: { default: undefined }, + // textslice: { default: undefined }, + // textlen: { default: 0 } + + }, + group: "inline", + toDOM(node) { + const attrs = { style: `width: 40px` }; + return ["span", { ...node.attrs, ...attrs }]; + }, + // parseDOM: [{ + // tag: "star", getAttrs(dom: any) { + // return { + // visibility: dom.getAttribute("visibility"), + // oldtext: dom.getAttribute("oldtext"), + // oldtextlen: dom.getAttribute("oldtextlen"), + // } + // } + // }] + }, + // :: NodeSpec An inline image (``) node. Supports `src`, // `alt`, and `href` attributes. The latter two default to the empty // string. @@ -522,6 +549,49 @@ export class ImageResizeView { } } +export class CheckboxView { + _view: any; + _collapsed: HTMLElement; + + constructor(node: any, view: any, getPos: any) { + this._collapsed = document.createElement("span"); + this._collapsed.textContent = node.attrs.visibility ? "⬛" : "⬜"; + this._collapsed.style.position = "relative"; + // this._collapsed.style.width = "80px"; + this._collapsed.style.height = "20px"; + let self = this; + this._view = view; + const js = node.toJSON; + node.toJSON = function () { + + return js.apply(this, arguments); + }; + this._collapsed.onpointerdown = function (e: any) { + console.log(node.attrs.visibility) + if (node.attrs.visibility) { + let y = getPos(); + const attrs = { ...node.attrs }; + attrs.visibility = !attrs.visibility; + view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); + self._collapsed.textContent = "⬜"; + } else { + let y = getPos(); + const attrs = { ...node.attrs }; + attrs.visibility = !attrs.visibility; + console.log(attrs.visibility) + view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); + self._collapsed.textContent = "⬛"; + } + e.preventDefault(); + e.stopPropagation(); + console.log(node.attrs.visibility) + + }; + (this as any).dom = this._collapsed; + } + +} + export class SummarizedView { // TODO: highlight text that is summarized. to find end of region, walk along mark _collapsed: HTMLElement; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index d33a52d7f..8f66a0ad4 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -177,6 +177,7 @@ export class TooltipTextMenu { this.listTypeToIcon = new Map(); this.listTypeToIcon.set(schema.nodes.bullet_list, ":"); this.listTypeToIcon.set(schema.nodes.ordered_list, "1)"); + // this.listTypeToIcon.set(schema.nodes.checklist, "⬜"); this.listTypes = Array.from(this.listTypeToIcon.keys()); //custom tools @@ -186,6 +187,7 @@ export class TooltipTextMenu { this.tooltip.appendChild(this._brushdom); this.tooltip.appendChild(this.createLink().render(this.view).dom); this.tooltip.appendChild(this.createStar().render(this.view).dom); + this.tooltip.appendChild(this.createCheckbox().render(this.view).dom) this.updateListItemDropdown(":", this.listTypeBtnDom); @@ -439,6 +441,16 @@ export class TooltipTextMenu { return true; } + public static insertCheckbox(state: EditorState, dispatch: any) { + let newNode = schema.nodes.checkbox.create({ visibility: false }); + if (dispatch) { + //console.log(newNode.attrs.text.toString()); + dispatch(state.tr.replaceSelectionWith(newNode)); + wrapInList(nodeType)(state, dispatch); + } + return true; + } + //will display a remove-list-type button if selection is in list, otherwise will show list type dropdown updateListItemDropdown(label: string, listTypeBtn: any) { //remove old btn @@ -548,6 +560,20 @@ export class TooltipTextMenu { }); } + createCheckbox() { + return new MenuItem({ + title: "Checkbox", + label: "Checkbox", + icon: icons.code, + css: "color:white", + class: "checkbox", + execEvent: "", + run: (state, dispatch) => { + TooltipTextMenu.insertCheckbox(state, dispatch); + } + }) + } + deleteLinkItem() { const icon = { height: 16, width: 16, diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index e076efe18..a2e610fc2 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -8,7 +8,7 @@ import { keymap } from "prosemirror-keymap"; import { Node as ProsNode } from "prosemirror-model"; import { EditorState, Plugin, Transaction, Selection } from "prosemirror-state"; import { NodeType, Slice, Node, Fragment } from 'prosemirror-model'; -import { EditorView } from "prosemirror-view"; +import { EditorView, NodeView } from "prosemirror-view"; import { Doc, Opt, DocListCast } from "../../../new_fields/Doc"; import { Id, Copy } from '../../../new_fields/FieldSymbols'; import { List } from '../../../new_fields/List'; @@ -21,7 +21,7 @@ import { DocumentManager } from '../../util/DocumentManager'; import { DragManager } from "../../util/DragManager"; import buildKeymap from "../../util/ProsemirrorExampleTransfer"; import { inpRules } from "../../util/RichTextRules"; -import { ImageResizeView, schema, SummarizedView } from "../../util/RichTextSchema"; +import { ImageResizeView, schema, SummarizedView, CheckboxView } from "../../util/RichTextSchema"; import { SelectionManager } from "../../util/SelectionManager"; import { TooltipLinkingMenu } from "../../util/TooltipLinkingMenu"; import { TooltipTextMenu } from "../../util/TooltipTextMenu"; @@ -38,6 +38,7 @@ import { For } from 'babel-types'; import { DateField } from '../../../new_fields/DateField'; import { Utils } from '../../../Utils'; import { MainOverlayTextBox } from '../MainOverlayTextBox'; +import { CheckBox } from '../search/CheckBox'; library.add(faEdit); library.add(faSmile, faTextHeight); @@ -469,7 +470,8 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe dispatchTransaction: this.dispatchTransaction, nodeViews: { image(node, view, getPos) { return new ImageResizeView(node, view, getPos); }, - star(node, view, getPos) { return new SummarizedView(node, view, getPos); } + star(node, view, getPos) { return new SummarizedView(node, view, getPos); }, + checkbox(node, view, getPos) { return new CheckboxView(node, view, getPos) as NodeView; } }, clipboardTextSerializer: this.clipboardTextSerializer, handlePaste: this.handlePaste, -- cgit v1.2.3-70-g09d2 From 030af1b9112cd12383abcd7f35142cc382ea4d6a Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 6 Aug 2019 17:55:43 -0400 Subject: end of day 8/6 --- src/client/util/RichTextSchema.tsx | 15 +++++++++++++++ src/client/util/TooltipTextMenu.tsx | 11 +++++++---- 2 files changed, 22 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 491208c4c..8e80de1a8 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -193,6 +193,12 @@ export const nodes: { [index: string]: NodeSpec } = { } }, + checkbox_list2: { + inline: false, + // content: 'list_item+', + group: 'block' + }, + // :: NodeSpec A hard line break, represented in the DOM as `
`. hard_break: { inline: true, @@ -215,6 +221,15 @@ export const nodes: { [index: string]: NodeSpec } = { // parseDOM: [{ tag: "ul" }, { style: 'list-style-type=disc' }], // toDOM() { return ulDOM } }, + checkbox_list: { + ...bulletList, + content: 'list_item+', + group: 'block', + // style: 'list-style-type:none' + itemContent: "+", + // parseDOM: [{ tag: "ul" }, { style: 'list-style-type=square' }], + // toDOM() { return ulDOM; } + }, //bullet_list: { // content: 'list_item+', // group: 'block', diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 8f66a0ad4..b1243cb1d 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -10,7 +10,7 @@ import { Node as ProsNode } from "prosemirror-model"; import "./TooltipTextMenu.scss"; const { toggleMark, setBlockType } = require("prosemirror-commands"); import { library } from '@fortawesome/fontawesome-svg-core'; -import { wrapInList, liftListItem, } from 'prosemirror-schema-list'; +import { wrapInList, liftListItem, bulletList, } from 'prosemirror-schema-list'; import { faListUl } from '@fortawesome/free-solid-svg-icons'; import { FieldViewProps } from "../views/nodes/FieldView"; const { openPrompt, TextField } = require("./ProsemirrorCopy/prompt.js"); @@ -177,7 +177,7 @@ export class TooltipTextMenu { this.listTypeToIcon = new Map(); this.listTypeToIcon.set(schema.nodes.bullet_list, ":"); this.listTypeToIcon.set(schema.nodes.ordered_list, "1)"); - // this.listTypeToIcon.set(schema.nodes.checklist, "⬜"); + // this.listTypeToIcon.set(schema.nodes.bullet_list, "⬜"); this.listTypes = Array.from(this.listTypeToIcon.keys()); //custom tools @@ -187,7 +187,7 @@ export class TooltipTextMenu { this.tooltip.appendChild(this._brushdom); this.tooltip.appendChild(this.createLink().render(this.view).dom); this.tooltip.appendChild(this.createStar().render(this.view).dom); - this.tooltip.appendChild(this.createCheckbox().render(this.view).dom) + this.tooltip.appendChild(this.createCheckbox().render(this.view).dom); this.updateListItemDropdown(":", this.listTypeBtnDom); @@ -441,12 +441,13 @@ export class TooltipTextMenu { return true; } + // this needs to change so it makes it into a bulleted list public static insertCheckbox(state: EditorState, dispatch: any) { let newNode = schema.nodes.checkbox.create({ visibility: false }); if (dispatch) { //console.log(newNode.attrs.text.toString()); dispatch(state.tr.replaceSelectionWith(newNode)); - wrapInList(nodeType)(state, dispatch); + wrapInList(newNode.type)(state, dispatch); } return true; } @@ -460,9 +461,11 @@ export class TooltipTextMenu { let toAdd: MenuItem[] = []; this.listTypeToIcon.forEach((icon, type) => { toAdd.push(this.dropdownNodeBtn(icon, "color: black; width: 40px;", type, this.view, this.listTypes, this.changeToNodeType)); + console.log(type.name) }); //option to remove the list formatting toAdd.push(this.dropdownNodeBtn("X", "color: black; width: 40px;", undefined, this.view, this.listTypes, this.changeToNodeType)); + toAdd.push(this.dropdownNodeBtn("⬜", "color:black; width:40px;", schema.nodes.checkbox_list, this.view, this.listTypes, this.changeToNodeType)) listTypeBtn = (new Dropdown(toAdd, { label: label, -- cgit v1.2.3-70-g09d2 From d673d063b1343e97b6f8f25d27347b64562fcfbe Mon Sep 17 00:00:00 2001 From: kimdahey Date: Wed, 7 Aug 2019 13:12:29 -0400 Subject: added filtering via script --- .../views/collections/CollectionTreeView.tsx | 26 ++++++++++++++++------ 1 file changed, 19 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 02b2583cd..17d043553 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -25,7 +25,7 @@ import { CollectionSchemaPreview } from './CollectionSchemaView'; import { CollectionSubView } from "./CollectionSubView"; import "./CollectionTreeView.scss"; import React = require("react"); -import { ComputedField } from '../../../new_fields/ScriptField'; +import { ComputedField, ScriptField } from '../../../new_fields/ScriptField'; import { KeyValueBox } from '../nodes/KeyValueBox'; import { exportNamedDeclaration } from 'babel-types'; @@ -398,21 +398,33 @@ class TreeView extends React.Component { panelWidth: () => number, renderDepth: number ) { - let docList = docs.filter(child => !child.excludeFromLibrary); + let viewSpecScript = Cast(containingCollection.viewSpecScript, ScriptField); + if (viewSpecScript) { + let script = viewSpecScript.script; + docs = docs.filter(d => { + let res = script.run({ doc: d }); + if (res.success) { + return res.result; + } + else { + console.log(res.error); + } + }); + } let rowWidth = () => panelWidth() - 20; - return docList.map((child, i) => { + return docs.map((child, i) => { let pair = Doc.GetLayoutDataDocPair(containingCollection, dataDoc, key, child); let indent = i === 0 ? undefined : () => { - if (StrCast(docList[i - 1].layout).indexOf("CollectionView") !== -1) { - let fieldKeysub = StrCast(docList[i - 1].layout).split("fieldKey")[1]; + if (StrCast(docs[i - 1].layout).indexOf("CollectionView") !== -1) { + let fieldKeysub = StrCast(docs[i - 1].layout).split("fieldKey")[1]; let fieldKey = fieldKeysub.split("\"")[1]; - Doc.AddDocToList(docList[i - 1], fieldKey, child); + Doc.AddDocToList(docs[i - 1], fieldKey, child); remove(child); } }; let addDocument = (doc: Doc, relativeTo?: Doc, before?: boolean) => { - return add(doc, relativeTo ? relativeTo : docList[i], before !== undefined ? before : false); + return add(doc, relativeTo ? relativeTo : docs[i], before !== undefined ? before : false); }; let rowHeight = () => { let aspect = NumCast(child.nativeWidth, 0) / NumCast(child.nativeHeight, 0); -- cgit v1.2.3-70-g09d2 From a887adb0080d2826b8a8757cd0f5c9fe451a0695 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Wed, 7 Aug 2019 14:21:52 -0400 Subject: moving computers --- .../views/collections/CollectionStackingView.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 13 +++ .../views/collections/CollectionViewChromes.tsx | 113 ++++++++++++++++++++- 3 files changed, 126 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 4a751c84c..ccdffa899 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -266,7 +266,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { } onToggle = (checked: Boolean) => { - this.props.CollectionView.props.Document.chromeSatus = checked ? "collapsed" : "view-mode"; + this.props.CollectionView.props.Document.chromeStatus = checked ? "collapsed" : "view-mode"; } render() { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 17d043553..d7552fa99 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -398,9 +398,11 @@ class TreeView extends React.Component { panelWidth: () => number, renderDepth: number ) { + let viewSpecScript = Cast(containingCollection.viewSpecScript, ScriptField); if (viewSpecScript) { let script = viewSpecScript.script; + console.log(viewSpecScript, script); docs = docs.filter(d => { let res = script.run({ doc: d }); if (res.success) { @@ -411,6 +413,17 @@ class TreeView extends React.Component { } }); } + + // sort children here + + // schemaheaderfield should b just the thing we're sorting by + // sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => { + // let descending = BoolCast(this.props.document.stackingHeadersSortDescending); + // let firstEntry = descending ? b : a; + // let secondEntry = descending ? a : b; + // return firstEntry[0].heading > secondEntry[0].heading ? 1 : -1; + // } + let rowWidth = () => panelWidth() - 20; return docs.map((child, i) => { let pair = Doc.GetLayoutDataDocPair(containingCollection, dataDoc, key, child); diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 1b2561953..b0ba62173 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -182,6 +182,12 @@ export class CollectionViewBaseChrome extends React.Component); + case CollectionViewType.Tree: return ( + ); default: return null; } @@ -437,4 +443,109 @@ export class CollectionSchemaViewChrome extends React.Component ); } -} \ No newline at end of file +} + +@observer +export class CollectionTreeViewChrome extends React.Component { + @observable private _currentKey: string = ""; + @observable private suggestions: string[] = []; + + @computed private get descending() { return BoolCast(this.props.CollectionView.props.Document.stackingHeadersSortDescending); } + @computed get sectionFilter() { return StrCast(this.props.CollectionView.props.Document.sectionFilter); } + + getKeySuggestions = async (value: string): Promise => { + value = value.toLowerCase(); + let docs: Doc | Doc[] | Promise | Promise | (() => DocLike) + = () => DocListCast(this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldExt ? this.props.CollectionView.props.fieldExt : this.props.CollectionView.props.fieldKey]); + if (typeof docs === "function") { + docs = docs(); + } + docs = await docs; + if (docs instanceof Doc) { + return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value)); + } else { + const keys = new Set(); + docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); + return Array.from(keys).filter(key => key.toLowerCase().startsWith(value)); + } + } + + @action + onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => { + this._currentKey = newValue; + } + + getSuggestionValue = (suggestion: string) => suggestion; + + renderSuggestion = (suggestion: string) => { + return

{suggestion}

; + } + + onSuggestionFetch = async ({ value }: { value: string }) => { + const sugg = await this.getKeySuggestions(value); + runInAction(() => { + this.suggestions = sugg; + }); + } + + @action + onSuggestionClear = () => { + this.suggestions = []; + } + + setValue = (value: string) => { + this.props.CollectionView.props.Document.sectionFilter = value; + return true; + } + + @action toggleSort = () => { this.props.CollectionView.props.Document.stackingHeadersSortDescending = !this.props.CollectionView.props.Document.stackingHeadersSortDescending; }; + @action resetValue = () => { this._currentKey = this.sectionFilter; }; + + render() { + return ( +
+ +
+
+ GROUP ITEMS BY: +
+
+ this.sectionFilter} + autosuggestProps={ + { + resetValue: this.resetValue, + value: this._currentKey, + onChange: this.onKeyChange, + autosuggestProps: { + inputProps: + { + value: this._currentKey, + onChange: this.onKeyChange + }, + getSuggestionValue: this.getSuggestionValue, + suggestions: this.suggestions, + alwaysRenderSuggestions: true, + renderSuggestion: this.renderSuggestion, + onSuggestionsFetchRequested: this.onSuggestionFetch, + onSuggestionsClearRequested: this.onSuggestionClear + } + }} + oneLine + SetValue={this.setValue} + contents={this.sectionFilter ? this.sectionFilter : "N/A"} + /> +
+
+
+ ); + } +} + -- cgit v1.2.3-70-g09d2 From 8b29049575238966ec0592469262403b5fa8d432 Mon Sep 17 00:00:00 2001 From: Fawn Date: Wed, 7 Aug 2019 16:21:22 -0400 Subject: making progress on sorting, need to differentiate between diff types of sort values (e.g. boolean, string, number) --- .../views/collections/CollectionTreeView.tsx | 37 +++++++++++++++------- 1 file changed, 26 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index d7552fa99..45bcfaa06 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -28,6 +28,7 @@ import React = require("react"); import { ComputedField, ScriptField } from '../../../new_fields/ScriptField'; import { KeyValueBox } from '../nodes/KeyValueBox'; import { exportNamedDeclaration } from 'babel-types'; +import { number } from 'prop-types'; export interface TreeViewProps { @@ -398,11 +399,9 @@ class TreeView extends React.Component { panelWidth: () => number, renderDepth: number ) { - let viewSpecScript = Cast(containingCollection.viewSpecScript, ScriptField); if (viewSpecScript) { let script = viewSpecScript.script; - console.log(viewSpecScript, script); docs = docs.filter(d => { let res = script.run({ doc: d }); if (res.success) { @@ -414,15 +413,27 @@ class TreeView extends React.Component { }); } - // sort children here - - // schemaheaderfield should b just the thing we're sorting by - // sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => { - // let descending = BoolCast(this.props.document.stackingHeadersSortDescending); - // let firstEntry = descending ? b : a; - // let secondEntry = descending ? a : b; - // return firstEntry[0].heading > secondEntry[0].heading ? 1 : -1; - // } + let descending = BoolCast(containingCollection.stackingHeadersSortDescending); + docs.sort(function (a, b): 1 | -1 { + let descA = descending ? b : a; + let descB = descending ? a : b; + let first = descA[String(containingCollection.sectionFilter)]; + let second = descB[String(containingCollection.sectionFilter)]; + // TODO find better way to sort how to sort.................. + if (typeof first === 'number' && typeof second === 'number') { + return (first - second) > 0 ? 1 : -1; + } + if (typeof first === 'string' && typeof second === 'string') { + return first > second ? 1 : -1; + } + if (typeof first === 'boolean' && typeof second === 'boolean') { + // if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load + // return Number(descA.x) > Number(descB.y) ? 1 : -1; + // } + return first > second ? 1 : -1; + } + return descending ? 1 : -1; + }); let rowWidth = () => panelWidth() - 20; return docs.map((child, i) => { @@ -567,6 +578,10 @@ export class CollectionTreeView extends CollectionSubView(Document) { {this.props.Document.allowClear ? this.renderClearButton : (null)}
    { + // this.props.Document.sectionFilter ? + // TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove, + // moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth) + // : TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove, moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth) } -- cgit v1.2.3-70-g09d2 From 329b79a62bcd2bb57c5c4cb3e805d10a1aceed35 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Fri, 9 Aug 2019 11:48:26 -0400 Subject: changed css, fixed flickering bug for boolean sorts --- .../views/collections/CollectionTreeView.tsx | 11 ++-- .../views/collections/CollectionViewChromes.scss | 58 ++++++++++++++++++++++ .../views/collections/CollectionViewChromes.tsx | 14 +++--- 3 files changed, 69 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index cfd4df9fc..1f19437be 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -27,6 +27,7 @@ import "./CollectionTreeView.scss"; import React = require("react"); import { ComputedField, ScriptField } from '../../../new_fields/ScriptField'; import { KeyValueBox } from '../nodes/KeyValueBox'; +import { exportNamedDeclaration } from 'babel-types'; export interface TreeViewProps { @@ -428,9 +429,9 @@ class TreeView extends React.Component { return first > second ? 1 : -1; } if (typeof first === 'boolean' && typeof second === 'boolean') { - // if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load - // return Number(descA.x) > Number(descB.y) ? 1 : -1; - // } + if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load + return Number(descA.x) > Number(descB.x) ? 1 : -1; + } return first > second ? 1 : -1; } return descending ? 1 : -1; @@ -579,10 +580,6 @@ export class CollectionTreeView extends CollectionSubView(Document) { {this.props.Document.allowClear ? this.renderClearButton : (null)}
      { - // this.props.Document.sectionFilter ? - // TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove, - // moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth) - // : TreeView.GetChildElements(this.childDocs, this.props.Document[Id], this.props.Document, this.props.DataDoc, this.props.fieldKey, addDoc, this.remove, moveDoc, dropAction, this.props.addDocTab, this.props.ScreenToLocalTransform, this.outerXf, this.props.active, this.props.PanelWidth, this.props.renderDepth) } diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 793cb7a8b..d02daa366 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -220,4 +220,62 @@ margin-left: 50px; } } +} + +.collectionTreeViewChrome-cont { + display: flex; + justify-content: space-between; +} + +.collectionTreeViewChrome-sort { + display: flex; + align-items: center; + justify-content: space-between; + + .collectionTreeViewChrome-sortIcon { + transition: transform .5s; + margin-left: 10px; + } +} + +.collectionTreeViewChrome-sectionFilter-cont { + justify-self: right; + display: flex; + font-size: 75%; + letter-spacing: 2px; + + .collectionTreeViewChrome-sectionFilter-label { + vertical-align: center; + padding: 10px; + } + + .collectionTreeViewChrome-sectionFilter { + color: white; + width: 100px; + text-align: center; + background: rgb(238, 238, 238); + + .editable-view-input, + input, + .editableView-container-editing-oneLine, + .editableView-container-editing { + padding: 12px 10px 11px 10px; + border: 0px; + color: grey; + text-align: center; + letter-spacing: 2px; + outline-color: black; + height: 100%; + } + + .react-autosuggest__container { + margin: 0; + color: grey; + padding: 0px; + } + } +} + +.collectionTreeViewChrome-sectionFilter:hover { + cursor: text; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 7787a8eed..1de2f060e 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -534,20 +534,20 @@ export class CollectionTreeViewChrome extends React.Component - -
      -
      +
      +
      GROUP ITEMS BY:
      -
      +
      this.sectionFilter} autosuggestProps={ -- cgit v1.2.3-70-g09d2 From 98741f9ffc73f2bed0c9689f98fef81d15b0b38f Mon Sep 17 00:00:00 2001 From: kimdahey Date: Fri, 9 Aug 2019 12:03:47 -0400 Subject: changed scss files --- .../views/collections/CollectionViewChromes.scss | 79 ++++------------------ 1 file changed, 14 insertions(+), 65 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index d02daa366..060e72b7a 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -106,17 +106,20 @@ } - .collectionStackingViewChrome-cont { + .collectionStackingViewChrome-cont, + .collectionTreeViewChrome-cont { display: flex; justify-content: space-between; } - .collectionStackingViewChrome-sort { + .collectionStackingViewChrome-sort, + .collectionTreeViewChrome-sort { display: flex; align-items: center; justify-content: space-between; - .collectionStackingViewChrome-sortIcon { + .collectionStackingViewChrome-sortIcon, + .collectionTreeViewChrome-sortIcon { transition: transform .5s; margin-left: 10px; } @@ -127,18 +130,21 @@ } - .collectionStackingViewChrome-sectionFilter-cont { + .collectionStackingViewChrome-sectionFilter-cont, + .collectionTreeViewChrome-sectionFilter-cont { justify-self: right; display: flex; font-size: 75%; letter-spacing: 2px; - .collectionStackingViewChrome-sectionFilter-label { + .collectionStackingViewChrome-sectionFilter-label, + .collectionTreeViewChrome-sectionFilter-label { vertical-align: center; padding: 10px; } - .collectionStackingViewChrome-sectionFilter { + .collectionStackingViewChrome-sectionFilter, + .collectionTreeViewChrome-sectionFilter { color: white; width: 100px; text-align: center; @@ -165,7 +171,8 @@ } } - .collectionStackingViewChrome-sectionFilter:hover { + .collectionStackingViewChrome-sectionFilter:hover, + .collectionTreeViewChrome-sectionFilter:hover { cursor: text; } } @@ -220,62 +227,4 @@ margin-left: 50px; } } -} - -.collectionTreeViewChrome-cont { - display: flex; - justify-content: space-between; -} - -.collectionTreeViewChrome-sort { - display: flex; - align-items: center; - justify-content: space-between; - - .collectionTreeViewChrome-sortIcon { - transition: transform .5s; - margin-left: 10px; - } -} - -.collectionTreeViewChrome-sectionFilter-cont { - justify-self: right; - display: flex; - font-size: 75%; - letter-spacing: 2px; - - .collectionTreeViewChrome-sectionFilter-label { - vertical-align: center; - padding: 10px; - } - - .collectionTreeViewChrome-sectionFilter { - color: white; - width: 100px; - text-align: center; - background: rgb(238, 238, 238); - - .editable-view-input, - input, - .editableView-container-editing-oneLine, - .editableView-container-editing { - padding: 12px 10px 11px 10px; - border: 0px; - color: grey; - text-align: center; - letter-spacing: 2px; - outline-color: black; - height: 100%; - } - - .react-autosuggest__container { - margin: 0; - color: grey; - padding: 0px; - } - } -} - -.collectionTreeViewChrome-sectionFilter:hover { - cursor: text; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From e89bddbe1f4cc6508f9a66e168e5488874ace749 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Fri, 9 Aug 2019 12:30:44 -0400 Subject: got rid of unnecessary import --- src/client/views/collections/CollectionTreeView.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 1f19437be..a9de1d7c6 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -27,7 +27,6 @@ import "./CollectionTreeView.scss"; import React = require("react"); import { ComputedField, ScriptField } from '../../../new_fields/ScriptField'; import { KeyValueBox } from '../nodes/KeyValueBox'; -import { exportNamedDeclaration } from 'babel-types'; export interface TreeViewProps { -- cgit v1.2.3-70-g09d2 From 244952ccc52bf66ac34eeea7d5469d0ba6313aff Mon Sep 17 00:00:00 2001 From: kimdahey Date: Fri, 9 Aug 2019 13:32:37 -0400 Subject: commented out hotfix --- src/client/views/collections/CollectionTreeView.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index a9de1d7c6..4b1fca18a 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -428,9 +428,9 @@ class TreeView extends React.Component { return first > second ? 1 : -1; } if (typeof first === 'boolean' && typeof second === 'boolean') { - if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load - return Number(descA.x) > Number(descB.x) ? 1 : -1; - } + // if (first === second) { // bugfixing?: otherwise, the list "flickers" because the list is resorted during every load + // return Number(descA.x) > Number(descB.x) ? 1 : -1; + // } return first > second ? 1 : -1; } return descending ? 1 : -1; -- cgit v1.2.3-70-g09d2 From 8c4b8ae12fb418d38e5aab6c12514913f1565bb0 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Fri, 9 Aug 2019 17:02:02 -0400 Subject: send halp --- src/client/util/RichTextSchema.tsx | 52 +++++++++++----------- src/client/util/TooltipTextMenu.tsx | 9 ++-- .../views/collections/CollectionViewChromes.tsx | 2 + src/client/views/nodes/FormattedTextBox.tsx | 1 + 4 files changed, 33 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 8e80de1a8..733c50d20 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -6,6 +6,7 @@ import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list'; import { EditorState, Transaction, NodeSelection, TextSelection, Selection, } from "prosemirror-state"; import { EditorView, } from "prosemirror-view"; import { View } from '@react-pdf/renderer'; +import { TooltipTextMenu } from './TooltipTextMenu'; const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]; @@ -111,30 +112,16 @@ export const nodes: { [index: string]: NodeSpec } = { // }] }, - // TODO checkbox: { inline: true, attrs: { - visibility: { default: false }, - // text: { default: undefined }, - // textslice: { default: undefined }, - // textlen: { default: 0 } - + visibility: { default: false } }, group: "inline", toDOM(node) { const attrs = { style: `width: 40px` }; return ["span", { ...node.attrs, ...attrs }]; }, - // parseDOM: [{ - // tag: "star", getAttrs(dom: any) { - // return { - // visibility: dom.getAttribute("visibility"), - // oldtext: dom.getAttribute("oldtext"), - // oldtextlen: dom.getAttribute("oldtextlen"), - // } - // } - // }] }, // :: NodeSpec An inline image (``) node. Supports `src`, @@ -193,12 +180,6 @@ export const nodes: { [index: string]: NodeSpec } = { } }, - checkbox_list2: { - inline: false, - // content: 'list_item+', - group: 'block' - }, - // :: NodeSpec A hard line break, represented in the DOM as `
      `. hard_break: { inline: true, @@ -221,15 +202,20 @@ export const nodes: { [index: string]: NodeSpec } = { // parseDOM: [{ tag: "ul" }, { style: 'list-style-type=disc' }], // toDOM() { return ulDOM } }, + checkbox_list: { - ...bulletList, - content: 'list_item+', + content: 'checklist_item+', + marks: '_', group: 'block', - // style: 'list-style-type:none' - itemContent: "+", - // parseDOM: [{ tag: "ul" }, { style: 'list-style-type=square' }], - // toDOM() { return ulDOM; } + // inline: true, + parseDOM: [ + { tag: "ul" } + ], + toDOM() { + return ["ul", { style: 'list-style: none' }, 0]; + }, }, + //bullet_list: { // content: 'list_item+', // group: 'block', @@ -241,6 +227,18 @@ export const nodes: { [index: string]: NodeSpec } = { list_item: { ...listItem, content: 'paragraph block*' + }, + + checklist_item: { + content: 'paragraph block*', + parseDOM: [{ tag: "li" }], + // toDOM() { + // return ["li", { style: 'content: checkbox' }, 0]; + // }, + toDOM() { + return ["li", 0]; + }, + defining: true } }; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index b1243cb1d..8112ed868 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -441,13 +441,10 @@ export class TooltipTextMenu { return true; } - // this needs to change so it makes it into a bulleted list public static insertCheckbox(state: EditorState, dispatch: any) { let newNode = schema.nodes.checkbox.create({ visibility: false }); if (dispatch) { - //console.log(newNode.attrs.text.toString()); dispatch(state.tr.replaceSelectionWith(newNode)); - wrapInList(newNode.type)(state, dispatch); } return true; } @@ -461,7 +458,6 @@ export class TooltipTextMenu { let toAdd: MenuItem[] = []; this.listTypeToIcon.forEach((icon, type) => { toAdd.push(this.dropdownNodeBtn(icon, "color: black; width: 40px;", type, this.view, this.listTypes, this.changeToNodeType)); - console.log(type.name) }); //option to remove the list formatting toAdd.push(this.dropdownNodeBtn("X", "color: black; width: 40px;", undefined, this.view, this.listTypes, this.changeToNodeType)); @@ -529,6 +525,11 @@ export class TooltipTextMenu { liftListItem(schema.nodes.list_item)(view.state, view.dispatch); if (nodeType) { //add new wrapInList(nodeType)(view.state, view.dispatch); + // console.log(nodeType === schema.nodes.checkbox_list) + // if (nodeType === schema.nodes.checkbox_list) { + // TooltipTextMenu.insertCheckbox(view.state, view.dispatch) + // } + } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 52c47e7e8..5b673c8ec 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -33,6 +33,8 @@ let stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @observer export class CollectionViewBaseChrome extends React.Component { + //.*?doc\.(\w+).*?\("(\w+) + @observable private _viewSpecsOpen: boolean = false; @observable private _dateWithinValue: string = ""; @observable private _dateValue: Date | string = ""; diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 303b1ac88..d1771eb0f 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -177,6 +177,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe this._editorView.updateState(state); if (state.selection.empty && FormattedTextBox._toolTipTextMenu) { const marks = tx.storedMarks; + console.log(marks) if (marks) { FormattedTextBox._toolTipTextMenu.mark_key_pressed(marks); } } this._applyingChange = true; -- cgit v1.2.3-70-g09d2 From 50c6d29c2ac197ed55aefa9bf46c6c85959d00f2 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Mon, 12 Aug 2019 17:34:46 -0400 Subject: bleh --- .../views/collections/CollectionViewChromes.scss | 2 +- .../views/collections/CollectionViewChromes.tsx | 42 +++++++++++++++++----- 2 files changed, 35 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 793cb7a8b..2006c08f3 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -97,7 +97,7 @@ .collectionViewBaseChrome-viewSpecsMenu-lastRow { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; margin: 10px; } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 5b673c8ec..9e4a4ac5a 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -5,7 +5,7 @@ import { CollectionViewType } from "./CollectionBaseView"; import { undoBatch } from "../../util/UndoManager"; import { action, observable, runInAction, computed, IObservable, IObservableValue, reaction, autorun } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast } from "../../../new_fields/Doc"; +import { Doc, DocListCast, FieldResult } from "../../../new_fields/Doc"; import { DocLike } from "../MetadataEntryMenu"; import * as Autosuggest from 'react-autosuggest'; import { EditableView } from "../EditableView"; @@ -22,6 +22,7 @@ import { List } from "../../../new_fields/List"; import { Id } from "../../../new_fields/FieldSymbols"; import { threadId } from "worker_threads"; const datepicker = require('js-datepicker'); +import * as $ from 'jquery'; interface CollectionViewChromeProps { CollectionView: CollectionView; @@ -33,7 +34,7 @@ let stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @observer export class CollectionViewBaseChrome extends React.Component { - //.*?doc\.(\w+).*?\("(\w+) + //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) @observable private _viewSpecsOpen: boolean = false; @observable private _dateWithinValue: string = ""; @@ -41,6 +42,8 @@ export class CollectionViewBaseChrome extends React.Component { this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]); this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); @@ -122,10 +136,10 @@ export class CollectionViewBaseChrome extends React.Component { + this.openViewSpecs(e); - let keyRestrictionScript = `${this._keyRestrictions.map(i => i[1]) - .reduce((acc: string, value: string, i: number) => value ? `${acc} && ${value}` : acc)}`; + let keyRestrictionScript = this._keyRestrictions.map(i => i[1]).filter(i => i.length > 0).join(" && "); let yearOffset = this._dateWithinValue[1] === 'y' ? 1 : 0; let monthOffset = this._dateWithinValue[1] === 'm' ? parseInt(this._dateWithinValue[0]) : 0; let weekOffset = this._dateWithinValue[1] === 'w' ? parseInt(this._dateWithinValue[0]) : 0; @@ -145,9 +159,10 @@ export class CollectionViewBaseChrome extends React.Component); } + clearFilter = () => { + let compiled = CompileScript("return true", { params: { doc: Doc.name }, typecheck: false }); + if (compiled.compiled) { + this.props.CollectionView.props.Document.viewSpecScript = new ScriptField(compiled); + } + } + render() { return (
      @@ -248,9 +270,10 @@ export class CollectionViewBaseChrome extends React.Component { }} - onPointerDown={this.openViewSpecs} /> + onPointerDown={this.openViewSpecs} + id="viewSpecsInput" /> {this.getPivotInput()}
      +
      -- cgit v1.2.3-70-g09d2 From 180a1268d6e732bca9557da7f935ec540de4b878 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 13 Aug 2019 16:31:34 -0400 Subject: key restrictions working properly --- src/client/views/MainView.tsx | 2 +- .../views/collections/CollectionViewChromes.tsx | 73 +++++++++++++++++----- src/client/views/collections/KeyRestrictionRow.tsx | 6 +- 3 files changed, 62 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 031478477..daa047797 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -478,7 +478,7 @@ export class MainView extends React.Component { }; return < div id="add-nodes-menu" style={{ left: this.flyoutWidth + 20, bottom: 20 }} > - +
        diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 9e4a4ac5a..9ac724ba8 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -23,6 +23,7 @@ import { Id } from "../../../new_fields/FieldSymbols"; import { threadId } from "worker_threads"; const datepicker = require('js-datepicker'); import * as $ from 'jquery'; +import { firebasedynamiclinks } from "googleapis/build/src/apis/firebasedynamiclinks"; interface CollectionViewChromeProps { CollectionView: CollectionView; @@ -30,6 +31,12 @@ interface CollectionViewChromeProps { collapse?: (value: boolean) => any; } +interface Filter { + key: string; + value: string; + contains: boolean; +} + let stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @observer @@ -42,12 +49,47 @@ export class CollectionViewBaseChrome extends React.Component { + let re: any = /(!)?\(\(\(doc\.(\w+)\s+&&\s+\(doc\.\w+\s+as\s+\w+\)\.includes\(\"(\w+)\"\)/g; + let arr: any[] = re.exec(script); + let toReturn: Filter[] = []; + if (arr !== null) { + let filter: Filter = { + key: arr[2], + value: arr[3], + contains: (arr[1] === "!") ? false : true, + }; + toReturn.push(filter); + script = script.replace(arr[0], ""); + if (re.exec(script) !== null) { + toReturn.push(...this.getFilters(script)); + } + else { return toReturn; } + } + return toReturn; + } + + addKeyRestrictions = (fields: Filter[]) => { + + if (fields.length !== 0) { + for (let i = 0; i < fields.length; i++) { + this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[i][1] = value)} />, ""]); + + } + if (this._keyRestrictions.length === 1) { + this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); + } + } + else { + this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]); + this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); + } + } + componentDidMount = () => { setTimeout(() => this._picker = datepicker("#" + this._datePickerElGuid, { disabler: (date: Date) => date > new Date(), @@ -55,21 +97,14 @@ export class CollectionViewBaseChrome extends React.Component { - this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]); - this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]); - + this.addKeyRestrictions(fields); // chrome status is one of disabled, collapsed, or visible. this determines initial state from document let chromeStatus = this.props.CollectionView.props.Document.chromeStatus; if (chromeStatus) { @@ -129,17 +164,19 @@ export class CollectionViewBaseChrome extends React.Component { let index = this._keyRestrictions.length; - this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[index][1] = value)} />, ""]); + this._keyRestrictions.push([ runInAction(() => this._keyRestrictions[index][1] = value)} />, ""]); this.openViewSpecs(e); } - @action + @action.bound applyFilter = (e: React.MouseEvent) => { this.openViewSpecs(e); - let keyRestrictionScript = this._keyRestrictions.map(i => i[1]).filter(i => i.length > 0).join(" && "); + console.log(this._keyRestrictions) + + let keyRestrictionScript = "(" + this._keyRestrictions.map(i => i[1]).filter(i => i.length > 0).join(" && ") + ")"; let yearOffset = this._dateWithinValue[1] === 'y' ? 1 : 0; let monthOffset = this._dateWithinValue[1] === 'm' ? parseInt(this._dateWithinValue[0]) : 0; let weekOffset = this._dateWithinValue[1] === 'w' ? parseInt(this._dateWithinValue[0]) : 0; @@ -234,11 +271,15 @@ export class CollectionViewBaseChrome extends React.Component); } + @action.bound clearFilter = () => { let compiled = CompileScript("return true", { params: { doc: Doc.name }, typecheck: false }); if (compiled.compiled) { this.props.CollectionView.props.Document.viewSpecScript = new ScriptField(compiled); } + + this._keyRestrictions = []; + this.addKeyRestrictions([]); } render() { diff --git a/src/client/views/collections/KeyRestrictionRow.tsx b/src/client/views/collections/KeyRestrictionRow.tsx index 1b59547d8..e35b7d7d3 100644 --- a/src/client/views/collections/KeyRestrictionRow.tsx +++ b/src/client/views/collections/KeyRestrictionRow.tsx @@ -7,12 +7,14 @@ import { Doc } from "../../../new_fields/Doc"; interface IKeyRestrictionProps { contains: boolean; script: (value: string) => void; + field: string; + value: string; } @observer export default class KeyRestrictionRow extends React.Component { - @observable private _key = ""; - @observable private _value = ""; + @observable private _key = this.props.field; + @observable private _value = this.props.value; @observable private _contains = this.props.contains; render() { -- cgit v1.2.3-70-g09d2 From 18bc52d98999c6e0d7814429d8bb7358473e9aff Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 13 Aug 2019 16:48:58 -0400 Subject: adding web thing --- package.json | 2 +- src/client/views/MainView.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/package.json b/package.json index d699d1e6f..a4343982e 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "js-datepicker": "^4.6.6", "jsonwebtoken": "^8.5.0", "jsx-to-string": "^1.4.0", - "lodash": "^4.17.11", + "lodash": "^4.17.15", "mobile-detect": "^1.4.3", "mobx": "^5.9.0", "mobx-react": "^5.3.5", diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index b34a901e1..ae5f0b12f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -448,6 +448,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(() => Docs.Create.WebDocument("https://javascript.info/regexp-groups", { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" })); 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" })); @@ -457,6 +458,7 @@ export class MainView extends React.Component { let btns: [React.RefObject, IconName, string, () => Doc][] = [ [React.createRef(), "object-group", "Add Collection", addColNode], + [React.createRef(), "globe-asia", "Add Website", addWebNode], [React.createRef(), "bolt", "Add Button", addButtonDocument], // [React.createRef(), "clone", "Add Docking Frame", addDockingNode], [React.createRef(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], -- cgit v1.2.3-70-g09d2 From 31e9872ec5ec5b84c645adcf7acf06e20e2dc060 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Tue, 13 Aug 2019 17:47:01 -0400 Subject: yikes --- src/client/views/MainView.tsx | 42 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ae5f0b12f..51eb79edc 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -40,6 +40,7 @@ import { CollectionTreeView } from './collections/CollectionTreeView'; import { ClientUtils } from '../util/ClientUtils'; import { SchemaHeaderField, RandomPastel } from '../../new_fields/SchemaHeaderField'; import { DictationManager } from '../util/DictationManager'; +import * as $ from 'jquery'; @observer export class MainView extends React.Component { @@ -436,6 +437,40 @@ 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. */ @@ -448,7 +483,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(() => Docs.Create.WebDocument("https://javascript.info/regexp-groups", { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" })); + let addWebNode = action(() => this.makeWebDocument()); 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" })); @@ -482,6 +517,11 @@ export class MainView extends React.Component { DocServer.setFieldWriteMode("viewType", mode2); }; return < div id="add-nodes-menu" style={{ left: this.flyoutWidth + 20, bottom: 20 }} > +
        + + +
        + -- cgit v1.2.3-70-g09d2 From f50cf7bcf7b411b4eb8f803b2ef9c71d09d95b25 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 14 Aug 2019 16:44:58 -0400 Subject: restored inking --- src/client/views/InkingCanvas.scss | 3 +-- src/client/views/InkingCanvas.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss index d95398f17..5437b26d6 100644 --- a/src/client/views/InkingCanvas.scss +++ b/src/client/views/InkingCanvas.scss @@ -21,8 +21,7 @@ width: 8192px; height: 8192px; cursor: "crosshair"; - pointer-events: auto; - + pointer-events: all; } .inkingCanvas-canSelect, diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index b08133d80..cdb0a7c48 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -68,6 +68,7 @@ export class InkingCanvas extends React.Component { @action onPointerDown = (e: React.PointerEvent): void => { if (e.button !== 0 || e.altKey || e.ctrlKey || InkingControl.Instance.selectedTool === InkTool.None) { + console.log("RETURNING!"); return; } @@ -78,6 +79,8 @@ export class InkingCanvas extends React.Component { this.previousState = new Map(this.inkData); + console.log("POINTER DOWN"); + if (InkingControl.Instance.selectedTool !== InkTool.Eraser) { // start the new line, saves a uuid to represent the field of the stroke this._currentStrokeId = Utils.GenerateGuid(); @@ -167,15 +170,16 @@ export class InkingCanvas extends React.Component { }, [] as JSX.Element[]); let markerPaths = paths.filter(path => path.props.tool === InkTool.Highlighter); let penPaths = paths.filter(path => path.props.tool !== InkTool.Highlighter); + console.log(paths); return [!penPaths.length ? (null) : - {} + {penPaths} , !markerPaths.length ? (null) : - {} + {markerPaths} ]; } -- cgit v1.2.3-70-g09d2 From 2b0e8d271b57bf3966c11c82a55ebbd7575e059c Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Wed, 14 Aug 2019 16:45:19 -0400 Subject: removed console.log --- src/client/views/InkingCanvas.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index cdb0a7c48..31ffb0f9a 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -170,7 +170,6 @@ export class InkingCanvas extends React.Component { }, [] as JSX.Element[]); let markerPaths = paths.filter(path => path.props.tool === InkTool.Highlighter); let penPaths = paths.filter(path => path.props.tool !== InkTool.Highlighter); - console.log(paths); return [!penPaths.length ? (null) : -- 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') 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 =