diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 54 | ||||
| -rw-r--r-- | src/client/util/SettingsManager.scss | 10 | ||||
| -rw-r--r-- | src/client/views/AntimodeMenu.scss | 16 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 8 | ||||
| -rw-r--r-- | src/client/views/nodes/PDFBox.scss | 188 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.scss | 47 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresElementBox.scss | 78 |
7 files changed, 125 insertions, 276 deletions
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<string>(["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<string>(["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<string>(["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 |
