lukaszraczylo/ghtracker
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/ghtracker.git synced 2026-10-12 00:45:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): make the alert action button prominent

Browse Source 
The action button was a small outline control that was easy to miss.
It is now a solid primary button with an icon. The spinner still
replaces the icon while the action runs.
This commit is contained in:
lukaszraczylo
2026-10-05 14:05:12 +01:00
parent ac5eb2f16a
commit a0fd6d6856
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/RowActions.vue
+8 -4
View File
@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { faSpinner } from '@fortawesome/free-solid-svg-icons' import { faScrewdriverWrench, faSpinner } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { import {
AlertDialog, AlertDialog,
@@ -44,14 +44,18 @@ function press(a: ActionDef): void {
<div class="mt-2 flex flex-wrap items-center gap-2" data-test="row-actions"> <div class="mt-2 flex flex-wrap items-center gap-2" data-test="row-actions">
<template v-for="a in row.actions" :key="a.id"> <template v-for="a in row.actions" :key="a.id">
<Button <Button
variant="outline" size="sm"
size="xs" class="font-semibold shadow-sm"
:disabled="busy(a)" :disabled="busy(a)"
:aria-busy="busy(a)" :aria-busy="busy(a)"
:data-test="`action-${a.id}`" :data-test="`action-${a.id}`"
@click="press(a)" @click="press(a)"
> >
<FontAwesomeIcon v-if="busy(a)" :icon="faSpinner" spin aria-hidden="true" /> <FontAwesomeIcon
:icon="busy(a) ? faSpinner : faScrewdriverWrench"
:spin="busy(a)"
aria-hidden="true"
/>
{{ a.label }} {{ a.label }}
</Button> </Button>
<Badge v-if="busy(a)" variant="secondary" data-test="action-status">Sending</Badge> <Badge v-if="busy(a)" variant="secondary" data-test="action-status">Sending</Badge>