Refactor timers UI

NoelDeMartin · Jan 2, 2025 · a05eaf2 · a05eaf2
1 parent 4cf0e2f
commit a05eaf2
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 89 deletions.
diff --git a/cypress/integration/kitchen.spec.ts b/cypress/integration/kitchen.spec.ts
@@ -48,7 +48,7 @@ describe('Kitchen', () => {
         cy.see('Pa amb tomàquet');
     });
 
-    it('Sets up timers', () => {
+    it('Uses timers', () => {
         // Arrange
         cy.press('Pa amb tomàquet');
         cy.press('Let\'s cook!');
@@ -64,7 +64,7 @@ describe('Kitchen', () => {
             cy.get('input').clear().type('3');
         });
         cy.press('Create');
-        cy.press('Play');
+        cy.press('Start');
         cy.see('Pause');
         cy.ariaLabel('Close the modal').click();
         cy.press('Close the kitchen');

diff --git a/src/lang/ca.yaml b/src/lang/ca.yaml
@@ -368,7 +368,7 @@ kitchen:
 
 timers:
     title: Temporitzadors
-    description: Aquí pots preparar temporitzadors per assegurar-te que les teves receptes es cuinen a la perfecció.
+    description: Fes servir temporitzadors per assegurar-te que les teves receptes es cuinen a la perfecció.
     show: Mostra temporitzadors
     add: Afegir temporizador
     play: Començar
@@ -388,7 +388,7 @@ timers:
       submit: Crear
     timeout:
       title: S'ha acabat el temps!
-      description: "**{name}** ha acabat, assegura't de mirar com va el plat!"
+      description: "**{name}** ha acabat, mira com va el plat!"
       stop: Parar temporitzador
 
 startupCrash:

diff --git a/src/lang/en.yaml b/src/lang/en.yaml
@@ -359,10 +359,10 @@ kitchen:
 
   timers:
     title: Timers
-    description: If you need it, you can set some timers to make sure that something is cooked to perfection.
+    description: Use timers to make sure that your recipes are cooked to perfection.
     show: Show timers
     add: Add timer
-    play: Play
+    play: Start
     pause: Pause
     resume: Resume
     stop: Stop
@@ -379,7 +379,7 @@ kitchen:
       submit: Create
     timeout:
       title: Time's up!
-      description: "**{name}** has finished, make sure you check out how the dish is doing!"
+      description: "**{name}** has finished, check out how the dish is doing!"
       stop: Stop timer
 
 startupCrash:

diff --git a/src/lang/es.yaml b/src/lang/es.yaml
@@ -359,7 +359,7 @@ kitchen:
 
   timers:
     title: Temporizadores
-    description: Aquí puedes preparar temporizadores para asegurarte que tus recetas se cocinan a la perfección.
+    description: Utiliza temporizadores para asegurarte que tus recetas se cocinan a la perfección.
     show: Muestra temporizadores
     add: Añade temporizador
     play: Empezar
@@ -379,7 +379,7 @@ kitchen:
       submit: Crear
     timeout:
       title: ¡Se ha acabado el tiempo!
-      description: "**{name}** ha acabado, ¡asegúrate de mirar cómo va el plato!"
+      description: "**{name}** ha acabado, ¡mira cómo va el plato!"
       stop: Parar temporizador
 
 startupCrash:

diff --git a/src/routing/pages/kitchen/components/KitchenTimer.vue b/src/routing/pages/kitchen/components/KitchenTimer.vue
@@ -1,14 +1,75 @@
 <template>
-    <div class="flex p-4 rounded flex-col bg-gray-100">
-        <div class="flex flex-row justify-between" :class="{ 'text-red-700': timer.isOverTime() }">
-            <h3 class="font-semibold">
-                {{ timer.name }}
-            </h3>
-            <span class="text-sm">
-                {{ time }}
-            </span>
+    <div class="flex flex-col">
+        <div class="flex justify-between">
+            <div class="flex flex-col" :class="{ 'text-red-700': timer.isOverTime() }">
+                <h3 class="font-semibold">
+                    {{ timer.name }}
+                </h3>
+                <span class="text-sm">
+                    {{ time }}
+                </span>
+            </div>
+            <div class="flex space-x-2 self-center mt-1">
+                <CoreButton
+                    v-if="timer.isPaused()"
+                    secondary
+                    rounded
+                    class="self-end"
+                    @click="timer.stop()"
+                >
+                    <i-tabler-player-stop-filled class="w-4 h-4" aria-hidden="true" />
+                    <span class="ml-1 text-xs uppercase font-medium">
+                        {{ $t('kitchen.timers.stop') }}
+                    </span>
+                </CoreButton>
+                <CoreButton
+                    v-if="!timer.isRunning()"
+                    secondary
+                    class="self-end"
+                    @click="timer.play()"
+                >
+                    <i-pepicons-play class="w-4 h-4" aria-hidden="true" />
+                    <span class="ml-1 text-xs uppercase font-medium">
+                        {{ timer.isPaused() ? $t('kitchen.timers.resume') : $t('kitchen.timers.play') }}
+                    </span>
+                </CoreButton>
+                <CoreButton
+                    v-else-if="!timer.isOverTime()"
+                    secondary
+                    class="self-end"
+                    @click="timer.pause()"
+                >
+                    <i-pepicons-pause class="w-4 h-4" aria-hidden="true" />
+                    <span class="ml-1 text-xs uppercase font-medium">
+                        {{ $t('kitchen.timers.pause') }}
+                    </span>
+                </CoreButton>
+                <CoreButton
+                    v-else
+                    secondary
+                    class="self-end"
+                    @click="timer.stop()"
+                >
+                    <i-tabler-player-stop-filled class="w-4 h-4" aria-hidden="true" />
+                    <span class="ml-1 text-xs uppercase font-medium">
+                        {{ $t('kitchen.timers.stop') }}
+                    </span>
+                </CoreButton>
+                <CoreButton
+                    secondary
+                    rounded
+                    class="self-end"
+                    :title="$t('kitchen.timers.delete')"
+                    @click="$kitchen.removeTimer(timer)"
+                >
+                    <i-pepicons-trash class="w-4 h-4" aria-hidden="true" />
+                    <span class="sr-only">
+                        {{ $t('kitchen.timers.delete') }}
+                    </span>
+                </CoreButton>
+            </div>
         </div>
-        <div v-if="timer.hasStarted() && !timer.isOverTime()" class="w-full h-2 mt-2 rounded-full bg-gray-200 relative">
+        <div v-if="timer.hasStarted() && !timer.isOverTime()" class="mt-1 w-full h-2 rounded-full bg-gray-200 relative">
             <div
                 class="h-full rounded-full absolute left-0 top-0"
                 :style="`width: ${timer.getTimeLeft() * 100 / timer.duration}%`"
@@ -18,65 +79,6 @@
                 }"
             />
         </div>
-        <div class="flex space-x-2 mt-4 self-end">
-            <CoreButton
-                v-if="!timer.isRunning()"
-                secondary
-                class="self-end"
-                @click="timer.play()"
-            >
-                <i-pepicons-play class="w-4 h-4" aria-hidden="true" />
-                <span class="ml-1 text-xs uppercase font-medium">
-                    {{ timer.isPaused() ? $t('kitchen.timers.resume') : $t('kitchen.timers.play') }}
-                </span>
-            </CoreButton>
-            <CoreButton
-                v-else-if="!timer.isOverTime()"
-                secondary
-                class="self-end"
-                @click="timer.pause()"
-            >
-                <i-pepicons-pause class="w-4 h-4" aria-hidden="true" />
-                <span class="ml-1 text-xs uppercase font-medium">
-                    {{ $t('kitchen.timers.pause') }}
-                </span>
-            </CoreButton>
-            <CoreButton
-                v-else
-                secondary
-                class="self-end"
-                @click="timer.stop()"
-            >
-                <i-tabler-player-stop-filled class="w-4 h-4" aria-hidden="true" />
-                <span class="ml-1 text-xs uppercase font-medium">
-                    {{ $t('kitchen.timers.stop') }}
-                </span>
-            </CoreButton>
-            <CoreButton
-                v-if="timer.isPaused()"
-                secondary
-                rounded
-                class="self-end"
-                @click="timer.stop()"
-            >
-                <i-tabler-player-stop-filled class="w-4 h-4" aria-hidden="true" />
-                <span class="ml-1 text-xs uppercase font-medium">
-                    {{ $t('kitchen.timers.stop') }}
-                </span>
-            </CoreButton>
-            <CoreButton
-                secondary
-                rounded
-                class="self-end"
-                :title="$t('kitchen.timers.delete')"
-                @click="$kitchen.removeTimer(timer)"
-            >
-                <i-pepicons-trash class="w-4 h-4" aria-hidden="true" />
-                <span class="sr-only">
-                    {{ $t('kitchen.timers.delete') }}
-                </span>
-            </CoreButton>
-        </div>
     </div>
 </template>
 

diff --git a/src/routing/pages/kitchen/components/modals/KitchenTimeoutModal.vue b/src/routing/pages/kitchen/components/modals/KitchenTimeoutModal.vue
@@ -6,22 +6,18 @@
                 <span class="ml-2">{{ $t('kitchen.timers.timeout.title') }}</span>
             </div>
         </template>
-        <template #default="{ close }">
-            <CoreMarkdown class="text-gray-700" :text="$t('kitchen.timers.timeout.description', { name: timer.name })" />
-            <CoreButton class="self-center mt-2" @click="timer.stop(), close()">
-                <i-tabler-player-stop-filled class="w-4 h-4" aria-hidden="true" />
-                <span class="ml-1 text-xs uppercase font-medium">
-                    {{ $t('kitchen.timers.timeout.stop') }}
-                </span>
-            </CoreButton>
-        </template>
+        <CoreMarkdown class="text-gray-700" :text="$t('kitchen.timers.timeout.description', { name: timer.name })" />
     </AppModal>
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue';
+
 import { requiredObjectProp } from '@/framework/utils/vue';
 
 import type Timer from '@/models/Timer';
 
-defineProps({ timer: requiredObjectProp<Timer>() });
+const props = defineProps({ timer: requiredObjectProp<Timer>() });
+
+onMounted(() => props.timer.stop());
 </script>
diff --git a/src/routing/pages/kitchen/components/modals/KitchenTimersModal.vue b/src/routing/pages/kitchen/components/modals/KitchenTimersModal.vue
@@ -2,13 +2,13 @@
     <AppModal :title="$t('kitchen.timers.title')">
         <CoreMarkdown :text="$t('kitchen.timers.description')" class="text-gray-700 text-sm w-96" />
 
-        <ul v-if="$kitchen.timers.length > 0" class="mt-4 [&>li:not(:last-child)]:mb-3">
+        <ul v-if="$kitchen.timers.length > 0" class="mt-5 [&>li:not(:last-child)]:mb-5">
             <li v-for="(timer, index) of $kitchen.timers" :key="index">
                 <KitchenTimer :timer="timer" />
             </li>
         </ul>
 
-        <CoreButton secondary class="self-end mt-4" @click="$ui.openModal(KitchenAddTimerModal)">
+        <CoreButton class="self-center mt-6" secondary @click="$ui.openModal(KitchenAddTimerModal)">
             <i-pepicons-plus class="w-5 h-5" aria-hidden="true" />
             <span class="ml-1">{{ $t('kitchen.timers.add') }}</span>
         </CoreButton>