Setup Screen: Address feedback on UX
This commit is contained in:
Francesco Siddi
parent
b74c8558cf
commit
78af4fae61
@ -39,9 +39,9 @@
|
||||
</step-item>
|
||||
<step-item
|
||||
v-show="currentSetupStep == 2"
|
||||
@next-clicked="nextStep"
|
||||
@next-clicked="nextStepAfterCheckSharedStoragePath"
|
||||
@back-clicked="prevStep"
|
||||
:is-next-clickable="sharedStorageCheckResult !=null && sharedStorageCheckResult.is_usable"
|
||||
:is-next-clickable="sharedStoragePath.length > 0"
|
||||
title="Shared Storage"
|
||||
>
|
||||
<p>Please specify a storage path (or drive), where you want to store your Flamenco data.
|
||||
@ -59,8 +59,7 @@
|
||||
|
||||
<input
|
||||
v-model="sharedStoragePath"
|
||||
@input="checkSharedStoragePath"
|
||||
@keyup.enter="nextStepAfterStoragePath"
|
||||
@keyup.enter="nextStepAfterCheckSharedStoragePath"
|
||||
type="text"
|
||||
placeholder="Shared Storage Path"
|
||||
class="path-input"
|
||||
@ -84,49 +83,74 @@
|
||||
|
||||
<div v-if="isBlenderExeFinding" class="is-in-progress">Looking for Blender installs...</div>
|
||||
|
||||
<fieldset v-if="allBlenders.length > 1">
|
||||
<legend>Choose which Blender to use:</legend>
|
||||
<div v-for="(blender, index) in allBlenders">
|
||||
<label :for="'blender-'+index">
|
||||
<input type="radio" v-model="selectedBlender" name="blender" :value="blender.path" :id="'blender-'+index">
|
||||
{{ blender.cause }}
|
||||
<span
|
||||
:aria-label="blender.path"
|
||||
data-microtip-position="top"
|
||||
role="tooltip">
|
||||
[Path]
|
||||
</span>
|
||||
<span
|
||||
:aria-label="sourceLabels[blender.source]"
|
||||
data-microtip-position="top"
|
||||
role="tooltip">
|
||||
[Source]
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<p v-if="autoFoundBlenders.length === 0">Provide a path to Blender. This path should be accessible by all Workers. If your rendering
|
||||
setup features operating systems different form the one you are currently using, you can
|
||||
manually set up the other paths later.</p>
|
||||
|
||||
<p v-else>Choose how a Worker should invoke the Blender command when performing a task.</p>
|
||||
|
||||
<fieldset v-if="allBlenders.length >= 1">
|
||||
<label v-if="autoFoundBlenderPathEnvvar" for="blender-path_envvar">
|
||||
<input type="radio" v-model="selectedBlender" name="blender" :value="autoFoundBlenderPathEnvvar" id="blender-path_envvar">
|
||||
{{ sourceLabels[autoFoundBlenderPathEnvvar.source] }} <br>
|
||||
<span>{{autoFoundBlenderPathEnvvar.path}}</span>
|
||||
<span
|
||||
:aria-label="autoFoundBlenderPathEnvvar.cause"
|
||||
data-microtip-position="top"
|
||||
role="tooltip">
|
||||
[Command output]
|
||||
</span>
|
||||
</label>
|
||||
<label v-if="autoFoundBlenderFileAssociation" for="blender-file_association">
|
||||
<input type="radio" v-model="selectedBlender" name="blender" :value="autoFoundBlenderFileAssociation" id="blender-file_association">
|
||||
{{ sourceLabels[autoFoundBlenderFileAssociation.source] }} <br>
|
||||
<span>{{autoFoundBlenderFileAssociation.path}}</span>
|
||||
<span
|
||||
:aria-label="autoFoundBlenderFileAssociation.cause"
|
||||
data-microtip-position="top"
|
||||
role="tooltip">
|
||||
[Command output]
|
||||
</span>
|
||||
</label>
|
||||
<label for="blender-input_path">
|
||||
<input
|
||||
type="radio"
|
||||
v-model="selectedBlender"
|
||||
name="blender"
|
||||
:value="blenderFromInputPath"
|
||||
id="blender-input_path"
|
||||
>
|
||||
{{ sourceLabels['input_path'] }} <br>
|
||||
<span>
|
||||
<input
|
||||
@input="checkBlenderExePath"
|
||||
v-model="customBlenderExe"
|
||||
|
||||
type="text"
|
||||
placeholder="Blender Path"
|
||||
class="path-input"
|
||||
>
|
||||
</span>
|
||||
<p v-if="isBlenderExeChecking" class="is-in-progress">Checking...</p>
|
||||
<p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
|
||||
{{ blenderExeCheckResult.cause }}</p>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<p v-if="allBlenders.length <= 1">
|
||||
Provide a path to Blender. This path should be accessible by all Workers. If your rendering
|
||||
setup features operating systems different form the one you are currently using, you can
|
||||
manually set up the other paths later.
|
||||
</p>
|
||||
<p v-else>Or provide an alternative command to try.</p>
|
||||
<div v-if="autoFoundBlenders.length === 0">
|
||||
<input
|
||||
@input="checkBlenderExePath"
|
||||
v-model="customBlenderExe"
|
||||
type="text"
|
||||
placeholder="Blender Path"
|
||||
class="path-input"
|
||||
>
|
||||
|
||||
<input
|
||||
@input="checkBlenderExePath"
|
||||
v-model="customBlenderExe"
|
||||
type="text"
|
||||
placeholder="Blender Path"
|
||||
class="path-input"
|
||||
>
|
||||
<p v-if="isBlenderExeChecking" class="is-in-progress">Checking...</p>
|
||||
|
||||
<div v-if="isBlenderExeChecking" class="is-in-progress">Checking...</div>
|
||||
|
||||
<p v-if="blenderExeCheckResult != null && blenderExeCheckResult.is_usable" class="check-ok">
|
||||
Found something, it is selected above.</p>
|
||||
<p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
|
||||
{{ blenderExeCheckResult.cause }}</p>
|
||||
<p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
|
||||
{{ blenderExeCheckResult.cause }}</p>
|
||||
</div>
|
||||
</step-item>
|
||||
<step-item
|
||||
v-show="currentSetupStep == 4"
|
||||
@ -134,7 +158,7 @@
|
||||
@back-clicked="prevStep"
|
||||
next-label="Confirm"
|
||||
title="Review"
|
||||
:is-next-clickable="isConfigComplete"
|
||||
:is-next-clickable="setupConfirmIsClickable"
|
||||
>
|
||||
<div v-if="isConfigComplete">
|
||||
<p>This is the configuration that will be used by Flamenco:</p>
|
||||
@ -194,9 +218,9 @@ function debounce(func, wait, immediate) {
|
||||
export default {
|
||||
name: 'FirstTimeWizardView',
|
||||
components: {
|
||||
NotificationBar,
|
||||
UpdateListener,
|
||||
StepItem,
|
||||
NotificationBar,
|
||||
},
|
||||
data: () => ({
|
||||
sharedStoragePath: "",
|
||||
@ -213,9 +237,9 @@ export default {
|
||||
isBlenderExeChecking: false,
|
||||
blenderExeCheckResult: null, // api.BlenderPathCheckResult
|
||||
sourceLabels: {
|
||||
file_association: "This Blender runs when you double-click a .blend file.",
|
||||
path_envvar: "This Blender was found on the $PATH environment.",
|
||||
input_path: "You pointed Flamenco to this executable.",
|
||||
file_association: "Blender that runs when you double-click a .blend file.",
|
||||
path_envvar: "Blender that was found on the $PATH environment.",
|
||||
input_path: "Another Blender executable.",
|
||||
},
|
||||
isConfirming: false,
|
||||
isConfirmed: false,
|
||||
@ -238,6 +262,22 @@ export default {
|
||||
isConfigComplete() {
|
||||
return this.isSharedStorageValid && this.isSelectedBlenderValid;
|
||||
},
|
||||
autoFoundBlenderPathEnvvar() {
|
||||
return this.autoFoundBlenders.find(b => b.source === 'path_envvar');
|
||||
},
|
||||
autoFoundBlenderFileAssociation() {
|
||||
return this.autoFoundBlenders.find(b => b.source === 'file_association');
|
||||
},
|
||||
blenderFromInputPath() {
|
||||
return this.allBlenders.find(b => b.source === 'input_path');
|
||||
},
|
||||
setupConfirmIsClickable() {
|
||||
if (this.isConfirming || this.isConfirmed) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.findBlenderExePath();
|
||||
@ -251,20 +291,22 @@ export default {
|
||||
onSIODisconnected(reason) {
|
||||
},
|
||||
|
||||
checkSharedStoragePath() {
|
||||
nextStepAfterCheckSharedStoragePath() {
|
||||
const pathCheck = new PathCheckInput(this.cleanSharedStoragePath);
|
||||
console.log("requesting path check:", pathCheck);
|
||||
this.metaAPI.checkSharedStoragePath({ pathCheckInput: pathCheck })
|
||||
return this.metaAPI.checkSharedStoragePath({ pathCheckInput: pathCheck })
|
||||
.then((result) => {
|
||||
console.log("Storage path check result:", result);
|
||||
this.sharedStorageCheckResult = result;
|
||||
if (this.isSharedStorageValid) {
|
||||
this.nextStep();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error checking storage path:", error);
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
findBlenderExePath() {
|
||||
this.isBlenderExeFinding = true;
|
||||
this.autoFoundBlenders = [];
|
||||
@ -305,6 +347,8 @@ export default {
|
||||
this.blenderExeCheckResult = result;
|
||||
if (result.is_usable) {
|
||||
this.selectedBlender = result;
|
||||
} else if (this.selectedBlender.source === 'input_path') {
|
||||
this.selectedBlender = null;
|
||||
}
|
||||
this._refreshAllBlenders();
|
||||
})
|
||||
@ -324,12 +368,6 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
nextStepAfterStoragePath() {
|
||||
if (this.isSharedStorageValid) {
|
||||
this.nextStep();
|
||||
}
|
||||
},
|
||||
|
||||
nextStep() {
|
||||
if (this.overallSetupStep <= this.currentSetupStep) {
|
||||
this.overallSetupStep = this.currentSetupStep + 1;
|
||||
@ -377,6 +415,10 @@ export default {
|
||||
</script>
|
||||
<style>
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress {
|
||||
--wiz-progress-indicator-size: 8px;
|
||||
--wiz-progress-indicator-border-width: 2px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user