refactor(Price add): new Proof type form input (single button)

openfoodfacts · Dec 7, 2024 · 497b9a4 · 497b9a4
1 parent 5ba2210
commit 497b9a4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -6,3 +6,7 @@
     content:" *";
     color: #F44336;  /* red */
 }
+
+.v-btn-group--density-compact.v-btn-group {
+    height: 28px;  /* default is 36px; match v-btn size="small" height */
+}
diff --git a/src/components/ProofTypeInputRow.vue b/src/components/ProofTypeInputRow.vue
@@ -1,17 +1,11 @@
 <template>
   <v-row>
     <v-col cols="12">
-      <h3 class="required mb-1">
-        {{ $t('Common.Type') }}
-      </h3>
-      <v-item-group v-model="proofTypeForm.type" class="d-inline" mandatory>
-        <v-item v-for="pt in proofTypeList" :key="pt.key" v-slot="{ isSelected, toggle }" :value="pt.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'" />
-            {{ $t('ProofCard.' + pt.value) }}
-          </v-chip>
-        </v-item>
-      </v-item-group>
+      <v-btn-group divided density="compact" elevation="1" :style="proofTypeForm.type ? '' : 'border: 1px solid #F44336'">
+        <v-btn v-for="pt in proofTypeList" :key="pt.key" size="small" :value="pt.key" :prepend-icon="pt.icon" :style="isSelectedType(pt.key) ? 'border: 1px solid #4CAF50' : ''" @click="proofTypeForm.type = pt.key">
+          {{ $t('ProofCard.' + pt.value) }}
+        </v-btn>
+      </v-btn-group>
     </v-col>
   </v-row>
 </template>
@@ -30,6 +24,11 @@ export default {
     return {
       proofTypeList: constants.PROOF_TYPE_LIST,
     }
+  },
+  methods: {
+    isSelectedType(proofType) {
+      return this.proofTypeForm.type === proofType
+    }
   }
 }
 </script>