Remove unnecessary elements from UI in app mode

Open-EO · Jan 6, 2025 · 1aaee24 · 1aaee24
1 parent 1266530
commit 1aaee24
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/src/components/IDE.vue b/src/components/IDE.vue
@@ -4,17 +4,17 @@
 			<header class="navbar">
 				<Logo />
 				<ul id="menu">
-					<li><div class="menuItem" @click="showHelp" title="Start a guided tour"><i class="fas fa-question-circle fa-fw"></i>Help</div></li>
-					<li><div class="menuItem" @click="showWizard()" title="Start the process wizard"><i class="fas fa-magic fa-fw"></i>Wizard</div></li>
+					<li v-if="!simpleMode"><div class="menuItem" @click="showHelp" title="Start a guided tour"><i class="fas fa-question-circle fa-fw"></i>Help</div></li>
+					<li v-if="!simpleMode"><div class="menuItem" @click="showWizard()" title="Start the process wizard"><i class="fas fa-magic fa-fw"></i>Wizard</div></li>
 					<li><div class="menuItem" @click="showServerInfo" title="Get server information"><i class="fas fa-info-circle fa-fw"></i>Server</div></li>
 					<li><UserMenu /></li>
 				</ul>
 			</header>
 			<Splitpanes class="default-theme" @resize="resized" @pane-maximize="resized">
-				<Pane v-if="!appMode || isAuthenticated" id="discovery" :size="splitpaneSizeH[0]">
+				<Pane v-if="!simpleMode" id="discovery" :size="splitpaneSizeH[0]">
 					<DiscoveryToolbar class="toolbar tour-ide-discovery" :onAddProcess="insertProcess" :collectionPreview="true" :persist="true" />
 				</Pane>
-				<Pane v-if="!appMode || isAuthenticated || hasProcess" id="workspace" :size="splitpaneSizeH[1]">
+				<Pane v-if="!simpleMode || hasProcess" id="workspace" :size="splitpaneSizeH[1]">
 					<Splitpanes class="default-theme" horizontal @resize="resized" @pane-maximize="resized">
 						<Pane id="editor" :size="splitpaneSizeV[0]">
 							<Editor ref="editor" class="mainEditor tour-ide-editor" id="main" :value="process" @input="updateEditor" :title="contextTitle" showIntro>
@@ -27,7 +27,7 @@
 								</template>
 							</Editor>
 						</Pane>
-						<Pane v-if="!appMode || isAuthenticated" id="user" :size="splitpaneSizeV[1]">
+						<Pane v-if="!simpleMode" id="user" :size="splitpaneSizeV[1]">
 							<UserWorkspace v-if="isAuthenticated" class="userContent tour-ide-workspace" />
 							<div v-else class="message info" title="Login is required to interact with the server.">
 								<i class="fas fa-sign-in-alt"></i>
@@ -37,7 +37,7 @@
 					</Splitpanes>
 				</Pane>
 				<Pane id="viewer" :class="{empty: !showViewer}" :size="splitpaneSizeH[2]">
-					<Viewer class="tour-ide-viewer" @empty="onViewerEmpty" />
+					<Viewer class="tour-ide-viewer" :editable="!simpleMode" @empty="onViewerEmpty" />
 				</Pane>
 			</Splitpanes>
 		</div>
@@ -103,6 +103,9 @@ export default {
 		validateSupported() {
 			return this.supports('validateProcess');
 		},
+		simpleMode() {
+			return this.appMode && !this.isAuthenticated;
+		},
 		splitpaneSizeH() {
 			if (this.appMode) {
 				if (this.process) {

diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="viewerContainer" @drop="onDrop" @dragover="allowDrop">
-		<Tabs id="viewerTabs" ref="tabs" @empty="onTabsEmpty" allowTabRename>
+		<Tabs id="viewerTabs" ref="tabs" @empty="onTabsEmpty" :allowTabRename="editable">
 			<template #empty>Nothing to show right now...</template>
 			<template #dynamic="{ tab }">
 				<LogViewer v-if="logViewerIcons.includes(tab.icon)" :data="tab.data" @mounted="onMounted" @options="onOptionsChanged" />
@@ -65,6 +65,12 @@ export default {
 			options: null
 		}
 	},
+	props: {
+		editable: {
+			type: Boolean,
+			default: true
+		}
+	},
 	computed: {
 		...Utils.mapState(['connection']),
 		...Utils.mapState('editor', ['appMode', 'formatRegistry']),
@@ -152,7 +158,7 @@ export default {
 			}
 
 			this.$refs.tabs.addTab(
-				title, faIcon, resource, id, selectTab, true,
+				title, faIcon, resource, id, selectTab, this.editable,
 				tab => this.onShow(tab),
 				tab => this.onHide(tab)
 			);
@@ -231,7 +237,7 @@ export default {
 				}
 			}
 			this.$refs.tabs.addTab(
-				title, "fa-map", resource, id, true, true,
+				title, "fa-map", resource, id, true, this.editable,
 				tab => this.onShow(tab),
 				tab => this.onHide(tab),
 				onClose
@@ -246,7 +252,7 @@ export default {
 				this.tabIdCounter++;
 			}
 			this.$refs.tabs.addTab(
-				title, "fa-info", resource, id, true, true,
+				title, "fa-info", resource, id, true, this.editable,
 				tab => this.onShow(tab),
 				tab => this.onHide(tab)
 			);
@@ -321,7 +327,7 @@ export default {
 					}
 					await file.loadData(this.connection);
 					this.$refs.tabs.addTab(
-						title, file.icon, file, tabId, true, true,
+						title, file.icon, file, tabId, true, this.editable,
 						tab => this.onShow(tab),
 						tab => this.onHide(tab)
 					);