Improve online/offline logo

This commit is contained in:
Matthias 2022-12-08 18:22:34 +01:00
parent 36be5f9714
commit 70b348e3f1

View File

@ -11,9 +11,12 @@
switch switch
@change="changeEvent" @change="changeEvent"
> >
<span class="ms-2 me-1 align-middle">{{ <OnlineIcon
botStore.botStores[bot.botId].isBotOnline ? '&#128994;' : '&#128308;' :size="18"
}}</span> class="ms-2 me-1 align-middle"
:class="botStore.botStores[bot.botId].isBotOnline ? 'online' : 'offline'"
:title="botStore.botStores[bot.botId].isBotOnline ? 'Online' : 'Offline'"
></OnlineIcon>
</b-form-checkbox> </b-form-checkbox>
<div v-if="!noButtons" class="float-end d-flex flex-align-center"> <div v-if="!noButtons" class="float-end d-flex flex-align-center">
<b-button class="ms-1" size="sm" title="Delete bot" @click="$emit('edit')"> <b-button class="ms-1" size="sm" title="Delete bot" @click="$emit('edit')">
@ -40,6 +43,7 @@
<script lang="ts"> <script lang="ts">
import EditIcon from 'vue-material-design-icons/Pencil.vue'; import EditIcon from 'vue-material-design-icons/Pencil.vue';
import DeleteIcon from 'vue-material-design-icons/Delete.vue'; import DeleteIcon from 'vue-material-design-icons/Delete.vue';
import OnlineIcon from 'vue-material-design-icons/Circle.vue';
import { BotDescriptor } from '@/types'; import { BotDescriptor } from '@/types';
import { defineComponent, computed, ref } from 'vue'; import { defineComponent, computed, ref } from 'vue';
import { useBotStore } from '@/stores/ftbotwrapper'; import { useBotStore } from '@/stores/ftbotwrapper';
@ -49,6 +53,7 @@ export default defineComponent({
components: { components: {
DeleteIcon, DeleteIcon,
EditIcon, EditIcon,
OnlineIcon,
}, },
props: { props: {
bot: { required: true, type: Object as () => BotDescriptor }, bot: { required: true, type: Object as () => BotDescriptor },
@ -94,4 +99,10 @@ export default defineComponent({
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.online {
color: #1aa903;
}
.offline {
color: #e01515;
}
</style> </style>