Vehicle settings: compact rows layout (#33169)

assets/js/components/Vehicles/SettingsModal.vue

@@ -16,85 +16,91 @@
 				</a>
 			</p>
 			<div
-				v-for="(vehicle, index) in vehicles"
+				v-for="vehicle in vehicles"
 				:key="vehicle.name"
 				role="group"
 				:aria-label="vehicle.title"
-				:class="{ 'border-top pt-4': index > 0 }"
+				class="d-flex gap-2 mb-3"
-				class="mb-4"
 			>
-				<div class="d-flex flex-wrap align-items-center column-gap-2 row-gap-1 mb-3">
+				<VehicleIcon :name="vehicle.icon" class="flex-shrink-0" />
-					<VehicleIcon :name="vehicle.icon" class="flex-shrink-0" />
+				<div class="flex-grow-1 overflow-hidden ring-space">
-					<strong class="text-truncate">{{ vehicle.title }}</strong>
+					<div class="d-flex flex-wrap align-items-center column-gap-2 row-gap-1 mb-3">
-					<Badge v-if="connectedLoadpoint(vehicle)" class="flex-shrink-0">
+						<strong class="text-truncate">{{ vehicle.title }}</strong>
-						{{
+						<Badge v-if="connectedLoadpoint(vehicle)" class="flex-shrink-0">
-							$t("main.vehicleSettings.connectedTo", [
+							{{
-								connectedLoadpoint(vehicle)?.title ||
+								$t("main.vehicleSettings.connectedTo", [
-									$t("main.loadpoint.fallbackName"),
+									connectedLoadpoint(vehicle)?.title ||
-							])
+										$t("main.loadpoint.fallbackName"),
-						}}
+								])
-					</Badge>
+							}}
-					<Badge v-else variant="muted" class="flex-shrink-0">
+						</Badge>
-						{{ $t("main.vehicleSettings.notConnected") }}
+						<Badge v-else variant="muted" class="flex-shrink-0">
-					</Badge>
+							{{ $t("main.vehicleSettings.notConnected") }}
+						</Badge>
+					</div>
+					<div class="row">
+						<div class="col-6 col-lg-3 mb-3">
+							<div class="small text-uppercase evcc-gray text-truncate">
+								{{ $t("main.vehicleSettings.mode") }}
+							</div>
+							<CustomSelect
+								:id="fieldId(vehicle, 'mode')"
+								inline
+								:options="modeOptions"
+								:selected="vehicle.mode ?? ''"
+								:ariaLabel="$t('main.vehicleSettings.mode')"
+								@change="changeMode(vehicle, $event)"
+							>
+								<span class="text-decoration-underline text-primary">
+									{{ optionName(modeOptions, vehicle.mode ?? "") }}
+								</span>
+							</CustomSelect>
+						</div>
+						<template v-if="socSupported(vehicle)">
+							<div class="col-6 col-lg-3 mb-3">
+								<div class="small text-uppercase evcc-gray text-truncate">
+									{{ $t("main.vehicleSettings.minSoc") }}
+								</div>
+								<CustomSelect
+									:id="fieldId(vehicle, 'minSoc')"
+									inline
+									:options="socOptions(vehicle, true)"
+									:selected="vehicle.minSoc ?? 0"
+									:ariaLabel="$t('main.vehicleSettings.minSoc')"
+									@change="changeMinSoc(vehicle, $event)"
+								>
+									<span class="text-decoration-underline text-primary">
+										{{
+											optionName(
+												socOptions(vehicle, true),
+												vehicle.minSoc ?? 0
+											)
+										}}
+									</span>
+								</CustomSelect>
+							</div>
+							<div class="col-6 col-lg-3 mb-3">
+								<div class="small text-uppercase evcc-gray text-truncate">
+									{{ $t("main.vehicleSettings.limitSoc") }}
+								</div>
+								<CustomSelect
+									:id="fieldId(vehicle, 'limitSoc')"
+									inline
+									:options="socOptions(vehicle)"
+									:selected="vehicle.limitSoc || 100"
+									:ariaLabel="$t('main.vehicleSettings.limitSoc')"
+									@change="changeLimitSoc(vehicle, $event)"
+								>
+									<span class="text-decoration-underline text-primary">
+										{{
+											optionName(socOptions(vehicle), vehicle.limitSoc || 100)
+										}}
+									</span>
+								</CustomSelect>
+							</div>
+						</template>
+					</div>
 				</div>
-				<SettingsFormRow
-					:id="fieldId(vehicle, 'mode')"
-					:label="$t('main.vehicleSettings.mode')"
-				>
-					<select
-						:id="fieldId(vehicle, 'mode')"
-						class="form-select form-select-sm"
-						:value="vehicle.mode ?? ''"
-						@change="changeMode(vehicle, $event)"
-					>
-						<option v-for="opt in modeOptions" :key="opt.value" :value="opt.value">
-							{{ opt.name }}
-						</option>
-					</select>
-				</SettingsFormRow>
-				<template v-if="socSupported(vehicle)">
-					<SettingsFormRow
-						:id="fieldId(vehicle, 'limitSoc')"
-						:label="$t('main.vehicleSettings.limitSoc')"
-						:description="$t('main.vehicleSettings.limitSocDescription')"
-					>
-						<select
-							:id="fieldId(vehicle, 'limitSoc')"
-							class="form-select form-select-sm"
-							:value="vehicle.limitSoc || 100"
-							@change="changeLimitSoc(vehicle, $event)"
-						>
-							<option
-								v-for="opt in socOptions(vehicle)"
-								:key="opt.value"
-								:value="opt.value"
-							>
-								{{ opt.name }}
-							</option>
-						</select>
-					</SettingsFormRow>
-					<SettingsFormRow
-						:id="fieldId(vehicle, 'minSoc')"
-						:label="$t('main.vehicleSettings.minSoc')"
-						:description="$t('main.vehicleSettings.minSocDescription')"
-					>
-						<select
-							:id="fieldId(vehicle, 'minSoc')"
-							class="form-select form-select-sm"
-							:value="vehicle.minSoc ?? 0"
-							@change="changeMinSoc(vehicle, $event)"
-						>
-							<option
-								v-for="opt in socOptions(vehicle, true)"
-								:key="opt.value"
-								:value="opt.value"
-							>
-								{{ opt.name }}
-							</option>
-						</select>
-					</SettingsFormRow>
-				</template>
 			</div>
 			<p class="mb-0 border-top pt-4">
 				<i18n-t keypath="main.vehicleSettings.editHint" tag="span" scope="global">
@@ -110,7 +116,7 @@
 <script lang="ts">
 import Badge from "../Helper/Badge.vue";
 import GenericModal from "../Helper/GenericModal.vue";
-import SettingsFormRow from "../Helper/SettingsFormRow.vue";
+import CustomSelect from "../Helper/CustomSelect.vue";
 import VehicleIcon from "../VehicleIcon";
 import api from "@/api";
 import formatter from "@/mixins/formatter";
@@ -124,7 +130,7 @@ const { OFF, PV, MINPV, NOW } = CHARGE_MODE;
 
 export default defineComponent({
 	name: "VehicleSettingsModal",
-	components: { Badge, GenericModal, SettingsFormRow, VehicleIcon },
+	components: { Badge, CustomSelect, GenericModal, VehicleIcon },
 	mixins: [formatter],
 	props: {
 		vehicles: { type: Array as PropType<Vehicle[]>, default: () => [] },
@@ -188,6 +194,9 @@ export default defineComponent({
 					};
 				});
 		},
+		optionName(options: SelectOption<string | number>[], value: string | number): string {
+			return options.find((o) => o.value === value)?.name ?? String(value);
+		},
 		selectValue(event: Event): string {
 			return (event.target as HTMLSelectElement).value;
 		},

i18n/de.json

@@ -1550,14 +1550,12 @@
     "vehicleSettings": {
       "connectedTo": "verbunden mit {0}",
       "description": "Diese Standardwerte werden angewendet, wenn das Fahrzeug an einem Ladepunkt angeschlossen wird.",
-      "editHint": "Fahrzeuge unter {0} hinzufügen oder bearbeiten.",
+      "editHint": "Fahrzeuge können in der {0} bearbeitet werden.",
       "keepAsIs": "Beibehalten",
       "learnMore": "Mehr erfahren.",
       "limitSoc": "Standardlimit",
-      "limitSocDescription": "Wird beim Anschließen des Fahrzeugs angewendet.",
       "menu": "Fahrzeuge",
       "minSoc": "Minimale Ladung",
-      "minSocDescription": "Wird im PV-Modus schnell bis zu diesem Wert geladen.",
       "mode": "Standardmodus",
       "notConnected": "nicht verbunden",
       "title": "Fahrzeugeinstellungen"

i18n/en.json

@@ -1550,14 +1550,12 @@
     "vehicleSettings": {
       "connectedTo": "connected to {0}",
       "description": "These defaults are applied when the vehicle connects to a charging point.",
-      "editHint": "Add or edit vehicles in {0}.",
+      "editHint": "Vehicles can be edited in {0}.",
       "keepAsIs": "Keep as is",
       "learnMore": "Learn more.",
       "limitSoc": "Default limit",
-      "limitSocDescription": "Applied when the vehicle is connected.",
       "menu": "Vehicles",
       "minSoc": "Minimum charge",
-      "minSocDescription": "Fast charge to this level in solar mode.",
       "mode": "Default mode",
       "notConnected": "not connected",
       "title": "Vehicle Settings"