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/mobile/MobileInterface.tsx197
-rw-r--r--src/mobile/MobileMenu.scss22
3 files changed, 89 insertions, 146 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 3d38e7370..d99d11c1f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -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({
@@ -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: 'uploadMobileImage()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed 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: "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" }
@@ -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/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index e2de7fed2..0f6f51295 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -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
@@ -953,6 +953,7 @@ export class MobileInterface extends React.Component {
@observable private renderView?: () => JSX.Element;
@observable private audioState: any;
@observable private activeToolbar: boolean = false;
+ @observable private sidebarActive: boolean = false;
public _activeDoc: Doc = this.mainDoc;
public _homeDoc: Doc = this.mainDoc;
@@ -987,8 +988,6 @@ export class MobileInterface extends React.Component {
InkingControl.Instance.switchTool(InkTool.None);
MobileInterface.Instance.drawingInk = false;
InkingControl.Instance.updateSelectedColor("#FF0000");
- console.log(this.userDoc.inkColor);
- console.log(InkingControl.Instance.selectedColor);
InkingControl.Instance.switchWidth("2");
this.switchCurrentView((userDoc: Doc) => this._homeDoc);
}
@@ -1028,30 +1027,30 @@ export class MobileInterface extends React.Component {
});
}
- /**
- * Handles the functionality to toggle the sidebar
- */
- toggleSidebar = () => {
- if (this._open === false) {
- this._open = true;
- } else {
- this._open = false;
- }
- console.log("clicked");
- let menuButton = document.getElementById("menuButton") as HTMLElement;
- menuButton.classList.toggle('active');
+ @action
+ toggleSidebar = () => this.sidebarActive = !this.sidebarActive
- let sidebar = document.getElementById("sidebar") as HTMLElement;
- sidebar.classList.toggle('active');
+ // toggleSidebar = () => {
+ // if (this._open === false) {
+ // this._open = true;
+ // } else {
+ // this._open = false;
+ // }
+ // console.log("clicked");
+ // let menuButton = document.getElementById("menuButton") as HTMLElement;
+ // //menuButton.classList.toggle('active');
- let header = document.getElementById("header") as HTMLElement;
+ // let sidebar = document.getElementById("sidebar") as HTMLElement;
+ // //sidebar.classList.toggle('active');
- if (!sidebar.classList.contains('active')) {
- header.textContent = String(this._activeDoc.title);
- } else {
- header.textContent = "library";
- }
- }
+ // let header = document.getElementById("header") as HTMLElement;
+
+ // if (!sidebar.classList.contains('active')) {
+ // header.textContent = String(this._activeDoc.title);
+ // } else {
+ // header.textContent = "library";
+ // }
+ // }
/**
* Method called when 'Library' button is pressed
@@ -1061,7 +1060,7 @@ export class MobileInterface extends React.Component {
this.switchCurrentView((userDoc: Doc) => this._library);
this._activeDoc = this._library;
this._homeMenu = false;
- this.toggleSidebar();
+ this.sidebarActive = true;
}
/**
@@ -1097,14 +1096,14 @@ export class MobileInterface extends React.Component {
* Return 'Home", which implies returning to 'Home' buttons
*/
returnHome = () => {
- if (this._homeMenu === false || this._open === true) {
+ if (this._homeMenu === false || this.sidebarActive === true) {
this._homeMenu = true;
this._parents = [];
this._activeDoc = this._homeDoc;
this._child = null;
this.switchCurrentView((userDoc: Doc) => this._homeDoc);
}
- if (this._open) {
+ if (this.sidebarActive) {
this.toggleSidebar();
}
}
@@ -1230,32 +1229,9 @@ export class MobileInterface extends React.Component {
// let titleArray = [];
let docArray = [];
this._parents.map((doc: Doc, index: any) => {
- // if (doc === this.mainDoc) {
- // pathname = pathname;
- // } else if (doc.type === "audio" || doc.type === "presentation") {
- // pathname = pathname;
- // } else if (doc.type !== "collection") {
- // pathname = pathname;
- // } else {
- // pathname = pathname + " > " + doc.title;
- // titleArray.push(doc.title);
- // docArray.push(doc);
- // }
docArray.push(doc);
});
docArray.push(this._activeDoc);
- // if (this._activeDoc.title === "mobile audio") {
- // pathname = this._activeDoc.title;
- // } else if (this._activeDoc.title === "Presentation") {
- // pathname = this._activeDoc.title;
- // } else if (this._activeDoc === this.mainDoc) {
- // pathname = pathname;
- // } else {
- // pathname = pathname + " > " + this._activeDoc.title;
- // docArray.push(this._activeDoc);
- // titleArray.push(this._activeDoc.title);
- // }
-
return docArray;
}
@@ -1344,7 +1320,6 @@ export class MobileInterface extends React.Component {
} else if (doc === this._homeDoc) {
this.returnHome();
} else {
- console.log(index);
this._activeDoc = doc;
this._child = doc;
this.switchCurrentView((userDoc: Doc) => doc);
@@ -1359,7 +1334,7 @@ export class MobileInterface extends React.Component {
<div
className="item"
key={index}
- onClick={() => doc.proto?.onClick}>{doc.title}
+ onClick={() => doc.onClick}>{doc.title}
</div>);
}
});
@@ -1370,6 +1345,7 @@ export class MobileInterface extends React.Component {
<div className="navbar">
<FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
<div className="header" id="header">{this._homeDoc.title}</div>
+ <div className="cover" id="cover" onClick={(e) => this.stop(e)}></div>
<div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
<span></span>
<span></span>
@@ -1385,7 +1361,12 @@ export class MobileInterface extends React.Component {
</div>
);
}
- const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+
+ let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+ if (this._child) {
+ workspaces = this._child
+ }
+
let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
if (doc.type !== "ink") {
return (
@@ -1399,88 +1380,39 @@ export class MobileInterface extends React.Component {
}
});
- if (this._child) {
- buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => {
- if (doc.type !== "ink") {
- return (
- <div
- className="item"
- key={index}
- onClick={() => this.handleClick(doc)}>{doc.title}
- <div className="type">{doc.type}</div>
- <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
- </div>);
- }
- });
- }
-
- if (!this._child) {
- return (
- <div>
- <div className="navbar">
- <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
- <div className="header" id="header">{this._homeDoc.title}</div>
- <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
- <span></span>
- <span></span>
- <span></span>
- </div>
- </div>
- {this.renderPathbar()}
- <div className="sidebar" id="sidebar">
- <div className="sidebarButtons">
- {buttons}
- {/* <div className="item" key="library" onClick={this.openLibrary}>
- Library
- </div> */}
- {/* <Uploader Document={workspaces} />
- <div className="item" key="audio" onClick={this.recordAudio}>
- Record Audio
- </div>
- <div className="item" key="presentation" onClick={this.openDefaultPresentation}>
- Presentation
- </div> */}
- {/* <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>
- Settings
- </div> */}
- <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
- Ink On
- </div>
- </div>
+ return (
+ <div>
+ <div className="navbar">
+ <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+ <div className="header" id="header">{this.sidebarActive ? "library" : this._activeDoc.title}</div>
+ <div className={`toggle-btn ${this.sidebarActive ? "active" : ""}`} onClick={this.toggleSidebar}>
+ <span></span>
+ <span></span>
+ <span></span>
</div>
- {/* <div>
- {this.renderView}
- </div> */}
</div>
- );
- }
- else {
- return (
- <div>
- <div className="navbar">
- <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
- <div className="header" id="header">library</div>
- <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
- <span></span>
- <span></span>
- <span></span>
- </div>
- </div>
- {this.renderPathbar()}
- <div className="sidebar" id="sidebar">
- <div className="sidebarButtons">
- {buttons}
- <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
- Ink On
+ {this.renderPathbar()}
+ <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}>
+ <div className="sidebarButtons">
+ {this._child ?
+ <>
+ {buttons}
+ <div className="item" key="home" onClick={this.returnMain}>
+ Return to library
</div>
- <div className="item" key="home" onClick={this.returnMain}>
- Home
- </div>
- </div>
+ </> :
+ <>
+ {buttons}
+ </>
+ }
</div>
</div>
- );
- }
+ </div>
+ );
+ }
+
+ stop = (e: React.MouseEvent) => {
+ e.stopPropagation();
}
uploadAudioButton = () => {
@@ -1580,9 +1512,7 @@ export class MobileInterface extends React.Component {
this._parents.push(this._activeDoc);
}
const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc;
- console.log(audioDoc);
if (audioDoc) {
- console.log("audioClicked: " + audioDoc.title);
this._activeDoc = audioDoc;
this.switchCurrentView((userDoc: Doc) => audioDoc);
this._homeMenu = false;
@@ -1603,7 +1533,6 @@ export class MobileInterface extends React.Component {
const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
const audioDoc = this._activeDoc;
const data = Cast(audioRightSidebar.data, listSpec(Doc));
- console.log(audioDoc.proto);
if (data) {
data.push(audioDoc);
}
@@ -1900,4 +1829,4 @@ Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instan
// </div>
// );
// }
- // } \ No newline at end of file
+ // }
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 2641cdfd2..669b55601 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -22,6 +22,16 @@ body {
border-bottom: 5px solid black;
}
+.navbar .cover {
+ position: absolute;
+ right: 20px;
+ top: 30px;
+ height: 70px;
+ width: 70px;
+ background-color: whitesmoke;
+ z-index: 200;
+}
+
.navbar .toggle-btn {
position: absolute;
right: 20px;
@@ -31,6 +41,10 @@ body {
transition: all 300ms ease-in-out 200ms;
}
+.navbar .toggle-btn-home {
+ right: -200px;
+}
+
.navbar .header {
position: absolute;
top: 50%;
@@ -311,7 +325,7 @@ body {
.toolbar.active {
display: inline-block;
- width: fit-content;
+ width: 300px;
padding: 5px;
opacity: 1;
height: max-content;
@@ -320,7 +334,7 @@ body {
.toolbar .colorSelector {
display: inline-flex;
- width: fit-content;
+ width: max-content;
padding: 5px;
height: max-content;
pointer-events: all;
@@ -328,9 +342,9 @@ body {
.widthSelector {
display: inline-flex;
- width: 90%;
+ width: max-content;
height: 100px;
- padding: 5px;
+ padding: 10px;
}
.slider {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 14:02:32 +0000