From b08e28ac279c0199d7f828d05e6e346865579592 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Tue, 21 May 2019 19:44:27 -0400 Subject: Fixed image upload --- src/mobile/ImageUpload.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'src/mobile/ImageUpload.tsx') diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 1f9e160ce..690937339 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -20,12 +20,15 @@ import { List } from '../new_fields/List'; // } // } -const onFileLoad = async (file: any) => { +const onFileLoad = async (file: React.ChangeEvent) => { + file.persist(); + await Docs.initProtos(); let imgPrev = document.getElementById("img_preview"); if (imgPrev) { - let files: File[] = file.target.files; - if (files.length !== 0) { + let files: FileList | null = file.target.files; + if (files && files.length !== 0) { console.log(files[0]); + const name = files[0].name; let formData = new FormData(); formData.append("file", files[0]); @@ -37,7 +40,7 @@ const onFileLoad = async (file: any) => { const json = await res.json(); json.map(async (file: any) => { let path = window.location.origin + file; - var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200 }); + var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name }); const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId)); if (!res) { -- cgit v1.2.3-70-g09d2 From ab001ffd9749814c3f0b0f30e9f86f65e2f8ac0c Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Tue, 21 May 2019 20:49:49 -0400 Subject: "Rebased" Stanley's image upload changes --- src/client/documents/Documents.ts | 3 ++ src/client/views/Main.scss | 15 ++++++ src/client/views/MainView.tsx | 33 ++++++++++--- .../views/collections/CollectionBaseView.tsx | 1 + .../views/collections/CollectionStackingView.scss | 44 ++++++++++++++++++ .../views/collections/CollectionStackingView.tsx | 54 ++++++++++++++++++++++ src/client/views/collections/CollectionView.tsx | 3 ++ src/mobile/ImageUpload.scss | 21 ++++++++- src/mobile/ImageUpload.tsx | 1 + .../authentication/models/current_user_utils.ts | 2 +- 10 files changed, 168 insertions(+), 9 deletions(-) create mode 100644 src/client/views/collections/CollectionStackingView.scss create mode 100644 src/client/views/collections/CollectionStackingView.tsx (limited to 'src/mobile/ImageUpload.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 3d65826a9..b17544229 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -292,6 +292,9 @@ export namespace Docs { export function TreeDocument(documents: Array, options: DocumentOptions) { return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Tree }); } + export function StackingDocument(documents: Array, options: DocumentOptions) { + return CreateInstance(collProto, new List(documents), { schemaColumns: new List(["title"]), ...options, viewType: CollectionViewType.Stacking }); + } export function DockDocument(documents: Array, config: string, options: DocumentOptions, id?: string) { return CreateInstance(collProto, new List(documents), { ...options, viewType: CollectionViewType.Docking, dockingConfig: config }, id); } diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index d63b0147b..302c49c10 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -97,6 +97,21 @@ button:hover { right: 0px; } +.main-notifs-badge { + position: absolute; + top: -10px; + right: -10px; + color: white; + background: #f44b42; + font-weight: 300; + border-radius: 100%; + width: 25px; + height: 25px; + text-align: center; + padding-top: 4px; + font-size: 12px; +} + //toolbar stuff #toolbar { position: absolute; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index af224747d..1d491d11f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -1,5 +1,5 @@ import { IconName, library } from '@fortawesome/fontawesome-svg-core'; -import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt } from '@fortawesome/free-solid-svg-icons'; +import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faTree, faUndoAlt, faBell } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, runInAction, trace } from 'mobx'; import { observer } from 'mobx-react'; @@ -25,7 +25,7 @@ import { DocumentView } from './nodes/DocumentView'; import { PreviewCursor } from './PreviewCursor'; import { SearchBox } from './SearchBox'; import { SelectionManager } from '../util/SelectionManager'; -import { FieldResult, Field, Doc, Opt } from '../../new_fields/Doc'; +import { FieldResult, Field, Doc, Opt, DocListCast } from '../../new_fields/Doc'; import { Cast, FieldValue, StrCast } from '../../new_fields/Types'; import { DocServer } from '../DocServer'; import { listSpec } from '../../new_fields/Schema'; @@ -137,12 +137,14 @@ export class MainView extends React.Component { // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) setTimeout(() => { this.openWorkspace(mainDoc); - let pendingDocument = Docs.SchemaDocument(["title"], [], { title: "New Mobile Uploads" }); - mainDoc.optionalRightCollection = pendingDocument; + // let pendingDocument = Docs.StackingDocument([], { title: "New Mobile Uploads" }); + // mainDoc.optionalRightCollection = pendingDocument; }, 0); } } + @observable _notifsCol: Opt; + @action openWorkspace = async (doc: Doc, fromHistory = false) => { CurrentUserUtils.MainDocId = doc[Id]; @@ -153,12 +155,19 @@ export class MainView extends React.Component { setTimeout(async () => { if (col) { const l = Cast(col.data, listSpec(Doc)); - if (l && l.length > 0) { - CollectionDockingView.Instance.AddRightSplit(col); + if (l) { + runInAction(() => this._notifsCol = col); } } }, 100); } + + openNotifsCol = () => { + if (this._notifsCol) { + CollectionDockingView.Instance.AddRightSplit(this._notifsCol); + } + } + @action onResize = (r: any) => { this.pwidth = r.offset.width; @@ -254,11 +263,23 @@ export class MainView extends React.Component { /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */ @computed get miscButtons() { + const length = this._notifsCol ? DocListCast(this._notifsCol.data).length : 0; + const notifsRef = React.createRef(); + const dragNotifs = action(() => this._notifsCol!); let logoutRef = React.createRef(); return [ ,
+
+ +
0 ? { "display": "initial" } : { "display": "none" }}> + {length} +
+
diff --git a/src/client/views/collections/CollectionBaseView.tsx b/src/client/views/collections/CollectionBaseView.tsx index 5686ccfef..2bccde241 100644 --- a/src/client/views/collections/CollectionBaseView.tsx +++ b/src/client/views/collections/CollectionBaseView.tsx @@ -16,6 +16,7 @@ export enum CollectionViewType { Schema, Docking, Tree, + Stacking } export interface CollectionRenderProps { diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss new file mode 100644 index 000000000..803e680e5 --- /dev/null +++ b/src/client/views/collections/CollectionStackingView.scss @@ -0,0 +1,44 @@ +@import "../globalCssVariables"; + +.collectionStackingView { + top: 0; + left: 0; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + position: absolute; + overflow-y: scroll; + min-width: 250px; + border-width: 0; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; + border-color: $light-color-secondary; + border-style: solid; + border-radius: 0 0 $border-radius $border-radius; + box-sizing: border-box; + + .collectionStackingView-docView-container { + width: 45%; + margin: 5% 2.5%; + padding-left: 2.5%; + height: auto; + } + + .collectionStackingView-flexCont { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + } + + .collectionStackingView-description { + font-size: 100%; + margin-bottom: 1vw; + padding: 10px; + height: 2vw; + width: 100%; + font-family: $sans-serif; + background: $dark-color; + color: $light-color; + } +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx new file mode 100644 index 000000000..a1cb73123 --- /dev/null +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -0,0 +1,54 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import { CollectionSubView } from "./CollectionSubView"; +import Measure from "react-measure"; +import { Doc, WidthSym, HeightSym } from "../../../new_fields/Doc"; +import { DocumentView } from "../nodes/DocumentView"; +import { Transform } from "../../util/Transform"; +import { emptyFunction, returnOne } from "../../../Utils"; +import "./CollectionStackingView.scss"; +import { runInAction, action, observable, computed } from "mobx"; +import { StrCast } from "../../../new_fields/Types"; + +@observer +export class CollectionStackingView extends CollectionSubView(doc => doc) { + getPreviewTransform = (): Transform => this.props.ScreenToLocalTransform(); + + @action + moveDocument = (doc: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean): boolean => { + this.props.removeDocument(doc); + addDocument(doc); + return true; + } + + render() { + const docs = this.childDocs; + return ( +
e.stopPropagation()}> +
{StrCast(this.props.Document.documentText, StrCast(this.props.Document.title, "stacking collection"))}
+
+ {docs.map(d => { + return (
+ +
); + })} +
+
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index bfdef8e8c..39c8af4ab 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -12,6 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionTreeView } from "./CollectionTreeView"; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; +import { CollectionStackingView } from './CollectionStackingView'; export const COLLECTION_BORDER_WIDTH = 2; library.add(faTh); @@ -31,6 +32,7 @@ export class CollectionView extends React.Component { case CollectionViewType.Schema: return (); case CollectionViewType.Docking: return (); case CollectionViewType.Tree: return (); + case CollectionViewType.Stacking: return (); case CollectionViewType.Freeform: default: return (); @@ -48,6 +50,7 @@ export class CollectionView extends React.Component { } ContextMenu.Instance.addItem({ description: "Schema", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Schema), icon: "th-list" }); ContextMenu.Instance.addItem({ description: "Treeview", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Tree), icon: "tree" }); + ContextMenu.Instance.addItem({ description: "Stacking", event: undoBatch(() => this.props.Document.viewType = CollectionViewType.Stacking), icon: "th-list" }); } } diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index d0b7d4e41..65305dd04 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,7 +1,13 @@ +@import "../client/views/globalCssVariables.scss"; + .imgupload_cont { - height: 100vh; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; width: 100vw; - align-content: center; + height: 100vh; + .button_file { text-align: center; height: 50%; @@ -10,4 +16,15 @@ color: grey; font-size: 3em; } + + .upload_label { + width: 80vw; + height: 40vh; + background: $dark-color; + font-size: 10vw; + font-family: $sans-serif; + text-align: center; + padding-top: 20vh; + color: white; + } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 690937339..84bbfeb14 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -71,6 +71,7 @@ const onFileLoad = async (file: React.ChangeEvent) => { ReactDOM.render((
{/* */} +
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index b947f5e01..e85aa2c74 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -37,7 +37,7 @@ export class CurrentUserUtils { doc.title = this.email; doc.data = new List(); doc.excludeFromLibrary = true; - doc.optionalRightCollection = Docs.SchemaDocument(["title"], [], { title: "Pending documents" }); + doc.optionalRightCollection = Docs.StackingDocument([], { title: "New mobile uploads" }); // doc.library = Docs.TreeDocument([doc], { title: `Library: ${CurrentUserUtils.email}` }); // (doc.library as Doc).excludeFromLibrary = true; return doc; -- cgit v1.2.3-70-g09d2 From 422119419afb3dda7c7b9992bdf8a910821c312f Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 23 May 2019 01:08:18 -0400 Subject: Made image upload hopefully work on mobile --- src/mobile/ImageUpload.scss | 14 +++++++++----- src/mobile/ImageUpload.tsx | 11 ++++++----- 2 files changed, 15 insertions(+), 10 deletions(-) (limited to 'src/mobile/ImageUpload.tsx') diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 65305dd04..eea69b81c 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -17,14 +17,18 @@ font-size: 3em; } - .upload_label { - width: 80vw; - height: 40vh; + .input_file { + display: none; + } + + .upload_label, + .upload_button { background: $dark-color; - font-size: 10vw; + font-size: 500%; font-family: $sans-serif; text-align: center; - padding-top: 20vh; + padding: 5vh; + margin-bottom: 20px; color: white; } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 84bbfeb14..7776cf5d4 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -19,13 +19,13 @@ import { List } from '../new_fields/List'; // imgInput.click(); // } // } +const inputRef = React.createRef(); -const onFileLoad = async (file: React.ChangeEvent) => { - file.persist(); +const onClick = async () => { await Docs.initProtos(); let imgPrev = document.getElementById("img_preview"); if (imgPrev) { - let files: FileList | null = file.target.files; + let files: FileList | null = inputRef.current!.files; if (files && files.length !== 0) { console.log(files[0]); const name = files[0].name; @@ -71,8 +71,9 @@ const onFileLoad = async (file: React.ChangeEvent) => { ReactDOM.render((
{/* */} - - + + +
), -- cgit v1.2.3-70-g09d2 From adbe3e98e67e92d7f4e03e9c0beb54ad7b617fb6 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 23 May 2019 01:16:15 -0400 Subject: More image upload changes --- src/mobile/ImageUpload.tsx | 122 +++++++++++++++++++++++++++------------------ 1 file changed, 74 insertions(+), 48 deletions(-) (limited to 'src/mobile/ImageUpload.tsx') diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 7776cf5d4..91a8858d8 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -9,6 +9,8 @@ import { Opt, Doc } from '../new_fields/Doc'; import { Cast } from '../new_fields/Types'; import { listSpec } from '../new_fields/Schema'; import { List } from '../new_fields/List'; +import { observer } from 'mobx-react'; +import { observable } from 'mobx'; @@ -21,61 +23,85 @@ import { List } from '../new_fields/List'; // } const inputRef = React.createRef(); -const onClick = async () => { - await Docs.initProtos(); - let imgPrev = document.getElementById("img_preview"); - if (imgPrev) { - let files: FileList | null = inputRef.current!.files; - if (files && files.length !== 0) { - console.log(files[0]); - const name = files[0].name; - let formData = new FormData(); - formData.append("file", files[0]); +@observer +class Uploader extends React.Component { + @observable + error: string = ""; - const upload = window.location.origin + "/upload"; - const res = await fetch(upload, { - method: 'POST', - body: formData - }); - const json = await res.json(); - json.map(async (file: any) => { - let path = window.location.origin + file; - var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name }); + onClick = async () => { + try { + this.error = "initializing protos"; + await Docs.initProtos(); + let imgPrev = document.getElementById("img_preview"); + if (imgPrev) { + let files: FileList | null = inputRef.current!.files; + if (files && files.length !== 0) { + console.log(files[0]); + const name = files[0].name; + let formData = new FormData(); + formData.append("file", files[0]); - const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId)); - if (!res) { - throw new Error("No user id returned"); - } - const field = await DocServer.GetRefField(res); - let pending: Opt; - if (field instanceof Doc) { - pending = await Cast(field.optionalRightCollection, Doc); - } - if (pending) { - const data = await Cast(pending.data, listSpec(Doc)); - if (data) { - data.push(doc); - } else { - pending.data = new List([doc]); - } - } - }); + const upload = window.location.origin + "/upload"; + this.error = "uploading image"; + const res = await fetch(upload, { + method: 'POST', + body: formData + }); + const json = await res.json(); + json.map(async (file: any) => { + let path = window.location.origin + file; + var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name }); + + this.error = "getting user document"; + + const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId)); + if (!res) { + throw new Error("No user id returned"); + } + const field = await DocServer.GetRefField(res); + let pending: Opt; + if (field instanceof Doc) { + pending = await Cast(field.optionalRightCollection, Doc); + } + if (pending) { + this.error = "has pending docs"; + const data = await Cast(pending.data, listSpec(Doc)); + if (data) { + data.push(doc); + } else { + pending.data = new List([doc]); + } + this.error = "finished"; + } + }); - // console.log(window.location.origin + file[0]) + // console.log(window.location.origin + file[0]) - //imgPrev.setAttribute("src", window.location.origin + files[0].name) + //imgPrev.setAttribute("src", window.location.origin + files[0].name) + } + } + } catch (error) { + this.error = JSON.stringify(error); } } -}; + + render() { + return ( +
+ + + + +

{this.error}

+
+ ); + } + +} + ReactDOM.render(( -
- {/* */} - - - - -
-
), + +), document.getElementById('root') ); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 517816327526520b99e439345b48549ebc79db6b Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 23 May 2019 01:24:15 -0400 Subject: More image upload changes --- src/mobile/ImageUpload.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'src/mobile/ImageUpload.tsx') diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 91a8858d8..bfc1738fc 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -27,10 +27,12 @@ const inputRef = React.createRef(); class Uploader extends React.Component { @observable error: string = ""; + @observable + status: string = ""; onClick = async () => { try { - this.error = "initializing protos"; + this.status = "initializing protos"; await Docs.initProtos(); let imgPrev = document.getElementById("img_preview"); if (imgPrev) { @@ -42,17 +44,18 @@ class Uploader extends React.Component { formData.append("file", files[0]); const upload = window.location.origin + "/upload"; - this.error = "uploading image"; + this.status = "uploading image"; const res = await fetch(upload, { method: 'POST', body: formData }); + this.status = "upload image, getting json"; const json = await res.json(); json.map(async (file: any) => { let path = window.location.origin + file; var doc = Docs.ImageDocument(path, { nativeWidth: 200, width: 200, title: name }); - this.error = "getting user document"; + this.status = "getting user document"; const res = await rp.get(DocServer.prepend(RouteStore.getUserDocumentId)); if (!res) { @@ -64,14 +67,14 @@ class Uploader extends React.Component { pending = await Cast(field.optionalRightCollection, Doc); } if (pending) { - this.error = "has pending docs"; + this.status = "has pending docs"; const data = await Cast(pending.data, listSpec(Doc)); if (data) { data.push(doc); } else { pending.data = new List([doc]); } - this.error = "finished"; + this.status = "finished"; } }); @@ -92,6 +95,7 @@ class Uploader extends React.Component { +

{this.status}

{this.error}

); -- cgit v1.2.3-70-g09d2 From b286d5a80b0c4cf56aa8ab1e6940bf711402ed59 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 23 May 2019 01:27:59 -0400 Subject: More image upload changes --- src/mobile/ImageUpload.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/mobile/ImageUpload.tsx') diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index bfc1738fc..6ca3a6f23 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -50,6 +50,8 @@ class Uploader extends React.Component { body: formData }); this.status = "upload image, getting json"; + this.status = await res.text(); + return; const json = await res.json(); json.map(async (file: any) => { let path = window.location.origin + file; -- cgit v1.2.3-70-g09d2 From a2faa344dc76407e8120ffb83d7431b851d01cb8 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Thu, 23 May 2019 01:34:46 -0400 Subject: final image upload change? --- src/mobile/ImageUpload.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/mobile/ImageUpload.tsx') diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 6ca3a6f23..bfc1738fc 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -50,8 +50,6 @@ class Uploader extends React.Component { body: formData }); this.status = "upload image, getting json"; - this.status = await res.text(); - return; const json = await res.json(); json.map(async (file: any) => { let path = window.location.origin + file; -- cgit v1.2.3-70-g09d2