From d8673aba34204dc728f07bf70c0ccc760e627dab Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Sat, 16 Jul 2022 10:50:58 +0200
Subject: [PATCH] Use a FAB for the update indicator
---
.../vue/components/alsijil/UpdateIndicator.js | 27 +++++++++++--------
1 file changed, 16 insertions(+), 11 deletions(-)
diff --git a/aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js b/aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js
index acd78aab5..958233c45 100644
--- a/aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js
+++ b/aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js
@@ -1,4 +1,4 @@
-import {ERROR, SAVED, UPDATING, CHANGES} from "../../alsijil/UpdateStatuses.js";
+import {CHANGES, ERROR, SAVED, UPDATING} from "../../alsijil/UpdateStatuses.js";
export default {
created() {
@@ -44,28 +44,33 @@ export default {
default:
return "mdi-alert-outline";
}
+ },
+ isAbleToClick() {
+ return this.status === CHANGES || this.status === ERROR;
}
},
template: `
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
- <div
- v-bind="attrs"
- v-on="on"
+ <v-btn
+ absolute
+ fab
+ right
+ icon
+
+ v-bind="attrs"
+ v-on="on"
+
+ @click="() => {isAbleToClick ? $emit('manual-update') : null}"
+ :loading="status === UPDATING"
>
<v-icon
v-if="status !== UPDATING"
- @click="() => {status === SAVED ? null : $emit('manual-update')}"
:color="color"
>
{{ icon }}
</v-icon>
- <v-progress-circular
- v-else
- indeterminate
- :color="color"
- ></v-progress-circular>
- </div>
+ </v-btn>
</template>
<span>{{ text }}</span>
</v-tooltip>
--
GitLab