diff options
Diffstat (limited to 'src/client')
3 files changed, 55 insertions, 8 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) { |