Skip to content

Commit 0dbe5a7

Browse files
benderlbenderl
authored
Koala tables (#2759)
* tab flex layout * cleanup dark theme css * optimize table cell width * no wrap in power data
1 parent dab1393 commit 0dbe5a7

File tree

8 files changed

+101
-95
lines changed

8 files changed

+101
-95
lines changed

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,17 @@
77
'full-height': props.fullHeight,
88
}"
99
>
10-
<q-card-section class="row items-center justify-between">
10+
<q-card-section class="row no-wrap items-center justify-between">
1111
<div class="text-h6 text-bold ellipsis" :title="cardTitle">
1212
{{ cardTitle }}
1313
</div>
14-
<q-icon
15-
class="cursor-pointer q-ml-auto"
14+
<q-space />
15+
<q-btn
1616
v-if="showSettings"
17-
name="settings"
18-
size="sm"
17+
icon="settings"
18+
flat
19+
round
20+
dense
1921
@click="dialog?.open()"
2022
/>
2123
</q-card-section>

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

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,34 @@
2323
@row-click="onRowClick"
2424
>
2525
<!-- full view table body slots -->
26+
<template #body-cell-name="slotProps">
27+
<q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
28+
<div class="ellipsis" :title="slotProps.row.name">
29+
{{ slotProps.row.name }}
30+
</div>
31+
</q-td>
32+
</template>
33+
<template #body-cell-vehicle="slotProps">
34+
<q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
35+
<div class="ellipsis" :title="slotProps.row.vehicle">
36+
{{ slotProps.row.vehicle }}
37+
</div>
38+
</q-td>
39+
</template>
2640
<template #body-cell-plugged="slotProps">
27-
<q-td :class="`text-${slotProps.col.align}`">
41+
<q-td auto-width :class="`text-${slotProps.col.align}`">
2842
<ChargePointStateIcon :charge-point-id="slotProps.row.id" />
2943
</q-td>
3044
</template>
3145

3246
<template #body-cell-chargeMode="slotProps">
33-
<q-td :class="`text-${slotProps.col.align}`">
47+
<q-td auto-width :class="`text-${slotProps.col.align}`">
3448
<ChargePointMode :charge-point-id="slotProps.row.id" />
3549
</q-td>
3650
</template>
3751

3852
<template #body-cell-timeCharging="slotProps">
39-
<q-td :class="`text-${slotProps.col.align}`">
53+
<q-td auto-width :class="`text-${slotProps.col.align}`">
4054
<ChargePointTimeCharging
4155
:charge-point-id="slotProps.row.id"
4256
:readonly="true"
@@ -47,7 +61,7 @@
4761
</template>
4862

4963
<template #body-cell-powerColumn="slotProps">
50-
<q-td :class="`text-${slotProps.col.align}`">
64+
<q-td auto-width :class="`text-${slotProps.col.align}`">
5165
<ChargePointPowerData
5266
:power="slotProps.row.power"
5367
:phase-number="slotProps.row.phaseNumber"
@@ -56,18 +70,32 @@
5670
/>
5771
</q-td>
5872
</template>
73+
<template #body-cell-charged="slotProps">
74+
<q-td auto-width :class="`text-${slotProps.col.align}`">
75+
{{ slotProps.row.charged }}
76+
</q-td>
77+
</template>
78+
<template #body-cell-soc="slotProps">
79+
<q-td auto-width :class="`text-${slotProps.col.align}`">
80+
{{ slotProps.row.soc }}
81+
</q-td>
82+
</template>
5983
<!-- compact view table body slots -->
6084
<!-- compact view charge point name and vehicle name displayed in one field -->
6185
<template #body-cell-nameAndVehicle="slotProps">
62-
<q-td :class="`text-${slotProps.col.align}`">
63-
{{ slotProps.row.name }}<br />
64-
<span class="text-caption">{{ slotProps.row.vehicle }}</span>
86+
<q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
87+
<div class="ellipsis" :title="slotProps.row.name">
88+
{{ slotProps.row.name }}
89+
</div>
90+
<div class="ellipsis text-caption" :title="slotProps.row.vehicle">
91+
{{ slotProps.row.vehicle }}
92+
</div>
6593
</q-td>
6694
</template>
6795

