patrick/OpenDTU-old
1
0
Fork 0
Code Issues Pull Requests Actions 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 Bernhard Kirchen
parent a582f9c6d3
commit 0a5bd65bd2
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

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