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