🚧 Adds option for Move and Delete item, plus translations

This commit is contained in:
Alicia Sykes 2021-10-22 00:26:55 +01:00
parent 7d0647f582
commit 4fe3d5c5a0
1 changed files with 25 additions and 3 deletions

View File

@ -2,8 +2,11 @@
<transition name="slide">
<div class="context-menu" v-if="show && !isMenuDisabled"
:style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
<!-- Open Options -->
<ul class="menu-section">
<li class="section-title">Open In</li>
<li class="section-title">
{{ $t('menu.open-section-title') }}
</li>
<li @click="launch('sametab')">
<SameTabOpenIcon />
<span>{{ $t('menu.sametab') }}</span>
@ -21,11 +24,22 @@
<span>{{ $t('menu.workspace') }}</span>
</li>
</ul>
<!-- Edit Options -->
<ul class="menu-section">
<li class="section-title">Options</li>
<li class="section-title">
{{ $t('menu.options-section-title') }}
</li>
<li @click="openSettings()">
<EditIcon />
<span>Edit</span>
<span>{{ $t('menu.edit-item') }}</span>
</li>
<li v-if="isEditMode">
<MoveIcon />
<span>{{ $t('menu.move-item') }}</span>
</li>
<li v-if="isEditMode">
<BinIcon />
<span>{{ $t('menu.remove-item') }}</span>
</li>
</ul>
</div>
@ -35,6 +49,9 @@
<script>
// Import icons for each element
import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
import MoveIcon from '@/assets/interface-icons/interactive-editor-move-to.svg';
import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
@ -44,6 +61,8 @@ export default {
name: 'ContextMenu',
components: {
EditIcon,
MoveIcon,
BinIcon,
SameTabOpenIcon,
NewTabOpenIcon,
IframeOpenIcon,
@ -58,6 +77,9 @@ export default {
isMenuDisabled() {
return !!this.$store.getters.appConfig.disableContextMenu;
},
isEditMode() {
return this.$store.state.editMode;
},
},
methods: {
/* Called on item click, emits an event up to Item */