fix: update cocktail dialog design and add new images (#455)

* fix: update cocktail dialog design and add new images

* fix

* chore: update version

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.moimob.drinkable"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 14500
-        versionName "1.45.0"
+        versionCode 14501
+        versionName "1.45.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

fastlane/metadata/android/en-US/changelogs/14501.txt

@@ -0,0 +1,2 @@
+• Updated cocktail images
+• Updated cocktail dialog design

src/components/dialogs/cocktail-dialog/cocktail-dialog.html

@@ -3,7 +3,7 @@
         <header class="bg-base-300 h-12 w-full z-10 flex items-center p-2">
             <icon-arrow-back
                 click.trigger="controller.cancel()"
-                class="h-8 w-8 mr-1"
+                class="h-6 w-6 mr-1"
                 data-cy="close-dialog"></icon-arrow-back>
 
             <h4 if.bind="!isEditMode">${cocktail.name}</h4>
@@ -16,16 +16,26 @@ <h4 if.bind="!isEditMode">${cocktail.name}</h4>
                     class.bind="nameErrors.length ? 'input-error' : ''"
                     data-cy="cocktail-name" />
             </div>
-
-            <icon-heart
-                if.bind="!isEditMode"
-                click.delegate="toggleHeart()"
-                class="h-8 w-8 ${cocktail.isFavorite ? 'text-primary fill-secondary' : 'fill-base-200'}"></icon-heart>
-
-            <icon-pencil
-                if.bind="!isEditMode && cocktail.id.includes('x-')"
-                click.delegate="editCocktail()"
-                class="h-8 w-8"></icon-pencil>
+            <details show.bind="!isEditMode" ref="detailsElement" class="dropdown dropdown-end h-8">
+                <summary class="btn btn-sm btn-ghost px-1">
+                    <icon-menu class="h-6 w-6"></icon-menu>
+                </summary>
+                <ul class="p-2 shadow menu dropdown-content z-[1] bg-base-200 rounded-box w-52">
+                    <li if.bind="cocktail.id.includes('x-')">
+                        <a click.delegate="editCocktail()">
+                            <icon-pencil class="h-5 w-5"></icon-pencil>
+                            <p t="edit-cocktail"></p>
+                        </a>
+                    </li>
+                    <li>
+                        <a click.delegate="toggleHeart()">
+                            <icon-heart
+                                class="h-5 w-5 ${cocktail.isFavorite ? 'text-primary fill-secondary' : 'fill-base-200'}"></icon-heart>
+                            <p t="${cocktail.isFavorite ? 'remove-from-favorites' : 'add-to-favorites'}"></p>
+                        </a>
+                    </li>
+                </ul>
+            </details>
 
             <svg
                 if.bind="isEditMode"

src/components/dialogs/cocktail-dialog/cocktail-dialog.ts

@@ -50,6 +50,8 @@ export class CocktailDialog {
     public isBusy: boolean;
     public showAddIngredientTag = false;
 
+    public detailsElement: HTMLElement;
+
     private _ingredients: Ingredient[] = [];
     private _clickedIngredientIndex;
 
@@ -275,6 +277,8 @@ export class CocktailDialog {
     }
 
     editCocktail() {
+        this.detailsElement?.attributes?.removeNamedItem('open');
+
         this.isEditMode = true;
 
         this.extendedIngredientGroup.forEach(element => {

src/components/icons/icon-menu.html

@@ -0,0 +1,11 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-miterlimit="10"
+            stroke-width="32"
+            d="M80 160h352M80 256h352M80 352h352" />
+    </svg>
+</template>

src/components/index.ts

@@ -34,6 +34,7 @@ export function configure(config: FrameworkConfiguration) {
         PLATFORM.moduleName('./add-ingredient-component/add-ingredient-component'),
         PLATFORM.moduleName('./copy-to-clipboard/copy-to-clipboard'),
         PLATFORM.moduleName('./icons/icon-arrow-forward.html'),
-        PLATFORM.moduleName('./icons/icon-chevron-forward.html')
+        PLATFORM.moduleName('./icons/icon-chevron-forward.html'),
+        PLATFORM.moduleName('./icons/icon-menu.html')
     ]);
 }

src/data/cocktail-data.ts

@@ -229,7 +229,8 @@ const cocktails: StaticCocktail[] = [
     },
     {
         id: '15',
-        imageSrc: 'images/placeholder.jpg',
+        imageSrc: 'images/frozen_margarita.png',
+        isImageAiGenerated: true,
         isImagePortrait: false,
         translation: 'frozen-margarita',
         category: DrinkCategory.Cocktail,
@@ -2287,8 +2288,9 @@ const cocktails: StaticCocktail[] = [
     },
     {
         id: '167',
-        imageSrc: 'images/angel_face.jpg',
+        imageSrc: 'images/angel_face.png',
         isImagePortrait: false,
+        isImageAiGenerated: true,
         translation: 'angel-face',
         category: DrinkCategory.Cocktail,
         ingredientGroups: [

src/domain/entities/cocktail.ts

@@ -7,6 +7,7 @@ export class StaticCocktail {
     translation: string;
     imageSrc: string;
     isImagePortrait: boolean;
+    isImageAiGenerated?: boolean;
     category: DrinkCategory;
     ingredientGroups: IngredientGroup[];
     tags: string[];

src/locales/en/translation.json

@@ -169,5 +169,6 @@
     "remove-from-favorites": "Remove from Favorites",
     "preferred-unit": "Preferred Unit",
     "christmas-title": "Christmas!",
-    "christmas-subtitle": "Explore christmas themed cocktails"
+    "christmas-subtitle": "Explore christmas themed cocktails",
+    "edit-cocktail": "Edit Cocktail"
 }

src/long-press-event.js

@@ -268,9 +268,6 @@
     }
 
     // hook events that clear a pending long press event
-    document.addEventListener('contextmenu', e => {
-        e.preventDefault();
-    });
     document.addEventListener(mouseUp, clearLongPressTimer, true);
     document.addEventListener(mouseLeave, clearLongPressTimer, true);
     document.addEventListener(mouseMove, mouseMoveHandler, true);