Improve spacing. Add clear Delete buttons in LabelList & PriceFormCard

openfoodfacts · Dec 15, 2024 · 5e9264f · 5e9264f
1 parent 5738534
commit 5e9264f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 17 deletions.
diff --git a/src/components/ContributionAssistantLabelList.vue b/src/components/ContributionAssistantLabelList.vue
@@ -7,7 +7,7 @@
       md="6"
       xl="4"
     >
-      <v-card class="pa-2">
+      <v-card>
         <v-card-text>
           <v-img style="height:150px" :src="label.imageSrc" />
         </v-card-text>
@@ -23,9 +23,10 @@
             </template>
             <template #append>
               <div class="justify-self-end">
-                <v-btn 
-                  density="compact"
+                <v-btn
                   color="error"
+                  variant="outlined"
+                  prepend-icon="mdi-delete"
                   @click="removeLabel(index)"
                 >
                   {{ $t('Common.Delete') }}

diff --git a/src/components/ContributionAssistantPriceFormCard.vue b/src/components/ContributionAssistantPriceFormCard.vue
@@ -1,27 +1,23 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
   <v-card
-    class="border-transparent mb-4"
     height="100%"
     title="Label"
     prepend-icon="mdi-tag-outline"
   >
-    <template #append>
-      <v-icon icon="mdi-delete" color="error" @click="removePrice()" />
-    </template>
     <v-divider />
-    <v-img
-      height="200px"
-      :src="productPriceForm.proofImage"
-      contain
-    />
     <v-card-text>
+      <v-img
+        class="mb-4"
+        height="200px"
+        :src="productPriceForm.proofImage"
+        contain
+      />
       <ProductInputRow :productForm="productPriceForm" :disableInitWhenSwitchingType="true" @filled="productFormFilled = $event" />
       <v-alert
         v-if="productPriceForm.type === 'PRODUCT'"
-        class="mb-2"
         type="info"
-        variant="plain"
+        variant="outlined"
       >
         {{ $t('ContributionAssistant.DetectedBarcode', { barcode: productPriceForm.detected_product_code }) }}
       </v-alert>
@@ -39,6 +35,17 @@
       </v-row>
       <PriceInputRow class="mt-0" :priceForm="productPriceForm" :hideCurrencyChoice="true" @filled="pricePriceFormFilled = $event" />
     </v-card-text>
+    <v-divider />
+    <v-card-actions>
+      <v-btn
+        color="error"
+        variant="outlined"
+        prepend-icon="mdi-delete"
+        @click="removePrice"
+      >
+        {{ $t('Common.Delete') }}
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 

diff --git a/src/views/ContributionAssistant.vue b/src/views/ContributionAssistant.vue
@@ -26,14 +26,14 @@
       </v-tabs-window-item>
       <v-tabs-window-item value="LabelsExtraction">
         <v-container>
-          <v-alert v-if="drawCanvasLoaded && !boundingBoxesFromServer.length && !proofWithBoundingBoxesLoading" type="info" variant="outlined" icon="mdi-alert">
+          <v-alert v-if="drawCanvasLoaded && !boundingBoxesFromServer.length && !proofWithBoundingBoxesLoading" class="mb-2" type="info" variant="outlined" icon="mdi-alert">
             {{ $t('ContributionAssistant.BoundingBoxesFromServerWarning') }}
             <br>
             <v-btn @click="loadProofWithBoundingBoxes(proofForm.id)">
               {{ $t('ContributionAssistant.FindBoundingBoxes') }}
             </v-btn>
           </v-alert>
-          <v-alert v-if="drawCanvasLoaded && proofWithBoundingBoxesLoading" type="info" variant="outlined" icon="mdi-magnify">
+          <v-alert v-if="drawCanvasLoaded && proofWithBoundingBoxesLoading" class="mb-2" type="info" variant="outlined" icon="mdi-magnify">
             {{ $t('ContributionAssistant.FindBoundingBoxesRunning') }}
             <v-progress-circular indeterminate />
           </v-alert>
@@ -88,7 +88,7 @@
                   {{ $t('ContributionAssistant.PriceAddConfirmationMessage', { numberOfPricesAdded: productPriceForms.length, date: proofForm.date, locationName: locationName }) }}
                 </p>
               </v-alert>
-              <v-btn class="mt-4" color="success" :loading="addPricesLoading" @click="addPrices">
+              <v-btn class="float-right mt-4" color="success" :loading="addPricesLoading" @click="addPrices">
                 {{ $t('Common.Upload') }}
               </v-btn>
             </v-col>
@@ -220,6 +220,7 @@ export default {
     },
     setProof(event) {
       const image = new Image()
+      // image.src = 'https://prices.openfoodfacts.org/img/0024/tM0NEloNU3.webp'
       image.src = `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${event.file_path}`
       image.crossOrigin = 'Anonymous'
       this.image = image