From 8d6fdb9460bd826c2be3a03cca9fa28a018b3e22 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 9 Jun 2020 22:06:14 +0800 Subject: adjust presentation view --- src/client/util/SettingsManager.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/client/util/SettingsManager.scss') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 6513cb223..eb1045f70 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -133,4 +133,6 @@ } -} \ No newline at end of file +} + +@media only screen and (max-width: 1000px) {} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 7a7adfdb6fb6131ba2012d3e8aeb145e87773c81 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 9 Jun 2020 22:43:16 +0800 Subject: updated settings view for mobile --- src/client/util/SettingsManager.scss | 31 ++++++++++++++++++++++++++++++- src/client/views/nodes/PresBox.scss | 30 +++++++++++++++++++++++++++++- src/mobile/MobileInterface.tsx | 2 +- 3 files changed, 60 insertions(+), 3 deletions(-) (limited to 'src/client/util/SettingsManager.scss') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index eb1045f70..4d0fe5b8a 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -135,4 +135,33 @@ } } -@media only screen and (max-width: 1000px) {} \ No newline at end of file +@media only screen and (max-width: 1000px) { + .settings-interface { + background-color: whitesmoke !important; + color: grey; + width: 80vw; + height: 25vh; + } + + .settings-interface .settings-body .settings-content input { + border-radius: 5px; + border: none; + font-size: 30; + padding: 4px; + min-width: 100%; + margin: 2px 0; + } + + .settings-interface button { + width: 100%; + font-size: 30px; + align-self: center; + background: #b2cef8; + margin-top: 4px; + } + + .settings-interface .settings-heading { + letter-spacing: .5em; + font-size: 25; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 61641c989..56c6b4357 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -81,7 +81,8 @@ } } -@media only screen and (max-width: 1000px) { .presBox-cont .presBox-buttons { +@media only screen and (max-width: 1000px) { + .presBox-cont .presBox-buttons { position: absolute; top: 85%; left: 50%; @@ -123,4 +124,31 @@ position: relative; min-width: 50px; } + + .presElementBox-closeIcon { + border-radius: 20px; + transform: scale(2); + position: absolute; + right: 20; + top: 20; + padding: 8px; + } + + .presElementBox-buttons { + display: inline-flex; + position: absolute; + right: 0; + width: 50%; + } + + .presElementBox-name { + font-size: 30px; + position: absolute; + display: inline-block; + top: 10px; + width: 50%; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + } } \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 0f6f51295..d8ac7d1f1 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -949,7 +949,7 @@ export class MobileInterface extends React.Component { @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } // Sets up new mobile menu only if activeMobile already exists - @observable private mainDoc: any = Doc.UserDoc().activeMobile !== undefined ? console.log("true") : CurrentUserUtils.setupMobileMenu(); + @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); @observable private renderView?: () => JSX.Element; @observable private audioState: any; @observable private activeToolbar: boolean = false; -- cgit v1.2.3-70-g09d2 From bc80c711e7ab3044a0859c4b5d74e8e49cc5d077 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Wed, 10 Jun 2020 03:21:32 +0800 Subject: image upload functions w/ bugs - choose an image does not immediately update - close button does not move with rest of upload image --- src/client/util/CurrentUserUtils.ts | 7 +- src/client/util/SettingsManager.scss | 2 +- src/client/views/nodes/PresBox.scss | 43 ++----- .../views/presentationview/PresElementBox.scss | 51 +++++++- src/mobile/ImageUpload.scss | 138 +++++++++++++++------ src/mobile/ImageUpload.tsx | 74 ++++++++++- src/mobile/MobileInterface.tsx | 46 ++++++- 7 files changed, 273 insertions(+), 88 deletions(-) (limited to 'src/client/util/SettingsManager.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index d99d11c1f..563f8cfe4 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -430,7 +430,7 @@ export class CurrentUserUtils { } static setupMobileMenu() { - const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), { + const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons2(), { _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _autoHeight: true, _yMargin: 80 }), Doc) as Doc; return menu; @@ -647,7 +647,7 @@ export class CurrentUserUtils { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" }, { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." }, - { title: "UPLOAD", icon: "upload", click: 'console.log("hi")', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, + { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, // { title: "INK", icon: "pen-nib", backgroundColor: "lightgrey", info: "Doodle and draw with ink on your mobile and have it directly available on Dash Web" }, { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" } @@ -658,7 +658,7 @@ export class CurrentUserUtils { static mobileButton = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MulticolumnDocument(docs, { ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15, - borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", + borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled", })) as any as Doc static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MultirowDocument(docs, { @@ -720,6 +720,7 @@ export class CurrentUserUtils { } } + static setupClickEditorTemplates(doc: Doc) { if (doc["clickFuncs-child"] === undefined) { const openInTarget = Docs.Create.ScriptingDocument(ScriptField.MakeScript( diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 4d0fe5b8a..1eac9303b 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -140,7 +140,7 @@ background-color: whitesmoke !important; color: grey; width: 80vw; - height: 25vh; + height: 400px; } .settings-interface .settings-body .settings-content input { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 56c6b4357..2bb249ee4 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -84,7 +84,7 @@ @media only screen and (max-width: 1000px) { .presBox-cont .presBox-buttons { position: absolute; - top: 85%; + top: 70%; left: 50%; transform: translate(-50%, 0); width: max-content; @@ -107,10 +107,10 @@ .presBox-cont .presBox-buttons .presBox-button { margin-right: 10px; margin-left: 10px; - height: 130px; - width: 130px; - font-size: 50; - border-radius: 5px; + height: 250; + width: 250; + font-size: 70; + border-radius: 25px; display: flex; align-items: center; background: #323232; @@ -118,37 +118,12 @@ } .presBox-cont .presBox-buttons .presBox-viewPicker { + top: -70; + left: 2.5%; height: 50; - width: 100; - font-size: 30px; - position: relative; - min-width: 50px; - } - - .presElementBox-closeIcon { - border-radius: 20px; - transform: scale(2); - position: absolute; - right: 20; - top: 20; - padding: 8px; - } - - .presElementBox-buttons { - display: inline-flex; - position: absolute; - right: 0; - width: 50%; - } - - .presElementBox-name { + width: 95%; font-size: 30px; position: absolute; - display: inline-block; - top: 10px; - width: 50%; - text-overflow: ellipsis; - overflow: hidden; - white-space: pre; + min-width: 50px; } } \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 1ddf3d8bc..ec82b0c51 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -122,7 +122,7 @@ float: left; padding: 0px; width: 50; - height: 40; + height: 50; } .presElementBox-buttons .presElementBox-interaction-selected { @@ -133,4 +133,53 @@ height: 50; border: solid 1px darkgray; } + + .presElementBox-closeIcon { + border-radius: 20px; + transform: scale(1.5); + position: absolute; + right: 10; + top: 10; + padding: 8px; + } + + .presElementBox-buttons { + display: inline-flex; + position: absolute; + top: 0; + right: 0; + width: 50%; + } + + .presElementBox-name { + font-size: 30px; + position: absolute; + display: inline-block; + top: 10px; + width: 50%; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + } + + .presElementBox-item { + display: inline-block; + background-color: #eeeeee; + pointer-events: all; + width: 100%; + min-height: 100%; + height: max-content; + outline-color: maroon; + outline-style: dashed; + border-radius: 6px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: all .1s; + padding: 0px; + padding-bottom: 3px; + } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index afc4cc21e..6c782d4d8 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -5,21 +5,20 @@ justify-content: center; flex-direction: column; align-items: center; - width: 90vw; - height: 90vh; .upload_label { - font-weight: normal !important; + font-size: 3em; + font-weight: 700; + color: white; + background-color: black; + display: inline-block; + margin: 10; 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; + border-radius: 10px; + } + + .upload_label:hover { + background-color: darkred; } .button_file { @@ -31,31 +30,92 @@ font-size: 3em; } - // .input_file { - // display: none; - // } - - // // .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 { - // 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; - // } + .inputfile { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; + } + + .inputfile+label { + font-size: 3em; + font-weight: 700; + color: white; + background-color: black; + display: inline-block; + margin: 10px; + width: 100%; + border-radius: 10px; + } + + .inputfile:focus+label, + .inputfile+label:hover { + background-color: darkred; + } + +} + +.backgroundUpload { + height: 100vh; + top: 0; + z-index: 999; + width: 100vw; + position: absolute; + background-color: lightgrey; + opacity: 0.4; +} + +.image-upload { + top: 100%; + opacity: 0; +} + +.image-upload.active { + top: 0; + position: absolute; + z-index: 999; + height: 100vh; + width: 100vw; + opacity: 1; +} + +.uploadContainer { + top: 40; + position: absolute; + z-index: 1000; + height: 20vh; + width: 80vw; + opacity: 1; +} + +.closeUpload { + position: absolute; + border-radius: 10px; + top: 39.7%; + color: grey; + font-size: 40; + left: 65.8%; + z-index: 1002; + padding: 0px 3px; + background: aliceblue; + transition: 0.5s ease all; + border: 3px solid; + border-color: black; +} + +.loadingImage { + display: inline-flex; + width: max-content; +} + +.loadingSlab { + position: relative; + width: 30px; + height: 30px; + margin: 10; + border-radius: 20px; + opacity: 0.3; + background-color: black; } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 8d7ccf450..df2beb85a 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -13,6 +13,7 @@ import { Cast } from '../fields/Types'; import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; import { Scripting } from '../client/util/Scripting'; +import MainViewModal from '../client/views/MainViewModal'; export interface ImageUploadProps { Document: Doc; @@ -35,6 +36,10 @@ export class Uploader extends React.Component { console.log("uploader click"); try { this.status = "initializing protos"; + const slab1 = document.getElementById("slab1"); + if (slab1) { + slab1.style.opacity = "1"; + } await Docs.Prototypes.initialize(); const imgPrev = document.getElementById("img_preview"); if (imgPrev) { @@ -44,8 +49,15 @@ export class Uploader extends React.Component { const name = files[0].name; const res = await Networking.UploadFilesToServer(files[0]); this.status = "uploading image"; + const slab2 = document.getElementById("slab2"); + if (slab2) { + slab2.style.opacity = "1"; + } this.status = "upload image, getting json"; - + const slab3 = document.getElementById("slab3"); + if (slab3) { + slab3.style.opacity = "1"; + } res.map(async ({ result }) => { if (result instanceof Error) { return; @@ -54,7 +66,15 @@ export class Uploader extends React.Component { const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); this.status = "getting user document"; - + const slab4 = document.getElementById("slab4"); + if (slab4) { + slab4.style.opacity = "1"; + } + this.status = "upload image, getting json"; + const slab5 = document.getElementById("slab5"); + if (slab5) { + slab5.style.opacity = "1"; + } const res = await rp.get(Utils.prepend("/getUserDocumentId")); if (!res) { throw new Error("No user id returned"); @@ -66,6 +86,10 @@ export class Uploader extends React.Component { } if (pending) { this.status = "has pending docs"; + const slab6 = document.getElementById("slab6"); + if (slab6) { + slab6.style.opacity = "1"; + } const data = await Cast(pending.data, listSpec(Doc)); if (data) { data.push(doc); @@ -74,6 +98,10 @@ export class Uploader extends React.Component { } this.status = "finished"; console.log("hi"); + const slab7 = document.getElementById("slab7"); + if (slab7) { + slab7.style.opacity = "1"; + } } }); @@ -84,19 +112,55 @@ export class Uploader extends React.Component { } } - render() { + // Updates label after a files is selected (so user knows a file is uploaded) + inputLabel = async () => { + const files: FileList | null = inputRef.current!.files; + await files; + var inputs = document.querySelectorAll('.inputFile'); + const label = document.getElementById("label"); + if (files && label) { + label.innerText = files[0].name; + } + } + + private get uploadInterface() { return (
- - + + +
Upload Image
{/*
Upload
*/} {/*

{this.status}

{this.error}

*/} +
+
+
+
+
+
+
+
+
); } + @observable private dialogueBoxOpacity = 1; + @observable private overlayOpacity = 0.4; + + render() { + return ( + + ); + } + } diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index d8ac7d1f1..c4b2ffbc1 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { library } from '@fortawesome/fontawesome-svg-core'; import { - faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTasks, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -26,6 +26,7 @@ import { InkingControl } from '../client/views/InkingControl'; import "./MobileInterface.scss"; import "./MobileMenu.scss"; import "./MobileHome.scss"; +import "./ImageUpload.scss"; import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; @@ -38,7 +39,7 @@ import { SelectionManager } from "../client/util/SelectionManager"; import { SketchPicker } from "react-color"; import { ScriptField } from "../fields/ScriptField"; -library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, +library.add(faTasks, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -1240,7 +1241,7 @@ export class MobileInterface extends React.Component { // if (this._homeMenu == false) { let docArray = this.createPathname(); let items = docArray.map((doc: Doc, index: any) => { - if (index == 0) { + if (index === 0) { return (
{/* {this.menuOptions()} */} {/* {this.displayHome()} */} +
+ {this.uploadImage()} +
{this.pinToPresentation()} {this.downloadDocument()} @@ -1719,8 +1723,40 @@ export class MobileInterface extends React.Component { ); } + @observable private imageUploadActive: boolean = false; + + @action + toggleUpload = () => this.imageUploadActive = !this.imageUploadActive + + @action + closeUpload = () => { + this.imageUploadActive = false; + } + + // toggleUpload = () => { + // if (this.imageUploadActive === true) { + // this.imageUploadActive = false; + // } else { + // this.imageUploadActive = true; + // } + // } + uploadImage = () => { - console.log("hello world of images"); + if (this.imageUploadActive) { + console.log("active"); + } else if (!this.imageUploadActive) { + + } + console.log("upload"); + const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + return ( +
+
+ +
+ +
+ ); } } @@ -1735,7 +1771,7 @@ Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Inst Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); -Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.uploadImage(); }); +Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); -- cgit v1.2.3-70-g09d2 From 790d41009a678f560cd3b78e86069251e494cfd1 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Mon, 22 Jun 2020 14:55:00 +0800 Subject: updated css width property for mobile --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/util/SettingsManager.scss | 2 +- src/client/views/AntimodeMenu.scss | 16 ++-- .../views/collections/CollectionStackingView.scss | 2 +- .../views/collections/CollectionViewChromes.scss | 2 +- .../collectionFreeForm/InkOptionsMenu.scss | 18 ++-- src/client/views/nodes/AudioBox.scss | 2 +- src/client/views/nodes/PDFBox.scss | 2 +- src/client/views/nodes/PresBox.scss | 2 +- .../views/presentationview/PresElementBox.scss | 2 +- src/mobile/AudioUpload.scss | 95 ---------------------- src/mobile/MobileInterface.tsx | 10 +-- src/mobile/MobileMenu.scss | 24 ++++-- 13 files changed, 45 insertions(+), 134 deletions(-) (limited to 'src/client/util/SettingsManager.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b7da4ae2f..5edb2225f 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -465,7 +465,7 @@ export class CurrentUserUtils { static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ - { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections." }, + { title: "WORKSPACES", icon: "folder-open", click: 'openWorkspaces()', backgroundColor: "#ffd6d6", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your phone to record and upload audio onto Dash Web." }, { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload images or videos from your mobile device so they can be accessed on Dash Web." }, { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 1eac9303b..0116c5294 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -135,7 +135,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .settings-interface { background-color: whitesmoke !important; color: grey; diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 170631422..43f45fb1c 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -41,7 +41,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .antimodeMenu-cont { position: absolute; z-index: 10000; @@ -51,31 +51,31 @@ border-radius: 0px 6px 6px 6px; // overflow: hidden; display: flex; - + &.with-rows { flex-direction: column-reverse; } - + .antimodeMenu-row { display: flex; height: 100%; - width:100%; + width: 100%; } - + .antimodeMenu-button { background-color: transparent; width: 100px; height: 100px; - + &.active { background-color: #121212; } } - + .antimodeMenu-button:hover { background-color: #121212; } - + .antimodeMenu-dragger { height: 100%; transition: width .2s; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 98efdfd23..342773db8 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -424,7 +424,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .collectionStackingView .collectionStackingView-columnDragger, .collectionMasonryView .collectionStackingView-columnDragger { diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 54ee4ab3b..ec2d78735 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -80,7 +80,7 @@ // margin-top: 10px; } - @media only screen and (max-width: 1000) { + @media only screen and (max-device-width: 480px) { .collectionViewBaseChrome-collapse { display: none; } diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index 72fdf5af9..4855dfea8 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -33,39 +33,39 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .antimodeMenu-button { .color-preview { width: 100%; height: 100%; } - + } - + .sketch-picker { background: #323232; - + .flexbox-fit { background: #323232; } } - + .btn-group { display: grid; grid-template-columns: auto auto; /* Make the buttons appear below each other */ } - + .btn2-group { display: block; background: #323232; grid-template-columns: auto; - + /* Make the buttons appear below each other */ .antimodeMenu-button { background: #323232; display: block; - + } } -} +} \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 61ce4bd13..43dd698ad 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -174,7 +174,7 @@ } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .audiobox-container, .audiobox-container-interactive { diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 1a31d2916..b19ddf1f5 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -224,7 +224,7 @@ } } -@media only screen and (max-width: 600px) { +@media only screen and (max-device-width: 480px) { .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index e62aa48fb..1261cbfdd 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -81,7 +81,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .presBox-cont .presBox-buttons { position: absolute; top: 70%; diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 99fe2a3ba..79532995e 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -106,7 +106,7 @@ z-index: 2; } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .presElementBox-buttons { display: inline-flex; position: relative; diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss index 5f0ba465a..9fe442e55 100644 --- a/src/mobile/AudioUpload.scss +++ b/src/mobile/AudioUpload.scss @@ -7,77 +7,6 @@ align-items: center; max-width: 400px; min-width: 400px; - - .upload_label { - font-size: 3em; - font-weight: 700; - color: white; - background-color: black; - display: inline-block; - margin: 10; - width: 100%; - border-radius: 10px; - } - - .file { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - direction: ltr; - } - - .upload_label:hover { - background-color: darkred; - } - - .button_file { - text-align: center; - height: 50%; - width: 50%; - background-color: paleturquoise; - color: grey; - font-size: 3em; - } - - .inputfile { - width: 0.1px; - height: 0.1px; - opacity: 0; - overflow: hidden; - position: absolute; - z-index: -1; - } - - .inputfile+label { - font-size: 3em; - font-weight: 700; - color: white; - background-color: black; - display: inline-block; - margin: 10px; - width: 100%; - border-radius: 10px; - } - - .inputfile:focus+label, - .inputfile+label:hover { - background-color: darkred; - } - - .status { - font-size: 2em; - } - -} - -.backgroundUpload { - height: 100vh; - top: 0; - z-index: 999; - width: 100vw; - position: absolute; - background-color: lightgrey; - opacity: 0.4; } .audio-upload { @@ -92,28 +21,4 @@ height: 100vh; width: 100vw; opacity: 1; -} - -.uploadContainer { - top: 40; - position: absolute; - z-index: 1000; - height: 20vh; - width: 80vw; - opacity: 1; -} - -.loadingImage { - display: inline-flex; - width: max-content; -} - -.loadingSlab { - position: relative; - width: 30px; - height: 30px; - margin: 10; - border-radius: 20px; - opacity: 0.3; - background-color: black; } \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 84a5975cb..ceda74da2 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -415,7 +415,7 @@ export class MobileInterface extends React.Component { onClick={this.returnMain} style={{ opacity: 0.7 }}> -
Return to library
+
Return to workspaces
: <> @@ -509,7 +509,7 @@ export class MobileInterface extends React.Component { } undo = () => { - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") { return (<>
{ - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") { return (<>
{this.displayWorkspaces()} diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 87731655a..53bc48034 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -19,7 +19,6 @@ body { width: 100vw; height: $navbar-height; background-color: whitesmoke; - border-bottom: 5px solid black; z-index: 150; } @@ -221,14 +220,17 @@ body { .back { position: absolute; - top: 44%; left: 42px; - background-color: black; + top: 0; + background: #1a1a1a; width: 50px; - height: 50px; + height: 100%; + display: flex; + justify-content: center; text-align: center; + flex-direction: column; + align-items: center; border-radius: 10px; - transform: translate(0, -50%); font-size: 25px; user-select: none; z-index: 100; @@ -243,7 +245,7 @@ body { border-radius: 0px; width: 100%; height: 80px; - transition: all 400ms ease 50ms; + overflow: hidden; } .pathname { @@ -291,14 +293,19 @@ body { .scrollmenu { overflow: auto; + width: 100%; + height: 100%; white-space: nowrap; + display: inline-flex; } .pathbarItem { position: relative; - display: inline-flex; + display: flex; + align-items: center; color: whitesmoke; text-align: center; + justify-content: center; user-select: none; transform: translate(100px, 0px); font-size: 30px; @@ -311,7 +318,6 @@ body { text-align: center; height: 50px; padding: 10px; - background-color: rgb(48, 40, 40); font-size: 30px; border-radius: 10px; text-transform: uppercase; @@ -321,7 +327,7 @@ body { .pathIcon { - transform: translate(0px, 8px); + transform: translate(0px, 0px); position: relative; } -- cgit v1.2.3-70-g09d2 From 991376428130bd80e1e80b5cca52477e45caf679 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 30 Jun 2020 02:34:08 +0800 Subject: css comment fixes + commenting --- src/client/util/CurrentUserUtils.ts | 54 ++- src/client/util/SettingsManager.scss | 10 - src/client/views/AntimodeMenu.scss | 16 - src/client/views/nodes/AudioBox.scss | 8 +- src/client/views/nodes/PDFBox.scss | 188 +++----- src/client/views/nodes/PresBox.scss | 47 +- .../views/presentationview/PresElementBox.scss | 78 +--- src/mobile/AudioUpload.tsx | 84 ++-- src/mobile/ImageUpload.tsx | 61 +-- src/mobile/MobileHome.scss | 101 ----- src/mobile/MobileInterface.scss | 448 ++++++++++++++++++- src/mobile/MobileInterface.tsx | 116 +++-- src/mobile/MobileMenu.scss | 475 --------------------- 13 files changed, 665 insertions(+), 1021 deletions(-) delete mode 100644 src/mobile/MobileHome.scss (limited to 'src/client/util/SettingsManager.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e402718bf..8e53c7a3c 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -55,9 +55,20 @@ export class CurrentUserUtils { removeDropProperties: new List(["dropAction"]), title: "query view", icon: "question-circle" }); } - + // Prototype for mobile button (not sure if 'Advanced Item Prototypes' is ideal location) if (doc["template-mobile-button"] === undefined) { - const queryTemplate = this.mobileButton({ title: "NEW MOBILE BUTTON", onClick: undefined, _backgroundColor: "lightgrey" }, [this.ficon({ ignoreClick: true, icon: "mobile", backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]); + const queryTemplate = this.mobileButton({ + title: "NEW MOBILE BUTTON", + onClick: undefined, + _backgroundColor: "lightgrey" + }, + [this.ficon({ + ignoreClick: true, + icon: "mobile", + backgroundColor: "rgba(0,0,0,0)" + }), + this.mobileTextContainer({}, + [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]); doc["template-mobile-button"] = CurrentUserUtils.ficon({ onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), dragFactory: new PrefetchProxy(queryTemplate) as any as Doc, @@ -457,6 +468,7 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } + // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu static setupActiveMobileMenu(doc: Doc) { if (doc.activeMobileMenu === undefined) { console.log("undefined"); @@ -465,6 +477,7 @@ export class CurrentUserUtils { return doc.activeMobileMenu as Doc; } + // Sets up mobileMenu stacking document static setupMobileMenu() { const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), { _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100 @@ -472,15 +485,17 @@ export class CurrentUserUtils { return menu; } + // SEts up mobile buttons for inside mobile menu static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ { title: "WORKSPACES", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, - { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." }, - { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploads()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." }, + { title: "UPLOAD", icon: "upload", click: 'openMobileUploads()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." }, + { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploadCollection()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." }, { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." }, - { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." }, + { title: "PRESENTATION", icon: "desktop", click: 'switchToMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." }, { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey", info: "Change your password, log out, or manage your account security." } ]; + // returns a list of mobile buttons return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => this.mobileButton({ title: data.title, @@ -492,24 +507,27 @@ export class CurrentUserUtils { ); } + // sets up the main document for the mobile button static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, { ...opts, dropAction: undefined, removeDropProperties: new List(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15, borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled" }) as any as Doc + // sets up the text container for the information contained within the mobile button static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, { ...opts, dropAction: undefined, removeDropProperties: new List(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25, backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true }) as any as Doc - + // Sets up the title of the button static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, { ...opts, dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)" }) as any as Doc + // Sets up the description of the button static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, { ...opts, dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2, @@ -553,23 +571,6 @@ export class CurrentUserUtils { return CurrentUserUtils.setupWorkspaces(userDoc); } - static setupMobileInkingDoc(userDoc: Doc) { - return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" }); - } - - static setupMobileUploadDoc(userDoc: Doc) { - // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" }) - const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", { - title: "Upload Images From the Web", _chromeStatus: "enabled", lockedPosition: true - }); - const uploadDoc = Docs.Create.StackingDocument([], { - title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true - }); - return Docs.Create.StackingDocument([webDoc, uploadDoc], { - _width: screen.width, lockedPosition: true, _chromeStatus: "disabled", title: "Upload", _autoHeight: true, _yMargin: 80, backgroundColor: "lightgray" - }); - } - // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. // when clicked, this panel will be displayed in the target container (ie, sidebarContainer) static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) { @@ -764,6 +765,7 @@ export class CurrentUserUtils { } } + // Right sidebar is where mobile uploads are contained static setupRightSidebar(doc: Doc) { if (doc.rightSidebarCollection === undefined) { doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" })); @@ -823,7 +825,7 @@ export class CurrentUserUtils { this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon this.setupDocTemplates(doc); // sets up the template menu of templates this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing - this.setupActiveMobileMenu(doc); + this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered @@ -862,9 +864,5 @@ export class CurrentUserUtils { } } -Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); }, - "initializes the Mobile inking document", "(userDoc: Doc)"); -Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); }, - "initializes the Mobile upload document", "(userDoc: Doc)"); Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); }, "creates a new workspace when called"); diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 0116c5294..1c2a2ce05 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -137,31 +137,21 @@ @media only screen and (max-device-width: 480px) { .settings-interface { - background-color: whitesmoke !important; - color: grey; width: 80vw; height: 400px; } .settings-interface .settings-body .settings-content input { - border-radius: 5px; - border: none; font-size: 30; - padding: 4px; - min-width: 100%; - margin: 2px 0; } .settings-interface button { width: 100%; font-size: 30px; - align-self: center; background: #b2cef8; - margin-top: 4px; } .settings-interface .settings-heading { - letter-spacing: .5em; font-size: 25; } } \ No newline at end of file diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 17506b3dc..be21cec12 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -46,15 +46,8 @@ @media only screen and (max-device-width: 480px) { .antimodeMenu-cont { - position: absolute; - z-index: 10000; height: 100px; width: 100vw; - background: #323232; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - border-radius: 0px 6px 6px 6px; - // overflow: hidden; - display: flex; &.with-rows { flex-direction: column-reverse; @@ -79,14 +72,5 @@ .antimodeMenu-button:hover { background-color: #121212; } - - .antimodeMenu-dragger { - height: 100%; - transition: width .2s; - background-image: url("https://logodix.com/logo/1020374.png"); - background-size: 90% 100%; - background-repeat: no-repeat; - background-position: left center; - } } } \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index b5d113ca0..c959b79f5 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -186,18 +186,12 @@ .audiobox-container .audiobox-record, .audiobox-container-interactive .audiobox-record { - pointer-events: all; font-size: 3em; - width: 100%; - height: 100%; - position: relative; - pointer-events: none; } .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead, .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation, - .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead, - .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-dictation { + .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead { width: 70px; } } \ No newline at end of file diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 974ddecdf..fbbd49a2f 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -11,18 +11,19 @@ .pdfBox-ui { position: absolute; - width: 100%; - height: 100%; - z-index: 1; - pointer-events: none; + width: 100%; + height: 100%; + z-index: 1; + pointer-events: none; - .pdfBox-pageNums { + .pdfBox-pageNums { display: flex; flex-direction: row; height: 25px; position: absolute; left: 5px; top: 5px; + .pdfBox-overlayButton-fwd, .pdfBox-overlayButton-back { background: #121721; @@ -35,29 +36,29 @@ border-radius: 3px; pointer-events: all; } - } - - .pdfBox-overlayButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; - height: 20px; - background: none; - padding: 0; - position: absolute; - pointer-events: all; - - .pdfBox-overlayButton-arrow { - width: 0; - height: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-right: 15px solid #121721; - transition: all 0.5s; - } - - .pdfBox-overlayButton-iconCont { + } + + .pdfBox-overlayButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 20px; + background: none; + padding: 0; + position: absolute; + pointer-events: all; + + .pdfBox-overlayButton-arrow { + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 15px solid #121721; + transition: all 0.5s; + } + + .pdfBox-overlayButton-iconCont { background: #121721; height: 20px; width: 25px; @@ -222,120 +223,60 @@ } } +// CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; height: 60px; - background: none; - padding: 0; - } - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont, - .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont { - background: #121721; - height: 60px; - width: 75px; - font-size: 30px; - display: flex; - justify-content: center; - align-items: center; - margin-left: -2px; - border-radius: 3px; + .pdfBox-settingsButton-iconCont { + height: 60px; + width: 75px; + font-size: 30px; + } + + .pdfBox-settingsButton-arrow { + height: 60; + border-top: 30px solid transparent; + border-bottom: 30px solid transparent; + border-right: 30px solid #121721; + } } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout { - position: absolute; - background: #323232; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - right: 20px; - border-radius: 7px; - padding: 20px; - display: flex; - flex-direction: column; font-size: 30px; - transition: all 0.5s; } - .pdfBox .pdfBox-ui .pdfBox-settingsCont, - .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont { - position: absolute; - right: 0; - top: 3; - pointer-events: all; - } - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow, - .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow { - width: 0; - height: 60; - border-top: 30px solid transparent; - border-bottom: 30px solid transparent; - border-right: 30px solid #121721; - transition: all 0.5s; - } - - .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont, - .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont { - background: #121721; - height: 60px; - width: 75px; - display: flex; - font-size: 30; - position: relative; - align-items: center; - justify-content: center; - border-radius: 3px; - pointer-events: all; - } - - .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow, - .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow { - width: 0; - height: 0; - border-top: 30px solid transparent; - border-bottom: 30px solid transparent; - border-right: 30px solid #121721; - transition: all 0.5s; - } .pdfBox .pdfBox-ui .pdfBox-overlayCont, .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont { - position: absolute; - width: calc(100% - 40px); height: 60px; - background: #121721; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - transition: left .5s; - pointer-events: all; + + .pdfBox-searchBar { + font-size: 40px; + } } .pdfBox .pdfBox-ui .pdfBox-overlayButton, .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; height: 60px; - background: none; - padding: 0; - position: absolute; - pointer-events: all; - } - .pdfBox .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar, - .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar { - width: 70%; - font-size: 40px; + .pdfBox-overlayButton-iconCont { + height: 60px; + width: 75px; + font-size: 30; + } + + .pdfBox-overlayButton-arrow { + border-top: 30px solid transparent; + border-bottom: 30px solid transparent; + border-right: 30px solid #121721; + } } button.pdfBox-search { @@ -348,17 +289,8 @@ .pdfBox .pdfBox-ui .pdfBox-prevIcon, .pdfBox-interactive .pdfBox-ui .pdfBox-nextIcon, .pdfBox-interactive .pdfBox-ui .pdfBox-prevIcon { - background: #121721; height: 50px; width: 50px; font-size: 30px; - display: flex; - position: relative; - align-items: center; - justify-content: center; - border-radius: 3px; - pointer-events: all; - padding: 0px; } - -} +} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 1261cbfdd..9f6af1bde 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -81,6 +81,7 @@ } } +// CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { .presBox-cont .presBox-buttons { position: absolute; @@ -92,37 +93,33 @@ z-index: 2; align-items: center; background: rgba(0, 0, 0, 0); - padding-top: 5px; - padding-bottom: 5px; display: inline-flex; + + .presBox-button { + margin-top: 5%; + height: 250; + width: 300; + font-size: 100; + display: flex; + align-items: center; + background: #323232; + color: white; + } + + .presBox-viewPicker { + top: -70; + left: 2.5%; + height: 50; + width: 95%; + font-size: 30px; + position: absolute; + min-width: 50px; + } } .presBox-cont .presBox-listCont { - position: absolute; top: 50; height: calc(100% - 80px); - width: 100%; - } - - .presBox-cont .presBox-buttons .presBox-button { - margin-top: 5%; - height: 250; - width: 300; - font-size: 100; - display: flex; - align-items: center; - background: 323232; - color: white; - } - - .presBox-cont .presBox-buttons .presBox-viewPicker { - top: -70; - left: 2.5%; - height: 50; - width: 95%; - font-size: 30px; - position: absolute; - min-width: 50px; } .input, diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 79532995e..0632f6a8b 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -109,89 +109,43 @@ @media only screen and (max-device-width: 480px) { .presElementBox-buttons { display: inline-flex; - position: relative; - width: 100%; + position: absolute; + top: 0; + right: 0; + z-index: 3; + width: 50%; + + .presElementBox-interaction { + width: 50; + height: 50; + } + + .presElementBox-interaction-selected { + width: 50; + height: 50; + } } .presElementBox-item { display: inline-flex; + height: max-content; overflow: hidden; } - .presElementBox-buttons .presElementBox-interaction { - color: gray; - float: left; - padding: 0px; - width: 50; - height: 50; - } - - .presElementBox-buttons .presElementBox-interaction-selected { - color: white; - float: left; - padding: 0px; - width: 50; - height: 50; - border: solid 1px darkgray; - } - .presElementBox-closeIcon { - border-radius: 20px; transform: scale(1.5); - position: absolute; right: 10; top: 10; - padding: 8px; - } - - .presElementBox-buttons { - display: inline-flex; - position: absolute; - top: 0; - right: 0; - z-index: 3; - width: 50%; } .presElementBox-name { font-size: 30px; - position: absolute; - display: inline-block; top: 10px; z-index: 3; width: 50%; - text-overflow: ellipsis; - overflow: hidden; - white-space: pre; - } - - .presElementBox-item { - display: inline-block; - background-color: #eeeeee; - pointer-events: all; - width: 100%; - min-height: 100%; - height: max-content; - outline-color: maroon; - outline-style: dashed; - border-radius: 6px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - transition: all .1s; - padding: 0px; - padding-bottom: 3px; } .presElementBox-embedded { - position: relative; - display: flex; transform: translate(0, 90px) scale(1.5); - width: auto; - justify-content: center; - margin: auto; } } \ No newline at end of file diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx index 83da41d90..590bf8f9d 100644 --- a/src/mobile/AudioUpload.tsx +++ b/src/mobile/AudioUpload.tsx @@ -1,18 +1,12 @@ -import * as ReactDOM from 'react-dom'; -import * as rp from 'request-promise'; import { Docs } from '../client/documents/Documents'; import "./ImageUpload.scss"; import React = require('react'); -import { DocServer } from '../client/DocServer'; import { observer } from 'mobx-react'; import { observable, action, computed } from 'mobx'; import { Utils, emptyPath, returnFalse, emptyFunction, returnOne, returnZero, returnTrue, returnEmptyFilter } from '../Utils'; -import { Networking } from '../client/Network'; import { Doc, Opt } from '../fields/Doc'; import { Cast, FieldValue } from '../fields/Types'; import { listSpec } from '../fields/Schema'; -import { List } from '../fields/List'; -import { Scripting } from '../client/util/Scripting'; import MainViewModal from '../client/views/MainViewModal'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { nullAudio } from '../fields/URLField'; @@ -23,40 +17,56 @@ import { DictationOverlay } from '../client/views/DictationOverlay'; import RichTextMenu from '../client/views/nodes/formattedText/RichTextMenu'; import { ContextMenu } from '../client/views/ContextMenu'; -export interface ImageUploadProps { - Document: Doc; -} - -// const onPointerDown = (e: React.TouchEvent) => { -// let imgInput = document.getElementById("input_image_file"); -// if (imgInput) { -// imgInput.click(); -// } -// } -const inputRef = React.createRef(); - @observer export class AudioUpload extends React.Component { - @observable error: string = ""; - @observable status: string = ""; - @observable nm: string = "Choose files"; - @observable process: string = ""; - @observable public _audioCol: Doc = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; - + @observable public _audioCol: Doc = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; + /** + * Handles the onclick functionality for the 'Restart' button + * Resets the document to its default view + */ @action clearUpload = () => { for (let i = 1; i < 8; i++) { this.setOpacity(i, "0.2"); } - this._audioCol = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; + this._audioCol = FieldValue(Cast( + Docs.Create.FreeformDocument( + [Cast(Docs.Create.AudioDocument(nullAudio, { + title: "mobile audio", + _width: 500, + _height: 100 + }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; } + /** + * Handles the onClick of the 'Close' button + * Reset upload interface and toggle audio + */ closeUpload = () => { this.clearUpload(); MobileInterface.Instance.toggleAudio(); } + /** + * Handles the on click of the 'Upload' button. + * Pushing the audio doc onto Dash Web through the right side bar + */ + uploadAudio = () => { + const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + const audioDoc = this._audioCol; + const data = Cast(audioRightSidebar.data, listSpec(Doc)); + for (let i = 1; i < 8; i++) { + setTimeout(() => this.setOpacity(i, "1"), i * 200); + } + if (data) { + data.push(audioDoc); + } + // Resets uploader after 3 seconds + setTimeout(this.clearUpload, 3000); + } + + // Returns the upload audio menu private get uploadInterface() { return ( <> @@ -114,30 +124,14 @@ export class AudioUpload extends React.Component { ); } - setOpacity = (i: number, o: string) => { - const slab = document.getElementById("slab0" + i); + // Handles the setting of the loading bar + setOpacity = (index: number, opacity: string) => { + const slab = document.getElementById("slab0" + index); if (slab) { - console.log(slab?.id); - slab.style.opacity = o; + slab.style.opacity = opacity; } } - // Pushing the audio doc onto Dash Web through the right side bar - uploadAudio = () => { - console.log("uploading"); - const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - const audioDoc = this._audioCol; - const data = Cast(audioRightSidebar.data, listSpec(Doc)); - for (let i = 1; i < 8; i++) { - setTimeout(() => this.setOpacity(i, "1"), i * 200); - } - if (data) { - data.push(audioDoc); - } - - setTimeout(this.clearUpload, 3000); - } - @observable private dialogueBoxOpacity = 1; @observable private overlayOpacity = 0.4; diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 6a5a2dd5b..5ea626d52 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -1,4 +1,3 @@ -import * as ReactDOM from 'react-dom'; import * as rp from 'request-promise'; import { Docs } from '../client/documents/Documents'; import "./ImageUpload.scss"; @@ -12,49 +11,38 @@ import { Doc, Opt } from '../fields/Doc'; import { Cast } from '../fields/Types'; import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; -import { Scripting } from '../client/util/Scripting'; import MainViewModal from '../client/views/MainViewModal'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { MobileInterface } from './MobileInterface'; -import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; export interface ImageUploadProps { - Document: Doc; + Document: Doc; // Target document for upload (upload location) } -// const onPointerDown = (e: React.TouchEvent) => { -// let imgInput = document.getElementById("input_image_file"); -// if (imgInput) { -// imgInput.click(); -// } -// } const inputRef = React.createRef(); @observer export class Uploader extends React.Component { @observable error: string = ""; - @observable status: string = ""; - @observable nm: string = "Choose files"; - @observable process: string = ""; + @observable nm: string = "Choose files"; // Text of 'Choose Files' button + @observable process: string = ""; // Current status of upload onClick = async () => { try { const col = this.props.Document; await Docs.Prototypes.initialize(); const imgPrev = document.getElementById("img_preview"); - // Slab 1 - this.setOpacity(1, "1"); + this.setOpacity(1, "1"); // Slab 1 if (imgPrev) { const files: FileList | null = inputRef.current!.files; - // Slab 2 - this.setOpacity(2, "1"); + this.setOpacity(2, "1"); // Slab 2 if (files && files.length !== 0) { this.process = "Uploading Files"; for (let index = 0; index < files.length; ++index) { const file = files[index]; const res = await Networking.UploadFilesToServer(file); - // Slab 3 - this.setOpacity(3, "1"); + this.setOpacity(3, "1"); // Slab 3 + // For each item that the user has selected res.map(async ({ result }) => { const name = file.name; if (result instanceof Error) { @@ -62,16 +50,17 @@ export class Uploader extends React.Component { } const path = Utils.prepend(result.accessPaths.agnostic.client); let doc = null; - console.log("type: " + file.type); + // Case 1: File is a video if (file.type === "video/mp4") { doc = Docs.Create.VideoDocument(path, { _nativeWidth: 400, _width: 400, title: name }); + // Case 2: File is a PDF document } else if (file.type === "application/pdf") { doc = Docs.Create.PdfDocument(path, { _nativeWidth: 400, _width: 400, title: name }); + // Case 3: File is another document type (most likely Image) } else { doc = Docs.Create.ImageDocument(path, { _nativeWidth: 400, _width: 400, title: name }); } - // Slab 4 - this.setOpacity(4, "1"); + this.setOpacity(4, "1"); // Slab 4 const res = await rp.get(Utils.prepend("/getUserDocumentId")); if (!res) { throw new Error("No user id returned"); @@ -79,32 +68,27 @@ export class Uploader extends React.Component { const field = await DocServer.GetRefField(res); let pending: Opt; if (field instanceof Doc) { - // if (col === Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc) { - // pending = await Cast(field.rightSidebarCollection, Doc); - // } pending = col; - //pending = await Cast(field.col, Doc); } if (pending) { const data = await Cast(pending.data, listSpec(Doc)); if (data) data.push(doc); else pending.data = new List([doc]); - this.status = "finished"; this.setOpacity(5, "1"); // Slab 5 this.process = "File " + (index + 1).toString() + " Uploaded"; this.setOpacity(6, "1"); // Slab 6 - this.setOpacity(7, "1"); // Slab 7 } - console.log("i: " + index + 1); - console.log("l: " + files.length); if ((index + 1) === files.length) { this.process = "Uploads Completed"; + this.setOpacity(7, "1"); // Slab 7 } }); } + // Case in which the user pressed upload and no files were selected } else { this.process = "No file selected"; } + // Three seconds after upload the menu will reset setTimeout(this.clearUpload, 3000); } } catch (error) { @@ -117,14 +101,13 @@ export class Uploader extends React.Component { const files: FileList | null = inputRef.current!.files; await files; if (files && files.length === 1) { - console.log(files); this.nm = files[0].name; } else if (files && files.length > 1) { - console.log(files.length); this.nm = files.length.toString() + " files selected"; } } + // Loops through load icons, and resets buttons @action clearUpload = () => { for (let i = 1; i < 8; i++) { @@ -136,23 +119,21 @@ export class Uploader extends React.Component { inputRef.current.value = ""; } this.process = ""; - console.log(inputRef.current!.files); } + // Clears the upload and closes the upload menu closeUpload = () => { this.clearUpload(); MobileInterface.Instance.toggleUpload(); } - setOpacity = (i: number, o: string) => { - const slab = document.getElementById("slab" + i); - if (slab) { - console.log(slab?.id); - slab.style.opacity = o; - } + // Handles the setting of the loading bar + setOpacity = (index: number, opacity: string) => { + const slab = document.getElementById("slab" + index); + if (slab) slab.style.opacity = opacity; } - + // Returns the upload interface for mobile private get uploadInterface() { return (
diff --git a/src/mobile/MobileHome.scss b/src/mobile/MobileHome.scss deleted file mode 100644 index e1566b622..000000000 --- a/src/mobile/MobileHome.scss +++ /dev/null @@ -1,101 +0,0 @@ -$navbar-height: 120px; -$pathbar-height: 50px; - -* { - margin: 0px; - padding: 0px; - box-sizing: border-box; - font-family: "Open Sans"; -} - -.homeContainer { - position: relative; - top: 200px; - overflow: scroll; - width: 100%; - left: 0; - height: calc(100% - 120px); - overflow-y: scroll; -} - -.homeButton { - width: 96%; - margin-left: 2.5%; - height: 250px; - border-radius: 30px; - margin-top: 15px; - margin-bottom: 15px; -} - -.iconRight { - position: absolute; - width: 50%; - height: 80px; - transform: translate(0, 50%); - right: 0px; - text-align: center; - font-size: 80; -} - -.iconLeft { - position: absolute; - width: 50%; - height: 80px; - transform: translate(0%, 50%); - left: 0px; - text-align: center; - font-size: 80; -} - -.textLeft { - position: absolute; - width: 50%; - left: 0px; - font-size: 40px; - text-align: left; - margin-left: 110px; - margin-top: 40px; - font-family: sans-serif; - font-weight: bold; -} - -.textRight { - position: absolute; - width: 50%; - right: 0px; - font-size: 40px; - text-align: right; - margin-right: 110px; - margin-top: 40px; - font-family: sans-serif; - font-weight: bold; -} - -.menuView { - position: absolute; - top: 135px; - left: 50%; - transform: translate(-50%, 0%); - display: flex; -} - -.iconView { - height: 60px; - width: 60px; - background-color: darkgray; - border-radius: 5px; - border-style: solid; - border-width: 2px; - border-color: black; -} - -.listView { - height: 60px; - width: 60px; - margin-left: 20; - background-color: darkgray; - border-radius: 5px; - border-style: solid; - border-width: 2px; - border-color: black; -} \ No newline at end of file diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss index 86b043590..ee39d4f50 100644 --- a/src/mobile/MobileInterface.scss +++ b/src/mobile/MobileInterface.scss @@ -1,36 +1,444 @@ -.mobileInterface-inkInterfaceButtons { - position: absolute; - top: 0px; - display: flex; - justify-content: space-between; - width: 100%; - z-index: 9999; - height: 50px; +$navbar-height: 120px; +$pathbar-height: 50px; - .mobileInterface-button { - height: 100%; +@media only screen and (max-device-width: 480px) { + * { + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: sans-serif; } } +body { + overflow: hidden; +} + .mobileInterface-container { height: 100%; position: relative; touch-action: none; width: 100%; - -webkit-touch-callout:none; - -webkit-user-select:none; - -khtml-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none; - -webkit-tap-highlight-color:rgba(0,0,0,0); + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +// Topbar of Dash Mobile +.navbar { + position: fixed; + top: 0px; + left: 0px; + width: 100vw; + height: $navbar-height; + background-color: whitesmoke; + z-index: 150; + + .cover { + position: absolute; + right: 0px; + top: 0px; + height: 120px; + width: 120px; + background-color: whitesmoke; + z-index: 200; + } + + .toggle-btn { + position: absolute; + right: 20px; + top: 30px; + height: 70px; + width: 70px; + transition: all 400ms ease-in-out 200ms; + z-index: 180; + } + + .background { + position: absolute; + right: 0px; + top: 0px; + height: 120px; + width: 120px; + //border: 1px solid black; + } + + .background.active { + background-color: lightgrey; + } + + .toggle-btn-home { + right: -200px; + } + + .header { + position: absolute; + top: 50%; + top: calc(9px + 50%); + right: 50%; + transform: translate(50%, -50%); + font-size: 40; + font-weight: 700; + text-align: center; + user-select: none; + text-transform: uppercase; + font-family: Arial, Helvetica, sans-serif; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: ltr; + width: 600px; + } + + .toggle-btn span { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 70%; + height: 4px; + background: black; + transition: all 200ms ease; + z-index: 180; + } + + .toggle-btn span:nth-child(1) { + transition: top 200ms ease-in-out; + top: 30%; + } + + .toggle-btn span:nth-child(3) { + transition: top 200ms ease-in-out; + top: 70%; + } + + .toggle-btn.active { + transition: transform 200ms ease-in-out 200ms; + transform: rotate(135deg); + } + + .toggle-btn.active span:nth-child(1) { + top: 50%; + } + + .toggle-btn.active span:nth-child(2) { + transform: translate(-50%, -50%) rotate(90deg); + } + + .toggle-btn.active span:nth-child(3) { + top: 50%; + } +} + +.sidebar { + position: fixed; + top: 120px; + opacity: 0; + right: -100%; + width: 80%; + height: calc(80% - (120px)); + z-index: 101; + background-color: whitesmoke; + transition: all 400ms ease 50ms; + padding: 20px; + box-shadow: 0 0 5px 5px grey; + + .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; + display: inline-flex; + font-size: 35px; + text-transform: uppercase; + color: black; + } + + .ink:focus { + outline: 1px solid blue; + } + + .sidebarButtons { + top: 80px; + position: relative; + } +} + + + + + + +.blanket { + position: fixed; + top: 120px; + opacity: 0.5; + right: -100%; + width: 100%; + height: calc(100% - (120px)); + z-index: 101; + background-color: grey; + padding: 20px; +} + +.blanket.active { + position: absolute; + right: 0%; + z-index: 100; +} + +.home { + position: absolute; + top: 30px; + left: 30px; + font-size: 60; + user-select: none; + text-transform: uppercase; + font-family: Arial, Helvetica, sans-serif; + z-index: 200; } -.mobileInterface-background { +.item-type { + display: inline; + text-transform: lowercase; + margin-left: 20px; + font-size: 35px; + font-style: italic; + color: rgb(28, 28, 28); +} + +.item-title { + max-width: 70%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.right { + margin-left: 20px; + z-index: 200; +} + +.open { + right: 20px; + font-size: 35; + position: absolute; +} + +.left { + width: 100%; height: 100%; +} + + + +.sidebar.active { + position: absolute; + right: 0%; + opacity: 1; + z-index: 101; +} + +.back { + position: absolute; + left: 42px; + top: 0; + background: #1a1a1a; + width: 50px; + height: 100%; + display: flex; + justify-content: center; + text-align: center; + flex-direction: column; + align-items: center; + border-radius: 10px; + font-size: 25px; + user-select: none; + z-index: 100; +} + +.pathbar { + position: fixed; + top: 118px; + left: 0px; + background: #1a1a1a; + z-index: 120; + border-radius: 0px; width: 100%; + height: 80px; + overflow: hidden; + + .pathname { + position: relative; + font-size: 25; + top: 50%; + width: 86%; + left: 12%; + 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; + } + + .scrollmenu { + overflow: auto; + width: 100%; + height: 100%; + white-space: nowrap; + display: inline-flex; + } + + .hidePath { + position: absolute; + height: 100%; + width: 200px; + left: 0px; + top: 0px; + background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0)); + text-align: center; + user-select: none; + z-index: 99; + pointer-events: none; + } + + .pathbarItem { + position: relative; + display: flex; + align-items: center; + color: whitesmoke; + text-align: center; + justify-content: center; + user-select: none; + transform: translate(100px, 0px); + font-size: 30px; + padding: 10px; + text-transform: uppercase; + + .pathbarText { + font-family: sans-serif; + text-align: center; + height: 50px; + padding: 10px; + font-size: 30px; + border-radius: 10px; + text-transform: uppercase; + margin-left: 20px; + position: relative; + } + + .pathIcon { + transform: translate(0px, 0px); + position: relative; + } + } +} + + +/** +* docButton appears at the bottom of mobile document +* Buttons include: pin to presentation, download, upload, reload +*/ +.docButton { position: relative; - touch-action: none; - background-color: pink; + width: 100px; + display: flex; + height: 100px; + font-size: 70px; + text-align: center; + border: 3px solid black; + margin: 20px; + z-index: 100; + border-radius: 100%; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.docButtonContainer { + top: 80%; + position: absolute; + display: flex; + transform: translate(-50%, 0); + left: 50%; + z-index: 100; } + +.toolbar { + left: 50%; + transform: translate(-50%); + position: absolute; + height: max-content; + top: 0px; + border-radius: 20px; + background-color: lightgrey; + opacity: 0; + transition: all 400ms ease 50ms; +} + +.toolbar.active { + display: inline-block; + width: 300px; + padding: 5px; + opacity: 1; + height: max-content; + top: -450px; +} + +.colorSelector { + position: absolute; + top: 550px; + left: 300px; + transform: translate(-50%, 0); + z-index: 100; + display: inline-flex; + width: max-content; + height: max-content; + pointer-events: all; + font-size: 90px; +} + +// Menu buttons for toggling between list and icon view +.homeSwitch { + position: fixed; + top: 212; + right: 36px; + display: inline-flex; + width: max-content; + z-index: 99; + height: 70px; + + .list { + width: 70px; + height: 70px; + margin: 5; + padding: 10; + align-items: center; + text-align: center; + font-size: 50; + border-style: solid; + border-width: 3; + border-color: black; + background: whitesmoke; + align-self: center; + border-radius: 10px; + } + + .list.active { + color: darkred; + border-color: darkred; + } +} \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 90672e19f..38705898b 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -11,42 +11,30 @@ import { import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; -import { trace } from 'mobx'; -import * as rp from 'request-promise'; import { Doc, DocListCast } from '../fields/Doc'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from '../Utils'; -import { DocServer } from '../client/DocServer'; import { Docs, DocumentOptions } from '../client/documents/Documents'; import { Scripting } from '../client/util/Scripting'; import { DocumentView } from '../client/views/nodes/DocumentView'; import { Transform } from '../client/util/Transform'; import "./MobileInterface.scss"; -import "./MobileMenu.scss"; -import "./MobileHome.scss"; import "./ImageUpload.scss"; import "./AudioUpload.scss"; -import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; import { DockedFrameRenderer } from '../client/views/collections/CollectionDockingView'; import { InkTool } from '../fields/InkField'; -import { listSpec } from '../fields/Schema'; -import { nullAudio } from '../fields/URLField'; import GestureOverlay from "../client/views/GestureOverlay"; import { ScriptField } from "../fields/ScriptField"; import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu"; import { RadialMenu } from "../client/views/nodes/RadialMenu"; -import { UndoManager, undoBatch } from "../client/util/UndoManager"; -import { MainView } from "../client/views/MainView"; +import { UndoManager } from "../client/util/UndoManager"; import { List } from "../fields/List"; import { AudioUpload } from "./AudioUpload"; import { Cast, FieldValue } from '../fields/Types'; -import { CollectionView } from '../client/views/collections/CollectionView'; -import { InkingStroke } from '../client/views/InkingStroke'; import RichTextMenu from "../client/views/nodes/formattedText/RichTextMenu"; import { AudioBox } from "../client/views/nodes/AudioBox"; -import { FormattedTextBox } from "../client/views/nodes/formattedText/FormattedTextBox"; library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, @@ -82,22 +70,15 @@ export class MobileInterface extends React.Component { @action componentDidMount = () => { - // Doc.UserDoc().activeMobile = this._homeDoc; + // if the home menu is in list view -> adjust the menu toggle appropriately this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false; - Doc.SetSelectedTool(InkTool.None); - Doc.UserDoc().activeMobile = this._homeDoc; + Doc.SetSelectedTool(InkTool.None); // ink should intially be set to none + Doc.UserDoc().activeMobile = this._homeDoc; // active mobile set to home AudioBox.Enabled = true; + // remove double click to avoid mobile zoom in document.removeEventListener("dblclick", this.onReactDoubleClick); document.addEventListener("dblclick", this.onReactDoubleClick); - document.addEventListener("dash", (e: any) => { // event used by chrome plugin to tell Dash which document to focus on - const id = FormattedTextBox.GetDocFromUrl(e.detail); - DocServer.GetRefField(id).then(doc => { - if (doc instanceof Doc) { - DocumentManager.Instance.jumpToDocument(doc, false, undefined); - } - }); - }); } @action @@ -123,6 +104,8 @@ export class MobileInterface extends React.Component { onSwitch && onSwitch(); this.renderView = renderView; + // Ensures that switching to home is not registed + UndoManager.undoStack.length = 0; } // For toggling the hamburger menu @@ -144,16 +127,18 @@ export class MobileInterface extends React.Component { */ back = () => { const header = document.getElementById("header") as HTMLElement; - const doc = Cast(this._parents.pop(), Doc) as Doc; - + const doc = Cast(this._parents.pop(), Doc) as Doc; // Parent document + // Case 1: Parent document is 'workspaces' if (doc === Cast(this._library, Doc) as Doc) { this._child = null; this.switchCurrentView(this._library); + // Case 2: Parent document is the 'home' menu (root node) } else if (doc === Cast(this._homeDoc, Doc) as Doc) { this._homeMenu = true; this._parents = []; this._child = null; this.switchCurrentView(this._homeDoc); + // Case 3: Parent document is any document } else { if (doc) { this._child = doc; @@ -162,11 +147,11 @@ export class MobileInterface extends React.Component { header.textContent = String(doc.title); } } - this._ink = false; + this._ink = false; // turns ink off } /** - * Return 'Home", which implies returning to 'Home' buttons + * Return 'Home", which implies returning to 'Home' menu buttons */ returnHome = () => { if (!this._homeMenu || this.sidebarActive) { @@ -258,11 +243,16 @@ export class MobileInterface extends React.Component { } } + /** + * Called when an item in the library is clicked and should + * be opened (open icon on RHS of all menu items) + * @param doc doc to be opened + */ openFromSidebar = (doc: Doc) => { this._parents.push(this._activeDoc); this.switchCurrentView(doc); this._homeMenu = false; - this._child = doc; //? + this._child = doc; this.toggleSidebar(); } @@ -378,12 +368,12 @@ export class MobileInterface extends React.Component {
); } - + // stores workspace documents as 'workspaces' variable let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; if (this._child) { workspaces = this._child; } - + // returns a list of navbar buttons as 'buttons' const buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { if (doc.type !== "ink") { return ( @@ -445,7 +435,7 @@ export class MobileInterface extends React.Component { } /** - * Handles the Create New Workspace button in the menu (taken from MainView.tsx) + * Handles the 'Create New Workspace' button in the menu (taken from MainView.tsx) */ @action createNewWorkspace = async (id?: string) => { @@ -467,7 +457,6 @@ export class MobileInterface extends React.Component { workspaceDoc.contextMenuLabels = new List(["Toggle Theme Colors", "Toggle Comic Mode", "New Workspace Layout"]); Doc.AddDocToList(workspaces, "data", workspaceDoc); - // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) } stop = (e: React.MouseEvent) => { @@ -508,7 +497,6 @@ export class MobileInterface extends React.Component { inkMenu = () => { if (this._activeDoc._viewType === "docking") { if (this._ink) { - console.log("here"); return
; @@ -517,9 +505,9 @@ export class MobileInterface extends React.Component { } } - + // uses UndoManager and handles the color change opacity change if CanUndo is true undo = () => { - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc !== this.userDoc.rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") { return (<>
{ - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc !== this.userDoc.rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") { return (<>
@@ -593,7 +583,6 @@ export class MobileInterface extends React.Component { style={{ backgroundColor: "white", color: "black" }} onClick={e => { window.open(url); - console.log(url); }}> @@ -647,18 +636,13 @@ export class MobileInterface extends React.Component { this._homeDoc._viewType = "masonry"; this._homeDoc.columnWidth = 300; const menuButtons = DocListCast(this._homeDoc.data); - console.log('hello'); menuButtons.map((doc: Doc, index: any) => { - console.log(index); const buttonData = DocListCast(doc.data); buttonData[1]._nativeWidth = 0.1; buttonData[1]._width = 0.1; buttonData[1]._dimMagnitude = 0; buttonData[1]._opacity = 0; - console.log(buttonData); - console.log(doc._nativeWidth); doc._nativeWidth = 400; - console.log(doc._nativeWidth); }); } } @@ -670,22 +654,18 @@ export class MobileInterface extends React.Component { this._homeDoc._viewType = "stacking"; this.menuListView = true; const menuButtons = DocListCast(this._homeDoc.data); - console.log('hello'); menuButtons.map((doc: Doc, index: any) => { const buttonData = DocListCast(doc.data); buttonData[1]._nativeWidth = 450; buttonData[1]._dimMagnitude = 2; buttonData[1]._opacity = 1; - console.log(doc._nativeWidth); doc._nativeWidth = 900; - console.log(doc._nativeWidth); }); } } // For setting up the presentation document for the home menu setupDefaultPresentation = () => { - const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; if (presentation) { @@ -698,10 +678,11 @@ export class MobileInterface extends React.Component { @action toggleUpload = () => this.imageUploadActive = !this.imageUploadActive - // For toggling image upload pop up + // For toggling audio record and dictate pop up @action toggleAudio = () => this.audioUploadActive = !this.audioUploadActive + // Button for toggling the upload pop up in a collection @action toggleUploadInCollection = () => { const button = document.getElementById("imageButton") as HTMLElement; @@ -719,12 +700,6 @@ export class MobileInterface extends React.Component { // Returns the image upload pop up uploadImage = () => { - if (this.imageUploadActive) { - console.log("active"); - } else if (!this.imageUploadActive) { - - } - let doc; let toggle; if (this._homeMenu === false) { @@ -739,6 +714,7 @@ export class MobileInterface extends React.Component { ); } + // Radial menu can only be used if it is a colleciton and it is not a homeDoc displayRadialMenu = () => { if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { return ; @@ -750,6 +726,7 @@ export class MobileInterface extends React.Component { e.stopPropagation(); } + // Button that appears on the bottom of the screen to initiate image upload uploadImageButton = () => { if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== "docking" && this._activeDoc.title !== "WORKSPACES") { return
{ const mobileUpload = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; this.switchCurrentView(mobileUpload); @@ -800,14 +782,20 @@ export class MobileInterface extends React.Component { } - +//Global functions for mobile menu +Scripting.addGlobal(function switchToMobileLibrary() { return MobileInterface.Instance.switchToLibrary(); }, + "opens the library to navigate through workspaces on Dash Mobile"); +Scripting.addGlobal(function openMobileUploads() { return MobileInterface.Instance.toggleUpload(); }, + "opens the upload files menu for Dash Mobile"); +Scripting.addGlobal(function switchToMobileUploadCollection() { return MobileInterface.Instance.switchToMobileUploads(); }, + "opens the mobile uploads collection on Dash Mobile"); +Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); }, + "opens the record and dictate menu on Dash Mobile"); +Scripting.addGlobal(function switchToMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }, + "opens the presentation on Dash Mobile"); +Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }, + "opens settings on Dash Mobile"); + +// Other global functions for mobile Scripting.addGlobal(function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }, - "changes the active document displayed on the mobile, (doc: any)"); -Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }, - "opens the presentation on mobile"); -Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); -Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); }); -Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); -Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); -Scripting.addGlobal(function switchToMobileUploads() { return MobileInterface.Instance.switchToMobileUploads(); }); -Scripting.addGlobal(function switchToMobileLibrary() { return MobileInterface.Instance.switchToLibrary(); }); \ No newline at end of file + "changes the active document displayed on the Dash Mobile", "(doc: any)"); diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index b60aa308f..e69de29bb 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -1,475 +0,0 @@ -$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; - z-index: 150; -} - -.navbar .cover { - position: absolute; - right: 0px; - top: 0px; - height: 120px; - width: 120px; - background-color: whitesmoke; - z-index: 200; -} - -.navbar .toggle-btn { - position: absolute; - right: 20px; - top: 30px; - height: 70px; - width: 70px; - transition: all 400ms ease-in-out 200ms; - z-index: 180; -} - -.navbar .background { - position: absolute; - right: 0px; - top: 0px; - height: 120px; - width: 120px; - //border: 1px solid black; -} - -.navbar .background.active { - background-color: lightgrey; -} - -.navbar .toggle-btn-home { - right: -200px; -} - -.navbar .header { - position: absolute; - top: 50%; - top: calc(9px + 50%); - right: 50%; - transform: translate(50%, -50%); - font-size: 40; - font-weight: 700; - text-align: center; - user-select: none; - text-transform: uppercase; - font-family: Arial, Helvetica, sans-serif; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - direction: ltr; - width: 600px; -} - -.navbar .toggle-btn span { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 70%; - height: 4px; - background: black; - transition: all 200ms ease; - z-index: 180; -} - -.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: fixed; - top: 120px; - opacity: 0; - right: -100%; - width: 80%; - height: calc(80% - (120px)); - z-index: 101; - background-color: whitesmoke; - transition: all 400ms ease 50ms; - padding: 20px; - // overflow-y: auto; - // -webkit-overflow-scrolling: touch; - // border-right: 5px solid black; - box-shadow: 0 0 5px 5px grey; -} - -.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; - display: inline-flex; - font-size: 35px; - text-transform: uppercase; - color: black; - -} - -.sidebar .ink:focus { - outline: 1px solid blue; -} - -.sidebarButtons { - top: 80px; - position: relative; -} - -.blanket { - position: fixed; - top: 120px; - opacity: 0.5; - right: -100%; - width: 100%; - height: calc(100% - (120px)); - z-index: 101; - background-color: grey; - padding: 20px; -} - -.blanket.active { - position: absolute; - right: 0%; - z-index: 100; -} - -.home { - position: absolute; - top: 30px; - left: 30px; - font-size: 60; - user-select: none; - text-transform: uppercase; - font-family: Arial, Helvetica, sans-serif; - z-index: 200; -} - -.item-type { - display: inline; - text-transform: lowercase; - margin-left: 20px; - font-size: 35px; - font-style: italic; - color: rgb(28, 28, 28); -} - -.item-title { - max-width: 70%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.right { - margin-left: 20px; - z-index: 200; -} - -.open { - right: 20px; - font-size: 35; - position: absolute; -} - -.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 { - position: absolute; - right:0%; - opacity: 1; - z-index: 101; -} - -.back { - position: absolute; - left: 42px; - top: 0; - background: #1a1a1a; - width: 50px; - height: 100%; - display: flex; - justify-content: center; - text-align: center; - flex-direction: column; - align-items: center; - border-radius: 10px; - font-size: 25px; - user-select: none; - z-index: 100; -} - -.pathbar { - position: fixed; - top: 118px; - left: 0px; - background: #1a1a1a; - z-index: 120; - border-radius: 0px; - width: 100%; - height: 80px; - overflow: hidden; -} - -.pathname { - position: relative; - font-size: 25; - top: 50%; - width: 86%; - left: 12%; - 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; -} - -.docButton { - position: relative; - width: 100px; - display: flex; - height: 100px; - font-size: 70px; - text-align: center; - border: 3px solid black; - margin: 20px; - z-index: 100; - border-radius: 100%; - justify-content: center; - flex-direction: column; - align-items: center; -} - -.docButtonContainer { - top: 80%; - position: absolute; - display: flex; - transform: translate(-50%, 0); - left: 50%; - z-index: 100; -} - -.scrollmenu { - overflow: auto; - width: 100%; - height: 100%; - white-space: nowrap; - display: inline-flex; -} - -.pathbarItem { - position: relative; - display: flex; - align-items: center; - color: whitesmoke; - text-align: center; - justify-content: center; - user-select: none; - transform: translate(100px, 0px); - font-size: 30px; - padding: 10px; - text-transform: uppercase; -} - -.pathbarText { - font-family: sans-serif; - text-align: center; - height: 50px; - padding: 10px; - font-size: 30px; - border-radius: 10px; - text-transform: uppercase; - margin-left: 20px; - position: relative; -} - - -.pathIcon { - transform: translate(0px, 0px); - position: relative; -} - -.hidePath { - position: absolute; - height: 100%; - width: 200px; - left: 0px; - top: 0px; - background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0)); - text-align: center; - user-select: none; - z-index: 99; - pointer-events: none; -} - -.toolbar { - left: 50%; - transform: translate(-50%); - position: absolute; - height: max-content; - top: 0px; - border-radius: 20px; - background-color: lightgrey; - opacity: 0; - transition: all 400ms ease 50ms; -} - -.toolbar.active { - display: inline-block; - width: 300px; - padding: 5px; - opacity: 1; - height: max-content; - top: -450px; -} - -.colorSelector { - position: absolute; - top: 550px; - left: 300px; - transform: translate(-50%, 0); - z-index: 100; - display: inline-flex; - width: max-content; - height: max-content; - pointer-events: all; - font-size: 90px; -} - -.widthSelector { - display: inline-flex; - width: max-content; - height: 100px; - padding: 10px; -} - -.slider { - -webkit-appearance: none; - /* Override default CSS styles */ - appearance: none; - width: 100%; - /* Full-width */ - height: 25px; - /* Specified height */ - background: #d3d3d3; - /* Grey background */ - outline: none; - /* Remove outline */ -} - -.colorButton { - width: 70px; - margin: 10px; - height: 70px; - border-style: solid; - border-width: 3px; - border-radius: 100%; -} - -.homeSwitch { - position: fixed; - top: 212; - right: 36px; - display: inline-flex; - width: max-content; - z-index: 99; - height: 70px; -} - -.list { - width: 70px; - height: 70px; - margin: 5; - padding: 10; - align-items: center; - text-align: center; - font-size: 50; - border-style: solid; - border-width: 3; - border-color: black; - background: whitesmoke; - align-self: center; - border-radius: 10px; -} - -.list.active { - color: darkred; - border-color: darkred; -} \ No newline at end of file -- cgit v1.2.3-70-g09d2