refactor(Price add): show red asterisk next to required field labels (#…

…978)
openfoodfacts · Oct 22, 2024 · 83c6cf5 · 83c6cf5
1 parent 07fa5d8
commit 83c6cf5
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 19 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,3 +1,8 @@
 .input-lowercase input {
     text-transform: lowercase;
 }
+
+.required:after {
+    content:" *";
+    color: #F44336;  /* red */
+}
diff --git a/src/components/LocationInputRow.vue b/src/components/LocationInputRow.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <h3 class="mb-1">
+      <h3 class="required mb-1">
         {{ $t('AddPriceSingle.WhereWhen.Location') }}
       </h3>
       <v-chip

diff --git a/src/components/ProductInputRow.vue b/src/components/ProductInputRow.vue
@@ -1,6 +1,9 @@
 <template>
   <v-row>
     <v-col>
+      <h3 class="required mb-1">
+        {{ $t('Common.Product') }}
+      </h3>
       <h3 class="mb-2">
         <v-item-group v-model="productForm.mode" class="d-inline" mandatory @update:modelValue="setMode($event)">
           <v-item v-for="pm in productModeList" :key="pm.key" v-slot="{ isSelected, toggle }" :value="pm.key">
@@ -57,9 +60,6 @@
           />
         </div>
       </v-sheet>
-      <p v-if="!productFormFilled" class="text-red mt-2 mb-2">
-        <i>{{ $t('AddPriceSingle.ProductInfo.SetProduct') }}</i>
-      </p>
     </v-col>
   </v-row>
 

diff --git a/src/components/ProofImageInputRow.vue b/src/components/ProofImageInputRow.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row>
     <v-col cols="8">
-      <h3 class="mb-1">
+      <h3 class="required mb-1">
         {{ $t('Common.Image') }}
       </h3>
       <v-btn

diff --git a/src/components/ProofMetadataInputRow.vue b/src/components/ProofMetadataInputRow.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row>
     <v-col cols="6">
-      <h3 class="mb-1">
+      <h3 class="required mb-1">
         {{ $t('Common.Date') }}
       </h3>
       <v-text-field
@@ -13,7 +13,7 @@
       />
     </v-col>
     <v-col cols="6">
-      <h3 class="mb-1">
+      <h3 class="required mb-1">
         {{ $t('Common.Currency') }}
         <span class="text-caption font-weight-regular">
           <a href="#">{{ $t('Common.Help') }}</a>

diff --git a/src/components/ProofTypeInputRow.vue b/src/components/ProofTypeInputRow.vue
@@ -1,7 +1,7 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <h3 class="mb-1">
+      <h3 class="required mb-1">
         {{ $t('Common.Type') }}
       </h3>
       <v-item-group v-model="proofTypeForm.type" class="d-inline" mandatory>

diff --git a/src/views/AddPriceMultiple.vue b/src/views/AddPriceMultiple.vue
@@ -85,17 +85,24 @@
                 </v-alert>
               </v-col>
             </v-row>
-            <h3 class="mb-1">
-              <v-item-group v-if="productPriceForm.mode === 'category'" v-model="productPriceForm.price_per" class="d-inline" mandatory>
-                <v-item v-for="cpp in categoryPricePerList" :key="cpp.key" v-slot="{ isSelected, toggle }" :value="cpp.key">
-                  <v-chip class="mr-1" :style="isSelected ? 'border: 1px solid #9E9E9E' : 'border: 1px solid transparent'" @click="toggle">
-                    <v-icon start :icon="isSelected ? 'mdi-checkbox-marked-circle' : 'mdi-circle-outline'" />
-                    {{ cpp.value }}
-                  </v-chip>
-                </v-item>
-              </v-item-group>
-            </h3>
-            <PriceInputRow :priceForm="productPriceForm" :product="productPriceForm.product" :hideCurrencyChoice="true" @filled="pricePriceFormFilled = $event" />
+            <v-row>
+              <v-col>
+                <h3 class="required mb-1">
+                  {{ $t('Common.Price') }}
+                </h3>
+                <h3 class="mb-1">
+                  <v-item-group v-if="productPriceForm.mode === 'category'" v-model="productPriceForm.price_per" class="d-inline" mandatory>
+                    <v-item v-for="cpp in categoryPricePerList" :key="cpp.key" v-slot="{ isSelected, toggle }" :value="cpp.key">
+                      <v-chip class="mr-1" :style="isSelected ? 'border: 1px solid #9E9E9E' : 'border: 1px solid transparent'" @click="toggle">
+                        <v-icon start :icon="isSelected ? 'mdi-checkbox-marked-circle' : 'mdi-circle-outline'" />
+                        {{ cpp.value }}
+                      </v-chip>
+                    </v-item>
+                  </v-item-group>
+                </h3>
+                <PriceInputRow :priceForm="productPriceForm" :product="productPriceForm.product" :hideCurrencyChoice="true" @filled="pricePriceFormFilled = $event" />
+              </v-col>
+            </v-row>
           </v-card-text>
           <v-divider />
           <v-card-text>