patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

webapp: beautify radio statistics reset button

Browse Source 
it would be nice to have this in the header of the accordion, which is
hard, but doable. however, clicking the button then also toggles the
accordion, which is unacceptable. preventing that seems non-trivial, as
the @click.stop() is not enough. also, nesting interactive elements is
simply bad practice. the button can also go to the right of header, with
reasonable effort, but the corner radii are then messed up and would
need to react interactively (accordion collapsed or not), which is also
a pain.

we now "float" the reset button to the right, add a nice icon, and give
the button some space so it at least looks like it belongs there.
This commit is contained in:
Bernhard Kirchen 2024-10-26 22:49:32 +02:00 committed by Thomas Basler
parent 3c188f2f9f
commit 0832d3e18c
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
webapp/src/views/HomeView.vue
View File

@ -308,23 +308,25 @@
</tr>
</tbody>
</table>
<button
:disabled="!isLogged || performRadioStatsReset"
type="button"
class="btn btn-danger"
@click="onResetRadioStats(inverter.serial)"
>
<template v-if="!performRadioStatsReset">
{{ $t('home.StatsReset') }}
</template>
<template v-else>
<span
class="spinner-border spinner-border-sm"
aria-hidden="true"
></span>
<span role="status"> {{ $t('home.StatsResetting') }}</span>
</template>
</button>
<div class="d-flex">
<button
:disabled="!isLogged || performRadioStatsReset"
type="button"
class="btn btn-danger ms-auto me-3 mt-3"
@click="onResetRadioStats(inverter.serial)"
>
<template v-if="!performRadioStatsReset">
<BIconArrowCounterclockwise />&nbsp;{{ $t('home.StatsReset') }}
</template>
<template v-else>
<span
class="spinner-border spinner-border-sm"
aria-hidden="true"
></span>
<span role="status">&nbsp;{{ $t('home.StatsResetting') }}</span>
</template>
</button>
</div>
</div>
</div>
</div>