From 6b52b5d97ec5bf49923801e0b04a67925a37eda8 Mon Sep 17 00:00:00 2001 From: Brandon Date: Tue, 5 Mar 2019 18:47:19 -0500 Subject: Finished kvp again --- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 54 +++++++++++++++++++++++++++++++-- src/client/views/nodes/KeyValuePair.tsx | 31 ++++++++++++++++++- 3 files changed, 82 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e01e1d4cd..5ce8bb637 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed } from "mobx" import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { Field, FieldWaiting, Opt } from "../../../fields/Field"; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index e8ebd50be..6192cd278 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -4,12 +4,18 @@ import { observer } from "mobx-react"; import { EditorView } from 'prosemirror-view'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import { Document } from '../../../fields/Document'; -import { Opt, FieldWaiting } from '../../../fields/Field'; +import { Opt, FieldWaiting, Field } from '../../../fields/Field'; import { KeyStore } from '../../../fields/KeyStore'; import { FieldView, FieldViewProps } from './FieldView'; import { KeyValuePair } from "./KeyValuePair"; import "./KeyValueBox.scss"; import React = require("react") +import { Server } from "../../Server" +import { EditableView } from "../EditableView"; +import { CompileScript, ToField } from "../../util/Scripting"; +import { useState } from 'react' +import { Key } from '../../../fields/Key'; +import { TextField } from '../../../fields/TextField'; @observer export class KeyValueBox extends React.Component { @@ -18,12 +24,18 @@ export class KeyValueBox extends React.Component { private _ref: React.RefObject; private _editorView: Opt; private _reactionDisposer: Opt; + private _newKey = ''; + private _newValue = ''; constructor(props: FieldViewProps) { super(props); this._ref = React.createRef(); + this.state = { + key: '', + value: '' + } } @@ -32,6 +44,26 @@ export class KeyValueBox extends React.Component { return false; } + onEnterKey = (e: React.KeyboardEvent): void => { + if (e.key == 'Enter') { + if (this._newKey != '' && this._newValue != '') { + let doc = this.props.doc.GetT(KeyStore.Data, Document); + if (!doc || doc == FieldWaiting) { + return + } + let realDoc = doc; + realDoc.Set(new Key(this._newKey), new TextField(this._newValue)); + if (this.refs.newKVPKey instanceof HTMLInputElement) { + this.refs.newKVPKey.value = '' + } + if (this.refs.newKVPValue instanceof HTMLInputElement) { + this.refs.newKVPValue.value = '' + } + this._newKey = '' + this._newValue = '' + } + } + } onPointerDown = (e: React.PointerEvent): void => { if (e.buttons === 1 && this.props.isSelected()) { @@ -52,7 +84,7 @@ export class KeyValueBox extends React.Component { let ids: { [key: string]: string } = {}; let protos = doc.GetAllPrototypes(); for (const proto of protos) { - proto._proxies.forEach((val, key) => { + proto._proxies.forEach((val: any, key: string) => { if (!(key in ids)) { ids[key] = key; } @@ -67,9 +99,24 @@ export class KeyValueBox extends React.Component { return rows; } + keyChanged = (e: React.ChangeEvent) => { + this._newKey = e.currentTarget.value; + } - render() { + valueChanged = (e: React.ChangeEvent) => { + this._newValue = e.currentTarget.value; + } + newKeyValue = () => { + return ( + + + + + ) + } + + render() { return (
@@ -78,6 +125,7 @@ export class KeyValueBox extends React.Component { {this.createTable()} + {this.newKeyValue()}
Fields
) diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index a97e98313..111f85a05 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -8,6 +8,8 @@ import { observable, action } from 'mobx'; import { Document } from '../../../fields/Document'; import { Key } from '../../../fields/Key'; import { Server } from "../../Server" +import { EditableView } from "../EditableView"; +import { CompileScript, ToField } from "../../util/Scripting"; // Represents one row in a key value plane @@ -48,10 +50,37 @@ export class KeyValuePair extends React.Component { bindings: {}, selectOnLoad: false, } + let contents = ( + + ); return ( {this.key.Name} - + { + let field = props.doc.Get(props.fieldKey); + if (field && field instanceof Field) { + return field.ToScriptString(); + } + return field || ""; + }} + SetValue={(value: string) => { + let script = CompileScript(value, undefined, true); + if (!script.compiled) { + return false; + } + let field = script(); + if (field instanceof Field) { + props.doc.Set(props.fieldKey, field); + return true; + } else { + let dataField = ToField(field); + if (dataField) { + props.doc.Set(props.fieldKey, dataField); + return true; + } + } + return false; + }}> ) } -- cgit v1.2.3-70-g09d2 From 42e26e6ac81741cabeb5e368c143b7fc591b4686 Mon Sep 17 00:00:00 2001 From: Fawn Date: Mon, 11 Mar 2019 18:24:38 -0400 Subject: kvp ui fits to color pallette --- src/client/views/nodes/KeyValueBox.scss | 61 +++++++++++++++++++++------------ 1 file changed, 39 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss index e946275fa..43941f314 100644 --- a/src/client/views/nodes/KeyValueBox.scss +++ b/src/client/views/nodes/KeyValueBox.scss @@ -1,31 +1,48 @@ +@import "./../global_variables"; .keyValueBox-cont { - overflow-y: scroll; - height: 100%; - border: black; - border-width: 1px; - border-style: solid; - box-sizing: border-box; - display: inline-block; - .imageBox-cont img { - max-height: 45px; - height: auto; - } + overflow-y: scroll; + height: 100%; + border: 1px solid $intermediate-color; + border-radius: $border-radius; + box-sizing: border-box; + display: inline-block; + .imageBox-cont img { + max-height: 45px; + height: auto; + } + td { + padding: 6px 8px; + border-right: 1px solid $intermediate-color; + border-top: 1px solid $intermediate-color; + } } + .keyValueBox-table { - position: relative; + position: relative; + border-collapse: collapse; } + .keyValueBox-header { - background: gray; + background: $intermediate-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 12px; + font-weight: normal; + height: 30px; + padding-top: 4px; } + .keyValueBox-evenRow { - background: white; - .formattedTextBox-cont { - background: white; - } + background: $light-color; + .formattedTextBox-cont { + background: $light-color; + } } + .keyValueBox-oddRow { - background: lightGray; - .formattedTextBox-cont { - background: lightgray; - } -} + background: $light-color-secondary; + .formattedTextBox-cont { + background: $light-color-secondary; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From bff0093163bdc05fb661eb744c2333069544dc89 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Mon, 11 Mar 2019 18:48:58 -0400 Subject: added a method to check if block has a syle ie bullets --- src/client/util/RichTextSchema.tsx | 44 +++++++++++++++++++++++++---- src/client/util/TooltipTextMenu.tsx | 3 +- src/client/views/nodes/FormattedTextBox.tsx | 2 ++ 3 files changed, 41 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index abf448c9f..341d5a443 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -1,12 +1,31 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray } from "prosemirror-model" +import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray, NodeType } from "prosemirror-model" import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands' import { redo, undo } from 'prosemirror-history' -import { orderedList, bulletList, listItem } from 'prosemirror-schema-list' +import { orderedList, bulletList, listItem, } from 'prosemirror-schema-list' +import { EditorState, Transaction, NodeSelection, } from "prosemirror-state"; +import { EditorView, } from "prosemirror-view"; const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0] +//adapted this method - use it to check if block has a tag (ie bulleting) +const blockActive = (type: NodeType>, attrs = {}) => (state: EditorState) => { + + if (state.selection instanceof NodeSelection) { + const sel: NodeSelection = state.selection; + let $from = sel.$from; + let to = sel.to; + let node = sel.node; + + if (node) { + return node.hasMarkup(type, attrs); + } + + return to <= $from.end() && $from.parent.hasMarkup(type, attrs); + } +}; + // :: Object // [Specs](#model.NodeSpec) for the nodes defined in this schema. export const nodes: { [index: string]: NodeSpec } = { @@ -113,11 +132,24 @@ export const nodes: { [index: string]: NodeSpec } = { content: 'list_item+', group: 'block' }, + //bullet_list: { + // ...bulletList, + // content: 'list_item+', + // group: 'block', + //parseDOM: [{ tag: "ul" }, { style: 'list-style-type=disc' }], + //toDOM() { return ulDOM } + //}, bullet_list: { - content: 'list_item+', - group: 'block', - parseDOM: [{ tag: "ul" }, { style: "list-style-type=disc;" }], - toDOM() { return ulDOM } + title: "Wrap in bullet list", + content: icons.bullet_list, + active: blockActive(state.config.schema.nodes.bullet_list), + enable: state => wrapInList(state.config.schema.nodes.bullet_list), + run: state => wrapInList(state.config.schema.nodes.bullet_list), + active: blockActive(schema.nodes.bullet_list), + enable: wrapInList(schema.nodes.bullet_list), + run: wrapInList(schema.nodes.bullet_list), + select: state => true, + menu: props => -- cgit v1.2.3-70-g09d2 From 3090bc53ba13427d739e4ba292705c25d2bb02cd Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 16 Mar 2019 23:32:16 -0400 Subject: Fixes and cleanup --- src/client/views/nodes/KeyValueBox.tsx | 26 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 7de5bda92..283c1f732 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -2,39 +2,26 @@ import { observer } from "mobx-react"; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import { Document } from '../../../fields/Document'; -import { Opt, FieldWaiting, Field } from '../../../fields/Field'; +import { FieldWaiting, Field } from '../../../fields/Field'; import { KeyStore } from '../../../fields/KeyStore'; import { FieldView, FieldViewProps } from './FieldView'; import "./KeyValueBox.scss"; import { KeyValuePair } from "./KeyValuePair"; import React = require("react") -import { Server } from "../../Server" -import { EditableView } from "../EditableView"; import { CompileScript, ToField } from "../../util/Scripting"; -import { useState } from 'react' import { Key } from '../../../fields/Key'; -import { TextField } from '../../../fields/TextField'; -import { EditorView } from "prosemirror-view"; -import { IReactionDisposer } from "mobx"; import { observable, action } from "mobx"; @observer export class KeyValueBox extends React.Component { public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) } - private _ref: React.RefObject; - private _editorView: Opt; - private _reactionDisposer: Opt; - private _newKey = ''; - private _newValue = ''; @observable private _keyInput: string = ""; @observable private _valueInput: string = ""; constructor(props: FieldViewProps) { super(props); - - this._ref = React.createRef(); } @@ -43,32 +30,31 @@ export class KeyValueBox extends React.Component { return false; } + @action onEnterKey = (e: React.KeyboardEvent): void => { if (e.key == 'Enter') { - if (this._newKey != '' && this._newValue != '') { + if (this._keyInput && this._valueInput) { let doc = this.props.doc.GetT(KeyStore.Data, Document); if (!doc || doc == FieldWaiting) { return } let realDoc = doc; - let script = CompileScript(this._newValue, undefined, true); + let script = CompileScript(this._valueInput, undefined, true); if (!script.compiled) { return; } let field = script(); if (field instanceof Field) { - realDoc.Set(new Key(this._newKey), field); + realDoc.Set(new Key(this._keyInput), field); } else { let dataField = ToField(field); if (dataField) { - realDoc.Set(new Key(this._newKey), field); + realDoc.Set(new Key(this._keyInput), dataField); } } this._keyInput = "" this._valueInput = "" - this._newKey = '' - this._newValue = '' } } } -- cgit v1.2.3-70-g09d2 From af8262f309846f8ba3f308cef79caa9007799935 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 17 Mar 2019 00:02:15 -0400 Subject: added popout to new window for docking frame --- src/client/views/collections/CollectionDockingView.tsx | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 94005a4c0..b92fd77c2 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -212,6 +212,12 @@ export class CollectionDockingView extends React.Component Date: Sun, 17 Mar 2019 00:10:39 -0400 Subject: adjusted caption layout --- src/client/documents/Documents.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index bec4dd697..a92cf97fe 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -222,7 +222,7 @@ export namespace Documents {
{layout}
-
+
-- cgit v1.2.3-70-g09d2 From 0cf0bfee1473f15d3df0813b92ede98b29ee53a4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 17 Mar 2019 00:13:39 -0400 Subject: fixed url popout. --- src/client/views/collections/CollectionDockingView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index b92fd77c2..ba9e8c29f 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -215,7 +215,7 @@ export class CollectionDockingView extends React.Component Date: Sun, 17 Mar 2019 00:26:13 -0400 Subject: back to the original version --- src/client/views/Main.tsx | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index a128a0e73..fa8875d66 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -114,24 +114,15 @@ Documents.initProtos(mainDocId, (res?: Document) => { ReactDOM.render((
{/*
— DASH —
*/} - { - mainDocFrame.pwidth = r.entry.width; - mainDocFrame.pheight = r.entry.height; - }}> - {({ measureRef }) => -
- Transform.Identity} - ContentScaling={() => 1} - PanelWidth={() => mainDocFrame.pwidth} - PanelHeight={() => mainDocFrame.pheight} - isTopMost={true} - SelectOnLoad={false} - focus={() => { }} - ContainingCollectionView={undefined} /> -
- } -
+ Transform.Identity} + ContentScaling={() => 1} + PanelWidth={() => 0} + PanelHeight={() => 0} + isTopMost={true} + SelectOnLoad={false} + focus={() => { }} + ContainingCollectionView={undefined} /> -- cgit v1.2.3-70-g09d2 From 47da497aded0bafdc5c85c8a79a9a06d0d401e92 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 17 Mar 2019 00:44:32 -0400 Subject: think I fixed popouts --- src/client/views/Main.tsx | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index fa8875d66..345371884 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -1,4 +1,4 @@ -import { action, configure, observable } from 'mobx'; +import { action, configure, observable, runInAction } from 'mobx'; import "normalize.css"; import * as React from 'react'; import * as ReactDOM from 'react-dom'; @@ -32,8 +32,6 @@ import { faPenNib } from '@fortawesome/free-solid-svg-icons'; import { faFilm } from '@fortawesome/free-solid-svg-icons'; import { faMusic } from '@fortawesome/free-solid-svg-icons'; import Measure from 'react-measure'; -import { withContentRect } from 'react-measure' - configure({ enforceActions: "observed" }); // causes errors to be generated when modifying an observable outside of an action @@ -46,7 +44,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { }), true) const pathname = window.location.pathname.split("/"); const mainDocId = pathname[pathname.length - 1]; -let mainContainer: Document; +var mainContainer: Document; let mainfreeform: Document; class mainDocFrame { @@ -114,15 +112,24 @@ Documents.initProtos(mainDocId, (res?: Document) => { ReactDOM.render((
{/*
— DASH —
*/} - Transform.Identity} - ContentScaling={() => 1} - PanelWidth={() => 0} - PanelHeight={() => 0} - isTopMost={true} - SelectOnLoad={false} - focus={() => { }} - ContainingCollectionView={undefined} /> + runInAction(() => { + mainDocFrame.pwidth = r.entry.width; + mainDocFrame.pheight = r.entry.height; + })}> + {({ measureRef }) => +
+ Transform.Identity} + ContentScaling={() => 1} + PanelWidth={() => mainDocFrame.pwidth} + PanelHeight={() => mainDocFrame.pheight} + isTopMost={true} + SelectOnLoad={false} + focus={() => { }} + ContainingCollectionView={undefined} /> +
+ } +
-- cgit v1.2.3-70-g09d2 From 641656b5e803305971006c386db2f465da0373ac Mon Sep 17 00:00:00 2001 From: yipstanley Date: Sun, 17 Mar 2019 19:18:59 -0400 Subject: client side interactions --- src/client/Server.ts | 2 +- src/client/views/Main.tsx | 18 ++++++++++++++++++ src/fields/KeyStore.ts | 3 +++ 3 files changed, 22 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/Server.ts b/src/client/Server.ts index f2d7de75c..5e42c8285 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -145,4 +145,4 @@ export class Server { } Server.Socket.on(MessageStore.Foo.Message, Server.connected); -Server.Socket.on(MessageStore.SetField.Message, Server.updateField); \ No newline at end of file +Server.Socket.on(MessageStore.SetField.Message, Server.updateField); diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 345371884..89ef16cc9 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -32,6 +32,8 @@ import { faPenNib } from '@fortawesome/free-solid-svg-icons'; import { faFilm } from '@fortawesome/free-solid-svg-icons'; import { faMusic } from '@fortawesome/free-solid-svg-icons'; import Measure from 'react-measure'; +import { Field, Opt } from '../../fields/Field'; +import { ListField } from '../../fields/ListField'; configure({ enforceActions: "observed" }); // causes errors to be generated when modifying an observable outside of an action @@ -44,6 +46,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { }), true) const pathname = window.location.pathname.split("/"); const mainDocId = pathname[pathname.length - 1]; +const pendingDocId = "pending-doc" var mainContainer: Document; let mainfreeform: Document; @@ -79,9 +82,24 @@ Documents.initProtos(mainDocId, (res?: Document) => { var dockingLayout = { content: [{ type: 'row', content: [CollectionDockingView.makeDocumentConfig(mainfreeform)] }] }; mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout)); mainContainer.Set(KeyStore.ActiveFrame, mainfreeform); + let pendingDocument = Documents.SchemaDocument([], { title: "New Mobile Uploads" }, pendingDocId) + mainContainer.Set(KeyStore.OptionalRightCollection, pendingDocument) }, 0); } + // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized) + setTimeout(() => { + Server.GetField(pendingDocId, (res?: Field) => { + if (res instanceof Document) { + res.GetTAsync>(KeyStore.Data, ListField, (f: Opt>) => { + if (f && f.Data.length > 0) { + CollectionDockingView.Instance.AddRightSplit(res) + } + }) + } + }) + }, 50) + let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf" let weburl = "https://cs.brown.edu/courses/cs166/"; diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 06cdc8fc8..9c7a45af4 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -37,4 +37,7 @@ export namespace KeyStore { export const CurPage = new Key("CurPage"); export const NumPages = new Key("NumPages"); export const Ink = new Key("Ink"); + export const OptionalRightCollection = new Key("OptionalRightCollection"); + export const Archives = new Key("Archives"); + export const Updated = new Key("Updated"); } -- cgit v1.2.3-70-g09d2