Use auto-imported icons

This commit is contained in:
Matthias 2023-05-09 18:25:28 +02:00
parent 1b2c4c3d31
commit e01f2c75a5
13 changed files with 37 additions and 81 deletions

View File

@ -15,13 +15,13 @@
v-if="botStore.botStores[bot.botId].isBotLoggedIn"
:title="botStore.botStores[bot.botId].isBotOnline ? 'Online' : 'Offline'"
>
<OnlineIcon
<i-mdi-circle
class="ms-2 me-1 align-middle"
:class="botStore.botStores[bot.botId].isBotOnline ? 'online' : 'offline'"
></OnlineIcon>
/>
</div>
<div v-else title="Login info expired, please login again.">
<LoggedOutIcon class="offline" />
<i-mdi-cancel class="offline" />
</div>
</b-form-checkbox>
<div v-if="!noButtons" class="float-end d-flex flex-align-center">
@ -32,13 +32,13 @@
title="Edit bot"
@click="$emit('edit')"
>
<EditIcon />
<i-mdi-cancel />
</b-button>
<b-button v-else class="ms-1" size="sm" title="Login again" @click="$emit('editLogin')">
<LoginIcon />
<i-mdi-login />
</b-button>
<b-button class="ms-1" size="sm" title="Delete bot" @click="botRemoveModalVisible = true">
<DeleteIcon />
<i-mdi-delete />
</b-button>
</div>
</div>
@ -58,11 +58,6 @@
import { useBotStore } from '@/stores/ftbotwrapper';
import { BotDescriptor } from '@/types';
import { computed, ref } from 'vue';
import LoggedOutIcon from '~icons/mdi/cancel';
import OnlineIcon from '~icons/mdi/circle';
import DeleteIcon from '~icons/mdi/delete';
import LoginIcon from '~icons/mdi/login';
import EditIcon from '~icons/mdi/pencil';
const props = defineProps({
bot: { required: true, type: Object as () => BotDescriptor },

View File

@ -1,13 +1,12 @@
<template>
<b-link variant="outline-primary" class="nav-link" @click="toggleNight">
<ThemeLightDark />
<i-mdi-brightness-6 />
</b-link>
</template>
<script setup lang="ts">
import { useSettingsStore } from '@/stores/settings';
import { onMounted, ref } from 'vue';
import ThemeLightDark from '~icons/mdi/brightness-6';
const activeTheme = ref('');
const settingsStore = useSettingsStore();

View File

@ -11,7 +11,7 @@
</v-select>
</b-form-group>
<b-button size="sm" title="Abort" class="ms-1 mt-auto" variant="secondary" @click="abort">
<CloseIcon />
<i-mdi-close />
</b-button>
</div>
</template>
@ -19,7 +19,6 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import vSelect from 'vue-select';
import CloseIcon from '~icons/mdi/close';
const props = defineProps({
modelValue: { required: false, default: '', type: String },

View File

@ -9,16 +9,16 @@
:title="!showBotOnly ? 'Showing Account balance' : 'Showing Bot balance'"
@click="showBotOnly = !showBotOnly"
>
<RobotIcon v-if="showBotOnly" />
<AccountIcon v-else />
<i-mdi-robot v-if="showBotOnly" />
<i-mdi-bank v-else />
</b-button>
<b-button
size="sm"
:title="!hideSmallBalances ? 'Hide small balances' : 'Show all balances'"
@click="hideSmallBalances = !hideSmallBalances"
>
<HideIcon v-if="hideSmallBalances" />
<ShowIcon v-else />
<i-mdi-eye-off v-if="hideSmallBalances" />
<i-mdi-eye v-else />
</b-button>
<b-button class="float-end" size="sm" @click="botStore.activeBot.getBalance"
@ -64,10 +64,6 @@ import { useBotStore } from '@/stores/ftbotwrapper';
import { BalanceValues } from '@/types';
import { TableField } from 'bootstrap-vue-next';
import { computed, ref } from 'vue';
import AccountIcon from '~icons/mdi/bank';
import HideIcon from '~icons/mdi/eye-off';
import ShowIcon from '~icons/mdi/eye';
import RobotIcon from '~icons/mdi/robot';
const botStore = useBotStore();
const hideSmallBalances = ref(true);

View File

@ -7,7 +7,7 @@ forceexit
title="Start Trading"
@click="botStore.activeBot.startBot()"
>
<PlayIcon height="24" width="24" />
<i-mdi-play height="24" width="24" />
</button>
<button
class="btn btn-secondary btn-sm ms-1"
@ -15,7 +15,7 @@ forceexit
title="Stop Trading - Also stops handling open trades."
@click="handleStopBot()"
>
<StopIcon height="24" width="24" />
<i-mdi-stop height="24" width="24" />
</button>
<button
class="btn btn-secondary btn-sm ms-1"
@ -23,7 +23,7 @@ forceexit
title="StopBuy - Stops buying, but still handles open trades"
@click="handleStopBuy()"
>
<PauseIcon height="24" width="24" />
<i-mdi-pause height="24" width="24" />
</button>
<button
class="btn btn-secondary btn-sm ms-1"
@ -31,7 +31,7 @@ forceexit
title="Reload Config - reloads configuration including strategy, resetting all settings changed on the fly."
@click="handleReloadConfig()"
>
<ReloadIcon height="24" width="24" />
<i-mdi-reload height="24" width="24" />
</button>
<button
class="btn btn-secondary btn-sm ms-1"
@ -39,7 +39,7 @@ forceexit
title="Force exit all"
@click="handleForceExit()"
>
<ForceExitIcon height="24" width="24" />
<i-mdi-close-box-multiple height="24" width="24" />
</button>
<button
v-if="botStore.activeBot.botState && botStore.activeBot.botState.force_entry_enable"
@ -48,7 +48,7 @@ forceexit
title="Force enter - Immediately enter a trade at an optional price. Exits are then handled according to strategy rules."
@click="forceEnter = true"
>
<ForceEntryIcon style="font-size: 20px" />
<i-mdi-plus-box-multiple-outline style="font-size: 20px" />
</button>
<button
v-if="botStore.activeBot.isWebserverMode && false"
@ -57,7 +57,7 @@ forceexit
title="Start Trading mode"
@click="botStore.activeBot.startTrade()"
>
<PlayIcon class="fs-4" />
<i-mdi-play class="fs-4" />
</button>
<ForceEntryForm v-model="forceEnter" :pair="botStore.activeBot.selectedPair" />
<MessageBox ref="msgBox" />
@ -69,12 +69,6 @@ import MessageBox, { MsgBoxObject } from '@/components/general/MessageBox.vue';
import { useBotStore } from '@/stores/ftbotwrapper';
import { ForceSellPayload } from '@/types';
import { computed, defineComponent, ref } from 'vue';
import ForceExitIcon from '~icons/mdi/close-box-multiple';
import PauseIcon from '~icons/mdi/pause';
import PlayIcon from '~icons/mdi/play';
import ForceEntryIcon from '~icons/mdi/plus-box-multiple-outline';
import ReloadIcon from '~icons/mdi/reload';
import StopIcon from '~icons/mdi/stop';
import ForceEntryForm from './ForceEntryForm.vue';
@ -82,12 +76,6 @@ export default defineComponent({
name: 'BotControls',
components: {
ForceEntryForm,
PlayIcon,
StopIcon,
PauseIcon,
ReloadIcon,
ForceExitIcon,
ForceEntryIcon,
MessageBox,
},
setup() {

View File

@ -43,7 +43,7 @@
:disabled="blacklistSelect.length === 0"
@click="deletePairs"
>
<DeleteIcon />
<i-mdi-delete />
</b-button>
</div>
<b-popover
@ -94,11 +94,9 @@
<script lang="ts">
import { useBotStore } from '@/stores/ftbotwrapper';
import { defineComponent, onMounted, ref } from 'vue';
import DeleteIcon from '~icons/mdi/delete';
export default defineComponent({
name: 'FTBotAPIPairList',
components: { DeleteIcon },
setup() {
const newblacklistpair = ref('');
const blackListShow = ref(false);

View File

@ -13,7 +13,7 @@
title="Delete trade"
@click="removePairLock(row.item)"
>
<DeleteIcon />
<i-mdi-delete />
</b-button>
</template>
</b-table>
@ -28,11 +28,9 @@ import { Lock } from '@/types';
import { showAlert } from '@/stores/alerts';
import { useBotStore } from '@/stores/ftbotwrapper';
import { defineComponent } from 'vue';
import DeleteIcon from '~icons/mdi/delete';
export default defineComponent({
name: 'PairLockList',
components: { DeleteIcon },
setup() {
const botStore = useBotStore();

View File

@ -12,19 +12,17 @@
title="Auto Refresh All bots"
@click="botStore.allRefreshFull"
>
<RefreshIcon />
<i-mdi-refresh />
</b-button>
</div>
</template>
<script lang="ts">
import RefreshIcon from '~icons/mdi/refresh';
import { defineComponent, computed } from 'vue';
import { useBotStore } from '@/stores/ftbotwrapper';
export default defineComponent({
name: 'ReloadControl',
components: { RefreshIcon },
setup() {
const botStore = useBotStore();
const autoRefreshLoc = computed({

View File

@ -7,7 +7,7 @@
title="Forceexit"
@click="$emit('forceExit', trade)"
>
<ForceSellIcon class="me-1" />Forceexit
<i-mdi-close-box class="me-1" />Forceexit
</b-button>
<b-button
v-if="botApiVersion > 1.1"
@ -16,7 +16,7 @@
title="Forceexit limit"
@click="$emit('forceExit', trade, 'limit')"
>
<ForceSellIcon class="me-1" />Forceexit limit
<i-mdi-close-box class="me-1" />Forceexit limit
</b-button>
<b-button
v-if="botApiVersion > 1.1"
@ -25,7 +25,7 @@
title="Forceexit market"
@click="$emit('forceExit', trade, 'market')"
>
<ForceSellIcon class="me-1" />Forceexit market
<i-mdi-close-box class="me-1" />Forceexit market
</b-button>
<b-button
v-if="botApiVersion > 2.16"
@ -34,7 +34,7 @@
title="Forceexit partial"
@click="$emit('forceExitPartial', trade)"
>
<ForceSellPartialIcon class="me-1" />Forceexit partial
<i-mdi-close-box-multiple class="me-1" />Forceexit partial
</b-button>
<b-button
v-if="botApiVersion >= 2.24 && trade.open_order_id"
@ -43,7 +43,7 @@
title="Cancel open orders"
@click="$emit('cancelOpenOrder', trade)"
>
<CancelIcon class="me-1" />Cancel open order
<i-mdi-cancel class="me-1" />Cancel open order
</b-button>
<b-button
@ -52,7 +52,7 @@
title="Delete trade"
@click="$emit('deleteTrade', trade)"
>
<DeleteIcon class="me-1" />
<i-mdi-delete class="me-1" />
Delete
</b-button>
</div>
@ -60,10 +60,6 @@
<script setup lang="ts">
import { Trade } from '@/types';
import CancelIcon from '~icons/mdi/cancel';
import ForceSellIcon from '~icons/mdi/close-box';
import ForceSellPartialIcon from '~icons/mdi/close-box-multiple';
import DeleteIcon from '~icons/mdi/delete';
defineProps({
botApiVersion: {

View File

@ -1,8 +1,6 @@
<script setup lang="ts">
import { Trade } from '@/types';
import { ref } from 'vue';
import CancelIcon from '~icons/mdi/cancel';
import ActionIcon from '~icons/mdi/gesture-tap';
import TradeActions from './TradeActions.vue';
defineProps({
@ -36,7 +34,7 @@ const cancelOpenOrderHandler = (item: Trade) => {
title="Actions"
@click="popoverOpen = !popoverOpen"
>
<ActionIcon />
<i-mdi-gesture-tap />
</b-button>
<b-popover
:target="`btn-actions-${id}`"
@ -57,7 +55,7 @@ const cancelOpenOrderHandler = (item: Trade) => {
@cancel-open-order="cancelOpenOrderHandler"
/>
<b-button class="mt-1 w-100 text-start" size="sm" @click="popoverOpen = false">
<CancelIcon class="me-1" />Close Actions menu
<i-mdi-cancel class="me-1" />Close Actions menu
</b-button>
</b-popover>
</div>

View File

@ -15,7 +15,7 @@
:title="`Edit this ${editableName}.`"
@click="editing = true"
>
<EditIcon />
<i-mdi-pencil />
</b-button>
<b-button
size="sm"
@ -23,7 +23,7 @@
:title="`Delete this ${editableName}.`"
@click="$emit('delete', modelValue)"
>
<DeleteIcon />
<i-mdi-delete />
</b-button>
</template>
<b-button
@ -32,7 +32,7 @@
:title="`Add new ${editableName}.`"
variant="primary"
@click="addNewClick"
><AddIcon />
><i-mdi-plus-box-outline />
</b-button>
<template v-if="addNew || editing">
<b-button
@ -41,10 +41,10 @@
variant="primary"
@click="saveNewName"
>
<CheckIcon />
<i-mdi-check />
</b-button>
<b-button size="sm" title="Abort" class="ms-1" variant="secondary" @click="abort">
<CloseIcon />
<i-mdi-close />
</b-button>
</template>
</div>
@ -52,12 +52,6 @@
</template>
<script setup lang="ts">
import CheckIcon from '~icons/mdi/check';
import CloseIcon from '~icons/mdi/close';
import DeleteIcon from '~icons/mdi/delete';
import EditIcon from '~icons/mdi/pencil';
import AddIcon from '~icons/mdi/plus-box-outline';
import { ref, watch } from 'vue';
const props = defineProps({

View File

@ -1,6 +1,6 @@
<template>
<div>
<b-button @click="openLoginModal()"><LoginIcon class="me-1" />{{ loginText }}</b-button>
<b-button @click="openLoginModal()"><i-mdi-login class="me-1" />{{ loginText }}</b-button>
<b-modal
id="modal-prevent-closing"
v-model="loginViewOpen"
@ -21,7 +21,6 @@
import Login from '@/components/BotLogin.vue';
import { AuthStorageWithBotId } from '@/types';
import { nextTick, ref } from 'vue';
import LoginIcon from '~icons/mdi/login';
defineProps({
loginText: { required: false, default: 'Login', type: String },

View File

@ -30,7 +30,7 @@
size="sm"
class="align-self-start mt-1 ms-1"
@click="botStore.activeBot.setDetailTrade(null)"
><BackIcon /> Back</b-button
><i-mdi-arrow-left /> Back</b-button
>
<TradeDetail
:trade="botStore.activeBot.tradeDetail"
@ -45,14 +45,12 @@ import CustomTradeList from '@/components/ftbot/CustomTradeList.vue';
import TradeDetail from '@/components/ftbot/TradeDetail.vue';
import { useBotStore } from '@/stores/ftbotwrapper';
import { defineComponent } from 'vue';
import BackIcon from '~icons/mdi/arrow-left';
export default defineComponent({
name: 'TradesList',
components: {
CustomTradeList,
TradeDetail,
BackIcon,
},
props: {
history: { default: false, type: Boolean },