{field.date.toLocaleString()}
; } else if (field instanceof Doc) { diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index eea69b81c..715924cba 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,12 +1,26 @@ @import "../client/views/globalCssVariables.scss"; .imgupload_cont { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; - width: 100vw; - height: 100vh; + // display: flex; + // justify-content: center; + // flex-direction: column; + // align-items: center; + // width: 100vw; + // height: 100vh; + + .upload_label { + font-weight: normal !important; + width: 100%; + padding: 13px 12px; + border-bottom: 1px solid rgba(200, 200, 200, 0.7); + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + user-select: none; + font-size: 35px; + text-transform: uppercase; + color: black; + } .button_file { text-align: center; @@ -21,14 +35,27 @@ display: none; } - .upload_label, + // .upload_label, + // .upload_button { + // background: $dark-color; + // font-size: 500%; + // font-family: $sans-serif; + // text-align: center; + // padding: 5vh; + // margin-bottom: 20px; + // color: white; + // } + .upload_button { - background: $dark-color; - font-size: 500%; - font-family: $sans-serif; - text-align: center; - padding: 5vh; - margin-bottom: 20px; - color: white; + width: 100%; + padding: 13px 12px; + border-bottom: 1px solid rgba(200, 200, 200, 0.7); + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + user-select: none; + font-size: 35px; + text-transform: uppercase; + color: black; } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index b15042f9f..2552e2112 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -4,16 +4,19 @@ import { Docs } from '../client/documents/Documents'; import "./ImageUpload.scss"; import React = require('react'); import { DocServer } from '../client/DocServer'; -import { Opt, Doc } from '../fields/Doc'; +import { Opt, Doc, DocListCast } from '../fields/Doc'; import { Cast } from '../fields/Types'; import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; import { observer } from 'mobx-react'; import { observable } from 'mobx'; import { Utils } from '../Utils'; -import MobileInterface from './MobileInterface'; -import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; -import { resolvedPorts } from '../client/views/Main'; +import { Networking } from '../client/Network'; +import { MobileDocumentUploadContent } from '../server/Message'; + +export interface ImageUploadProps { + Document: Doc; +} // const onPointerDown = (e: React.TouchEvent) => { // let imgInput = document.getElementById("input_image_file"); @@ -24,7 +27,7 @@ import { resolvedPorts } from '../client/views/Main'; const inputRef = React.createRef
-
+
-
+ {/* ![]()
);
}
@@ -104,25 +100,4 @@ class Uploader extends React.Component {
}
-// DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, "image upload");
-(async () => {
- const info = await CurrentUserUtils.loadCurrentUser();
- DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, info.email + "mobile");
- await Docs.Prototypes.initialize();
- if (info.id !== "__guest__") {
- // a guest will not have an id registered
- await CurrentUserUtils.loadUserDocument(info);
- }
- document.getElementById('root')!.addEventListener('wheel', event => {
- if (event.ctrlKey) {
- event.preventDefault();
- }
- }, true);
- ReactDOM.render((
- // Upload
*/}
{this.status}
-{this.error}
+ {/*{this.error}
*/}
+ window.screen.width}
+ PanelHeight={() => window.screen.height}
+ renderDepth={0}
+ focus={emptyFunction}
+ backgroundColor={backgroundColor}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ />
+
+ );
+ }
+ }
+
+ handleClick(doc: Doc) {
+ let children = DocListCast(doc.data);
+ if (doc.type !== "collection") {
+ this._parents.push(this._activeDoc);
+ this._activeDoc = doc;
+ this.switchCurrentView((userDoc: Doc) => doc);
+ this.toggleSidebar();
+ } else if (doc.type === "collection" && children.length === 0) {
+ console.log("This collection has no children");
+ } else {
+ this._parents.push(this._activeDoc);
+ this._activeDoc = doc;
+ this.switchCurrentView((userDoc: Doc) => doc);
+ this._child = doc;
+ }
+
+ // let sidebar = document.getElementById("sidebar") as HTMLElement;
+ // sidebar.classList.toggle('active');
+ }
+
+ createPathname = () => {
+ let pathname = "";
+ this._parents.map((doc: Doc, index: any) => {
+ if (doc === this.mainDoc) {
+ pathname = pathname + doc.title;
+ } else {
+ pathname = pathname + " > " + doc.title;
+ }
+ });
+ if (this._activeDoc === this.mainDoc) {
+ pathname = pathname + this._activeDoc.title;
+ } else {
+ pathname = pathname + " > " + this._activeDoc.title;
+ }
+ return pathname;
+ }
+
+ openLibrary() {
+ this._activeDoc = this.mainDoc;
+ this.switchCurrentView((userDoc: Doc) => this.mainDoc);
+ this._child = this._library;
+ }
+
+ renderDefaultContent = () => {
+ const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+ let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
+ return (
+ this.handleClick(doc)}>{doc.title}
+
);
+ });
+
+ if (this._child) {
+ buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => {
+ return (
+ {doc.type}
+ this.handleClick(doc)}>{doc.title}
+
);
+ });
+ }
+
+ if (!this._child) {
+ return (
+ {doc.type}
+
+
+ );
+ }
+ else {
+ return (
+
+
+ MENU
+
+
+
+
+
+ {this.createPathname()}
+
+
+ {this.renderView}
+
+
+
+ );
+ }
+ }
+
+ recordAudio = async () => {
+ // upload to server with known URL
+
+ const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc;
+ if (audioDoc) {
+ console.log("audioClicked: " + audioDoc.title);
+ this._activeDoc = audioDoc;
+ this.switchCurrentView((userDoc: Doc) => audioDoc);
+ this.toggleSidebar();
+ }
+ const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+ if (audioRightSidebar) {
+ console.log(audioRightSidebar.title);
+ const data = Cast(audioRightSidebar.data, listSpec(Doc));
+ if (data) {
+ data.push(audioDoc);
+ }
+ }
+ }
+
+ openDefaultPresentation = () => {
+ const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+
+ if (presentation) {
+ console.log("presentation clicked: " + presentation.title);
+ this._activeDoc = presentation;
+ this.switchCurrentView((userDoc: Doc) => presentation);
+ this.toggleSidebar();
+ }
+ }
+
+ // mobileHome = () => {
+ // return (
+ //
+
+ menu
+
+
+
+
+
+ {this.createPathname()}
+
+
+ //
+ // );
+ // }
+
+ renderActiveCollection = (userDoc: Doc) => {
+ if (this.activeContainer) {
+ const active = Cast(this.activeContainer.data, listSpec(Doc));
+ if (active) {
+ return (
+
+
+ //
+ //
+
+ //
+ //
+
+ //
+ //
+
+ //
+ //
+
+ //
+ // HELLO!
+ );
+ }
}
- return "hello";
}
onBack = (e: React.MouseEvent) => {
@@ -164,60 +438,15 @@ export default class MobileInterface extends React.Component {
panelHeight = () => window.innerHeight;
panelWidth = () => window.innerWidth;
- renderInkingContent = () => {
- console.log("rendering inking content");
- // TODO: support panning and zooming
- // TODO: handle moving of ink strokes
- if (this.mainContainer) {
- return (
-
-
-
-
- );
- }
- }
+ //WAS 3
+
+ //WAS 1
upload = async (e: React.MouseEvent) => {
if (this.mainContainer) {
const data = Cast(this.mainContainer.data, listSpec(Doc));
if (data) {
- const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked
+ const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked
const children = DocListCast(collectionDoc.data);
const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, {
title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300
@@ -259,46 +488,6 @@ export default class MobileInterface extends React.Component {
}
}
}
-
- renderUploadContent() {
- if (this.mainContainer) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- window.screen.width}
- PanelHeight={() => window.screen.height}
- renderDepth={0}
- focus={emptyFunction}
- backgroundColor={returnEmptyString}
- parentActive={returnTrue}
- whenActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined} />
-
- );
- }
- }
-
onDragOver = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
@@ -314,18 +503,21 @@ export default class MobileInterface extends React.Component {
-
- {/* */}
- {/* */}
-
-
-
+ {this.renderDefaultContent()}
+
+ {/*
+// window.screen.width}
+// PanelHeight={() => window.screen.height}
+// renderDepth={0}
+// focus={emptyFunction}
+// backgroundColor={returnEmptyString}
+// parentActive={returnTrue}
+// whenActiveChanged={emptyFunction}
+// bringToFront={emptyFunction}
+// ContainingCollectionView={undefined}
+// ContainingCollectionDoc={undefined} />
+//
+// );
+// }
+// }
+
+// 2
+// Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); });
+// Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); });
+// Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); });
+// Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); });
+ // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); });
+
+// 3
+ // renderInkingContent = () => {
+ // console.log("rendering inking content");
+ // // TODO: support panning and zooming
+ // // TODO: handle moving of ink strokes
+ // if (this.mainContainer) {
+ // return (
+ //
+//
+// {/* */}
+// {/* */}
+//
+//
+//
+ //
+ //
+ //
+ // );
+ // }
+ // }
\ No newline at end of file
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
new file mode 100644
index 000000000..250340e36
--- /dev/null
+++ b/src/mobile/MobileMenu.scss
@@ -0,0 +1,240 @@
+$navbar-height: 120px;
+$pathbar-height: 50px;
+
+* {
+ margin: 0px;
+ padding: 0px;
+ box-sizing: border-box;
+ font-family: "Open Sans";
+}
+
+body {
+ overflow: hidden;
+}
+
+.navbar {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ width: 100vw;
+ height: $navbar-height;
+ background-color: whitesmoke;
+ border-bottom: 5px solid black;
+}
+
+.navbar .toggle-btn {
+ position: absolute;
+ right: 20px;
+ top: 30px;
+ height: 70px;
+ width: 70px;
+ transition: all 300ms ease-in-out 200ms;
+}
+
+.navbar .header {
+ position: absolute;
+ top: 50%;
+ top: calc(9px + 50%);
+ right: 50%;
+ transform: translate(50%, -50%);
+ font-size: 40;
+ user-select: none;
+ text-transform: uppercase;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+.navbar .toggle-btn span {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 70%;
+ height: 4px;
+ background: black;
+ transition: all 200ms ease;
+}
+
+.navbar .toggle-btn span:nth-child(1) {
+ transition: top 200ms ease-in-out;
+ top: 30%;
+}
+
+.navbar .toggle-btn span:nth-child(3) {
+ transition: top 200ms ease-in-out;
+ top: 70%;
+}
+
+.navbar .toggle-btn.active {
+ transition: transform 200ms ease-in-out 200ms;
+ transform: rotate(135deg);
+}
+
+.navbar .toggle-btn.active span:nth-child(1) {
+ top: 50%;
+}
+
+.navbar .toggle-btn.active span:nth-child(2) {
+ transform: translate(-50%, -50%) rotate(90deg);
+}
+
+.navbar .toggle-btn.active span:nth-child(3) {
+ top: 50%;
+}
+
+.sidebar {
+ position: absolute;
+ top: 200px;
+ opacity: 0;
+ right: -100%;
+ width: 100%;
+ height: calc(100% - (200px));
+ z-index: 5;
+ background-color: whitesmoke;
+ transition: all 400ms ease 50ms;
+ padding: 20px;
+ // border-right: 5px solid black;
+}
+
+.sidebar .item {
+ width: 100%;
+ padding: 13px 12px;
+ border-bottom: 1px solid rgba(200, 200, 200, 0.7);
+ font-family: Arial, Helvetica, sans-serif;
+ font-style: normal;
+ font-weight: normal;
+ user-select: none;
+ font-size: 35px;
+ text-transform: uppercase;
+ color: black;
+}
+
+.sidebar .home {
+ position: absolute;
+ top: -135px;
+ right: calc(50% + 80px);
+ transform: translate(0%, -50%);
+ font-size: 40;
+ user-select: none;
+ text-transform: uppercase;
+ font-family: Arial, Helvetica, sans-serif;
+ z-index: 200;
+}
+
+.type {
+ display: inline;
+ text-transform: lowercase;
+ margin-left: 20px;
+ font-size: 35px;
+ font-style: italic;
+ color: rgb(28, 28, 28);
+}
+
+.right {
+ margin-left: 20px;
+ z-index: 200;
+}
+
+.left {
+ width: 100%;
+ height: 100%;
+}
+
+.sidebar .logout {
+ width: 100%;
+ padding: 13px 12px;
+ border-bottom: 1px solid rgba(200, 200, 200, 0.7);
+ font-family: Arial, Helvetica, sans-serif;
+ font-style: normal;
+ font-weight: normal;
+ user-select: none;
+ font-size: 30px;
+ text-transform: uppercase;
+ color: black;
+}
+
+.sidebar .settings {
+ width: 100%;
+ padding: 13px 12px;
+ border-bottom: 1px solid rgba(200, 200, 200, 0.7);
+ font-family: Arial, Helvetica, sans-serif;
+ font-style: normal;
+ font-weight: normal;
+ user-select: none;
+ font-size: 30px;
+ text-transform: uppercase;
+ color: black;
+}
+
+
+.sidebar.active {
+ right: 0%;
+ opacity: 1;
+}
+
+.back {
+ position: absolute;
+ top: -140px;
+ left: 50px;
+ transform: translate(0%, -50%);
+ color: black;
+ font-size: 60;
+ user-select: none;
+ text-transform: uppercase;
+ z-index: 100;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+
+.pathbar {
+ position: absolute;
+ top: 118px;
+ background: #1a1a1a;
+ z-index: 20;
+ border-radius: 0px;
+ width: 100%;
+ height: 80px;
+ transition: all 400ms ease 50ms;
+}
+
+.pathname {
+ position: relative;
+ font-size: 25;
+ top: 50%;
+ width: 90%;
+ left: 3%;
+ color: whitesmoke;
+ transform: translate(0%, -50%);
+ z-index: 20;
+ font-family: sans-serif;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ direction: rtl;
+ text-align: left;
+ text-transform: uppercase;
+}
+
+.homeContainer {
+ position: relative;
+ top: 200px;
+ height: calc(100% - 250px);
+ width: 90%;
+ overflow: scroll;
+ left: 5%;
+ background-color: lightpink;
+}
+
+.pinButton {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ font-size: 90px;
+ text-align: center;
+ left: 50%;
+ transform: translate(-50%, 0);
+ border-style: solid;
+ border-radius: 50px;
+ border-width: medium;
+ background-color: pink;
+ z-index: 100;
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index bd1d3b5a9..274f14069 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -43,7 +43,7 @@ module.exports = {
repl: ["./src/debug/Repl.tsx", 'webpack-hot-middleware/client?reload=true'],
test: ["./src/debug/Test.tsx", 'webpack-hot-middleware/client?reload=true'],
inkControls: ["./src/mobile/InkControls.tsx", 'webpack-hot-middleware/client?reload=true'],
- imageUpload: ["./src/mobile/ImageUpload.tsx", 'webpack-hot-middleware/client?reload=true'],
+ mobileInterface: ["./src/mobile/MobileInterface.tsx", 'webpack-hot-middleware/client?reload=true'],
},
optimization: {
noEmitOnErrors: true
--
cgit v1.2.3-70-g09d2
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
+ //