mirror of https://github.com/Fabio286/antares.git
316 lines
10 KiB
Vue
316 lines
10 KiB
Vue
<template>
|
|
<div class="p-relative">
|
|
<div class="shortcuts-tools pb-2 px-2">
|
|
<button class="btn btn-dark btn-sm d-flex ml-2" @click="showAddModal">
|
|
<i class="mdi mdi-24px mdi-plus mr-1" /><span>{{ t('application.addShortcut') }}</span>
|
|
</button>
|
|
<button class="btn btn-dark btn-sm d-flex ml-2" @click="isConfirmRestoreModal = true">
|
|
<i class="mdi mdi-24px mdi-undo mr-1" /><span>{{ t('application.restoreDefaults') }}</span>
|
|
</button>
|
|
</div>
|
|
<div class="container workspace-query-results">
|
|
<div class="table table-hover">
|
|
<div class="thead">
|
|
<div class="tr text-uppercase">
|
|
<div class="th no-border">
|
|
<div>
|
|
{{ t('application.event') }}
|
|
</div>
|
|
</div>
|
|
<div class="th no-border" style="width: 100%;">
|
|
<div>
|
|
{{ t('application.key', 2) }}
|
|
</div>
|
|
</div>
|
|
<div class="th no-border" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tbody">
|
|
<div
|
|
v-for="(shortcut, i) in shortcuts"
|
|
:key="i"
|
|
class="tr"
|
|
tabindex="0"
|
|
>
|
|
<div class="td py-1">
|
|
{{ t(shortcutEvents[shortcut.event].l18n, {param: shortcutEvents[shortcut.event].l18nParam}) }}
|
|
</div>
|
|
<div
|
|
class="td py-1"
|
|
style="border-right: 0;"
|
|
v-html="parseKeys(shortcut.keys)"
|
|
/>
|
|
<div class="td py-1 pr-2">
|
|
<button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1 mr-2" @click="showEditModal({...shortcut, index: i})">
|
|
<span>{{ t('general.edit') }}</span><i class="mdi mdi-pencil ml-1" />
|
|
</button>
|
|
<button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1" @click="showDeleteModal(shortcut)">
|
|
<span>{{ t('general.delete') }}</span><i class="mdi mdi-delete-outline ml-1" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Teleport to="#window-content">
|
|
<ConfirmModal
|
|
v-if="isConfirmAddModal"
|
|
:disable-autofocus="true"
|
|
:confirm-text="t('general.save')"
|
|
:close-on-confirm="false"
|
|
@confirm="addShortcut"
|
|
@hide="closeAddModal"
|
|
>
|
|
<template #header>
|
|
<div class="d-flex">
|
|
<i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('application.addShortcut') }}
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div class="mb-2">
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('application.event') }}</label>
|
|
<BaseSelect
|
|
v-model="shortcutToAdd.event"
|
|
class="form-select"
|
|
:options="eventOptions"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('application.key', 2) }}</label>
|
|
<KeyPressDetector v-model="typedShortcut" />
|
|
</div>
|
|
</div>
|
|
<small v-if="doesShortcutExists" class="text-warning">{{ t('application.shortcutAlreadyExists') }}</small>
|
|
</template>
|
|
</ConfirmModal>
|
|
|
|
<ConfirmModal
|
|
v-if="isConfirmEditModal"
|
|
:disable-autofocus="true"
|
|
:confirm-text="t('general.save')"
|
|
:close-on-confirm="false"
|
|
@confirm="editShortcut"
|
|
@hide="closeEditModal"
|
|
>
|
|
<template #header>
|
|
<div class="d-flex">
|
|
<i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('application.editShortcut') }}
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div class="mb-2">
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('application.event') }}</label>
|
|
<BaseSelect
|
|
v-model="shortcutToEdit.event"
|
|
class="form-select"
|
|
:options="eventOptions"
|
|
:disabled="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="form-group">
|
|
<label class="form-label">{{ t('application.key', 2) }}</label>
|
|
<KeyPressDetector v-model="shortcutToEdit.keys[0]" />
|
|
</div>
|
|
</div>
|
|
<small v-if="doesShortcutExists" class="text-warning">{{ t('application.shortcutAlreadyExists') }}</small>
|
|
</template>
|
|
</ConfirmModal>
|
|
|
|
<ConfirmModal
|
|
v-if="isConfirmDeleteModal"
|
|
:disable-autofocus="true"
|
|
@confirm="deleteShortcut"
|
|
@hide="isConfirmDeleteModal = false"
|
|
>
|
|
<template #header>
|
|
<div class="d-flex">
|
|
<i class="mdi mdi-24px mdi-delete mr-1" /> {{ t('application.deleteShortcut') }}
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div class="mb-2">
|
|
{{ t('general.deleteConfirm') }} <b>{{ t(shortcutEvents[shortcutToDelete.event].l18n, {param: shortcutEvents[shortcutToDelete.event].l18nParam}) }} (<span v-html="parseKeys(shortcutToDelete.keys)" />)</b>?
|
|
</div>
|
|
</template>
|
|
</ConfirmModal>
|
|
|
|
<ConfirmModal
|
|
v-if="isConfirmRestoreModal"
|
|
:disable-autofocus="true"
|
|
@confirm="restoreDefaults"
|
|
@hide="isConfirmRestoreModal = false"
|
|
>
|
|
<template #header>
|
|
<div class="d-flex">
|
|
<i class="mdi mdi-24px mdi-undo mr-1" /> {{ t('application.restoreDefaults') }}
|
|
</div>
|
|
</template>
|
|
<template #body>
|
|
<div class="mb-2">
|
|
{{ t('application.restoreDefaultsQuestion') }}
|
|
</div>
|
|
</template>
|
|
</ConfirmModal>
|
|
</Teleport>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed } from '@vue/reactivity';
|
|
import { shortcutEvents, ShortcutRecord } from 'common/shortcuts';
|
|
import { storeToRefs } from 'pinia';
|
|
import { Ref, ref, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import ConfirmModal from '@/components/BaseConfirmModal.vue';
|
|
import BaseSelect from '@/components/BaseSelect.vue';
|
|
import { useFilters } from '@/composables/useFilters';
|
|
import Application from '@/ipc-api/Application';
|
|
import { useSettingsStore } from '@/stores/settings';
|
|
|
|
import KeyPressDetector from './KeyPressDetector.vue';
|
|
|
|
const { parseKeys } = useFilters();
|
|
|
|
const { t } = useI18n();
|
|
|
|
const isMacOS = process.platform === 'darwin';
|
|
|
|
const isConfirmRestoreModal = ref(false);
|
|
const isConfirmAddModal = ref(false);
|
|
const isConfirmEditModal = ref(false);
|
|
const isConfirmDeleteModal = ref(false);
|
|
const doesShortcutExists = ref(false);
|
|
const shortcutToAdd: Ref<ShortcutRecord> = ref({ event: undefined, keys: [], os: [process.platform] });
|
|
const shortcutToEdit: Ref<ShortcutRecord & { index: number }> = ref(null);
|
|
const shortcutToDelete: Ref<ShortcutRecord> = ref(null);
|
|
const typedShortcut = ref('');
|
|
|
|
const settingsStore = useSettingsStore();
|
|
const { shortcuts } = storeToRefs(settingsStore);
|
|
|
|
const eventOptions = computed(() => {
|
|
return Object.keys(shortcutEvents)
|
|
.map(key => {
|
|
return { value: key, label: t(shortcutEvents[key].l18n, { param: shortcutEvents[key].l18nParam }) };
|
|
})
|
|
.sort((a, b) => {
|
|
if (a.label < b.label) return -1;
|
|
if (a.label > b.label) return 1;
|
|
return 0;
|
|
});
|
|
});
|
|
|
|
const restoreDefaults = () => {
|
|
isConfirmRestoreModal.value = false;
|
|
return Application.restoreDefaultShortcuts();
|
|
};
|
|
|
|
const showAddModal = () => {
|
|
shortcutToAdd.value.event = eventOptions.value[0].value;
|
|
isConfirmAddModal.value = true;
|
|
};
|
|
|
|
const closeAddModal = () => {
|
|
typedShortcut.value = '';
|
|
doesShortcutExists.value = false;
|
|
shortcutToAdd.value = { event: undefined, keys: [], os: [process.platform] };
|
|
isConfirmAddModal.value = false;
|
|
};
|
|
|
|
const showEditModal = (shortcut: ShortcutRecord & { index: number }) => {
|
|
shortcut = {
|
|
...shortcut,
|
|
keys: [shortcut.keys[0].replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control')]
|
|
};
|
|
shortcutToEdit.value = shortcut;
|
|
isConfirmEditModal.value = true;
|
|
};
|
|
|
|
const editShortcut = () => {
|
|
const index = shortcutToEdit.value.index;
|
|
delete shortcutToEdit.value.index;
|
|
shortcutToEdit.value.index = undefined;
|
|
|
|
shortcuts.value[index] = shortcutToEdit.value;
|
|
|
|
isConfirmEditModal.value = false;
|
|
return Application.updateShortcuts(shortcuts.value);
|
|
};
|
|
|
|
const closeEditModal = () => {
|
|
typedShortcut.value = '';
|
|
doesShortcutExists.value = false;
|
|
shortcutToEdit.value = null;
|
|
isConfirmEditModal.value = false;
|
|
};
|
|
|
|
const addShortcut = () => {
|
|
if (!typedShortcut.value.length || doesShortcutExists.value) return;
|
|
shortcutToAdd.value.keys = [typedShortcut.value.replaceAll(isMacOS ? 'Command' : 'Control', 'CommandOrControl')];
|
|
const filteredShortcuts = [shortcutToAdd.value, ...shortcuts.value];
|
|
|
|
isConfirmAddModal.value = false;
|
|
return Application.updateShortcuts(filteredShortcuts);
|
|
};
|
|
|
|
const showDeleteModal = (shortcut: ShortcutRecord) => {
|
|
isConfirmDeleteModal.value = true;
|
|
shortcutToDelete.value = shortcut;
|
|
};
|
|
|
|
const deleteShortcut = () => {
|
|
const filteredShortcuts = shortcuts.value.filter(s => (
|
|
shortcutToDelete.value.keys.toString() !== s.keys.toString()
|
|
));
|
|
|
|
isConfirmDeleteModal.value = false;
|
|
return Application.updateShortcuts(filteredShortcuts);
|
|
};
|
|
|
|
watch(typedShortcut, () => {
|
|
doesShortcutExists.value = shortcuts.value.some(s => (
|
|
s.keys.some(k => (
|
|
k.replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control') === typedShortcut.value
|
|
))
|
|
));
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.table {
|
|
.tr {
|
|
.td {
|
|
border-right: 3px solid;
|
|
border-bottom: 3px solid;
|
|
}
|
|
|
|
&:hover {
|
|
.shortcut-button {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.shortcut-button {
|
|
font-size: 0.7rem;
|
|
height: 1rem;
|
|
line-height: 1rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shortcuts-tools {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|