Add time unit labels

CHANGELOG.md

@@ -3,6 +3,8 @@
 ### Fixed
 - Added app info XML back to allow automatic translations
   [#878](https://github.com/nextcloud/cookbook/pull/878) @christianlupus
+- Added unit hints in the labels of the timers
+  [#879](https://github.com/nextcloud/cookbook/pull/879) @christianlupus
 
 
 ## 0.9.9 - 2022-01-13

src/components/RecipeEdit.vue

@@ -23,15 +23,15 @@
         />
         <EditTimeField
             v-model="prepTime"
-            :field-label="t('cookbook', 'Preparation time')"
+            :field-label="t('cookbook', 'Preparation time (hours:minutes)')"
         />
         <EditTimeField
             v-model="cookTime"
-            :field-label="t('cookbook', 'Cooking time')"
+            :field-label="t('cookbook', 'Cooking time (hours:minutes)')"
         />
         <EditTimeField
             v-model="totalTime"
-            :field-label="t('cookbook', 'Total time')"
+            :field-label="t('cookbook', 'Total time (hours:minutes)')"
         />
         <EditMultiselect
             v-model="recipe['recipeCategory']"

src/components/RecipeTimer.vue

@@ -6,7 +6,7 @@
             :class="countdown === null ? 'icon-play' : 'icon-pause'"
             @click="timerToggle"
         ></button>
-        <h4>{{ t("cookbook", label) }}</h4>
+        <h4>{{ label }}</h4>
         <p>{{ displayTime }}</p>
     </div>
 </template>
@@ -21,10 +21,6 @@ export default {
                 return { hours: 0, minutes: 0 }
             },
         },
-        phase: {
-            type: String,
-            default: "",
-        },
         label: {
             type: String,
             default: "",

src/components/RecipeView.vue

@@ -72,23 +72,20 @@
                     <RecipeTimer
                         v-if="recipe.timerPrep"
                         :value="recipe.timerPrep"
-                        :phase="'prep'"
                         :timer="false"
-                        :label="'Preparation time'"
+                        :label="t('cookbook', 'Preparation time (H:MM)')"
                     />
                     <RecipeTimer
                         v-if="recipe.timerCook"
                         :value="recipe.timerCook"
-                        :phase="'prep'"
                         :timer="true"
-                        :label="'Cooking time'"
+                        :label="t('cookbook', 'Cooking time (H:MM)')"
                     />
                     <RecipeTimer
                         v-if="recipe.timerTotal"
                         :value="recipe.timerTotal"
-                        :phase="'total'"
                         :timer="false"
-                        :label="'Total time'"
+                        :label="t('cookbook', 'Total time (H:MM)')"
                     />
                 </div>
             </div>

webpack.config.js

@@ -8,7 +8,7 @@ const path = require('path')
 const { VueLoaderPlugin } = require('vue-loader')
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-const MiniCssExtractPlugin = require("mini-css-extract-plugin").default
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 
 module.exports = {