add mobile templating buttons (fixes #48)

packages/client/src/components/CanvasWrapper.tsx

@@ -6,7 +6,7 @@ import { RendererContext } from "@sc07-canvas/lib/src/renderer/RendererContext";
 import { ViewportMoveEvent } from "@sc07-canvas/lib/src/renderer/PanZoom";
 import throttle from "lodash.throttle";
 import { IPosition } from "@sc07-canvas/lib/src/net";
-import { Template } from "./Template";
+import { Template } from "./Templating/Template";
 import { IRouterData, Router } from "../lib/router";
 import { KeybindManager } from "../lib/keybinds";
 import { BlankOverlay } from "./Overlay/BlankOverlay";

packages/client/src/components/Settings/TemplateSettings.tsx

@@ -15,6 +15,8 @@ export const TemplateSettings = () => {
     setY,
     opacity,
     setOpacity,
+    showMobileTools,
+    setShowMobileTools,
   } = useTemplateContext();
 
   return (
@@ -68,6 +70,13 @@ export const TemplateSettings = () => {
           onChange={(v) => setOpacity(v as number)}
           getValue={(v) => v + "%"}
         />
+        <Switch
+          className="md:hidden"
+          isSelected={showMobileTools}
+          onValueChange={setShowMobileTools}
+        >
+          Show Mobile Tools
+        </Switch>
       </section>
     </>
   );

packages/client/src/components/Templating/MobileTemplateButtons.tsx

@@ -0,0 +1,18 @@
+import { Switch } from "@nextui-org/react";
+import { useTemplateContext } from "../../contexts/TemplateContext";
+
+export const MobileTemplateButtons = () => {
+  const { enable, setEnable, url } = useTemplateContext();
+
+  return (
+    <div className="md:hidden toolbar-box top-[-10px] right-[10px]">
+      {url && (
+        <div className="md:hidden rounded-xl bg-gray-300 p-2">
+          <Switch isSelected={enable} onValueChange={setEnable}>
+            Template
+          </Switch>
+        </div>
+      )}
+    </div>
+  );
+};

packages/client/src/components/Templating/Template.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
-import { Template as TemplateCl } from "../lib/template";
-import { useAppContext } from "../contexts/AppContext";
-import { useTemplateContext } from "../contexts/TemplateContext";
-import { Canvas } from "../lib/canvas";
+import { Template as TemplateCl } from "../../lib/template";
+import { useAppContext } from "../../contexts/AppContext";
+import { useTemplateContext } from "../../contexts/TemplateContext";
+import { Canvas } from "../../lib/canvas";
 
 export const Template = () => {
   const { config } = useAppContext();

packages/client/src/components/Toolbar/CanvasMeta.tsx

@@ -74,7 +74,7 @@ export const CanvasMeta = () => {
 
   return (
     <>
-      <div id="canvas-meta">
+      <div id="canvas-meta" className="toolbar-box">
         {canvasPosition && (
           <span>
             <button className="btn-link" onClick={onOpen}>

packages/client/src/components/Toolbar/ToolbarWrapper.tsx

@@ -1,4 +1,6 @@
 import { useAppContext } from "../../contexts/AppContext";
+import { useTemplateContext } from "../../contexts/TemplateContext";
+import { MobileTemplateButtons } from "../Templating/MobileTemplateButtons";
 import { CanvasMeta } from "./CanvasMeta";
 import { Palette } from "./Palette";
 import { UndoButton } from "./UndoButton";
@@ -8,6 +10,7 @@ import { UndoButton } from "./UndoButton";
  */
 export const ToolbarWrapper = () => {
   const { config } = useAppContext();
+  const { showMobileTools } = useTemplateContext();
 
   if (!config) return <></>;
 
@@ -15,6 +18,7 @@ export const ToolbarWrapper = () => {
     <div id="toolbar">
       <CanvasMeta />
       <UndoButton />
+      {showMobileTools && <MobileTemplateButtons />}
 
       <Palette />
     </div>

packages/client/src/contexts/TemplateContext.tsx

@@ -30,12 +30,15 @@ interface ITemplate {
   y: number;
   opacity: number;
 
+  showMobileTools: boolean;
+
   setEnable(v: boolean): void;
   setURL(v?: string): void;
   setWidth(v?: number): void;
   setX(v: number): void;
   setY(v: number): void;
   setOpacity(v: number): void;
+  setShowMobileTools(v: boolean): void;
 }
 
 const templateContext = createContext<ITemplate>({} as any);
@@ -52,6 +55,7 @@ export const TemplateContext = ({ children }: PropsWithChildren) => {
   const [x, setX] = useState(routerData.template?.x || 0);
   const [y, setY] = useState(routerData.template?.y || 0);
   const [opacity, setOpacity] = useState(100);
+  const [showMobileTools, setShowMobileTools] = useState(true);
 
   const initAt = useRef<number>();
 
@@ -108,6 +112,8 @@ export const TemplateContext = ({ children }: PropsWithChildren) => {
         setY,
         opacity,
         setOpacity,
+        showMobileTools,
+        setShowMobileTools,
       }}
     >
       {children}

packages/client/src/style.scss

@@ -83,15 +83,18 @@ header#main-header {
   z-index: 2;
 }
 
-#canvas-meta {
+.toolbar-box {
   position: absolute;
+  transform: translateY(-100%);
+}
+
+#canvas-meta {
   top: -10px;
   left: 10px;
   background-color: rgba(0, 0, 0, 0.5);
   color: #fff;
   border-radius: 5px;
   padding: 5px;
-  transform: translateY(-100%);
 
   display: flex;
   flex-direction: column;
@@ -200,5 +203,5 @@ main {
 }
 
 @import "./components/Toolbar/Palette.scss";
-@import "./components/Template.scss";
+@import "./components/Templating/Template.scss";
 @import "./board.scss";