UX improvements for buttons #337

package.json

@@ -51,7 +51,7 @@
     "@openeo/js-client": "^2.7.0",
     "@openeo/js-commons": "^1.5.0",
     "@openeo/js-processgraphs": "^1.4.1",
-    "@openeo/vue-components": "^2.18.1",
+    "@openeo/vue-components": "^2.18.3",
     "@radiantearth/stac-fields": "^1.5.0-beta.2",
     "@radiantearth/stac-migrate": "^2.0.0-beta.1",
     "@tmcw/togeojson": "^5.5.0",

src/components/CustomProcessPanel.vue

@@ -1,13 +1,13 @@
 <template>
 	<DataTable ref="table" fa :data="data" :columns="columns" :next="next" class="CustomProcessPanel">
 		<template slot="toolbar">
-			<AsyncButton title="Add new custom process" :fn="addProcessFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Add</AsyncButton>
+			<AsyncButton title="Store the process in the process editor on the server" :fn="addProcessFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Add</AsyncButton>
 			<SyncButton v-if="supportsList" :name="plualizedName" :sync="reloadData" />
 		</template>
 		<template #actions="p">
-			<AsyncButton title="Details" :fn="() => processInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
-			<AsyncButton title="Edit process" confirm :fn="() => showInEditor(p.row)" v-show="supportsRead" fa icon="fas fa-project-diagram"></AsyncButton>
-			<AsyncButton title="Delete" :fn="() => deleteProcess(p.row)" v-show="supportsDelete" fa icon="fas fa-trash"></AsyncButton>
+			<AsyncButton title="Show details about this process" :fn="() => processInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
+			<AsyncButton title="Edit this process in the process editor" confirm :fn="() => showInEditor(p.row)" v-show="supportsRead" fa icon="fas fa-project-diagram"></AsyncButton>
+			<AsyncButton title="Delete this custom process from the server" :fn="() => deleteProcess(p.row)" v-show="supportsDelete" fa icon="fas fa-trash"></AsyncButton>
 		</template>
 	</DataTable>
 </template>

src/components/FilePanel.vue

@@ -12,8 +12,8 @@
 				<SyncButton v-if="supportsList" :name="plualizedName" :sync="reloadData" />
 			</template>
 			<template #actions="p">
-				<AsyncButton title="Download" :fn="() => downloadFile(p.row)" v-show="supportsRead" fa icon="fas fa-download"></AsyncButton>
-				<AsyncButton title="Delete" :fn="() => deleteFile(p.row)" v-show="supportsDelete" fa icon="fas fa-trash"></AsyncButton>
+				<AsyncButton title="Download this file to your computer" :fn="() => downloadFile(p.row)" v-show="supportsRead" fa icon="fas fa-download"></AsyncButton>
+				<AsyncButton title="Delete this file from the server" :fn="() => deleteFile(p.row)" v-show="supportsDelete" fa icon="fas fa-trash"></AsyncButton>
 			</template>
 		</DataTable>
 	</div>

src/components/FullscreenButton.vue

@@ -1,17 +1,21 @@
 <template>
-	<button v-show="element" type="button" @click="toggleFullscreen" :title="isFullscreen ? 'Close fullscreen' : 'Show fullscreen'">
+	<BButton v-show="element" @click="toggleFullscreen" :title="isFullscreen ? 'Close fullscreen' : 'Show fullscreen'">
 		<span v-show="isFullscreen"><i class="fas fa-compress"></i></span>
 		<span v-show="!isFullscreen"><i class="fas fa-expand"></i></span>
-	</button>
+	</BButton>
 </template>
 
 <script>
 import EventBusMixin from './EventBusMixin.js';
 import Utils from '../utils.js';
