refactor: show product missing data in italic. improve wording

openfoodfacts · Mar 30, 2024 · 427e97f · 427e97f
1 parent 0fabf1a
commit 427e97f
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 18 deletions.
diff --git a/src/components/ProductBrands.vue b/src/components/ProductBrands.vue
@@ -6,20 +6,19 @@
       </v-chip>
     </span>
     <v-chip v-else label size="small" density="comfortable" class="mr-1" @click="showProductBrandsDialog">
-      {{ $t('ProductCard.BrandTotal', { count: getProductBrandsList.length }) }}
+      <i>{{ $t('ProductCard.BrandTotal', { count: getProductBrandsList.length }) }}</i>
     </v-chip>
+    <ProductBrandsDialog
+      v-if="productBrands.length && productBrandsDialog"
+      :brands="getProductBrandsList"
+      v-model="productBrandsDialog"
+      @close="productBrandsDialog = false">
+    </ProductBrandsDialog>
   </span>
   <v-chip v-else label size="small" density="comfortable" prepend-icon="mdi-help" color="warning" class="mr-1">
-    {{ $t('ProductCard.BrandLower') }}
-    <v-tooltip activator="parent" open-on-click location="top">{{ $t('ProductCard.ProductBrandMissing') }}</v-tooltip>
+    <i>{{ $t('ProductCard.BrandLower') }}</i>
+    <v-tooltip activator="parent" open-on-click location="top">{{ $t('ProductCard.BrandMissing') }}</v-tooltip>
   </v-chip>
-
-  <ProductBrandsDialog
-    v-if="productBrands && productBrands.length && productBrandsDialog"
-    :brands="getProductBrandsList"
-    v-model="productBrandsDialog"
-    @close="productBrandsDialog = false"
-  ></ProductBrandsDialog>
 </template>
 
 <script>

diff --git a/src/components/ProductCategoriesChip.vue b/src/components/ProductCategoriesChip.vue
@@ -1,6 +1,6 @@
 <template>
   <v-chip v-if="productCategories.length" label size="small" density="comfortable" @click="showProductCategoriesDialog">
-    {{ $t('ProductCard.CategoryTotal', { count: productCategories.length }) }}
+    <i>{{ $t('ProductCard.CategoryTotal', { count: productCategories.length }) }}</i>
     <ProductCategoriesDialog
       v-if="productCategories.length && productCategoriesDialog"
       :categories="productCategories"
@@ -9,8 +9,8 @@
     </ProductCategoriesDialog>
   </v-chip>
   <v-chip v-else label size="small" density="comfortable" prepend-icon="mdi-help" color="warning">
-    {{ $t('ProductCard.CategoriesLower') }}
-    <v-tooltip activator="parent" open-on-click location="top">{{ $t('ProductCard.ProductCategoriesMissing') }}</v-tooltip>
+    <i>{{ $t('ProductCard.CategoriesLower') }}</i>
+    <v-tooltip activator="parent" open-on-click location="top">{{ $t('ProductCard.CategoriesMissing') }}</v-tooltip>
   </v-chip>
 </template>
 

diff --git a/src/components/ProductLabelsChip.vue b/src/components/ProductLabelsChip.vue
@@ -1,6 +1,6 @@
 <template>
   <v-chip v-if="productLabels.length" label size="small" density="comfortable" @click="showProductLabelsDialog">
-    {{ $t('ProductCard.LabelTotal', { count: productLabels.length }) }}
+    <i>{{ $t('ProductCard.LabelTotal', { count: productLabels.length }) }}</i>
     <ProductLabelsDialog
       v-if="productLabelsDialog"
       :labels="productLabels"
@@ -9,7 +9,7 @@
     </ProductLabelsDialog>
   </v-chip>
   <v-chip v-else label size="small" density="comfortable"><!-- prepend-icon="mdi-help" color="warning" -->
-    {{ $t('ProductCard.LabelTotal', { count: 0 }) }}
+    <i>{{ $t('ProductCard.LabelTotal', { count: 0 }) }}</i>
   </v-chip>
 </template>
 

diff --git a/src/components/ProductQuantityChip.vue b/src/components/ProductQuantityChip.vue
@@ -3,8 +3,8 @@
     {{ productQuantityWithUnitDisplay }}
   </v-chip>
   <v-chip v-else label size="small" density="comfortable" prepend-icon="mdi-help" color="warning">
-    {{ productQuantityUnitDisplay }}
-    <v-tooltip activator="parent" open-on-click location="top">{{ $t('ProductCard.ProductQuantityMissing') }}</v-tooltip>
+    <i>{{ productQuantityUnitDisplay }}</i>
+    <v-tooltip activator="parent" open-on-click location="top">{{ $t('ProductCard.QuantityMissing') }}</v-tooltip>
   </v-chip>
 </template>
 

diff --git a/src/components/ShareButton.vue b/src/components/ShareButton.vue
@@ -5,6 +5,7 @@
     density="comfortable"
     color="teal"
     icon="mdi-share-variant"
+    :title="$t('ShareButton.Title')"
     @click="shareViaWebShare">
   </v-btn>
 

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -213,9 +213,11 @@
 	"ProductCard": {
 		"Brands": "Brands",
 		"BrandLower": "brand",
+		"BrandMissing": "Brand missing",
 		"BrandTotal": "{count} brands",
 		"Categories": "Categories",
 		"CategoriesLower": "categories",
+		"CategoriesMissing": "Category missing",
 		"CategoryTotal": "{count} categories",
 		"Labels": "Labels",
 		"LabelsLower": "labels",
@@ -228,6 +230,7 @@
 		"ProductQuantityLitre": "{0} L",
 		"ProductQuantityMililitre": "{0} mL",
 		"ProductQuantityMissing": "Product quantity missing",
+		"QuantityMissing": "Quantity missing",
 		"UnknownProduct": "Unknown product name"
 	},
 	"ProductDetail": {
@@ -301,7 +304,8 @@
 		"Title": "Search"
 	},
 	"ShareButton": {
-		"LinkCopySuccess": "Link copied"
+		"LinkCopySuccess": "Link copied",
+		"Title": "Share"
 	},
 	"SignIn": {
 		"Button": "Sign in",