6896
<!-- compact view charge point charge mode, plug status and time charging displayed in one field -->
6997
<template #body-cell-modePluggedTimeCharging="slotProps">
70-
<q-td :class="`text-${slotProps.col.align}`">
98+
<q-td auto-width :class="`text-${slotProps.col.align}`">
7199
<div class="items-center">
72100
<ChargePointMode :charge-point-id="slotProps.row.id" />
73101
<ChargePointStateIcon :charge-point-id="slotProps.row.id" />
@@ -228,3 +256,9 @@ const onRowClick = (row: ChargePointRow) => {
228256
modalChargePointCardVisible.value = true;
229257
};
230258
</script>
259+
260+
<style scoped lang="scss">
261+
.max-width-0 {
262+
max-width: 0;
263+
}
264+
</style>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div
33
:class="[
44
'text-no-wrap items-center',
5-
columnDisplayFormat ? 'column' : 'row inline',
5+
columnDisplayFormat ? 'column' : 'row inline no-wrap',
66
]"
77
>
88
<span>{{ power }}</span>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
class="card-width"
55
:class="{ 'full-height': props.fullHeight }"
66
>
7-
<q-card-section class="row">
7+
<q-card-section class="row no-wrap">
88
<div class="text-h6 text-bold ellipsis" :title="vehicle?.name">
99
{{ vehicle?.name }}
1010
</div>

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

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,35 @@
2323
@row-click="onRowClick"
2424
>
2525
<!-- "col" = column must match Quasar naming convention -->
26+
<template #row-expand="slotProps">
27+
<VehicleConnectionStateIcon :vehicle-id="slotProps.row.id" />
28+
</template>
29+
<template #body-cell-name="slotProps">
30+
<q-td :class="[`text-${slotProps.col.align}`, 'max-width-0']">
31+
<div class="ellipsis" :title="slotProps.row.name">
32+
{{ slotProps.row.name }}
33+
</div>
34+
</q-td>
35+
</template>
36+
<template #body-cell-manufacturer="slotProps">
37+
<q-td auto-width :class="`text-${slotProps.col.align}`">
38+
{{ slotProps.row.manufacturer }}
39+
</q-td>
40+
</template>
41+
<template #body-cell-model="slotProps">
42+
<q-td auto-width :class="`text-${slotProps.col.align}`">
43+
{{ slotProps.row.model }}
44+
</q-td>
45+
</template>
2646
<template #body-cell-plugged="slotProps">
27-
<q-td :class="`text-${slotProps.col.align}`">
47+
<q-td auto-width :class="`text-${slotProps.col.align}`">
2848
<ChargePointStateIcon :vehicle-id="slotProps.row.id" />
2949
</q-td>
3050
</template>
31-
<template #row-expand="slotProps">
32-
<VehicleConnectionStateIcon :vehicle-id="slotProps.row.id" />
51+
<template #body-cell-vehicleSocValue="slotProps">
52+
<q-td auto-width :class="`text-${slotProps.col.align}`">
53+
{{ slotProps.row.vehicleSocValue }}
54+
</q-td>
3355
</template>
3456
</BaseTable>
3557

@@ -119,3 +141,9 @@ const onRowClick = (row: VehicleRow) => {
119141
modalChargeVehicleCardVisible.value = true;
120142
};
121143
</script>
144+
145+
<style scoped lang="scss">
146+
.max-width-0 {
147+
max-width: 0;
148+
}
149+
</style>

