If in edit mode, open item-edit instead of launching, onclick

This commit is contained in:
Alicia Sykes 2021-10-23 20:05:43 +01:00
parent e78bd07ced
commit 87bf9263db
3 changed files with 33 additions and 10 deletions

View File

Before

Width:  |  Height:  |  Size: 875 B

After

Width:  |  Height:  |  Size: 875 B

View File

@ -30,6 +30,7 @@
:statusSuccess="statusResponse ? statusResponse.successStatus : undefined"
:statusText="statusResponse ? statusResponse.message : undefined"
/>
<EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openItemSettings()" />
</a>
<ContextMenu
:show="contextMenuOpen"
@ -54,6 +55,7 @@ import EditItem from '@/components/InteractiveEditor/EditItem';
import ContextMenu from '@/components/LinkItems/ContextMenu';
import StoreKeys from '@/utils/StoreMutations';
import { targetValidator } from '@/utils/ConfigHelpers';
import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
import {
localStorageKeys,
serviceEndpoints,
@ -85,15 +87,27 @@ export default {
statusCheckInterval: Number,
statusCheckAllowInsecure: Boolean,
},
components: {
Icon,
ItemOpenMethodIcon,
StatusIndicator,
ContextMenu,
EditItem,
EditModeIcon,
},
computed: {
appConfig() {
return this.$store.getters.appConfig;
},
isEditMode() {
return this.$store.state.editMode;
},
accumulatedTarget() {
return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod;
},
/* Convert config target value, into HTML anchor target attribute */
anchorTarget() {
if (this.isEditMode) return '_self';
const target = this.accumulatedTarget;
switch (target) {
case 'sametab': return '_self';
@ -103,10 +117,12 @@ export default {
default: return undefined;
}
},
/* Get the href value for the anchor, if not opening in modal/ workspace */
/* Get href for anchor, if not in edit mode, or opening in modal/ workspace */
hyperLinkHref() {
const nothing = '#';
if (this.isEditMode) return nothing;
const noAnchorNeeded = ['modal', 'workspace'];
return noAnchorNeeded.includes(this.accumulatedTarget) ? '#' : this.url;
return noAnchorNeeded.includes(this.accumulatedTarget) ? nothing : this.url;
},
},
data() {
@ -125,16 +141,14 @@ export default {
editMenuOpen: false,
};
},
components: {
Icon,
ItemOpenMethodIcon,
StatusIndicator,
ContextMenu,
EditItem,
},
methods: {
/* Called when an item is clicked, manages the opening of modal & resets the search field */
itemOpened(e) {
if (this.isEditMode) {
// If in edit mode, open settings, and don't launch app
this.openItemSettings();
return;
}
if (e.altKey || this.accumulatedTarget === 'modal') {
e.preventDefault();
this.$emit('triggerModal', this.url);
@ -380,6 +394,15 @@ export default {
}
}
/* Edit Mode Icon */
.item .edit-mode-item {
width: 1rem;
height: 1rem;
position: absolute;
top: 0.2rem;
right: 0.2rem;
}
/* Specify layout for alternate sized icons */
.item {
/* Small Tile Specific Themes */

View File

@ -53,7 +53,7 @@ import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
import Keys from '@/utils/StoreMutations';
import IconSpanner from '@/assets/interface-icons/config-editor.svg';
import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-start-editing.svg';
import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
import IconHome from '@/assets/interface-icons/application-home.svg';
import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';