Setup Screen: Use StepsWrapper
Similar to TabsWrapper, with Previous/Next navigation capabilities.
This commit is contained in:
Francesco Siddi
parent
a075a36911
commit
8b02085c5b
13
web/app/src/components/steps/StepItem.vue
Normal file
13
web/app/src/components/steps/StepItem.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
const selectedStep = inject('selectedStep');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-show="selectedStep === title">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
124
web/app/src/components/steps/StepsWrapper.vue
Normal file
124
web/app/src/components/steps/StepsWrapper.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<script setup>
|
||||
import { useSlots, ref, provide } from 'vue';
|
||||
const slots = useSlots();
|
||||
|
||||
const stepTitles = ref(slots.default().map((step) => step.props.title));
|
||||
const selectedStep = ref(stepTitles.value[0]);
|
||||
provide('selectedStep', selectedStep);
|
||||
|
||||
function updateStepTitle(title) {
|
||||
selectedStep.value = title;
|
||||
}
|
||||
|
||||
function selectedStepNumber() {
|
||||
return stepTitles.value.indexOf(selectedStep.value);
|
||||
}
|
||||
|
||||
function nextStepTitle() {
|
||||
selectedStep.value = stepTitles.value[selectedStepNumber() + 1];
|
||||
}
|
||||
|
||||
function prevStepTitle() {
|
||||
selectedStep.value = stepTitles.value[selectedStepNumber() - 1];
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="setup-step">
|
||||
<h2>{{ selectedStep }}</h2>
|
||||
<nav>
|
||||
<ul class="progress">
|
||||
<li
|
||||
v-for="(title, index) in stepTitles"
|
||||
:class="{active: selectedStep == title}"
|
||||
@click="updateStepTitle(title)"
|
||||
>
|
||||
<span></span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<slot />
|
||||
<div
|
||||
v-if="selectedStepNumber() != stepTitles.length - 1"
|
||||
class="btn-bar btn-bar-wide">
|
||||
<button
|
||||
v-if="selectedStepNumber() > 0"
|
||||
@click="prevStepTitle()"
|
||||
class="btn">Back
|
||||
</button>
|
||||
<button
|
||||
@click="nextStepTitle()"
|
||||
class="btn btn-primary">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
.progress {
|
||||
--wiz-progress-indicator-size: 8px;
|
||||
--wiz-progress-indicator-border-width: 2px;
|
||||
--wiz-progress-indicator-color: var(--color-text-hint);
|
||||
--wiz-progress-indicator-color-active: var(--color-accent);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
/* Progress indicator dot. */
|
||||
.progress li {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress li span {
|
||||
background-color: var(--wiz-progress-indicator-color);
|
||||
border-radius: 50%;
|
||||
border: var(--wiz-progress-indicator-border-width) solid var(--color-background-column);
|
||||
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color);
|
||||
content: '';
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: var(--wiz-progress-indicator-size);
|
||||
position: relative;
|
||||
width: var(--wiz-progress-indicator-size);
|
||||
}
|
||||
|
||||
.progress li.active span {
|
||||
background-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-active);
|
||||
}
|
||||
|
||||
.progress li.active+li span,
|
||||
.progress li.active+li+li span {
|
||||
background-color: var(--color-background-column);
|
||||
}
|
||||
|
||||
/* Progress indicator line between dots. */
|
||||
.progress:before {
|
||||
background-color: var(--wiz-progress-indicator-color);
|
||||
content: '';
|
||||
display: block;
|
||||
height: var(--wiz-progress-indicator-border-width);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.setup-step {
|
||||
background-color: var(--color-background-column);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacer) var(--spacer-lg);
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,32 +1,11 @@
|
||||
<template>
|
||||
<div class="setup-container">
|
||||
<section class="setup-step step-intro is-active">
|
||||
<h1>Welcome</h1>
|
||||
|
||||
<ul class="progress">
|
||||
<li class="active"><span></span></li>
|
||||
<li><span></span></li>
|
||||
<li><span></span></li>
|
||||
<li><span></span></li>
|
||||
</ul>
|
||||
|
||||
<steps-wrapper>
|
||||
<step-item title="Welcome">
|
||||
<p>Let's set you up.</p>
|
||||
</step-item>
|
||||
|
||||
<div class="btn-bar">
|
||||
<button class="btn btn-primary align-center">Start Setup</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="setup-step is-active">
|
||||
<h2>Shared Storage</h2>
|
||||
|
||||
<ul class="progress">
|
||||
<li><span></span></li>
|
||||
<li class="active"><span></span></li>
|
||||
<li><span></span></li>
|
||||
<li><span></span></li>
|
||||
</ul>
|
||||
|
||||
<step-item title="Shared Storage">
|
||||
<p>Flamenco needs some shared storage, to have a central place where the
|
||||
Manager and Workers exchange files. This could be a NAS in your network,
|
||||
or some other file sharing server.</p>
|
||||
@ -49,23 +28,8 @@
|
||||
:class="{ 'check-ok': sharedStorageCheckResult.is_usable, 'check-failed': !sharedStorageCheckResult.is_usable }">
|
||||
{{ sharedStorageCheckResult.cause }}
|
||||
</p>
|
||||
|
||||
<div class="btn-bar btn-bar-wide">
|
||||
<button class="btn">Back</button>
|
||||
<button class="btn btn-primary" disabled>Next</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="setup-step is-active">
|
||||
<h2>Which Blender?</h2>
|
||||
|
||||
<ul class="progress">
|
||||
<li><span></span></li>
|
||||
<li><span></span></li>
|
||||
<li class="active"><span></span></li>
|
||||
<li><span></span></li>
|
||||
</ul>
|
||||
|
||||
</step-item>
|
||||
<step-item title="Blender">
|
||||
<p>Choose which Blender to use below:</p>
|
||||
|
||||
<p v-if="isBlenderExeFinding">... finding Blenders ...</p>
|
||||
@ -95,15 +59,9 @@
|
||||
Found something, it is selected above.</p>
|
||||
<p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
|
||||
{{ blenderExeCheckResult.cause }}</p>
|
||||
|
||||
<div class="btn-bar btn-bar-wide">
|
||||
<button class="btn">Back</button>
|
||||
<button class="btn btn-primary">Next</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-if="isConfigComplete" class="setup-step is-active">
|
||||
<h2>The Final Step</h2>
|
||||
</step-item>
|
||||
<step-item title="Review">
|
||||
<div v-if="isConfigComplete">
|
||||
<p>This is the configuration that will be used by Flamenco:</p>
|
||||
<dl>
|
||||
<dt>Storage</dt>
|
||||
@ -122,10 +80,11 @@
|
||||
"<code>{{ selectedBlender.path }}</code>"
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<p v-if="isConfirmed" class="check-ok">Configuration has been saved, Flamenco will restart.</p>
|
||||
<button @click="confirmWizard" :disabled="isConfirming">Confirm</button>
|
||||
</section>
|
||||
</step-item>
|
||||
</steps-wrapper>
|
||||
</div>
|
||||
|
||||
<footer class="app-footer">
|
||||
@ -138,6 +97,8 @@
|
||||
<script>
|
||||
import NotificationBar from '@/components/footer/NotificationBar.vue'
|
||||
import UpdateListener from '@/components/UpdateListener.vue'
|
||||
import StepItem from '@/components/steps/StepItem.vue';
|
||||
import StepsWrapper from '@/components/steps/StepsWrapper.vue';
|
||||
import { MetaApi, PathCheckInput, WizardConfig } from "@/manager-api";
|
||||
import { apiClient } from '@/stores/api-query-count';
|
||||
|
||||
@ -146,6 +107,8 @@ export default {
|
||||
components: {
|
||||
NotificationBar,
|
||||
UpdateListener,
|
||||
StepsWrapper,
|
||||
StepItem,
|
||||
},
|
||||
data: () => ({
|
||||
sharedStoragePath: "",
|
||||
@ -291,12 +254,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--wiz-progress-indicator-size: 6px;
|
||||
--wiz-progress-indicator-border-width: 2px;
|
||||
--wiz-progress-indicator-color: var(--color-text-hint);
|
||||
--wiz-progress-indicator-color-active: var(--color-accent);
|
||||
}
|
||||
|
||||
|
||||
body.is-first-time-wizard #app {
|
||||
grid-template-areas:
|
||||
@ -322,68 +280,7 @@ body.is-first-time-wizard #app {
|
||||
--color-check-ok: var(--color-status-completed);
|
||||
|
||||
max-width: 640px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.setup-step {
|
||||
background-color: var(--color-background-column);
|
||||
border-radius: var(--border-radius);
|
||||
display: none;
|
||||
padding: var(--spacer) var(--spacer-lg);
|
||||
}
|
||||
|
||||
.setup-step.is-active{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-intro {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Progress indicator dot. */
|
||||
.progress li span {
|
||||
background-color: var(--wiz-progress-indicator-color);
|
||||
border-radius: 50%;
|
||||
border: var(--wiz-progress-indicator-border-width) solid var(--color-background-column);
|
||||
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color);
|
||||
content: '';
|
||||
display: block;
|
||||
height: var(--wiz-progress-indicator-size);
|
||||
position: relative;
|
||||
width: var(--wiz-progress-indicator-size);
|
||||
}
|
||||
|
||||
.progress li.active span {
|
||||
background-color: var(--color-accent);
|
||||
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-active);
|
||||
}
|
||||
|
||||
.progress li.active+li span,
|
||||
.progress li.active+li+li span,
|
||||
.progress li.active+li+li+li span,
|
||||
.progress li.active+li+li+li+span {
|
||||
background-color: var(--color-background-column);
|
||||
}
|
||||
|
||||
/* Progress indicator line between dots. */
|
||||
.progress:before {
|
||||
background-color: var(--wiz-progress-indicator-color);
|
||||
content: '';
|
||||
display: block;
|
||||
height: var(--wiz-progress-indicator-border-width);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
margin: 20vh auto auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user