Skip to content

Commit 41f6b80

Browse files
benderlbenderl
authored
Merge pull request #2612 from Brett-S-OWB/card-titles-formatting
Koala - Update card layout - add ellipsis for charge point, vehicle and battery names
2 parents d1c2b67 + 5b0bbb8 commit 41f6b80

5 files changed

Lines changed: 122 additions & 65 deletions

File tree

‎packages/modules/web_themes/koala/source/src/components/BatteryCard.vue‎

Lines changed: 64 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,49 @@
44
class="full-height card-width"
55
:class="{ 'battery-sum': props.batteryId === -1 }"
66
>
7-
<q-card-section>
8-
<div class="row text-h6 items-center text-bold justify-between">
9-
{{ cardTitle }}
7+
<q-card-section
8+
class="text-h6 items-center text-bold justify-between ellipsis"
9+
:title="cardTitle"
10+
>
11+
{{ cardTitle }}
12+
</q-card-section>
13+
<q-separator inset />
14+
<q-card-section class="row flex justify-end">
15+
<q-icon
16+
class="cursor-pointer q-mt-sm"
17+
v-if="showSettings"
18+
name="settings"
19+
size="sm"
20+
@click="dialog?.open()"
21+
/>
22+
</q-card-section>
23+
<q-card-section
24+
class="row q-mt-sm text-subtitle2 justify-between full-width"
25+
>
26+
<div>Leistung:</div>
27+
<div class="q-ml-sm">
28+
{{ power }}
29+
</div>
30+
</q-card-section>
31+
<q-separator v-if="showSettings" inset class="q-mt-sm" />
32+
<q-card-section
33+
v-if="showSettings"
34+
class="row q-mt-md justify-between text-subtitle2"
35+
>
36+
<div>Laden mit Überschuss:</div>
37+
<div class="q-ml-sm row items-center">
1038
<q-icon
11-
class="cursor-pointer"
12-
v-if="showSettings"
13-
name="settings"
39+
:name="batteryMode.icon"
1440
size="sm"
15-
@click="dialog?.open()"
41+
class="q-mr-sm"
42+
color="primary"
1643
/>
44+
{{ batteryMode.label }}
1745
</div>
18-
<div class="row q-mt-sm text-subtitle2 justify-between full-width">
19-
<div>Leistung:</div>
20-
<div class="q-ml-sm">
21-
{{ power }}
22-
</div>
23-
</div>
24-
<div
25-
v-if="showSettings"
26-
class="row q-mt-md justify-between text-subtitle2"
27-
>
28-
<div>Laden mit Überschuss:</div>
29-
<div class="q-ml-sm row items-center">
30-
<q-icon
31-
:name="batteryMode.icon"
32-
size="sm"
33-
class="q-mr-sm"
34-
color="primary"
35-
/>
36-
{{ batteryMode.label }}
37-
</div>
38-
</div>
39-
<div class="text-subtitle1 text-weight-bold q-mt-md">Heute:</div>
46+
</q-card-section>
47+
<q-separator inset class="q-mt-sm" />
48+
<q-card-section>
49+
<div class="text-subtitle1 text-weight-bold q-mt-sm">Heute:</div>
4050
<div class="row q-mt-sm text-subtitle2 justify-between full-width">
4151
<div>Geladen:</div>
4252
<div class="q-ml-sm">
@@ -49,6 +59,9 @@
4959
{{ dailyExportedEnergy }}
5060
</div>
5161
</div>
62+
</q-card-section>
63+
<q-separator inset class="q-mt-sm" />
64+
<q-card-section>
5265
<SliderDouble
5366
class="q-mt-sm"
5467
:current-value="soc"
@@ -151,4 +164,26 @@ onMounted(() => {
151164
.card-width {
152165
width: 22em;
153166
}
167+
168+
.q-card__section {
169+
padding-left: 16px;
170+
padding-right: 16px;
171+
padding-top: 0;
172+
padding-bottom: 0;
173+
}
174+
175+
.q-card__section:first-of-type {
176+
padding-top: 16px;
177+
padding-bottom: 0;
178+
}
179+
180+
.q-card__section:last-of-type {
181+
padding-top: 0;
182+
padding-bottom: 16px;
183+
}
184+
185+
.q-card__section:not(:first-of-type):not(:last-of-type) {
186+
padding-top: 0;
187+
padding-bottom: 0;
188+
}
154189
</style>

‎packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
22
<q-card ref="cardRef" class="full-height card-width">
3-
<q-card-section
4-
class="justify-between text-h6 text-bold ellipsis"
5-
:title="name"
6-
>
3+
<q-card-section class="text-h6 text-bold ellipsis" :title="name">
74
{{ name }}
85
</q-card-section>
96
<q-separator inset />
@@ -29,11 +26,17 @@
2926
<ChargePointFaultMessage :charge-point-id="props.chargePointId" />
3027
<ChargePointStateMessage :charge-point-id="props.chargePointId" />
3128
</q-card-section>
32-
<q-card-section class="row items-center q-mt-sm">
29+
<q-card-section
30+
class="full-width row no-wrap justify-between content-start items-center q-mt-sm"
31+
>
3332
<ChargePointVehicleSelect
33+
class="col"
3434
:charge-point-id="Number(props.chargePointId)"
3535
/>
36-
<ChargePointPriority :charge-point-id="props.chargePointId" />
36+
<ChargePointPriority
37+
class="col-auto"
38+
:charge-point-id="props.chargePointId"
39+
/>
3740
</q-card-section>
3841
<q-card-section>
3942
<ChargePointModeButtons :charge-point-id="props.chargePointId" />

‎packages/modules/web_themes/koala/source/src/components/ChargePointVehicleSelect.vue‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
<template>
22
<div v-if="props.readonly" class="q-mx-sm">
3+
<q-icon name="directions_car" />
34
{{ connectedVehicle?.name }}
45
</div>
5-
<q-btn-dropdown
6-
v-else
7-
color="grey"
8-
:label="connectedVehicle?.name"
9-
icon="directions_car"
10-
dense
11-
no-caps
12-
class="flex-grow"
13-
>
6+
<q-btn-dropdown v-else color="grey" dense no-caps>
7+
<template #label>
8+
<span class="ellipsis q-ml-xs" :title="connectedVehicle?.name">
9+
<q-icon name="directions_car" />
10+
{{ connectedVehicle?.name }}
11+
</span>
12+
</template>
1413
<q-list>
1514
<q-item
1615
v-for="vehicle in vehicles"
@@ -21,7 +20,9 @@
2120
@click="connectedVehicle = vehicle"
2221
>
2322
<q-item-section>
24-
<q-item-label>{{ vehicle.name }}</q-item-label>
23+
<q-item-label class="ellipsis" :title="vehicle.name">{{
24+
vehicle.name
25+
}}</q-item-label>
2526
</q-item-section>
2627
</q-item>
2728
</q-list>
@@ -53,7 +54,4 @@ const vehicles = computed(() => mqttStore.vehicleList);
5354
</script>
5455

5556
<style scoped>
56-
.flex-grow {
57-
flex-grow: 1;
58-
}
5957
</style>

‎packages/modules/web_themes/koala/source/src/components/VehicleCard.vue‎

Lines changed: 37 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
<template>
22
<q-card ref="cardRef" class="full-height card-width">
3-
<q-card-section>
4-
<div class="row items-center text-h6 text-bold">
5-
<div class="col flex items-center">
6-
{{ vehicle?.name }}
7-
</div>
3+
<q-card-section class="text-h6 text-bold ellipsis" :title="vehicle?.name">
4+
{{ vehicle?.name }}
5+
</q-card-section>
6+
<q-separator inset />
7+
<q-card-section class="row q-mt-sm">
8+
<div class="col">
9+
<div class="text-subtitle2">Hersteller:</div>
10+
{{ vehicleInfo?.manufacturer || 'keine Angabe' }}
811
</div>
9-
<div class="row q-mt-sm">
10-
<div class="col">
11-
<div class="text-subtitle2">Hersteller:</div>
12-
{{ vehicleInfo?.manufacturer || 'keine Angabe' }}
13-
</div>
14-
<div class="col q-pl-sm">
15-
<div class="text-subtitle2">Modell:</div>
16-
{{ vehicleInfo?.model || 'keine Angabe' }}
17-
</div>
12+
<div class="col q-pl-sm">
13+
<div class="text-subtitle2">Modell:</div>
14+
{{ vehicleInfo?.model || 'keine Angabe' }}
1815
</div>
16+
</q-card-section>
17+
<q-separator inset class="q-mt-sm" />
18+
<q-card-section>
1919
<VehicleConnectionStateIcon :vehicle-id="vehicleId" class="q-mt-sm" />
20+
</q-card-section>
21+
<q-separator inset class="q-mt-sm" />
22+
<q-card-section>
2023
<SliderDouble
2124
v-if="vehicleSocType"
2225
class="q-mt-sm"
@@ -97,8 +100,25 @@ onMounted(() => {
97100
width: 22em;
98101
}
99102
100-
.slider-container {
101-
position: relative;
102-
height: 40px;
103+
.q-card__section {
104+
padding-left: 16px;
105+
padding-right: 16px;
106+
padding-top: 0;
107+
padding-bottom: 0;
108+
}
109+
110+
.q-card__section:first-of-type {
111+
padding-top: 16px;
112+
padding-bottom: 0;
113+
}
114+
115+
.q-card__section:last-of-type {
116+
padding-top: 0;
117+
padding-bottom: 16px;
118+
}
119+
120+
.q-card__section:not(:first-of-type):not(:last-of-type) {
121+
padding-top: 0;
122+
padding-bottom: 0;
103123
}
104124
</style>

‎packages/modules/web_themes/koala/source/src/components/VehicleConnectionStateIcon.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
v-for="(chargePoint, index) in vehicleState"
1313
:key="index"
1414
:icon="chargePoint.plugged ? 'power' : 'power_off'"
15+
class="ellipsis"
1516
:color="
1617
chargePoint.plugged
1718
? chargePoint.charging

0 commit comments

Comments
 (0)