aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/AntimodeMenu.scss45
-rw-r--r--src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss3
-rw-r--r--src/mobile/ImageUpload.scss12
-rw-r--r--src/mobile/ImageUpload.tsx11
-rw-r--r--src/mobile/MobileInterface.tsx79
-rw-r--r--src/mobile/MobileMenu.scss3
6 files changed, 126 insertions, 27 deletions
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss
index d4a76ee17..9c5bf0a1f 100644
--- a/src/client/views/AntimodeMenu.scss
+++ b/src/client/views/AntimodeMenu.scss
@@ -39,4 +39,49 @@
background-repeat: no-repeat;
background-position: left center;
}
+}
+
+@media only screen and (max-width: 1000px) {
+ .antimodeMenu-cont {
+ position: absolute;
+ z-index: 10000;
+ height: 100px;
+ 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
+ }
+
+ .antimodeMenu-row {
+ display: flex;
+ height: 35px;
+ }
+
+ .antimodeMenu-button {
+ background-color: transparent;
+ width: 35px;
+ height: 35px;
+
+ &.active {
+ background-color: #121212;
+ }
+ }
+
+ .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/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
index a7f4d4e53..3671a84b9 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss
@@ -33,4 +33,5 @@
}
-} \ No newline at end of file
+}
+
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index 6c782d4d8..d5ab31469 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -5,6 +5,7 @@
justify-content: center;
flex-direction: column;
align-items: center;
+ max-width: 400px;
.upload_label {
font-size: 3em;
@@ -17,6 +18,13 @@
border-radius: 10px;
}
+ .file {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ direction: ltr;
+ }
+
.upload_label:hover {
background-color: darkred;
}
@@ -55,6 +63,10 @@
background-color: darkred;
}
+ .status {
+ font-size: 2em;
+ }
+
}
.backgroundUpload {
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 504e4ceae..8f050aedd 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -32,6 +32,7 @@ export class Uploader extends React.Component {
@observable error: string = "";
@observable status: string = "";
@observable nm: string = "Choose an image";
+ @observable process: string = "";
onClick = async () => {
console.log("uploader click");
@@ -48,6 +49,7 @@ export class Uploader extends React.Component {
console.log("hi");
const files: FileList | null = inputRef.current!.files;
if (files && files.length !== 0) {
+ this.process = "Uploading Image"
console.log(files[0]);
const name = files[0].name;
const res = await Networking.UploadFilesToServer(files[0]);
@@ -100,15 +102,18 @@ export class Uploader extends React.Component {
pending.data = new List([doc]);
}
this.status = "finished";
+
console.log("hi");
const slab7 = document.getElementById("slab7");
if (slab7) {
slab7.style.opacity = "1";
}
-
+ this.process = "Image Uploaded";
}
});
+ } else {
+ this.process = "No file selected";
}
setTimeout(this.clearUpload, 3000);
}
@@ -163,6 +168,7 @@ export class Uploader extends React.Component {
if (inputRef.current) {
inputRef.current.value = "";
}
+ this.process = "";
console.log(inputRef.current!.files);
}
@@ -172,7 +178,7 @@ export class Uploader extends React.Component {
return (
<div className="imgupload_cont">
<input type="file" accept="image/*" className="inputFile" id="input_image_file" ref={inputRef} onChange={this.inputLabel}></input>
- <label id="label" htmlFor="input_image_file">{this.nm}</label>
+ <label className="file" id="label" htmlFor="input_image_file">{this.nm}</label>
<div className="upload_label" onClick={this.onClick}>Upload Image</div>
{/* <div onClick={this.onClick} className="upload_button">Upload</div> */}
<img id="img_preview" src=""></img>
@@ -187,6 +193,7 @@ export class Uploader extends React.Component {
<div className="loadingSlab" id="slab6" />
<div className="loadingSlab" id="slab7" />
</div>
+ <p className="status">{this.process}</p>
</div>
);
}
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 687422cf2..f2914eaae 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -38,6 +38,7 @@ import GestureOverlay from "../client/views/GestureOverlay";
import { SelectionManager } from "../client/util/SelectionManager";
import { SketchPicker } from "react-color";
import { ScriptField } from "../fields/ScriptField";
+import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu";
library.add(faTasks, 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,
@@ -76,7 +77,7 @@ export class MobileInterface extends React.Component {
private _open: boolean = false;
// private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
- private _ink: boolean = false;
+ @observable private _ink: boolean = false;
constructor(props: Readonly<{}>) {
super(props);
@@ -93,10 +94,7 @@ export class MobileInterface extends React.Component {
this.userDoc.activeMobile = this._homeDoc;
}
this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false;
- // InkingStroke.switchTool(InkTool.None);
- MobileInterface.Instance.drawingInk = false;
- // InkingControl.Instance.updateSelectedColor("#FF0000");
- // InkingControl.Instance.switchWidth("2");
+ Doc.SetSelectedTool(InkTool.None);
this.switchCurrentView((userDoc: Doc) => this._homeDoc);
}
@@ -199,7 +197,7 @@ export class MobileInterface extends React.Component {
*/
returnMain = () => {
console.log("home");
- this._parents = [];
+ this._parents = [this._homeDoc];
// this.toggleSidebar();
this._activeDoc = this._library;
this.switchCurrentView((userDoc: Doc) => this._library);
@@ -254,7 +252,7 @@ export class MobileInterface extends React.Component {
* Handles the click functionality in the library panel
* @param doc: doc for which the method is called
*/
- handleClick(doc: Doc) {
+ handleClick = async (doc: Doc) => {
let children = DocListCast(doc.data);
if (doc.type !== "collection") {
this._parents.push(this._activeDoc);
@@ -297,12 +295,24 @@ export class MobileInterface extends React.Component {
let items = docArray.map((doc: Doc, index: any) => {
if (index === 0) {
return (
- <div className="pathbarItem">
- <div className="pathbarText"
- key={index}
- onClick={() => this.handlePathClick(doc, index)}>{doc.title}
- </div>
- </div>);
+ <>
+ {this._homeMenu ?
+ <div className="pathbarItem">
+ <div className="pathbarText"
+ style={{ backgroundColor: "rgb(119, 37, 37)" }}
+ key={index}
+ onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+ </div>
+ </div>
+ :
+ <div className="pathbarItem">
+ <div className="pathbarText"
+ key={index}
+ onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+ </div>
+ </div>}
+ </>);
+
} else if (doc === this._activeDoc) {
return (
<div className="pathbarItem">
@@ -504,7 +514,9 @@ export class MobileInterface extends React.Component {
{/* <SketchPicker onChange={InkingControl.Instance.switchColor} presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
color={StrCast(CurrentUserUtils.ActivePen ? CurrentUserUtils.ActivePen.backgroundColor : undefined,
StrCast(selDoc?._backgroundColor, StrCast(selDoc?.backgroundColor, "black")))} /> */}
+ <InkOptionsMenu />
</div>
+
<div className="widthSelector">
{/* <input type="range" min="1" max="100" defaultValue="2" id="myRange" onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.Instance.switchWidth(e.target.value)} /> */}
</div>
@@ -514,6 +526,7 @@ export class MobileInterface extends React.Component {
}
}
+ @action
onSwitchInking = () => {
const button = document.getElementById("inkButton") as HTMLElement;
// const color = InkingControl.Instance.selectedColor;
@@ -524,26 +537,44 @@ export class MobileInterface extends React.Component {
if (!this._ink) {
console.log("INK IS ACTIVE");
// InkingControl.Instance.switchTool(InkTool.Pen);
- MobileInterface.Instance.drawingInk = true;
+ Doc.SetSelectedTool(InkTool.Pen);
+ InkOptionsMenu.Instance.jumpTo(300, 300);
this._ink = true;
} else {
console.log("INK IS INACTIVE");
// InkingControl.Instance.switchTool(InkTool.None);
- MobileInterface.Instance.drawingInk = false;
+ Doc.SetSelectedTool(InkTool.None);
+ InkOptionsMenu.Instance.fadeOut(true);
this._ink = false;
}
}
+ inkMenu = () => {
+ if (this._activeDoc._viewType === "docking") {
+ if (this._ink) {
+ return <InkOptionsMenu />
+ }
+ }
+ }
+
drawInk = () => {
if (this._activeDoc._viewType === "docking") {
const inkIsOn = this._ink;
- return <div className="docButton"
- id="inkButton"
- title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
- onClick={this.onSwitchInking}>
- <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib"
- />
- </div>;
+ return (
+ <>
+ <div className="docButton"
+ id="inkButton"
+ title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
+ onClick={this.onSwitchInking}>
+ <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib"
+ />
+ </div>
+ {/* <div className={`colorMenu ${this._ink ? "active" : ""}`}>
+ <InkOptionsMenu />
+ </div> */}
+ :
+
+ </>);
}
}
@@ -812,7 +843,9 @@ export class MobileInterface extends React.Component {
{this.downloadDocument()}
{this.drawInk()}
{this.uploadAudioButton()}
- {this.colorTool()}
+ {/* {this.colorTool()} */}
+ {this.inkMenu()}
+ <InkOptionsMenu />
</div>
<GestureOverlay>
{this.displayWorkspaces()}
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index f602b85a0..da1e9d951 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -310,6 +310,7 @@ body {
text-align: center;
user-select: none;
z-index: 99;
+ pointer-events: none;
}
.toolbar {
@@ -400,4 +401,4 @@ body {
.list.active {
color: darkred;
border-color: darkred;
-} \ No newline at end of file
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 09:12:26 +0000