+import BButton from '@openeo/vue-components/components/internal/BButton.vue';
 
 export default {
 	name: 'FullscreenButton',
 	mixins: [EventBusMixin],
+	components: {
+		BButton
+	},
 	props: {
 		element: {
 			required: true

src/components/IDE.vue

@@ -19,11 +19,11 @@
 						<Pane id="editor" :size="splitpaneSizeV[0]">
 							<Editor ref="editor" class="mainEditor tour-ide-editor" id="main" :value="process" @input="updateEditor" :title="contextTitle" showIntro>
 								<template #file-toolbar>
-									<button @click="importProcess" title="Import process from external source"><i class="fas fa-cloud-download-alt"></i></button>
-									<AsyncButton v-show="saveSupported" :disabled="!hasProcess" :fn="saveProcess" :title="'Save to ' + contextTitle" fa confirm icon="fas fa-save"></AsyncButton>
-									<button @click="exportJSON" :disabled="!hasProcess" title="Download as JSON file"><i class="fas fa-file-download"></i></button>
-									<button @click="exportCode" :disabled="!hasProcess" title="Export into another programming language"><i class="fas fa-file-export"></i></button>
-									<AsyncButton v-show="validateSupported" :disabled="!hasProcess" :fn="validateProcess" title="Validate process on server-side" fa confirm icon="fas fa-tasks"></AsyncButton>
+									<BButton @click="importProcess" title="Import a process from an external source"><i class="fas fa-cloud-download-alt"></i></BButton>
+									<AsyncButton v-show="saveSupported" :disabled="!hasProcess" :fn="saveProcess" :title="'Save this process to ' + contextTitle" fa confirm icon="fas fa-save"></AsyncButton>
+									<BButton @click="exportJSON" :disabled="!hasProcess" title="Download this process as a JSON file"><i class="fas fa-file-download"></i></BButton>
+									<BButton @click="exportCode" :disabled="!hasProcess" title="Export this process into another programming language"><i class="fas fa-file-export"></i></BButton>
+									<AsyncButton v-show="validateSupported" :disabled="!hasProcess" :fn="validateProcess" title="Validate this process directly on the server" fa confirm icon="fas fa-tasks"></AsyncButton>
 								</template>
 							</Editor>
 						</Pane>
@@ -56,13 +56,15 @@ import DiscoveryToolbar from './DiscoveryToolbar.vue';
 import { ProcessParameter } from '@openeo/js-commons';
 import { Job, Service, UserProcess } from '@openeo/js-client';
 import { Splitpanes, Pane } from 'splitpanes';
+import BButton from '@openeo/vue-components/components/internal/BButton.vue';
 import AsyncButton from '@openeo/vue-components/components/internal/AsyncButton.vue';
 
 export default {
 	name: 'IDE',
 	mixins: [EventBusMixin],
 	components: {
 		AsyncButton,
+		BButton,
 		DiscoveryToolbar,
 		Editor,
 		Logo,

src/components/JobPanel.vue

@@ -1,22 +1,22 @@
 <template>
 	<DataTable ref="table" fa :data="data" :columns="columns" :next="next" class="JobPanel">
 		<template slot="toolbar">
-			<AsyncButton title="Add new job for batch processing" :fn="createJobFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Create Batch Job</AsyncButton>
-			<AsyncButton title="Run the process directly and view the results without storing them permanently" :fn="executeProcess" v-show="supports('computeResult')" :disabled="!this.hasProcess" fa confirm icon="fas fa-play">Run now</AsyncButton>
+			<AsyncButton title="Create a new job from the process in the process editor for batch processing" :fn="createJobFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Create Batch Job</AsyncButton>
+			<AsyncButton title="Run the process in the process editor directly and view the results without storing them permanently" :fn="executeProcess" v-show="supports('computeResult')" :disabled="!this.hasProcess" fa confirm icon="fas fa-play">Run now</AsyncButton>
 			<SyncButton v-if="supportsList" :name="plualizedName" :sync="reloadData" />
 		</template>
 		<template #actions="p">
-			<AsyncButton title="Details" :fn="() => showJobInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
-			<AsyncButton title="Estimate" :fn="() => estimateJob(p.row)" v-show="supportsEstimate" fa icon="fas fa-file-invoice-dollar"></AsyncButton>
-			<AsyncButton title="Edit metadata" :fn="() => editMetadata(p.row)" v-show="supportsUpdate" :disabled="!isJobInactive(p.row)" fa icon="fas fa-edit"></AsyncButton>
-			<AsyncButton title="Edit process" confirm :fn="() => showInEditor(p.row)" v-show="supportsRead" fa icon="fas fa-project-diagram"></AsyncButton>
-			<AsyncButton title="Delete" :fn="() => deleteJob(p.row)" v-show="supportsDelete" fa icon="fas fa-trash"></AsyncButton>
-			<AsyncButton title="Start processing" :fn="() => queueJob(p.row)" v-show="supportsStart && isJobInactive(p.row)" fa icon="fas fa-play-circle"></AsyncButton>
-			<AsyncButton title="Cancel processing" :fn="() => cancelJob(p.row)" v-show="supportsStop && isJobActive(p.row)" fa icon="fas fa-stop-circle"></AsyncButton>
-			<AsyncButton title="Download" :fn="() => downloadResults(p.row)" v-show="supportsDownloadResults && mayHaveResults(p.row)" fa icon="fas fa-download"></AsyncButton>
-			<AsyncButton title="View results" :fn="() => viewResults(p.row, true)" v-show="supportsDownloadResults && mayHaveResults(p.row)" fa icon="fas fa-eye"></AsyncButton>
-			<AsyncButton title="Export / Share" :fn="() => shareResults(p.row)" v-show="canShare && supports('downloadResults') && mayHaveResults(p.row)" fa icon="fas fa-share"></AsyncButton>
-			<AsyncButton title="View logs" :fn="() => showLogs(p.row)" v-show="supportsDebug" fa icon="fas fa-bug"></AsyncButton>
+			<AsyncButton title="Show details about this job" :fn="() => showJobInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
+			<AsyncButton title="Create a cost and time estimate for this job" :fn="() => estimateJob(p.row)" v-show="supportsEstimate" fa icon="fas fa-file-invoice-dollar"></AsyncButton>
+			<AsyncButton title="Edit the metadata of this job" :fn="() => editMetadata(p.row)" v-show="supportsUpdate" :disabled="!isJobInactive(p.row)" fa icon="fas fa-edit"></AsyncButton>
+			<AsyncButton title="Edit the process of this job in the process editor" confirm :fn="() => showInEditor(p.row)" v-show="supportsRead" fa icon="fas fa-project-diagram"></AsyncButton>
+			<AsyncButton title="Delete this job from the server, including all results" :fn="() => deleteJob(p.row)" v-show="supportsDelete" fa icon="fas fa-trash"></AsyncButton>
+			<AsyncButton title="Start the processing on the server" :fn="() => queueJob(p.row)" v-show="supportsStart && isJobInactive(p.row)" fa icon="fas fa-play-circle"></AsyncButton>
+			<AsyncButton title="Cancel the processing" :fn="() => cancelJob(p.row)" v-show="supportsStop && isJobActive(p.row)" fa icon="fas fa-stop-circle"></AsyncButton>
+			<AsyncButton title="Download the results to your computer" :fn="() => downloadResults(p.row)" v-show="supportsDownloadResults && mayHaveResults(p.row)" fa icon="fas fa-download"></AsyncButton>
+			<AsyncButton title="View the results" :fn="() => viewResults(p.row, true)" v-show="supportsDownloadResults && mayHaveResults(p.row)" fa icon="fas fa-eye"></AsyncButton>
+			<AsyncButton title="Export and/or share this job" :fn="() => shareResults(p.row)" v-show="canShare && supports('downloadResults') && mayHaveResults(p.row)" fa icon="fas fa-share"></AsyncButton>
+			<AsyncButton title="View the logs of this job" :fn="() => showLogs(p.row)" v-show="supportsDebug" fa icon="fas fa-bug"></AsyncButton>
 		</template>
 	</DataTable>
 </template>

src/components/ServicePanel.vue

@@ -1,18 +1,18 @@
 <template>
 	<DataTable ref="table" fa :data="data" :columns="columns" :next="next" class="ServicePanel">
 		<template slot="toolbar">
-			<AsyncButton title="Add new permanently stored web service" :fn="createServiceFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Create</AsyncButton>
+			<AsyncButton title="Create a new permanent service from the process in the process editor" :fn="createServiceFromScript" v-show="supportsCreate" :disabled="!this.hasProcess" fa confirm icon="fas fa-plus">Create</AsyncButton>
 			<AsyncButton title="Quickly show the process on map without storing it permanently" :fn="quickViewServiceFromScript" v-show="supportsQuickView" :disabled="!this.hasProcess" fa confirm icon="fas fa-map">Show on Map</AsyncButton>
 			<SyncButton v-if="supportsList" :name="plualizedName" :sync="reloadData" />
 		</template>
 		<template #actions="p">
-			<AsyncButton title="Details" :fn="() => serviceInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
-			<AsyncButton title="Edit metadata" :fn="() => editMetadata(p.row)" v-show="supportsUpdate" fa icon="fas fa-edit"></AsyncButton>
-			<AsyncButton title="Edit process" confirm :fn="() => showInEditor(p.row)" v-show="supportsRead" fa icon="fas fa-project-diagram"></AsyncButton>
-			<AsyncButton title="Delete" :fn="() => deleteService(p.row)" v-show="supportsDelete" fa icon="fas fa-trash"></AsyncButton>
-			<AsyncButton title="View on map" :fn="() => viewService(p.row)" v-show="p.row.enabled && isMapServiceSupported(p.row.type)" fa icon="fas fa-map"></AsyncButton>
-			<AsyncButton title="Export / Share" :fn="() => shareResults(p.row)" v-show="p.row.enabled && canShare" fa icon="fas fa-share"></AsyncButton>
-			<AsyncButton title="View logs" :fn="() => showLogs(p.row)" v-show="supportsDebug" fa icon="fas fa-bug"></AsyncButton>
+			<AsyncButton title="Show details about this service" :fn="() => serviceInfo(p.row)" v-show="supportsRead" fa icon="fas fa-info"></AsyncButton>
+			<AsyncButton title="Edit the metadata of this service" :fn="() => editMetadata(p.row)" v-show="supportsUpdate" fa icon="fas fa-edit"></AsyncButton>
+			<AsyncButton title="Edit the process of this service in the process editor" confirm :fn="() => showInEditor(p.row)" v-show="supportsRead" fa icon="fas fa-project-diagram"></AsyncButton>
+			<AsyncButton title="Delete this service from the server" :fn="() => deleteService(p.row)" v-show="supportsDelete" fa icon="fas fa-trash"></AsyncButton>
+			<AsyncButton title="View this service" :fn="() => viewService(p.row)" v-show="p.row.enabled && isMapServiceSupported(p.row.type)" fa icon="fas fa-map"></AsyncButton>
+			<AsyncButton title="Export and/or share this service" :fn="() => shareResults(p.row)" v-show="p.row.enabled && canShare" fa icon="fas fa-share"></AsyncButton>
+			<AsyncButton title="View the logs of this service" :fn="() => showLogs(p.row)" v-show="supportsDebug" fa icon="fas fa-bug"></AsyncButton>
 		</template>
 	</DataTable>
 </template>

src/components/TextEditor.vue

@@ -4,12 +4,12 @@
 			<strong v-if="title">{{ title }}</strong>
 			<div class="sourceToolbar">
 				<span class="sepr">
-					<button type="button" v-if="editable" @click="confirmClear" title="New script / Clear current script"><i class="fas fa-file"></i></button>
+					<BButton v-if="editable" @click="confirmClear" title="Start from scratch - Clears the current script"><i class="fas fa-file"></i></BButton>
 					<slot name="file-toolbar"></slot>
 				</span>
 				<span class="sepr" v-if="editable">
-					<button type="button" @click="editor.undo()" :disabled="!canUndo" title="Revert last change"><i class="fas fa-undo-alt"></i></button>
-					<button type="button" @click="editor.redo()" :disabled="!canRedo" title="Redo last reverted change"><i class="fas fa-redo-alt"></i></button>
+					<BButton @click="editor.undo()" :disabled="!canUndo" title="Revert the last change"><i class="fas fa-undo-alt"></i></BButton>
+					<BButton @click="editor.redo()" :disabled="!canRedo" title="Redo the last reverted change"><i class="fas fa-redo-alt"></i></BButton>
 					<slot name="edit-toolbar"></slot>
 				</span>
 				<FullscreenButton :element="element" />
@@ -23,6 +23,7 @@
 <script>
 import Utils from '../utils.js';
 import FullscreenButton from './FullscreenButton.vue';
+import BButton from '@openeo/vue-components/components/internal/BButton.vue';
 import { ProcessGraph } from '@openeo/js-processgraphs';
 
 import CodeMirror from 'codemirror';
@@ -48,6 +49,7 @@ window.jsonlint = jsonlint;
 export default {
 	name: 'TextEditor',
 	components: {
+		BButton,
 		FullscreenButton
 	},
 	props: {