From 38cd37cf746edfe6cc9efd4f068add5a55ca2435 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Mon, 12 May 2025 14:56:05 +0200
Subject: [PATCH] add: only delete swipe, edit on tap

Edit price cards on tap, only delete swipe exists, fixed dialogs, add ripple
---
 app/assets/styles/dialog.css          | 71 ++++++++++++++++++++++
 app/assets/styles/general.css         | 37 ------------
 app/assets/styles/toolbar.css         |  2 +-
 app/components/Pp/DeleteDialog.vue    | 10 +++-
 app/components/Pp/PriceCard.vue       | 13 ++---
 app/components/Pp/PriceCardDialog.vue | 84 +++++++++++++--------------
 nuxt.config.ts                        | 10 +++-
 package-lock.json                     | 10 ++++
 package.json                          |  1 +
 9 files changed, 145 insertions(+), 93 deletions(-)
 create mode 100644 app/assets/styles/dialog.css

diff --git a/app/assets/styles/dialog.css b/app/assets/styles/dialog.css
new file mode 100644
index 0000000..afa1065
--- /dev/null
+++ b/app/assets/styles/dialog.css
@@ -0,0 +1,71 @@
+
+dialog {
+    top: 50%;
+    left: 50%;
+    width: 100vw;
+    translate: -50% -50%;
+    border: none;
+    border-radius: var(--radius-default);
+    background: var(--color-lightest);
+    font-size: 1rem;
+    color: var(--color-darkest);
+    position: relative;
+
+    opacity: 0;
+    scale: 0;
+    transition:
+        opacity var(--transition-default) ease-out,
+        scale var(--transition-default) ease-out,
+        overlay var(--transition-default) ease-out allow-discrete,
+        display var(--transition-default) ease-out allow-discrete;
+
+    &[open] {
+        opacity: 1;
+        scale: 1;
+
+        &::backdrop {
+            background-color: rgb(0 0 0 / 25%);
+        }
+    }
+
+    &::backdrop {
+        z-index: 2000;
+        background-color: rgb(0 0 0 / 0%);
+        transition:
+            display var(--transition-default) allow-discrete,
+            overlay var(--transition-default) allow-discrete,
+            background-color var(--transition-default);
+    }
+
+    & > .wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    & header {
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--padding-default) var(--padding-default) 0;
+    }
+
+    main {
+        padding: 0 var(--padding-default);
+    }
+
+    & footer {
+        justify-content: space-between;
+        padding: 0 var(--padding-default) var(--padding-default);
+    }
+}
+
+@starting-style {
+    dialog[open] {
+        opacity: 0;
+        scale: 0;
+
+        &::backdrop {
+            background-color: rgb(0 0 0 / 0%);
+        }
+    }
+}
diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css
index ec07424..672acd2 100755
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@@ -171,41 +171,4 @@ body {
 .grow {
   flex-grow: 1;
   height: 10px;
-}
-
-dialog {
-  top: 50%;
-  left: 50%;
-  width: 100vw;
-  transform: translate(-50%, -50%);
-  border: none;
-  border-radius: var(--radius-default);
-  background: var(--color-lightest);
-  font-size: 1rem;
-  color: var(--color-darkest);
-
-  & > .wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  & header {
-    justify-content: space-between;
-    align-items: center;
-    padding: var(--padding-default) var(--padding-default) 0;
-  }
-
-  main {
-    padding: 0 var(--padding-default);
-  }
-
-  & footer {
-    justify-content: space-between;
-    padding: 0 var(--padding-default) var(--padding-default);
-  }
-
-  &::backdrop {
-    background: rgba(0, 0, 0, 0.5);
-  }
 }
\ No newline at end of file
diff --git a/app/assets/styles/toolbar.css b/app/assets/styles/toolbar.css
index a634889..7a39e32 100755
--- a/app/assets/styles/toolbar.css
+++ b/app/assets/styles/toolbar.css
@@ -4,7 +4,7 @@
     background: var(--color-main-darkest);
     position: sticky;
     bottom: 0;
-    z-index: 100;
+    z-index: 1000;
     box-shadow: var(--box-shadow-upper);
 
     & > .Button {
diff --git a/app/components/Pp/DeleteDialog.vue b/app/components/Pp/DeleteDialog.vue
index b6101ed..b7d5388 100644
--- a/app/components/Pp/DeleteDialog.vue
+++ b/app/components/Pp/DeleteDialog.vue
@@ -1,9 +1,9 @@
 <template>
   <dialog
     ref="dialog"
-    closedby="any"
+    closedby="none"
   >
-    <form method="dialog" class="wrapper">
+    <form method="dialog" class="wrapper" ref="wrapper">
       <header class="flex-row">
         Wirklich löschen?
         <PpButton class="round text">
@@ -35,5 +35,11 @@ type Props = {
 defineProps<Props>()
 defineEmits(['delete'])
 
+const dialog = useTemplateRef<HTMLDialogElement>('dialog')
+const wrapper = useTemplateRef<HTMLElement>('wrapper')
+
+onMounted(() => {
+  onClickOutside(wrapper, () => dialog.value?.close())
+})
 
 </script>
\ No newline at end of file
diff --git a/app/components/Pp/PriceCard.vue b/app/components/Pp/PriceCard.vue
index 2f18a4a..72acf14 100755
--- a/app/components/Pp/PriceCard.vue
+++ b/app/components/Pp/PriceCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="PriceCard roboto-condensed">
+  <article class="PriceCard roboto-condensed" v-ripple="{ color: 'rgba(0, 0, 0, 0.1)' }">
     <div class="bottom">
       <div class="bg-edit">
         <Icon class="icon" name="uil:pen" mode="svg" />
@@ -13,6 +13,7 @@
       class="top flex-col"
       :class="{ 'animated' : !isSwiping }"
       :style="{ left }"
+      @click="update"
     >
       <header>
         <div class="name-price">
@@ -20,10 +21,10 @@
           <span>{{ intl.format(+replaceComma(card.price))}}</span>
         </div>
         <div v-if="$device.isDesktop" class="flex-row gap-default">
-          <PpButton class="icon-button" @click="update()">
+          <PpButton class="icon-button" @click="update">
             <Icon class="icon" name="uil:pen" mode="svg" />
           </PpButton>
-          <PpButton class="icon-button" @click="deleteCard()">
+          <PpButton class="icon-button" @click="deleteCard">
             <Icon class="icon" name="uil:trash-alt" mode="svg" />
           </PpButton>
         </div>
@@ -78,14 +79,13 @@ const intl = Intl.NumberFormat('de-DE', {
 
 const { lengthX, direction, isSwiping } = useSwipe(top, {
   passive: true,
-  threshold: 30,
+  threshold: 20,
   onSwipe() {
     if (['down', 'up'].includes(direction.value)) return
-    left.value = `${-clamp(lengthX.value, -100, 100)}px`
+    left.value = `${-clamp(lengthX.value, 0, 100)}px`
   },
   onSwipeEnd() {
     if (['down', 'up'].includes(direction.value)) return
-    if (lengthX.value < -50) update()
     if (lengthX.value > 50) deleteCard()
     vibrate(100)
     left.value = '0'
@@ -98,7 +98,6 @@ const pps = computed(() => (ppr.value / +card.sheets) * 100)
 const ppl = computed(() => (pps.value / +card.layers) * 10)
 
 const update = () => emit('update')
-
 const deleteCard = () => emit('remove')
 
 defineExpose({
diff --git a/app/components/Pp/PriceCardDialog.vue b/app/components/Pp/PriceCardDialog.vue
index 07728d7..2d1493b 100644
--- a/app/components/Pp/PriceCardDialog.vue
+++ b/app/components/Pp/PriceCardDialog.vue
@@ -1,6 +1,6 @@
 <template>
-  <dialog ref="dialog" closedby="any">
-    <div class="wrapper">
+  <dialog ref="dialog" closedby="none">
+    <div class="wrapper" ref="wrapper">
       <form method="dialog">
         <header class="flex-row">
           {{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues hinzufügen' }}
@@ -81,38 +81,32 @@
 </template>
 
 <script setup lang="ts">
-import type { Card } from '../../../shared/Card';
+import type { Card } from '../../../shared/Card'
 
 type Props = {
-  currentCardIndex: number;
-  currentCard?: Card;
-};
+  currentCardIndex: number
+  currentCard?: Card
+}
 
-const { currentCardIndex, currentCard } = defineProps<Props>();
-const emit = defineEmits(['update']);
+const { currentCardIndex, currentCard } = defineProps<Props>()
+const emit = defineEmits(['update'])
 
-const dialog = useTemplateRef<HTMLDialogElement>("dialog");
+const dialog = useTemplateRef<HTMLDialogElement>('dialog')
+const wrapper = useTemplateRef<HTMLElement>('wrapper')
 
 const checkPrice = () => {
-  if (!currentCard) {
-    return false;
-  }
-  if (currentCard.price.length === 0) {
-    return false;
-  }
-  const price = +replaceComma(currentCard.price);
-  return !isNaN(price);
-};
+  if (!currentCard) return false
+  if (currentCard.price.length === 0) return false
+
+  const price = +replaceComma(currentCard.price)
+  return !isNaN(price)
+}
 
 const checkIfInteger = (toBeNumber: string) => {
-  if (toBeNumber.length === 0) {
-    return false;
-  }
-  if (toBeNumber.includes(",") || toBeNumber.includes(".")) {
-    return false;
-  }
-  return !isNaN(+toBeNumber);
-};
+  if (toBeNumber.length === 0) return false
+  if (toBeNumber.includes(',') || toBeNumber.includes(',')) return false
+  return !isNaN(+toBeNumber)
+}
 
 const validFields = reactive({
   name: true,
@@ -120,32 +114,32 @@ const validFields = reactive({
   roles: true,
   sheets: true,
   layers: true,
-});
+})
 
 const validate = () => {
-  if (!currentCard) {
-    return;
-  }
+  if (!currentCard) return
 
-  validFields.name = currentCard.name.length > 0;
-  validFields.price = checkPrice();
-  validFields.roles = checkIfInteger(currentCard.roles);
-  validFields.sheets = checkIfInteger(currentCard.sheets);
-  validFields.layers = checkIfInteger(currentCard.layers);
+  validFields.name = currentCard.name.length > 0
+  validFields.price = checkPrice()
+  validFields.roles = checkIfInteger(currentCard.roles)
+  validFields.sheets = checkIfInteger(currentCard.sheets)
+  validFields.layers = checkIfInteger(currentCard.layers)
 
   if (Object.values(validFields).every((value) => value)) {
-    emit('update');
-    dialog.value?.close();
+    emit('update')
+    dialog.value?.close()
   }
-};
+}
 
 onMounted(() => {
   dialog.value?.addEventListener('close', () => {
-    validFields.name = true;
-    validFields.price = true;
-    validFields.roles = true;
-    validFields.sheets = true;
-    validFields.layers = true;
-  });
-});
+    validFields.name = true
+    validFields.price = true
+    validFields.roles = true
+    validFields.sheets = true
+    validFields.layers = true
+  })
+
+  onClickOutside(wrapper, () => dialog.value?.close())
+})
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 418b0d8..f1fe86c 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -36,7 +36,14 @@ export default defineNuxtConfig({
     '/privacy': { prerender: true },
   },
 
-  modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device', '@nuxt/fonts', 'nuxt-seo-utils'],
+  modules: [
+    '@nuxt/icon',
+    '@vueuse/nuxt',
+    '@nuxtjs/device',
+    '@nuxt/fonts',
+    'nuxt-seo-utils',
+    'nuxt-ripple',
+  ],
 
   css : [
     './app/assets/styles/general.css',
@@ -49,6 +56,7 @@ export default defineNuxtConfig({
     './app/assets/styles/form/search.css',
     './app/assets/styles/toolbar.css',
     './app/assets/styles/page.css',
+    './app/assets/styles/dialog.css',
   ],
 
   site: {
diff --git a/package-lock.json b/package-lock.json
index adae26e..69855e7 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@nuxtjs/device": "^3.2.4",
         "@vueuse/nuxt": "^13.1.0",
         "nuxt": "^3.16.2",
+        "nuxt-ripple": "^0.0.8",
         "nuxt-seo-utils": "^7.0.11",
         "vue": "latest",
         "vue-router": "latest"
@@ -9161,6 +9162,15 @@
         }
       }
     },
+    "node_modules/nuxt-ripple": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/nuxt-ripple/-/nuxt-ripple-0.0.8.tgz",
+      "integrity": "sha512-ellqn8+OXIS4SffFhIqZHSdTNQglAwGJ7B8R2ISR4+BauP360E7cfK6vr1FGqd40HyoeSLV03Z142bTey25hCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.14.1592"
+      }
+    },
     "node_modules/nuxt-seo-utils": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/nuxt-seo-utils/-/nuxt-seo-utils-7.0.11.tgz",
diff --git a/package.json b/package.json
index eb030f4..16b69d1 100755
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@nuxtjs/device": "^3.2.4",
     "@vueuse/nuxt": "^13.1.0",
     "nuxt": "^3.16.2",
+    "nuxt-ripple": "^0.0.8",
     "nuxt-seo-utils": "^7.0.11",
     "vue": "latest",
     "vue-router": "latest"