diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/AntimodeMenu.scss | 9 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss | 38 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx | 16 | ||||
| -rw-r--r-- | src/mobile/MobileInterface.tsx | 15 | ||||
| -rw-r--r-- | src/mobile/MobileMenu.scss | 9 |
5 files changed, 71 insertions, 16 deletions
diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 9c5bf0a1f..170631422 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -53,18 +53,19 @@ display: flex; &.with-rows { - flex-direction: column + flex-direction: column-reverse; } .antimodeMenu-row { display: flex; - height: 35px; + height: 100%; + width:100%; } .antimodeMenu-button { background-color: transparent; - width: 35px; - height: 35px; + width: 100px; + height: 100px; &.active { background-color: #121212; 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; + + } + } +} diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 5a27f74e5..46f7bc2e2 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -11,6 +11,8 @@ import { Utils } from "../../../../Utils"; import GestureOverlay from "../../GestureOverlay"; import { Doc } from "../../../../fields/Doc"; + + @observer export default class InkOptionsMenu extends AntimodeMenu { static Instance: InkOptionsMenu; @@ -23,6 +25,8 @@ export default class InkOptionsMenu extends AntimodeMenu { @observable _colorBtn = false; @observable _widthBtn = false; + + constructor(props: Readonly<{}>) { super(props); InkOptionsMenu.Instance = this; @@ -113,7 +117,7 @@ export default class InkOptionsMenu extends AntimodeMenu { title="Bezier changer" key="bezier" onPointerDown={e => this.changeBezier(e)} - style={ { backgroundColor:ActiveInkBezierApprox() ? "121212":"" } }> + style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}> B </button>; } @@ -126,7 +130,15 @@ export default class InkOptionsMenu extends AntimodeMenu { this.widthPicker, this.colorPicker, ]; - return this.getElement(buttons); + + const mobileButtons = [ + this.shapeButtons, + this.bezierButton, + this.widthPicker, + this.colorPicker, + ]; + + return (window.innerWidth < 1000 ? this.getElement(mobileButtons) : this.getElement(buttons)); } } Scripting.addGlobal(function activatePen(penBtn: any) { diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index f2914eaae..6cb8e3486 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -531,20 +531,20 @@ export class MobileInterface extends React.Component { const button = document.getElementById("inkButton") as HTMLElement; // const color = InkingControl.Instance.selectedColor; const color = "lightpink"; - button.style.backgroundColor = this._ink ? "white" : color; + button.style.backgroundColor = this._ink ? "white" : "black"; button.style.color = this._ink ? "black" : "white"; if (!this._ink) { console.log("INK IS ACTIVE"); // InkingControl.Instance.switchTool(InkTool.Pen); Doc.SetSelectedTool(InkTool.Pen); - InkOptionsMenu.Instance.jumpTo(300, 300); + //InkOptionsMenu.Instance.jumpTo(300, 300); this._ink = true; } else { console.log("INK IS INACTIVE"); // InkingControl.Instance.switchTool(InkTool.None); Doc.SetSelectedTool(InkTool.None); - InkOptionsMenu.Instance.fadeOut(true); + //InkOptionsMenu.Instance.fadeOut(true); this._ink = false; } } @@ -552,7 +552,11 @@ export class MobileInterface extends React.Component { inkMenu = () => { if (this._activeDoc._viewType === "docking") { if (this._ink) { - return <InkOptionsMenu /> + console.log("here"); + return <div className="colorSelector"> + <InkOptionsMenu /> + </div> + } } } @@ -844,9 +848,8 @@ export class MobileInterface extends React.Component { {this.drawInk()} {this.uploadAudioButton()} {/* {this.colorTool()} */} - {this.inkMenu()} - <InkOptionsMenu /> </div> + {this.inkMenu()} <GestureOverlay> {this.displayWorkspaces()} {this.renderDefaultContent()} diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index da1e9d951..8b68109d0 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -334,12 +334,17 @@ body { top: -450px; } -.toolbar .colorSelector { +.colorSelector { + position: absolute; + top: 550px; + left: 300px; + transform: translate(-50%, 0); + z-index: 100; display: inline-flex; width: max-content; - padding: 5px; height: max-content; pointer-events: all; + font-size: 90px; } .widthSelector { |