From 94e6613e92a71e35427875e4ed8eb72a0302bca1 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 6 Jun 2019 19:17:02 -0400 Subject: i hate everytihgn the freickin import end of day 6/6 --- deploy/index.html | 1 + 1 file changed, 1 insertion(+) (limited to 'deploy') diff --git a/deploy/index.html b/deploy/index.html index 532b995f8..92635e7f5 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -6,6 +6,7 @@ + -- cgit v1.2.3-70-g09d2 From 1c9196d9c6c8051d2f7c59538265693f8ad3d98c Mon Sep 17 00:00:00 2001 From: madelinegr Date: Fri, 7 Jun 2019 12:03:52 -0400 Subject: animation starting to work --- deploy/index.html | 2 +- src/client/views/SearchBox.tsx | 127 +++++++++++++++++++++++------------------ 2 files changed, 72 insertions(+), 57 deletions(-) (limited to 'deploy') diff --git a/deploy/index.html b/deploy/index.html index 92635e7f5..f4a019b71 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -6,7 +6,7 @@ - + diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx index d05c06549..3e8d6c58c 100644 --- a/src/client/views/SearchBox.tsx +++ b/src/client/views/SearchBox.tsx @@ -20,7 +20,7 @@ import * as anime from 'animejs'; // const anime = require('lib/anime.js'); // import anime from 'animejs/lib/anime.es'; // import anime = require ('lib/anime.min.js'); -import Anime from 'react-anime'; +// import Anime from 'react-anime'; library.add(faSearch); library.add(faObjectGroup); @@ -45,72 +45,87 @@ export interface ToggleBarProps { export class ToggleBar extends React.Component{ @observable _status: boolean = false; + @observable timeline: any; - // @observable clicked: boolean = true; + _toggleButton: React.RefObject; - @action.bound - toggle() { - this._status = !this._status; - } + constructor(props: ToggleBarProps) { + super(props); + this._toggleButton = React.createRef(); - render() { - var timeline = anime.timeline({ - autoplay:false - }) - - timeline.add({ - targets: '.toggle-button', - translateX: '100%', - direction: 'alternate', - easing: 'easeInOutQuad' - }); + // this.timeline = anime.timeline({ + // autoplay: true, + // direction: 'alternate', + // loop: true + // }) - // var wordQueryToggle = anime({ + // this.timeline.add({ // targets: '.toggle-button', // translateX: '100%', // direction: 'alternate', // easing: 'easeInOutQuad' // }); - // document.querySelector('.toggle-button').onClick = wordQueryToggle; + // if (this.) + // this._toggleButton.current.animate({ + // translate: {x: 100, y: 0}, + // duration: 1000 + // }) + } + + componentDidMount = () => { + + let bar = document.getElementById("toggle-bar"); + let tog = document.getElementById("toggle-button"); + let padding = 0; + let barwidth = 0; + let togwidth = 0; + if (bar && tog) { + barwidth = bar.clientWidth; + togwidth = tog.clientWidth; + } + let totalWidth = (barwidth - togwidth - 10); + + let timeline = anime.timeline({ + autoplay: true, + loop: true, + direction: 'alternate', + }); + + timeline.add({ + targets: this._toggleButton.current, + translateX: totalWidth, + easing: "easeInOutQuad", + }); + + timeline.play(); + + // const animeObject = anime({ + // targets: this._toggleButton.current, + // translateX: totalWidth, + // direction: 'alternate', + // easing: 'easeInOutQuad', + // autoplay: false, + // duration: .5, + // }) + } + + @action.bound + toggle() { + this._status = !this._status; + } + + @action.bound + onclick() { + console.log("clicked") + // this.timeline.play(); + + } + + render() { return ( -
- {/*
timeline.play()}> */} - {/*
*/} - {/* {this._status ? ( - -
- - ) : ( - -
- - )} */} - -{/* - - -
- */} - {/*
*/} +
+
); }; -- cgit v1.2.3-70-g09d2 From 336266551d363df8c4958d485170846b478f1787 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 5 Jul 2019 11:54:39 -0400 Subject: fixed templates (old style) a bit. --- deploy/assets/downarrow.png | Bin 0 -> 3363 bytes src/client/views/Templates.tsx | 3 +-- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 ++-- src/client/views/nodes/DocumentContentsView.tsx | 5 ++++- 4 files changed, 7 insertions(+), 5 deletions(-) create mode 100644 deploy/assets/downarrow.png (limited to 'deploy') diff --git a/deploy/assets/downarrow.png b/deploy/assets/downarrow.png new file mode 100644 index 000000000..3c59ff5b1 Binary files /dev/null and b/deploy/assets/downarrow.png differ diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx index 4843a70a6..236704fa2 100644 --- a/src/client/views/Templates.tsx +++ b/src/client/views/Templates.tsx @@ -69,8 +69,7 @@ export namespace Templates { `< div >
{layout}
- +
` ); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 4b7d462e5..7c0591600 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -468,8 +468,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { description: "Add freeform arrangement", event: () => { let addOverlay = (key: "arrangeScript" | "arrangeInit", options: OverlayElementOptions, params?: Record, requiredType?: string) => { - const docs = DocListCast(this.Document[this.props.fieldKey]); - docs.map(d => d.transition = "transform 1s"); let overlayDisposer: () => void; const script = this.Document[key]; let originalText: string | undefined = undefined; @@ -484,6 +482,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { onError(script.errors.map(error => error.messageText).join("\n")); return; } + const docs = DocListCast(this.Document[this.props.fieldKey]); + docs.map(d => d.transition = "transform 1s"); this.Document[key] = new ScriptField(script); overlayDisposer(); setTimeout(() => docs.map(d => d.transition = undefined), 1200); diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 0da4888a1..51d0c83cd 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -24,6 +24,7 @@ import { Without, OmitKeys } from "../../../Utils"; import { Cast, StrCast, NumCast } from "../../../new_fields/Types"; import { List } from "../../../new_fields/List"; import { Doc } from "../../../new_fields/Doc"; +import { CollectionViewType } from "../collections/CollectionBaseView"; const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? type BindingProps = Without; @@ -82,7 +83,8 @@ export class DocumentContentsView extends React.Component { let self = this; // this scales constants in the markup by the scaling applied to the document, but caps the constants to be smaller @@ -103,6 +105,7 @@ export class DocumentContentsView extends React.Component 7) return (null); if (!this.layout && (this.props.layoutKey !== "overlayLayout" || !this.templates.length)) return (null); return Date: Fri, 5 Jul 2019 17:31:20 -0400 Subject: first pass at implementation of directory import --- deploy/assets/loading.gif | Bin 0 -> 114208 bytes .../util/Import & Export/DirectoryImportBox.scss | 0 .../util/Import & Export/DirectoryImportBox.tsx | 194 +++++++++++++++------ src/client/util/Import & Export/KeyValue.tsx | 79 +++++++++ src/client/views/MainView.tsx | 2 +- 5 files changed, 217 insertions(+), 58 deletions(-) create mode 100644 deploy/assets/loading.gif delete mode 100644 src/client/util/Import & Export/DirectoryImportBox.scss create mode 100644 src/client/util/Import & Export/KeyValue.tsx (limited to 'deploy') diff --git a/deploy/assets/loading.gif b/deploy/assets/loading.gif new file mode 100644 index 000000000..0652bf021 Binary files /dev/null and b/deploy/assets/loading.gif differ diff --git a/src/client/util/Import & Export/DirectoryImportBox.scss b/src/client/util/Import & Export/DirectoryImportBox.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index 2d77f6ae6..cbc8c6fdc 100644 --- a/src/client/util/Import & Export/DirectoryImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -3,44 +3,46 @@ import React = require("react"); import { Doc } from "../../../new_fields/Doc"; import { DocServer } from "../../DocServer"; import { RouteStore } from "../../../server/RouteStore"; -import { action, observable, runInAction } from "mobx"; +import { action, observable, autorun, runInAction } from "mobx"; import { FieldViewProps, FieldView } from "../../views/nodes/FieldView"; import Measure, { ContentRect } from "react-measure"; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowUp, faTag, faFileExcel } from '@fortawesome/free-solid-svg-icons'; +import { faArrowUp, faTag, faPlus } from '@fortawesome/free-solid-svg-icons'; import { Docs, DocumentOptions } from "../../documents/Documents"; -import { EditableView } from "../../views/EditableView"; +import { observer } from "mobx-react"; +import KeyValue from "./KeyValue"; +import { Utils } from "../../../Utils"; +import { doesNotReject } from "assert"; +import { remove } from "typescript-collections/dist/lib/arrays"; +@observer export default class DirectoryImportBox extends React.Component { private selector = React.createRef(); @observable private top = 0; @observable private left = 0; private dimensions = 50; - @observable private key = "Key"; - @observable private value = "Value"; + @observable private editingMetadata = false; + @observable private metadata_guids: string[] = []; + @observable private entries: KeyValue[] = []; + + @observable private quota = 1; + @observable private remaining = 1; + + @observable private uploadBegun = false; public static LayoutString() { return FieldView.LayoutString(DirectoryImportBox); } constructor(props: FieldViewProps) { super(props); - library.add(faArrowUp, faTag); - } - - updateKey = (newKey: string) => { - runInAction(() => this.key = newKey); - console.log("KEY ", this.key); - return true; - } - - updateValue = (newValue: string) => { - runInAction(() => this.value = newValue); - console.log("VALUE ", this.value); - return true; + library.add(faArrowUp, faTag, faPlus); } + @action handleSelection = async (e: React.ChangeEvent) => { + this.uploadBegun = true; + let promises: Promise[] = []; let docs: Doc[] = []; @@ -49,9 +51,15 @@ export default class DirectoryImportBox extends React.Component let directory = (files.item(0) as any).webkitRelativePath.split("/", 1); + let validated: File[] = []; for (let i = 0; i < files.length; i++) { - let uploaded_file = files.item(i); + let file = files.item(i); + file && validated.push(file); + } + + this.quota = validated.length; + for (let uploaded_file of validated) { if (!uploaded_file) { continue; } @@ -61,15 +69,18 @@ export default class DirectoryImportBox extends React.Component let dropFileName = uploaded_file ? uploaded_file.name : "-empty-"; let type = uploaded_file.type; + this.remaining++; + let prom = fetch(DocServer.prepend(RouteStore.upload), { method: 'POST', body: formData }).then(async (res: Response) => { (await res.json()).map(action((file: any) => { let path = DocServer.prepend(file); - console.log(path); let docPromise = Docs.getDocumentFromType(type, path, { nativeWidth: 300, width: 300, title: dropFileName }); - docPromise.then(doc => doc && docs.push(doc)); + docPromise.then(doc => { + doc && docs.push(doc) && runInAction(() => this.remaining--); + }); })); }); promises.push(prom); @@ -77,11 +88,14 @@ export default class DirectoryImportBox extends React.Component await Promise.all(promises); + docs.forEach(doc => this.entries.forEach(entry => doc[entry.key] = entry.value)); + let doc = this.props.Document; let options: DocumentOptions = { title: `Import of ${directory}`, width: 500, height: 500, x: Doc.GetT(doc, "x", "number"), y: Doc.GetT(doc, "y", "number") }; let parent = this.props.ContainingCollectionView; if (parent) { let importContainer = Docs.StackingDocument(docs, options); + importContainer.singleColumn = false; Doc.AddDocToList(Doc.GetProto(parent.props.Document), "data", importContainer); this.props.removeDocument && this.props.removeDocument(doc); } @@ -103,9 +117,29 @@ export default class DirectoryImportBox extends React.Component this.top = bounds.height / 2 - offset; } + @action + addMetadataEntry = () => { + this.metadata_guids.push(Utils.GenerateGuid()); + } + + @action + remove = (entry: KeyValue) => { + let index = this.entries.indexOf(entry); + let key = entry.key; + this.entries.splice(index, 1); + this.metadata_guids.splice(this.metadata_guids.indexOf(key), 1); + } + render() { let dimensions = 50; - let keyValueStyle = { paddingLeft: 5, width: "50%" }; + let guids = this.metadata_guids.map(el => el); + let isEditing = this.editingMetadata; + let remaining = this.remaining; + let quota = this.quota; + let percent = `${100 - (remaining / quota * 100)}`; + let uploadBegun = this.uploadBegun; + percent = percent.split(".")[0]; + percent = percent.startsWith("100") ? "99" : percent; return ( {({ measureRef }) => @@ -113,14 +147,20 @@ export default class DirectoryImportBox extends React.Component -