Merge pull request #211 from Pattern-Projector/beta

Beta

Author: courtneypattison

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.1] - 2024-04-15
+
 ### Added
 
 - Redirect to calibration page when full screen mode is changed or window is moved/resized when projecting
@@ -49,4 +51,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Press and hold calibration corners to slow down movement
 
 [unreleased]: https://github.com/Pattern-Projector/pattern-projector/compare/main...beta
+[1.0.1]: https://github.com/Pattern-Projector/pattern-projector/releases/tag/v1.0.1
 [1.0.0]: https://github.com/Pattern-Projector/pattern-projector/releases/tag/v1.0.0

app/[locale]/calibrate/page.tsx

@@ -395,7 +395,7 @@ export default function Page() {
             }
             layers={layers}
             setLayers={setLayers}
-            className={`${menuStates.stitch ? "top-32" : "top-20"} overflow-scroll`}
+            className={`${menuStates.stitch ? "top-32" : "top-20"}`}
           />
           {layers.size && !menuStates.layers ? (
             <Tooltip

app/[locale]/globals.css

@@ -1,3 +1,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .scrollbar::-webkit-scrollbar {
+    width: 10px;
+    height: 0px;
+  }
+
+  .scrollbar::-webkit-scrollbar-track {
+    border-radius: 100vh;
+    background: rgb(220, 220, 220, 0.2);
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    background: #9ca3af;
+    border-radius: 100vh;
+    border: 1px solid #9ca3af;
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+  }
+}

app/_components/layer-menu.tsx

@@ -1,7 +1,8 @@
 import { Layer } from "@/_lib/interfaces/layer";
 import { Dispatch, SetStateAction, useMemo } from "react";
 import { IconButton } from "@/_components/buttons/icon-button";
-import CloseIcon from "@/_icons/close-icon";
+import { useTranslations } from "next-intl";
+import KeyboardArrowLeftIcon from "@/_icons/keyboard-arrow-left";
 
 export default function LayerMenu({
   className,
@@ -16,6 +17,8 @@ export default function LayerMenu({
   visible: boolean;
   setVisible: (visible: boolean) => void;
 }) {
+  const t = useTranslations("LayerMenu");
+
   function handleOnChange(key: string, layer: Layer) {
     layer.visible = !layer.visible;
     setLayers(new Map(layers.set(key, layer)));
@@ -36,53 +39,50 @@ export default function LayerMenu({
   }
 
   return (
-    <menu
-      style={{ height: "calc(100vh - 19rem)" }}
-      className={`${className} ${visible ? "left-0" : "-left-60"} w-48 text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-black border border-gray-200 dark:border-gray-700 border-top-0 absolute z-50 transition-all duration-700`}
+    <div
+      className={`${className} ${visible ? "left-0" : "-left-60"} w-48 ${layers.size > 0 && layers.size * 40 < 200 ? "h-fit" : "h-[calc(100vh-12rem)]"}  text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-black border border-gray-200 dark:border-gray-700 border-top-0 absolute z-50 transition-all duration-700`}
     >
-      <li
+      <h1
         key="global"
-        className="w-full border-b border-gray-200 dark:border-gray-700 rounded-t-lg"
+        className="w-fullrounded-t-lg border-b border-gray-200 dark:border-gray-700"
       >
-        <div className="flex items-center justify-between ps-3">
-          <div className="flex items-center">
-            <input
-              id="global"
-              type="checkbox"
-              className="w-4 h-4 accent-purple-600 bg-gray-100 border-gray-300 dark:border-gray-700 rounded focus:ring-blue-500 dark:focus:ring-blue-800"
-              checked={globalCheck}
-              style={{ width: 14 }}
-              onChange={(e) => handleGlobalChange(e.target.checked)}
-            />
-            <h6 className="ml-2">Layers</h6>
-          </div>
+        <div className="flex items-center space-between">
           <IconButton onClick={() => setVisible(false)}>
-            <CloseIcon ariaLabel="close" />
+            <KeyboardArrowLeftIcon ariaLabel="close" />
           </IconButton>
+          <h6 className="ml-2">{t("title")}</h6>
+          <button
+            className="text-purple-600 ml-auto px-4 hover:text-purple-800 "
+            onClick={() => handleGlobalChange(!globalCheck)}
+          >
+            {globalCheck ? t("hideAll") : t("showAll")}
+          </button>
         </div>
-      </li>
-      {[...layers.entries()].map((e) => (
-        <li
-          key={e[0]}
-          className="w-full border-b border-gray-200 dark:border-gray-700 rounded-t-lg"
-        >
-          <div className="flex items-center ps-3">
-            <input
-              id={e[0]}
-              type="checkbox"
-              className="w-4 h-4 accent-purple-600 bg-gray-100 border-gray-300 dark:border-gray-700 rounded focus:ring-blue-500 dark:focus:ring-blue-800"
-              checked={e[1].visible}
-              onChange={() => handleOnChange(e[0], e[1])}
-            ></input>
-            <label
-              htmlFor={e[0]}
-              className="w-full py-3 ms-2 text-sm font-medium text-gray-90"
-            >
-              {e[1].name}
-            </label>
-          </div>
-        </li>
-      ))}
-    </menu>
+      </h1>
+
+      <menu
+        className={`w-full ${layers.size > 0 && layers.size * 40 > 200 ? "h-[calc(100vh-15rem)] overflow-y-auto scrollbar" : ""}`}
+      >
+        {[...layers.entries()].map((e) => (
+          <li key={e[0]} className="w-full  rounded-t-lg">
+            <div className="flex items-center ps-3">
+              <input
+                id={e[0]}
+                type="checkbox"
+                className="w-4 h-4 accent-purple-600  rounded focus:ring-blue-500 dark:focus:ring-blue-800"
+                checked={e[1].visible}
+                onChange={() => handleOnChange(e[0], e[1])}
+              ></input>
+              <label
+                htmlFor={e[0]}
+                className="w-full py-3 ms-2 text-sm font-medium text-gray-90"
+              >
+                {e[1].name}
+              </label>
+            </div>
+          </li>
+        ))}
+      </menu>
+    </div>
   );
 }

messages/en.json

@@ -189,6 +189,11 @@
     "horizontal": "Horizontal",
     "vertical": "Vertical"
   },
+  "LayerMenu": {
+    "title": "Layers",
+    "showAll": "Show all",
+    "hideAll": "Hide all"
+  },
   "MovementPad": {
     "up": "Up",
     "down": "Down",

messages/es.json

@@ -182,7 +182,8 @@
         "measureOn": "Empezar medición",
         "measureOff": "Terminar medición",
         "showMovement": "Mostrar herramienta mover",
-        "hideMovement": "Ocultar herramienta mover"
+        "hideMovement": "Ocultar herramienta mover",
+        "fullScreenChange": "Por favor, asegúrese de que la calibración es correcta. Debe calibrar en modo de pantalla completa si desea proyectar en pantalla completa."
     },
     "StitchMenu": {
         "columnCount": "Columnas",