aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/CurrentUserUtils.ts16
-rw-r--r--src/client/util/SettingsManager.scss4
-rw-r--r--src/client/views/nodes/PresBox.scss62
-rw-r--r--src/client/views/presentationview/PresElementBox.scss48
-rw-r--r--src/mobile/ImageUpload.scss60
-rw-r--r--src/mobile/MobileInterface.tsx50
6 files changed, 179 insertions, 61 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index f2278bf3d..d99d11c1f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -409,7 +409,7 @@ export class CurrentUserUtils {
const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
{ title: "library", icon: "bars", click: 'switchToLibrary()', backgroundColor: "lightgrey" },
{ title: "record", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey" },
- { title: "upload", icon: "upload", click: 'console.log("hi")', backgroundColor: "lightgrey" },
+ { title: "upload", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "lightgrey" },
{ title: "presentation", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey" },
{ title: "ink", icon: "pen-nib", backgroundColor: "lightgrey" },
{ title: "settings", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey" }
@@ -496,8 +496,8 @@ export class CurrentUserUtils {
});
}
- // 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)
+ // 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) {
// setup a masonry view of all he creators
const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
@@ -588,7 +588,7 @@ export class CurrentUserUtils {
return doc["tabs-button-library"] as Doc;
}
- // setup the Search button which will display the search panel.
+ // setup the Search button which will display the search panel.
static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
if (doc["tabs-button-search"] === undefined) {
doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
@@ -764,13 +764,13 @@ export class CurrentUserUtils {
doc.activePen = doc;
doc.inkColor = StrCast(doc.backgroundColor, "rgb(0, 0, 0)");
doc.fontSize = NumCast(doc.fontSize, 12);
- doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
- doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
+ doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
+ doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
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.setupOverlays(doc); // documents in overlay layer
+ this.setupOverlays(doc); // documents in overlay layer
this.setupDockedButtons(doc); // the bottom bar of font icons
this.setupDefaultPresentation(doc); // presentation that's initially triggered
await this.setupSidebarButtons(doc); // the pop-out left sidebar of tools/panels
@@ -809,4 +809,4 @@ export class CurrentUserUtils {
Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); });
Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); });
-Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); }); \ No newline at end of file
+Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); });
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
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index d48000e16..61641c989 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -16,6 +16,7 @@
height: calc(100% - 25px);
width: 100%;
}
+
.presBox-buttons {
width: 100%;
background: gray;
@@ -24,6 +25,7 @@
display: grid;
grid-column-end: 4;
grid-column-start: 1;
+
.presBox-viewPicker {
height: 25;
position: relative;
@@ -31,10 +33,12 @@
grid-column: 1/2;
min-width: 15px;
}
+
select {
background: #323232;
color: white;
}
+
.presBox-button {
margin-right: 2.5%;
margin-left: 2.5%;
@@ -44,10 +48,12 @@
align-items: center;
background: #323232;
color: white;
+
svg {
margin: auto;
}
}
+
.collectionViewBaseChrome-viewPicker {
min-width: 50;
width: 5%;
@@ -56,17 +62,65 @@
display: inline-block;
}
}
- .presBox-backward, .presBox-forward {
+
+ .presBox-backward,
+ .presBox-forward {
width: 25px;
border-radius: 5px;
- top:50%;
+ top: 50%;
position: absolute;
display: inline-block;
}
+
.presBox-backward {
- left:5;
+ left: 5;
}
+
.presBox-forward {
- right:5;
+ right: 5;
+ }
+}
+
+@media only screen and (max-width: 1000px) { .presBox-cont .presBox-buttons {
+ position: absolute;
+ top: 85%;
+ left: 50%;
+ transform: translate(-50%, 0);
+ width: max-content;
+ height: 15%;
+ z-index: 2;
+ align-items: center;
+ background: rgba(0, 0, 0, 0);
+ padding-top: 5px;
+ padding-bottom: 5px;
+ display: inline-flex;
+ }
+
+ .presBox-cont .presBox-listCont {
+ position: absolute;
+ top: 50;
+ height: calc(100% - 80px);
+ width: 100%;
+ }
+
+ .presBox-cont .presBox-buttons .presBox-button {
+ margin-right: 10px;
+ margin-left: 10px;
+ height: 130px;
+ width: 130px;
+ font-size: 50;
+ border-radius: 5px;
+ display: flex;
+ align-items: center;
+ background: #323232;
+ color: white;
+ }
+
+ .presBox-cont .presBox-buttons .presBox-viewPicker {
+ height: 50;
+ width: 100;
+ font-size: 30px;
+ position: relative;
+ 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 ccd2e8947..1ddf3d8bc 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -13,9 +13,10 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
- transition: all .1s;
+ transition: all .1s;
padding: 0px;
padding-bottom: 3px;
+
.documentView-node {
position: absolute;
z-index: 1;
@@ -45,7 +46,7 @@
.presElementBox-closeIcon {
border-radius: 20px;
- transform:scale(0.7);
+ transform: scale(0.7);
position: absolute;
right: 0;
top: 0;
@@ -58,6 +59,7 @@
position: relative;
width: 100%;
height: auto;
+
.presElementBox-interaction {
color: gray;
float: left;
@@ -65,6 +67,7 @@
width: 20px;
height: 20px;
}
+
.presElementBox-interaction-selected {
color: white;
float: left;
@@ -90,15 +93,44 @@
display: flex;
width: auto;
justify-content: center;
- margin:auto;
+ margin: auto;
}
.presElementBox-embeddedMask {
- width:100%;
- height:100%;
+ width: 100%;
+ height: 100%;
position: absolute;
- left:0;
- top:0;
+ left: 0;
+ top: 0;
background: transparent;
- z-index:2;
+ z-index: 2;
+}
+
+@media only screen and (max-width: 1000px) {
+ .presElementBox-buttons {
+ display: inline-flex;
+ position: relative;
+ width: 100%;
+ }
+
+ .presElementBox-item {
+ display: inline-flex;
+ }
+
+ .presElementBox-buttons .presElementBox-interaction {
+ color: gray;
+ float: left;
+ padding: 0px;
+ width: 50;
+ height: 40;
+ }
+
+ .presElementBox-buttons .presElementBox-interaction-selected {
+ color: white;
+ float: left;
+ padding: 0px;
+ width: 50;
+ height: 50;
+ border: solid 1px darkgray;
+ }
} \ No newline at end of file
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 6ebf33438..afc4cc21e 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -1,12 +1,12 @@
@import "../client/views/globalCssVariables.scss";
.imgupload_cont {
- // display: flex;
- // justify-content: center;
- // flex-direction: column;
- // align-items: center;
- // width: 100vw;
- // height: 100vh;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ width: 90vw;
+ height: 90vh;
.upload_label {
font-weight: normal !important;
@@ -31,31 +31,31 @@
font-size: 3em;
}
- .input_file {
- display: none;
- }
+ // .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_label,
// .upload_button {
- // background: $dark-color;
- // font-size: 500%;
- // font-family: $sans-serif;
- // text-align: center;
- // padding: 5vh;
- // margin-bottom: 20px;
- // color: white;
+ // width: 100%;
+ // padding: 13px 12px;
+ // border-bottom: 1px solid rgba(200, 200, 200, 0.7);
+ // font-family: Arial, Helvetica, sans-serif;
+ // font-style: normal;
+ // font-weight: normal;
+ // user-select: none;
+ // font-size: 35px;
+ // text-transform: uppercase;
+ // color: black;
// }
-
- .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;
- }
} \ No newline at end of file
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index e9d35096d..0f6f51295 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -6,7 +6,7 @@ import {
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,
faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
- faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft
+ faThumbtack, faTree, faTv, faBook, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable } from 'mobx';
@@ -43,7 +43,7 @@ library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTras
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,
faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
- faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft);
+ faThumbtack, faTree, faTv, faUndoAlt, faBook, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft);
// @observer
// export class MobileInterface extends React.Component {
@@ -892,7 +892,7 @@ library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTras
// // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); });
-// // 3
+// // 3
// // renderInkingContent = () => {
// // console.log("rendering inking content");
// // // TODO: support panning and zooming
@@ -948,7 +948,8 @@ export class MobileInterface extends React.Component {
@computed private get userDoc() { return Doc.UserDoc(); }
@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; }
- @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu();
+ // 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 renderView?: () => JSX.Element;
@observable private audioState: any;
@observable private activeToolbar: boolean = false;
@@ -979,7 +980,7 @@ export class MobileInterface extends React.Component {
componentDidMount = () => {
library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]);
if (this.userDoc.activeMobile) {
- console.log(Doc.UserDoc().activeMobile)
+ console.log(Doc.UserDoc().activeMobile);
}
if (this.userDoc && !this.mainContainer) {
this.userDoc.activeMobile = this._homeDoc;
@@ -1051,6 +1052,9 @@ export class MobileInterface extends React.Component {
// }
// }
+ /**
+ * Method called when 'Library' button is pressed
+ */
switchToLibrary = () => {
this._parents.push(this._activeDoc);
this.switchCurrentView((userDoc: Doc) => this._library);
@@ -1059,6 +1063,9 @@ export class MobileInterface extends React.Component {
this.sidebarActive = true;
}
+ /**
+ * Back method for navigating within library
+ */
back = () => {
let header = document.getElementById("header") as HTMLElement;
let doc = Cast(this._parents.pop(), Doc) as Doc;
@@ -1085,6 +1092,9 @@ export class MobileInterface extends React.Component {
this._ink = false;
}
+ /**
+ * Return 'Home", which implies returning to 'Home' buttons
+ */
returnHome = () => {
if (this._homeMenu === false || this.sidebarActive === true) {
this._homeMenu = true;
@@ -1098,6 +1108,9 @@ export class MobileInterface extends React.Component {
}
}
+ /**
+ * Return to primary Workspace in library (Workspaces Doc)
+ */
returnMain = () => {
console.log("home");
this._parents = [];
@@ -1110,6 +1123,9 @@ export class MobileInterface extends React.Component {
// @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); }
+ /**
+ * DocumentView for graphic display of all documents
+ */
displayWorkspaces = () => {
if (this.mainContainer) {
const backgroundColor = () => "white";
@@ -1176,9 +1192,13 @@ export class MobileInterface extends React.Component {
}
}
- returnWidth = () => window.innerWidth;
- returnHeight = () => (window.innerHeight - 300);
+ returnWidth = () => window.innerWidth; //The windows width
+ returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar)
+ /**
+ * Handles the click functionality in the library panel
+ * @param doc: doc for which the method is called
+ */
handleClick(doc: Doc) {
let children = DocListCast(doc.data);
if (doc.type !== "collection") {
@@ -1290,6 +1310,7 @@ export class MobileInterface extends React.Component {
// }
}
+ // Handles when user clicks on document in the pathbar
handlePathClick = (doc: Doc, index: number) => {
if (doc === this._library) {
this._activeDoc = doc;
@@ -1641,7 +1662,6 @@ export class MobileInterface extends React.Component {
const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
if (presentation) {
- console.log(this._activeDoc.mobile);
console.log("presentation clicked: " + presentation.title);
this._activeDoc = presentation;
this.switchCurrentView((userDoc: Doc) => presentation);
@@ -1680,7 +1700,6 @@ export class MobileInterface extends React.Component {
{this.displayWorkspaces()}
{this.renderDefaultContent()}
</GestureOverlay>
-
{/* </GestureOverlay> */}
{/* <DictationOverlay />
<SharingManager />
@@ -1699,14 +1718,25 @@ export class MobileInterface extends React.Component {
</div>
);
}
+
+ uploadImage = () => {
+ console.log("hello world of images");
+ }
}
+
+
+const inputRef = React.createRef<HTMLInputElement>();
+
+
Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); });
Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); });
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(); });
+
// WAS 2
@@ -1799,4 +1829,4 @@ Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance
// </div>
// );
// }
- // } \ No newline at end of file
+ // }
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-15 12:30:19 +0000