‎packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,9 +178,11 @@ const chartLabels = computed(() => {
178178
: Math.floor(Date.now() / 1000);
179179
const dataRange = maxTimestamp - minTimestamp;
180180
let range = 300; // 5 Minuten
181-
if (dataRange <= 30 * 60) { // bis 15 Minuten
181+
if (dataRange <= 30 * 60) {
182+
// bis 30 Minuten
182183
range = 60; // 1 Minute
183-
} else if (dataRange <= 60 * 60) { // bis 30 Minuten
184+
} else if (dataRange <= 60 * 60) {
185+
// bis 60 Minuten
184186
range = 120; // 2 Minuten
185187
}
186188

‎packages/modules/web_themes/koala/source/src/css/quasar.variables.scss‎

Lines changed: 2 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,8 @@ $battery: #ba7128;
137137
}
138138
// Table styling
139139
.sticky-header-table {
140-
/* height or max-height is important */
141-
height: 310px;
140+
flex-grow: 1;
141+
max-width: 100%;
142142

143143
.q-table__top,
144144
.q-table__bottom,
@@ -258,12 +258,8 @@ $dark-tab-icon: #d7d9e0;
258258
.theme-text {
259259
color: var(--q-white) !important;
260260
}
261-
.deselected {
262-
color: var(--q-grey) !important;
263-
}
264261
// Header colors
265262
.q-header {
266-
background-color: var(--q-background-2);
267263
color: var(--q-white);
268264
}
269265
// Drawer background
@@ -276,44 +272,27 @@ $dark-tab-icon: #d7d9e0;
276272
color: var(--q-tab-icon) !important;
277273
}
278274
}
279-
// Tab panel background
280-
.q-tab-panels {
281-
background-color: var(--q-background-2);
282-
}
283-
// Tab CSS
284-
.q-tab {
285-
background-color: var(--q-background-2);
286-
border-top-left-radius: 10px;
287-
border-top-right-radius: 10px;
288-
border: 1px solid var(--q-secondary);
289-
}
290275
// Tab active background color
291276
.q-tab--active {
292277
background-color: color.scale($dark-secondary, $lightness: 10%);
293278
}
294279
// Carousel control arrows and buttons
295280
.q-carousel__control {
296281
.q-btn {
297-
&:before {
298-
box-shadow: none;
299-
}
300282
.q-icon {
301283
color: var(--q-carousel-control);
302284
&:before {
303285
color: var(--q-carousel-control);
304-
box-shadow: none;
305286
}
306287
}
307288
}
308289
}
309290
// Slide container background
310291
.q-carousel__slide {
311-
background-color: var(--q-background-2);
312292
color: var(--q-white);
313293
}
314294
// Slide background
315295
.q-card {
316-
background-color: var(--q-secondary);
317296
color: var(--q-white);
318297
}
319298
// Input field text label color
@@ -351,65 +330,17 @@ $dark-tab-icon: #d7d9e0;
351330

352331
// Table styling - Dark Theme
353332
.sticky-header-table {
354-
/* height or max-height is important */
355-
height: 310px;
356-
357-
.q-table__top,
358-
.q-table__bottom,
359-
thead tr:first-child th {
360-
background-color: var(--q-primary);
361-
color: var(--q-white);
362-
font-size: 0.9rem;
363-
}
364-
365-
thead tr th {
366-
position: sticky;
367-
z-index: 1;
368-
}
369-
370-
thead tr:first-child th {
371-
top: 0;
372-
}
373-
374-
/* this is when the loading indicator appears */
375-
&.q-table--loading thead tr:last-child th {
376-
/* height of all previous header rows */
377-
top: 48px;
378-
}
379-
380-
/* prevent scrolling behind sticky top row on focus */
381333
tbody {
382-
/* height of all previous header rows */
383-
scroll-margin-top: 48px;
384-
background-color: var(--q-secondary);
385334
color: var(--q-white);
386335
}
387336

388-
tbody tr,
389-
.q-table__middle,
390-
.q-table__grid-content {
391-
background-color: var(--q-secondary);
392-
}
393-
394337
tbody tr:hover {
395338
background-color: rgba(255, 255, 255, 0.07);
396339
}
397-
398-
// Scrollbar styling for tables - Dark Theme
399-
.q-table__middle.q-virtual-scroll {
400-
// Firefox
401-
scrollbar-width: thin;
402-
scrollbar-color: var(--q-primary) var(--q-secondary);
403-
}
404-
}
405-
406-
.q-scrollarea {
407-
border: 1px solid var(--q-secondary) !important;
408340
}
409341

410342
//Scrollbar styling für .q-list - Dark Theme
411343
.q-list {
412-
scrollbar-width: thin;
413344
scrollbar-color: var(--q-primary) var(--q-list);
414345
}
415346
}

‎packages/modules/web_themes/koala/source/src/pages/IndexPage.vue‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@
2222
</q-tab> -->
2323
</q-tabs>
2424
<!-- Tab Panels -->
25-
<q-tab-panels v-model="tab" class="col">
25+
<q-tab-panels v-model="tab" class="col column">
2626
<!-- Charge Points -->
27-
<q-tab-panel name="charge-points">
27+
<q-tab-panel name="charge-points" class="column">
2828
<ChargePointInformation />
2929
</q-tab-panel>
3030
<!-- Vehicles -->
31-
<q-tab-panel name="vehicles">
31+
<q-tab-panel name="vehicles" class="column">
3232
<VehicleInformation />
3333
</q-tab-panel>
3434
<!-- Batteries -->
35-
<q-tab-panel v-if="batteryConfigured" name="batteries">
35+
<q-tab-panel v-if="batteryConfigured" name="batteries" class="column">
3636
<BatteryInformation />
3737
</q-tab-panel>
3838
<!-- Smart Home -->
@@ -68,10 +68,19 @@ const batteryConfigured = computed(() => {
6868
<style scoped lang="scss">
6969
.chart-section {
7070
height: 40vh;
71+
min-height: 350px;
72+
}
73+
74+
.tab-section,
75+
.tab-section :deep(.q-panel-parent .q-panel) {
76+
flex-grow: 1;
77+
display: flex;
78+
flex-direction: column;
7179
}
7280
7381
.tab-section .q-tab-panel {
7482
max-width: 100vw;
83+
flex-grow: 1;
7584
}
7685
7786
@media screen and (max-width: $breakpoint-xs-max) {

0 commit comments

Comments
 (0)