Skip to content

Commit ad5463b

Browse files
johnsimonsjohnsimons
committed
Refactor more button to use the ActionButton
1 parent c718d20 commit ad5463b

15 files changed

+63
-115
lines changed

‎src/Frontend/src/components/ActionButton.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,11 @@ const buttonClasses = ["btn", variantClasses[props.variant], sizeClasses[props.s
7070
opacity: 0.65;
7171
}
7272
73+
.icon-left,
74+
.icon-right {
75+
color: var(--reduced-emphasis);
76+
}
77+
7378
.icon-left {
7479
margin-right: 0.25rem;
7580
}

‎src/Frontend/src/components/ConfirmDialog.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import ActionButton from "@/components/ActionButton.vue";
23
import { onMounted, onUnmounted } from "vue";
34
45
const emit = defineEmits<{ confirm: []; cancel: [] }>();
@@ -46,8 +47,8 @@ onMounted(() => {
4647
<p v-if="secondParagraph && secondParagraph.length">{{ secondParagraph }}</p>
4748
</div>
4849
<div class="modal-footer">
49-
<button class="btn btn-primary" :aria-label="hideCancel ? 'Ok' : 'Yes'" @click="confirm">{{ hideCancel ? "Ok" : "Yes" }}</button>
50-
<button v-if="!hideCancel" aria-label="No" class="btn btn-default" @click="close">No</button>
50+
<ActionButton variant="primary" :aria-label="hideCancel ? 'Ok' : 'Yes'" @click="confirm">{{ hideCancel ? "Ok" : "Yes" }}</ActionButton>
51+
<ActionButton v-if="!hideCancel" aria-label="No" @click="close">No</ActionButton>
5152
</div>
5253
</div>
5354
</div>

‎src/Frontend/src/components/CopyToClipboard.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { Tippy, TippyComponent } from "vue-tippy";
33
import { ref, useTemplateRef, watch } from "vue";
4-
import FAIcon from "@/components/FAIcon.vue";
4+
import ActionButton from "@/components/ActionButton.vue";
55
import { faCopy } from "@fortawesome/free-regular-svg-icons";
66
77
const props = withDefaults(
@@ -27,7 +27,7 @@ watch(timeoutId, (_, previousTimeoutId) => clearTimeout(previousTimeoutId));
2727

2828
<template>
2929
<Tippy content="Copied" ref="tippyRef" trigger="manual">
30-
<button v-if="!props.isIconOnly" type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard"><FAIcon :icon="faCopy" /> Copy to clipboard</button>
31-
<button v-else type="button" class="btn btn-secondary btn-sm" @click="copyToClipboard" v-tippy="'Copy to clipboard'"><FAIcon :icon="faCopy" /></button>
30+
<ActionButton v-if="!props.isIconOnly" variant="secondary" size="sm" :icon="faCopy" @click="copyToClipboard">Copy to clipboard</ActionButton>
31+
<ActionButton v-else variant="secondary" size="sm" :icon="faCopy" tooltip="Copy to clipboard" @click="copyToClipboard" />
3232
</Tippy>
3333
</template>

‎src/Frontend/src/components/RefreshConfig.vue‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { ref, watch } from "vue";
33
import ListFilterSelector from "@/components/audit/ListFilterSelector.vue";
4-
import FAIcon from "@/components/FAIcon.vue";
4+
import ActionButton from "@/components/ActionButton.vue";
55
import { faRefresh } from "@fortawesome/free-solid-svg-icons";
66
77
const props = defineProps<{ isLoading: boolean }>();
@@ -62,7 +62,7 @@ async function refresh() {
6262

6363
<template>
6464
<div class="refresh-config">
65-
<button class="btn btn-sm" title="refresh" @click="refresh"><FAIcon class="refresh-icon" :class="{ spinning: showSpinning }" :icon="faRefresh" /> Refresh List</button>
65+
<ActionButton size="sm" :icon="faRefresh" :loading="showSpinning" tooltip="refresh" @click="refresh">Refresh List</ActionButton>
6666
<div class="filter">
6767
<div class="filter-label">Auto-Refresh:</div>
6868
<div class="filter-component">
@@ -88,23 +88,4 @@ async function refresh() {
8888
.filter-label {
8989
font-weight: bold;
9090
}
91-
92-
@keyframes spin {
93-
from {
94-
transform: rotate(0deg);
95-
}
96-
to {
97-
transform: rotate(360deg);
98-
}
99-
}
100-
101-
.refresh-icon {
102-
display: inline-block;
103-
color: var(--reduced-emphasis);
104-
}
105-
106-
/* You can add this class dynamically when needed */
107-
.refresh-icon.spinning {
108-
animation: spin 1s linear infinite;
109-
}
11091
</style>

‎src/Frontend/src/components/configuration/HealthCheckNotifications.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type UpdateEmailNotificationsSettingsRequest from "@/resources/UpdateEmai
1212
import type EmailSettings from "@/components/configuration/EmailSettings";
1313
import OnOffSwitch from "../OnOffSwitch.vue";
1414
import FAIcon from "@/components/FAIcon.vue";
15+
import ActionButton from "@/components/ActionButton.vue";
1516
import { faCheck, faEdit, faEnvelope, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
1617
1718
const isExpired = licenseStatus.isExpired;
@@ -129,10 +130,10 @@ onMounted(async () => {
129130
<div class="col-12">
130131
<p class="lead">Email notifications</p>
131132
<p class="endpoint-metadata">
132-
<button class="btn btn-link btn-sm" type="button" @click="editEmailNotifications"><FAIcon :icon="faEdit" /> Configure</button>
133+
<ActionButton variant="link" size="sm" :icon="faEdit" @click="editEmailNotifications">Configure</ActionButton>
133134
</p>
134135
<p class="endpoint-metadata">
135-
<button class="btn btn-link btn-sm" type="button" @click="testEmailNotifications" :disabled="!!emailTestInProgress"><FAIcon :icon="faEnvelope" /> Send test notification</button>
136+
<ActionButton variant="link" size="sm" :icon="faEnvelope" @click="testEmailNotifications" :disabled="!!emailTestInProgress">Send test notification</ActionButton>
136137
<span class="connection-test connection-testing">
137138
<template v-if="emailTestInProgress">
138139
<i class="glyphicon glyphicon-refresh rotate"></i>

‎src/Frontend/src/components/configuration/RetryRedirectEdit.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import { computed, ref } from "vue";
3+
import ActionButton from "@/components/ActionButton.vue";
34
import FAIcon from "@/components/FAIcon.vue";
45
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
56
@@ -142,9 +143,9 @@ function close() {
142143
</div>
143144
</div>
144145
<div class="modal-footer">
145-
<button v-if="model.message_redirect_id" class="btn btn-primary" :disabled="!formIsValid" @click="edit">Modify</button>
146-
<button v-if="!model.message_redirect_id" class="btn btn-primary" :disabled="!formIsValid" @click="create">Create</button>
147-
<button class="btn btn-default" @click="close">Cancel</button>
146+
<ActionButton v-if="model.message_redirect_id" variant="primary" :disabled="!formIsValid" @click="edit">Modify</ActionButton>
147+
<ActionButton v-if="!model.message_redirect_id" variant="primary" :disabled="!formIsValid" @click="create">Create</ActionButton>
148+
<ActionButton @click="close">Cancel</ActionButton>
148149
</div>
149150
</form>
150151
</div>

‎src/Frontend/src/components/configuration/RetryRedirects.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type Redirect from "@/resources/Redirect";
1515
import RetryRedirectEdit, { type RetryRedirect } from "@/components/configuration/RetryRedirectEdit.vue";
1616
import redirectCountUpdated from "@/components/configuration/redirectCountUpdated";
1717
import FAIcon from "@/components/FAIcon.vue";
18+
import ActionButton from "@/components/ActionButton.vue";
1819
import { faClock } from "@fortawesome/free-regular-svg-icons";
1920
2021
const isExpired = licenseStatus.isExpired;
@@ -143,7 +144,7 @@ onMounted(() => {
143144
<div class="row">
144145
<div class="col-sm-12">
145146
<div class="btn-toolbar">
146-
<button type="button" class="btn btn-default" @click="createRedirect"><i class="fa pa-redirect-source pa-redirect-small"></i> Create Redirect</button>
147+
<ActionButton @click="createRedirect"><i class="fa pa-redirect-source pa-redirect-small"></i> Create Redirect</ActionButton>
147148
<span></span>
148149
</div>
149150
</div>
@@ -175,8 +176,8 @@ onMounted(() => {
175176
<div class="row">
176177
<div class="col-sm-12">
177178
<p class="small">
178-
<button type="button" class="btn btn-link btn-sm" @click="deleteRedirect(redirect)">End Redirect</button>
179-
<button type="button" class="btn btn-link btn-sm" @click="editRedirect(redirect)">Modify Redirect</button>
179+
<ActionButton variant="link" size="sm" @click="deleteRedirect(redirect)">End Redirect</ActionButton>
180+
<ActionButton variant="link" size="sm" @click="editRedirect(redirect)">Modify Redirect</ActionButton>
180181
</p>
181182
</div>
182183
</div>

‎src/Frontend/src/components/failedmessages/FailedMessages.vue‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import SortOptions, { SortDirection } from "@/resources/SortOptions";
1919
import { TYPE } from "vue-toastification";
2020
import GroupOperation from "@/resources/GroupOperation";
2121
import { faArrowDownAZ, faArrowDownZA, faArrowDownShortWide, faArrowDownWideShort, faArrowRotateRight, faTrash, faDownload } from "@fortawesome/free-solid-svg-icons";
22-
import FAIcon from "@/components/FAIcon.vue";
22+
import ActionButton from "@/components/ActionButton.vue";
2323
2424
let pollingFaster = false;
2525
let refreshInterval: number | undefined;
@@ -293,13 +293,13 @@ onMounted(() => {
293293
<div class="row">
294294
<div class="col-9">
295295
<div class="btn-toolbar">
296-
<button type="button" class="btn btn-default select-all" @click="selectAll" v-if="!isAnythingSelected()">Select all</button>
297-
<button type="button" class="btn btn-default select-all" @click="deselectAll" v-if="isAnythingSelected()">Clear selection</button>
298-
<button type="button" class="btn btn-default" @click="retrySelected()" :disabled="!isAnythingSelected()"><FAIcon :icon="faArrowRotateRight" class="icon" /> Retry {{ numberSelected() }} selected</button>
299-
<button type="button" class="btn btn-default" @click="showDelete = true" :disabled="!isAnythingSelected()"><FAIcon :icon="faTrash" class="icon" /> Delete {{ numberSelected() }} selected</button>
300-
<button type="button" class="btn btn-default" @click="exportSelected()" :disabled="!isAnythingSelected()"><FAIcon :icon="faDownload" class="icon" /> Export {{ numberSelected() }} selected</button>
301-
<button type="button" class="btn btn-default" v-if="groupId" @click="showConfirmRetryAll = true"><FAIcon :icon="faArrowRotateRight" class="icon" /> Retry all</button>
302-
<button type="button" class="btn btn-default" v-if="groupId" @click="showConfirmDeleteAll = true"><FAIcon :icon="faTrash" class="icon" /> Delete all</button>
296+
<ActionButton v-if="!isAnythingSelected()" @click="selectAll">Select all</ActionButton>
297+
<ActionButton v-if="isAnythingSelected()" @click="deselectAll">Clear selection</ActionButton>
298+
<ActionButton :icon="faArrowRotateRight" @click="retrySelected()" :disabled="!isAnythingSelected()">Retry {{ numberSelected() }} selected</ActionButton>
299+
<ActionButton :icon="faTrash" @click="showDelete = true" :disabled="!isAnythingSelected()">Delete {{ numberSelected() }} selected</ActionButton>
300+
<ActionButton :icon="faDownload" @click="exportSelected()" :disabled="!isAnythingSelected()">Export {{ numberSelected() }} selected</ActionButton>
301+
<ActionButton v-if="groupId" :icon="faArrowRotateRight" @click="showConfirmRetryAll = true">Retry all</ActionButton>
302+
<ActionButton v-if="groupId" :icon="faTrash" @click="showConfirmDeleteAll = true">Delete all</ActionButton>
303303
</div>
304304
</div>
305305
<div class="col-3">
@@ -353,8 +353,4 @@ onMounted(() => {
353353
</template>
354354
</template>
355355

356-
<style scoped>
357-
.icon {
358-
color: var(--reduced-emphasis);
359-
}
360-
</style>
356+
<style scoped></style>

‎src/Frontend/src/components/failedmessages/MessageGroupList.vue‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import FAIcon from "@/components/FAIcon.vue";
1515
import { faArrowRotateRight, faEnvelope, faEraser, faExclamationTriangle, faPencil, faStickyNote, faTrash } from "@fortawesome/free-solid-svg-icons";
1616
import { faClock } from "@fortawesome/free-regular-svg-icons";
1717
import ProgressMessage from "./ProgressMessage.vue";
18+
import ActionButton from "@/components/ActionButton.vue";
1819
1920
interface WorkflowState {
2021
status: string;
@@ -403,34 +404,34 @@ defineExpose<IMessageGroupList>({
403404
</div>
404405
<div class="row" v-if="!isBeingRetried(group) && !isBeingArchived(group.workflow_state.status)">
405406
<div class="col-sm-12 no-side-padding">
406-
<button
407-
type="button"
408-
class="btn btn-link btn-sm"
407+
<ActionButton
408+
variant="link"
409+
size="sm"
410+
:icon="faArrowRotateRight"
409411
:disabled="group.count == 0 || isBeingRetried(group)"
410412
@mouseenter="group.hover3 = true"
411413
@mouseleave="group.hover3 = false"
412414
v-if="exceptionGroups.length > 0"
413415
@click.stop="retryGroup(group)"
414416
>
415-
<FAIcon :icon="faArrowRotateRight" class="icon" />
416417
<span>Request retry</span>
417-
</button>
418+
</ActionButton>
418419

419-
<button
420-
type="button"
421-
class="btn btn-link btn-sm"
420+
<ActionButton
421+
variant="link"
422+
size="sm"
423+
:icon="faTrash"
422424
:disabled="group.count == 0 || isBeingRetried(group)"
423425
@mouseenter="group.hover3 = true"
424426
@mouseleave="group.hover3 = false"
425427
v-if="exceptionGroups.length > 0"
426428
@click.stop="deleteGroup(group)"
427429
>
428-
<FAIcon :icon="faTrash" class="icon" />
429430
<span>Delete group</span>
430-
</button>
431-
<button type="button" class="btn btn-link btn-sm" v-if="!group.comment" @click.stop="editNote(group)"><FAIcon :icon="faStickyNote" class="icon" />Add note</button>
432-
<button type="button" class="btn btn-link btn-sm" v-if="group.comment" @click.stop="editNote(group)"><FAIcon :icon="faPencil" class="icon" />Edit note</button>
433-
<button type="button" class="btn btn-link btn-sm" v-if="group.comment" @click.stop="deleteNote(group)"><FAIcon :icon="faEraser" class="icon" />Remove note</button>
431+
</ActionButton>
432+
<ActionButton variant="link" size="sm" :icon="faStickyNote" v-if="!group.comment" @click.stop="editNote(group)">Add note</ActionButton>
433+
<ActionButton variant="link" size="sm" :icon="faPencil" v-if="group.comment" @click.stop="editNote(group)">Edit note</ActionButton>
434+
<ActionButton variant="link" size="sm" :icon="faEraser" v-if="group.comment" @click.stop="deleteNote(group)">Remove note</ActionButton>
434435
</div>
435436
</div>
436437

‎src/Frontend/src/components/failedmessages/PendingRetries.vue‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import GroupOperation from "@/resources/GroupOperation";
1919
import { useIsMassTransitConnected } from "@/composables/useIsMassTransitConnected";
2020
import { faArrowDownAZ, faArrowDownZA, faArrowDownShortWide, faArrowDownWideShort, faInfoCircle, faExternalLink, faFilter, faTimes, faArrowRightRotate } from "@fortawesome/free-solid-svg-icons";
2121
import FAIcon from "@/components/FAIcon.vue";
22+
import ActionButton from "@/components/ActionButton.vue";
2223
import { faCheckSquare } from "@fortawesome/free-regular-svg-icons";
2324
2425
let refreshInterval: number | undefined;
@@ -269,7 +270,7 @@ onMounted(() => {
269270
</option>
270271
</select>
271272
<span class="input-group-btn">
272-
<button type="button" @click="clearSelectedQueue()" class="btn btn-default"><FAIcon :icon="faTimes" class="icon" /></button>
273+
<ActionButton @click="clearSelectedQueue()" :icon="faTimes" />
273274
</span>
274275
</div>
275276
</div>
@@ -293,16 +294,10 @@ onMounted(() => {
293294
<div class="row">
294295
<div class="col-6 col-xs-12 toolbar-menus">
295296
<div class="action-btns">
296-
<button type="button" class="btn btn-default" :disabled="!isAnythingSelected()" @click="showConfirmRetry = true"><FAIcon :icon="faArrowRightRotate" class="icon" /><span>Retry</span> ({{ numberSelected() }})</button>
297-
<button type="button" class="btn btn-default" :disabled="!isAnythingSelected()" @click="showConfirmResolve = true">
298-
<FAIcon :icon="faCheckSquare" class="icon" />
299-
<span>Mark as resolved</span> ({{ numberSelected() }})
300-
</button>
301-
<button type="button" class="btn btn-default" :disabled="!isAnythingDisplayed()" @click="retryAllClicked()"><FAIcon :icon="faArrowRightRotate" class="icon" /><span>Retry all</span></button>
302-
<button type="button" class="btn btn-default" @click="showConfirmResolveAll = true">
303-
<FAIcon :icon="faCheckSquare" class="icon" />
304-
<span>Mark all as resolved</span>
305-
</button>
297+
<ActionButton :icon="faArrowRightRotate" :disabled="!isAnythingSelected()" @click="showConfirmRetry = true"><span>Retry</span> ({{ numberSelected() }})</ActionButton>
298+
<ActionButton :icon="faCheckSquare" :disabled="!isAnythingSelected()" @click="showConfirmResolve = true"><span>Mark as resolved</span> ({{ numberSelected() }})</ActionButton>
299+
<ActionButton :icon="faArrowRightRotate" :disabled="!isAnythingDisplayed()" @click="retryAllClicked()"><span>Retry all</span></ActionButton>
300+
<ActionButton :icon="faCheckSquare" @click="showConfirmResolveAll = true"><span>Mark all as resolved</span></ActionButton>
306301
</div>
307302
</div>
308303
</div>

0 commit comments

Comments
 (0)