From ba0d831691e81903ab1fb9482ba5dcad0a769881 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Thu, 11 Jun 2020 23:40:49 -0700 Subject: functioning with new ink --- .../collectionFreeForm/InkOptionsMenu.scss | 38 ++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss') diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index 3671a84b9..72fdf5af9 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -4,7 +4,6 @@ height: 100%; } - } .sketch-picker { @@ -31,7 +30,42 @@ background: #323232; display: block; - } } +@media only screen and (max-width: 1000px) { + .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; + + } + } +} -- cgit v1.2.3-70-g09d2 From 26d3d6c18d27a4ebb8f00e754bf3ea2cb5b08e00 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Sat, 20 Jun 2020 02:39:20 +0900 Subject: updated menu/fixed icon --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/util/InteractionUtils.scss | 4 ++ src/client/util/InteractionUtils.tsx | 65 +++++++++++++--------- src/client/views/GestureOverlay.tsx | 12 +++- src/client/views/InkingStroke.scss | 4 ++ src/client/views/MainView.tsx | 4 +- .../collectionFreeForm/InkOptionsMenu.scss | 7 ++- .../collectionFreeForm/InkOptionsMenu.tsx | 42 +++++++++----- 8 files changed, 94 insertions(+), 46 deletions(-) create mode 100644 src/client/util/InteractionUtils.scss (limited to 'src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 3d0c0ef4a..324b08603 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -690,7 +690,7 @@ export class CurrentUserUtils { doc.activeInkPen = doc; doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)"); doc.activeInkWidth = StrCast(doc.activeInkWidth, "1"); - doc.activeInkBezier = StrCast(doc.activeInkBezier, ""); + doc.activeInkBezier = StrCast(doc.activeInkBezier, "0"); doc.activeFillColor = StrCast(doc.activeFillColor, "none"); doc.activeArrowStart = StrCast(doc.activeArrowStart, "none"); doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none"); diff --git a/src/client/util/InteractionUtils.scss b/src/client/util/InteractionUtils.scss new file mode 100644 index 000000000..6707157d4 --- /dev/null +++ b/src/client/util/InteractionUtils.scss @@ -0,0 +1,4 @@ +.halo { + opacity: 0.2; + stroke: black; +} \ No newline at end of file diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index c6b96df45..68dcbebe3 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -2,6 +2,7 @@ import React = require("react"); import * as beziercurve from 'bezier-curve'; import * as fitCurve from 'fit-curve'; import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu"; +import "./InteractionUtils.scss"; export namespace InteractionUtils { export const MOUSETYPE = "mouse"; @@ -103,7 +104,7 @@ export namespace InteractionUtils { const newPoints: number[][] = []; const newPts: { X: number; Y: number; }[] = []; //convert to [][] for fitcurve module - for (var i = 0; i < points.length - 1; i++) { + for (var i = 0; i < points.length - 2; i++) { newPoints.push([points[i].X, points[i].Y]); } const bezierCurves = fitCurve(newPoints, parseInt(bezier)); @@ -123,25 +124,38 @@ export namespace InteractionUtils { return ( - - {/* {makeArrow()} */} - + {/* */} - + {/* */} - + + + {/* */} + ); @@ -239,24 +254,24 @@ export namespace InteractionUtils { } points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top }); return points; - case "arrow": - const x1 = left; - const y1 = top; - const x2 = right; - const y2 = bottom; - const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2))); - const L2 = L1 / 5; - const angle = 0.785398; - const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle)); - const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle)); - const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle)); - const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle)); - points.push({ X: x1, Y: y1 }); - points.push({ X: x2, Y: y2 }); - points.push({ X: x3, Y: y3 }); - points.push({ X: x4, Y: y4 }); - points.push({ X: x2, Y: y2 }); - return points; + // case "arrow": + // const x1 = left; + // const y1 = top; + // const x2 = right; + // const y2 = bottom; + // const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2))); + // const L2 = L1 / 5; + // const angle = 0.785398; + // const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle)); + // const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle)); + // const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle)); + // const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle)); + // points.push({ X: x1, Y: y1 }); + // points.push({ X: x2, Y: y2 }); + // points.push({ X: x3, Y: y3 }); + // points.push({ X: x4, Y: y4 }); + // points.push({ X: x2, Y: y2 }); + // return points; case "line": points.push({ X: left, Y: top }); points.push({ X: right, Y: bottom }); diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 5b6cbc372..01ef0b664 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -681,6 +681,10 @@ export default class GestureOverlay extends Touchable { } else { this._points = []; } + SetActiveArrowStart("none"); + GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart(); + SetActiveArrowEnd("none"); + GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd(); document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); } @@ -692,7 +696,9 @@ export default class GestureOverlay extends Touchable { var left = Math.min(...xs); var bottom = Math.max(...ys); var top = Math.min(...ys); - + if (shape === "noRec") { + return; + } if (!gesture) { //if shape options is activated in inkOptionMenu //take second to last point because _point[length-1] is _points[0] @@ -751,7 +757,7 @@ export default class GestureOverlay extends Touchable { case "line": this._points.push({ X: left, Y: top }); this._points.push({ X: right, Y: bottom }); - this._points.push({ X: right, Y: bottom - 1 }); + // this._points.push({ X: right, Y: bottom - 1 }); break; case "arrow": const x1 = left; @@ -770,7 +776,7 @@ export default class GestureOverlay extends Touchable { this._points.push({ X: x3, Y: y3 }); this._points.push({ X: x4, Y: y4 }); this._points.push({ X: x2, Y: y2 }); - this._points.push({ X: x1, Y: y1 - 1 }); + // this._points.push({ X: x1, Y: y1 - 1 }); } } diff --git a/src/client/views/InkingStroke.scss b/src/client/views/InkingStroke.scss index 433433a42..30ab1967e 100644 --- a/src/client/views/InkingStroke.scss +++ b/src/client/views/InkingStroke.scss @@ -4,4 +4,8 @@ stroke-linecap: round; overflow: visible !important; transform-origin: top left; + + svg:not(:root) { + overflow: visible !important; + } } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 3677746cd..15a6239be 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,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 + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; @@ -129,7 +129,7 @@ export class MainView extends React.Component { 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, faTrashAlt, faAngleRight, faBell, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index a7f4d4e53..a9fab4c1e 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -1,5 +1,10 @@ .antimodeMenu-button { - .color-preview { + .color-previewI { + width: 100%; + height: 40%; + } + + .color-previewII { width: 100%; height: 100%; } diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 96a9cbbdb..894227d84 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -14,21 +14,26 @@ import { SelectionManager } from "../../../util/SelectionManager"; import { DocumentView } from "../../../views/nodes/DocumentView"; import { Document } from "../../../../fields/documentSchemas"; import { DocumentType } from "../../../documents/DocumentTypes"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; +import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve } from "@fortawesome/free-solid-svg-icons"; + +library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve); @observer export default class InkOptionsMenu extends AntimodeMenu { static Instance: InkOptionsMenu; private _palette = ["D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF", "none"]; - private _width = ["1", "5", "10", "100", "200", "300"]; + private _width = ["1", "5", "10", "100"]; // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"]; // private _icons = ["O", "∆", "ロ", "➜", "-"]; - private _buttons = ["circle", "triangle", "rectangle", "line", ""]; - private _icons = ["O", "∆", "ロ", "-", " "]; + private _buttons = ["circle", "triangle", "rectangle", "line", "", "noRec"]; + private _icons = ["O", "∆", "ロ", "––", " ", "✖︎"]; //arrowStart and arrowEnd must match and defs must exist in Inking Stroke private _arrowStart = ["url(#arrowHead)", "url(#arrowHead)", "url(#dot)", "url(#dot)", "none"]; private _arrowEnd = ["none", "url(#arrowEnd)", "none", "url(#dot)", "none"]; - private _arrowIcons = ["➡︎", "↔︎", "o-", "o-o", " "]; + private _arrowIcons = ["→", "↔︎", "・", "・・", " "]; @observable _colorBtn = false; @observable _widthBtn = false; @@ -116,6 +121,7 @@ export default class InkOptionsMenu extends AntimodeMenu { for (var i = 0; i < this._arrowStart.length; i++) { if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { currIcon = this._arrowIcons[i]; + } } var arrowPicker = ; if (this._widthBtn) { widthPicker =
@@ -176,7 +182,9 @@ export default class InkOptionsMenu extends AntimodeMenu { title="colorChanger" onPointerDown={action(e => this._colorBtn = !this._colorBtn)} style={{ backgroundColor: this._colorBtn ? "121212" : "" }}> -
+ +
+ ; if (this._colorBtn) { colorPicker =
@@ -187,7 +195,8 @@ export default class InkOptionsMenu extends AntimodeMenu { key={color} onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })} style={{ backgroundColor: this._colorBtn ? "121212" : "" }}> -
+ {/* */} +
; })}
; @@ -202,7 +211,8 @@ export default class InkOptionsMenu extends AntimodeMenu { title="fillChanger" onPointerDown={action(e => this._fillBtn = !this._fillBtn)} style={{ backgroundColor: this._fillBtn ? "121212" : "" }}> -
+ +
; if (this._fillBtn) { fillPicker =
@@ -213,7 +223,7 @@ export default class InkOptionsMenu extends AntimodeMenu { key={color} onPointerDown={action(() => { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })} style={{ backgroundColor: this._fillBtn ? "121212" : "" }}> -
+
; })} @@ -240,7 +250,7 @@ export default class InkOptionsMenu extends AntimodeMenu { @computed get shapePicker() { var currIcon; if (GestureOverlay.Instance.InkShape === "") { - currIcon = "S"; + currIcon = ; } else { for (var i = 0; i < this._icons.length; i++) { if (GestureOverlay.Instance.InkShape === this._buttons[i]) { @@ -252,7 +262,7 @@ export default class InkOptionsMenu extends AntimodeMenu { className="antimodeMenu-button" key="shape" onPointerDown={action(e => this._shapeBtn = !this._shapeBtn)} - style={{ backgroundColor: this._widthBtn ? "121212" : "" }}> + style={{ backgroundColor: this._shapeBtn ? "121212" : "" }}> {currIcon} ; if (this._shapeBtn) { @@ -280,7 +290,8 @@ export default class InkOptionsMenu extends AntimodeMenu { key="bezier" onPointerDown={e => this.changeBezier(e)} style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}> - B + + ; } @@ -291,13 +302,16 @@ export default class InkOptionsMenu extends AntimodeMenu { key="dash" onPointerDown={e => this.changeDash(e)} style={{ backgroundColor: ActiveDash() !== "0" ? "121212" : "" }}> - ... + + ; } render() { const buttons = [ - , + , this.shapePicker, // this.shapeButtons, this.bezierButton, -- 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/views/collections/collectionFreeForm/InkOptionsMenu.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 6d6475816cebfd9e2921fe817f359c49f22b70d6 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 23 Jun 2020 13:54:30 +0800 Subject: ink menu UI change --- src/client/views/AntimodeMenu.scss | 1 + src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss') diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 43f45fb1c..934d819cc 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -46,6 +46,7 @@ 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; diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index 4855dfea8..9ad4d5079 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -35,6 +35,8 @@ @media only screen and (max-device-width: 480px) { .antimodeMenu-button { + font-size: 50%; + .color-preview { width: 100%; height: 100%; @@ -65,7 +67,7 @@ .antimodeMenu-button { background: #323232; display: block; - + font-size: 50%; } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2