Create contex menu

src/client/next.config.js

@@ -13,7 +13,7 @@ module.exports = (phase, { defaultConfig }) => {
   return withPWA({
     reactStrictMode: true,
     pwa: {
-      dest: "src/public",
+      dest: "public",
       register: true,
       skipWaiting: true,
       runtimeCaching,

src/client/src/components/todos/todoItem.tsx

@@ -1,5 +1,5 @@
 import { Todo } from "@src/core/entities/todo";
-import { FC } from "react";
+import { FC, useState } from "react";
 import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
 
 interface TodoItemProps {
@@ -8,18 +8,41 @@ interface TodoItemProps {
   displayProject: boolean;
 }
 
-export const TodoItem: FC<TodoItemProps> = (props) => (
+export const TodoItem: FC<TodoItemProps> = (props) => {
-  <div className="py-3 border-b border-gray-300 dark:border-gray-600">
+  const [isHovering, setIsHovering] = useState(false);
-    <div className="flex items-center space-x-4">
+
-      <TodoCheckmark {...props} />
+  return (
-      <div className="flex flex-col md:flex-row flex-grow gap-0.5 md:gap-2 pr-6">
+    <div
-        <div className="flex-grow w-full break-all">{props.todo.title}</div>
+      className="py-3 border-b border-gray-300 dark:border-gray-600 relative"
-        {props.displayProject && props.todo.project && (
+      onMouseEnter={() => setIsHovering(true)}
-          <div className="text-gray-500 text-xs text-right whitespace-nowrap place-self-end">
+      onMouseLeave={() => setIsHovering(false)}
-            {props.todo.project}
+      onFocus={() => setIsHovering(true)}
+    >
+      <div className="flex items-center space-x-4">
+        <TodoCheckmark {...props} />
+        <div className="flex flex-col md:flex-row flex-grow gap-0.5 md:gap-2 pr-6">
+          <div className="flex-grow w-full break-all">{props.todo.title}</div>
+          <div>
+            {props.displayProject && props.todo.project && (
+              <div className="text-gray-500 text-xs text-right whitespace-nowrap place-self-end">
+                {props.todo.project}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div
+        className={`absolute left-full top-1/2 w-4 h-4  box-content p-2 rounded-md hover:bg-gray-300 active:bg-gray-400 transition group`}
+        style={{ transform: "translate(0px, -50%)" }}
+      >
+        {isHovering && (
+          <div className="flex flex-col justify-between h-full ">
+            <div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
+            <div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
+            <div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
           </div>
         )}
       </div>
     </div>
-  </div>
+  );
-);
+};

src/client/src/public/sw.js

@@ -1,128 +0,0 @@
-/**
- * Copyright 2018 Google Inc. All Rights Reserved.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *     http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// If the loader is already loaded, just stop.
-if (!self.define) {
-  const singleRequire = name => {
-    if (name !== 'require') {
-      name = name + '.js';
-    }
-    let promise = Promise.resolve();
-    if (!registry[name]) {
-      
-        promise = new Promise(async resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = name;
-            document.head.appendChild(script);
-            script.onload = resolve;
-          } else {
-            importScripts(name);
-            resolve();
-          }
-        });
-      
-    }
-    return promise.then(() => {
-      if (!registry[name]) {
-        throw new Error(`Module ${name} didn’t register its module`);
-      }
-      return registry[name];
-    });
-  };
-
-  const require = (names, resolve) => {
-    Promise.all(names.map(singleRequire))
-      .then(modules => resolve(modules.length === 1 ? modules[0] : modules));
-  };
-  
-  const registry = {
-    require: Promise.resolve(require)
-  };
-
-  self.define = (moduleName, depsNames, factory) => {
-    if (registry[moduleName]) {
-      // Module is already loading or loaded.
-      return;
-    }
-    registry[moduleName] = Promise.resolve().then(() => {
-      let exports = {};
-      const module = {
-        uri: location.origin + moduleName.slice(1)
-      };
-      return Promise.all(
-        depsNames.map(depName => {
-          switch(depName) {
-            case "exports":
-              return exports;
-            case "module":
-              return module;
-            default:
-              return singleRequire(depName);
-          }
-        })
-      ).then(deps => {
-        const facValue = factory(...deps);
-        if(!exports.default) {
-          exports.default = facValue;
-        }
-        return exports;
-      });
-    });
-  };
-}
-define("./sw.js",['./workbox-1ffba242'], (function (workbox) { 'use strict';
-
-  /**
-  * Welcome to your Workbox-powered service worker!
-  *
-  * You'll need to register this file in your web app.
-  * See https://goo.gl/nhQhGp
-  *
-  * The rest of the code is auto-generated. Please don't update this file
-  * directly; instead, make changes to your Workbox build configuration
-  * and re-run your build process.
-  * See https://goo.gl/2aRDsh
-  */
-
-  importScripts();
-  self.skipWaiting();
-  workbox.clientsClaim();
-  workbox.registerRoute("/", new workbox.NetworkFirst({
-    "cacheName": "start-url",
-    plugins: [{
-      cacheWillUpdate: async ({
-        request,
-        response,
-        event,
-        state
-      }) => {
-        if (response && response.type === 'opaqueredirect') {
-          return new Response(response.body, {
-            status: 200,
-            statusText: 'OK',
-            headers: response.headers
-          });
-        }
-
-        return response;
-      }
-    }]
-  }), 'GET');
-  workbox.registerRoute(/.*/i, new workbox.NetworkOnly({
-    "cacheName": "dev",
-    plugins: []
-  }), 'GET');
-
-}));
-//# sourceMappingURL=sw.js.map

src/client/src/public/sw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sw.js","sources":["../../../../../../../../tmp/d834a3f9adf9c35cc0c18ab05fee3bd3/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/kjuulh/git/git.front.kjuulh.io/kjuulh/todo/src/client/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/home/kjuulh/git/git.front.kjuulh.io/kjuulh/todo/src/client/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/kjuulh/git/git.front.kjuulh.io/kjuulh/todo/src/client/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/kjuulh/git/git.front.kjuulh.io/kjuulh/todo/src/client/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({request, response, event, state}) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, {status: 200, statusText: 'OK', headers: response.headers}); } return response; } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGiK;EACjK;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;EAUbC,IAAI,CAACC,WAAL;AAEAC,sBAAyB;AAIzBC,uBAA6B,CAAC,GAAD,EAAM,IAAIC,oBAAJ,CAAoC;EAAE,eAAY,WAAd;EAA2BC,EAAAA,OAAO,EAAE,CAAC;EAAEC,IAAAA,eAAe,EAAE,OAAO;EAACC,MAAAA,OAAD;EAAUC,MAAAA,QAAV;EAAoBC,MAAAA,KAApB;EAA2BC,MAAAA;EAA3B,KAAP,KAA6C;EAAE,UAAIF,QAAQ,IAAIA,QAAQ,CAACG,IAAT,KAAkB,gBAAlC,EAAoD;EAAE,eAAO,IAAIC,QAAJ,CAAaJ,QAAQ,CAACK,IAAtB,EAA4B;EAACC,UAAAA,MAAM,EAAE,GAAT;EAAcC,UAAAA,UAAU,EAAE,IAA1B;EAAgCC,UAAAA,OAAO,EAAER,QAAQ,CAACQ;EAAlD,SAA5B,CAAP;EAAiG;;EAAC,aAAOR,QAAP;EAAkB;EAA5O,GAAD;EAApC,CAApC,CAAN,EAAmU,KAAnU,CAA7B;AACAL,uBAA6B,CAAC,KAAD,EAAQ,IAAIc,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBZ,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}