refactor: improve webcam settings logic and layout

src/components/settings/SettingsWebcamsTab.vue

@@ -89,6 +89,7 @@
                                         hide-details="auto"
                                         outlined
                                         :rules="[rules.required, rules.unique]"
+                                        class="_webcam-settings-name-field"
                                         dense></v-text-field>
                                 </v-col>
                             </v-row>
@@ -150,21 +151,26 @@
                                 </v-col>
                             </v-row>
                             <v-row>
-                                <v-col class="py-1">
+                                <v-col class="pt-1 pb-3">
+                                    <div class="v-label v-label--active theme--dark text-subtitle-1">
+                                        {{ $t('Settings.WebcamsTab.FlipWebcam') }}
+                                    </div>
+                                </v-col>
+                            </v-row>
+                            <v-row class="mt-0">
+                                <v-col class="py-0">
                                     <v-checkbox
                                         v-model="form.flipX"
-                                        hide-details
                                         class="mt-1"
-                                        :label="$t('Settings.WebcamsTab.FlipHorizontally')"></v-checkbox>
+                                        hide-details
+                                        :label="$t('Settings.WebcamsTab.Horizontally')"></v-checkbox>
                                 </v-col>
-                            </v-row>
-                            <v-row>
-                                <v-col class="py-1">
+                                <v-col class="py-0">
                                     <v-checkbox
                                         v-model="form.flipY"
-                                        hide-details
                                         class="mt-1"
-                                        :label="$t('Settings.WebcamsTab.FlipVertically')"></v-checkbox>
+                                        hide-details
+                                        :label="$t('Settings.WebcamsTab.Vertically')"></v-checkbox>
                                 </v-col>
                             </v-row>
                         </v-col>
@@ -193,7 +199,7 @@
                     <v-btn text @click="form.bool = false">
                         {{ $t('Settings.Cancel') }}
                     </v-btn>
-                    <v-btn color="primary" text type="submit">
+                    <v-btn color="primary" text type="submit" :disabled="!form.name">
                         {{
                             form.id === null
                                 ? $t('Settings.WebcamsTab.SaveWebcam')
@@ -448,4 +454,8 @@ export default class SettingsWebcamsTab extends Mixins(BaseMixin, WebcamMixin) {
         border: 2px solid var(--color-primary) !important;
     }
 }
+
+._webcam-settings-name-field ::v-deep .v-text-field__details {
+    margin-bottom: -12px !important;
+}
 </style>

src/locales/da.json

@@ -947,8 +947,9 @@
             "AddWebcam": "Tilføj webcam",
             "CreateWebcam": "Nyt Webcam",
             "EditWebcam": "Rediger Webcam",
-            "FlipHorizontally": "Vend webcam horisontalt",
-            "FlipVertically": "Vend webcam vertikalt",
+            "FlipWebcam": "Vend webcam-billedet:",
+            "Horizontally": "horisontalt",
+            "Vertically": "vertikalt",
             "IconBed": "Bed",
             "IconCam": "Kamera",
             "IconDoor": "Dør",

src/locales/de.json

@@ -959,8 +959,9 @@
             "CreateWebcam": "Erstelle Webcam",
             "EditCrowsnestConf": "crowsnest.conf bearbeiten",
             "EditWebcam": "Webcam bearbeiten",
-            "FlipHorizontally": "Webcam waagerecht spiegeln",
-            "FlipVertically": "Webcam vertikal spiegeln",
+            "FlipWebcam": "Webcam-Bild spiegeln:",
+            "Horizontally": "horizontal",
+            "Vertically": "vertikal",
             "IconBed": "Bett",
             "IconCam": "Kamera",
             "IconDoor": "Tür",

src/locales/en.json

@@ -959,8 +959,9 @@
             "CreateWebcam": "Create Webcam",
             "EditCrowsnestConf": "Edit crowsnest.conf",
             "EditWebcam": "Edit Webcam",
-            "FlipHorizontally": "Flip webcam horizontally",
-            "FlipVertically": "Flip webcam vertically",
+            "FlipWebcam": "Flip webcam image:",
+            "Horizontally": "horizontally",
+            "Vertically": "vertically",
             "IconBed": "Bed",
             "IconCam": "Cam",
             "IconDoor": "Door",

src/locales/es.json

@@ -928,8 +928,9 @@
             "AddWebcam": "Agregar cámara web",
             "CreateWebcam": "Crear cámara web",
             "EditWebcam": "Editar cámara web",
-            "FlipHorizontally": "Voltear horizontalmente",
-            "FlipVertically": "Voltear verticalmente",
+            "FlipWebcam": "Voltear la imagen de la cámara web:",
+            "Horizontally": "horizontalmente",
+            "Vertically": "verticalmente",
             "IconBed": "Cama",
             "IconCam": "Cámara",
             "IconDoor": "Puerta",

src/locales/fr.json

@@ -952,8 +952,9 @@
             "CreateWebcam": "Nouvelle caméra",
             "EditCrowsnestConf": "Edition de crowsnest.conf",
             "EditWebcam": "Editer caméra",
-            "FlipHorizontally": "Miroir horizontal",
-            "FlipVertically": "Miroir vertical",
+            "FlipWebcam": "Miroir l'image de la webcam:",
+            "Horizontally": "horizontal",
+            "Vertically": "vertical",
             "IconBed": "Plateau",
             "IconCam": "Caméra",
             "IconDoor": "Porte",

src/locales/hu.json

@@ -928,8 +928,9 @@
             "AddWebcam": "Webkamera hozzáadása",
             "CreateWebcam": "Webkamera létrehozása",
             "EditWebcam": "Webkamera szerkesztése",
-            "FlipHorizontally": "Webkamera vízszintes tükrözése",
-            "FlipVertically": "Webkamera függőleges tükrözése",
+            "FlipWebcam": "Webkamera tükrözése:",
+            "Horizontally": "vízszintes",
+            "Vertically": "függőleges",
             "IconBed": "Asztal",
             "IconCam": "Kamera",
             "IconDoor": "Ajtó",

src/locales/it.json

@@ -795,8 +795,9 @@
             "AddWebcam": "aggiungi webcam",
             "CreateWebcam": "Crea Webcam",
             "EditWebcam": "Modifica Webcam",
-            "FlipHorizontally": "Gira webcam orizzontalmente",
-            "FlipVertically": "Gira webcam verticalmente",
+            "FlipWebcam": "Specchio dell'immagine della webcam:",
+            "Horizontally": "orizzontalmente",
+            "Vertically": "verticalmente",
             "IconBed": "Letto",
             "IconCam": "Cam",
             "IconDoor": "Porta",

src/locales/ja.json

@@ -951,8 +951,6 @@
             "CreateWebcam": "カメラ作成",
             "EditCrowsnestConf": "crowsnest.confを編集",
             "EditWebcam": "カメラ編集",
-            "FlipHorizontally": "カメラ画像を水平反転",
-            "FlipVertically": "カメラ画像を垂直反転",
             "IconBed": "ベッド",
             "IconCam": "カメラ",
             "IconDoor": "ドア",

src/locales/ko.json

@@ -930,8 +930,6 @@
             "AddWebcam": "웹캠 추가",
             "CreateWebcam": "웹캠 장치 정보 입력",
             "EditWebcam": "웹캠 장치 정보 수정",
-            "FlipHorizontally": "화면 수평 반전",
-            "FlipVertically": "화면 수직 반전",
             "IconBed": "베드",
             "IconCam": "캠",
             "IconDoor": "도어",

src/locales/nl.json

@@ -951,8 +951,9 @@
             "CreateWebcam": "Nieuwe Webcam",
             "EditCrowsnestConf": "Bewerk crowsnest.conf",
             "EditWebcam": "Bewerk Webcam",
-            "FlipHorizontally": "Flip webcam horizontaal",
-            "FlipVertically": "Flip webcam verticaal",
+            "FlipWebcam": "Flip webcam beeld:",
+            "Horizontally": "horizontaal",
+            "Vertically": "verticaal",
             "IconBed": "Bed",
             "IconCam": "Camera",
             "IconDoor": "Deur",

src/locales/pl.json

@@ -929,8 +929,9 @@
             "AddWebcam": "Dodaj kamerę",
             "CreateWebcam": "Stwórz kamerę",
             "EditWebcam": "Edytuj kamerę",
-            "FlipHorizontally": "Odwróć widok kamery w poziomie",
-            "FlipVertically": "Odwróć widok kamery w pionie",
+            "FlipWebcam": "Odwróć widok kamery:",
+            "Horizontally": "poziomo",
+            "Vertically": "pionowo",
             "IconBed": "Stół",
             "IconCam": "Kamera",
             "IconDoor": "Drzwi",

src/locales/ru.json

@@ -929,8 +929,9 @@
             "AddWebcam": "Добавить веб-камеру",
             "CreateWebcam": "Создать веб-камеру",
             "EditWebcam": "Редактирование веб-камеры",
-            "FlipHorizontally": "Зеркальное отображение веб-камеры по горизонтали",
-            "FlipVertically": "Зеркальная веб-камера в вертикальном положении",
+            "FlipWebcam": "Зеркальное отображение веб-камеры:",
+            "Horizontally": "горизонтально",
+            "Vertically": "вертикально",
             "IconBed": "Кровать",
             "IconCam": "Камера",
             "IconDoor": "Дверь",

src/locales/sv.json

@@ -823,8 +823,9 @@
             "AddWebcam": "lägg till webbkamera",
             "CreateWebcam": "Skapa webbkamera",
             "EditWebcam": "Redigera webbkamera",
-            "FlipHorizontally": "Vänd webbkameran horisontellt",
-            "FlipVertically": "Vänd webbkameran vertikalt",
+            "FlipWebcam": "Vänd webbkamerabilden",
+            "Horizontally": "horisontellt",
+            "Vertically": "vertikalt",
             "IconBed": "Bädd",
             "IconCam": "Kamera",
             "IconDoor": "Dörr",

src/locales/tr.json

@@ -950,8 +950,9 @@
             "CreateWebcam": "Web Kamerası Oluştur",
             "EditCrowsnestConf": "crowsnest.conf'u düzenle",
             "EditWebcam": "Web Kamerası Düzenle",
-            "FlipHorizontally": "Web kamerasını yatay olarak çevirin",
-            "FlipVertically": "Web kamerasını dikey olarak çevirin",
+            "FlipWebcam": "Web kamerasını çevirin:",
+            "Horizontally": "yatay olarak",
+            "Vertically": "dikey olarak",
             "IconBed": "Yatak",
             "IconCam": "Kamera",
             "IconDoor": "Kapı",

src/locales/uk.json

@@ -951,8 +951,9 @@
             "CreateWebcam": "Створити веб-камеру",
             "EditCrowsnestConf": "Редагувати crowsnest.conf",
             "EditWebcam": "Редагувати веб-камеру",
-            "FlipHorizontally": "Повернути веб-камеру горизонтально",
-            "FlipVertically": "Повернути веб-камеру вертикально",
+            "FlipWebcam": "Повернути веб-камеру:",
+            "Horizontally": "горизонтально",
+            "Vertically": "вертикально",
             "IconBed": "Ліжко",
             "IconCam": "Cam",
             "IconDoor": "Двері",

src/locales/zh.json

@@ -953,8 +953,6 @@
             "CreateWebcam": "添加摄像头",
             "EditCrowsnestConf": "编辑 crowsnest.conf",
             "EditWebcam": "编辑摄像头",
-            "FlipHorizontally": "水平翻转摄像头",
-            "FlipVertically": "垂直翻转摄像头",
             "IconBed": "热床",
             "IconCam": "摄像头",
             "IconDoor": "门",

src/locales/zh_TW.json

@@ -731,8 +731,6 @@
             "AddWebcam": "新增攝影機",
             "CreateWebcam": "建立攝影機",
             "EditWebcam": "編輯攝影機",
-            "FlipHorizontally": "水平翻轉網絡攝影機",
-            "FlipVertically": "垂直翻轉網絡攝影機",
             "IconBed": "床",
             "IconCam": "攝影機",
             "IconDoor": "門",