blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Setup Assistant: Color progress bar

Browse Source 
Progress bar element that resizes width depending on the current progress.

Introduces the `totalSetupSteps` property to be able to calculate its width
without using magic numbers.
This commit is contained in:
Pablo Vazquez 2022-07-21 17:32:08 +02:00 committed by Francesco Siddi
parent 038eb678e8
commit eff5b21ecd
1 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
web/app/src/views/FirstTimeWizardView.vue
View File

@ -4,7 +4,7 @@
<div class="setup-step"> <div class="setup-step">
<ul class="progress"> <ul class="progress">
<li <li
v-for="step in 4" :key="step" v-for="step in totalSetupSteps" :key="step"
@click="jumpToStep(step)" @click="jumpToStep(step)"
:class="{ :class="{
current: step == currentSetupStep, current: step == currentSetupStep,
@ -14,6 +14,7 @@
> >
<span></span> <span></span>
</li> </li>
<div class="progress-bar"></div>
</ul> </ul>
<step-item <step-item
v-show="currentSetupStep == 1" v-show="currentSetupStep == 1"
@ -245,6 +246,7 @@ export default {
isConfirmed: false, isConfirmed: false,
currentSetupStep: 1, currentSetupStep: 1,
overallSetupStep: 1, overallSetupStep: 1,
totalSetupSteps: 4,
}), }),
computed: { computed: {
cleanSharedStoragePath() { cleanSharedStoragePath() {
@ -431,12 +433,40 @@ label {
margin-bottom: 2rem; margin-bottom: 2rem;
padding: 0; padding: 0;
position: relative; position: relative;
} }
/* 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: calc(50% - calc(var(--wiz-progress-indicator-border-width) / 2));
transform: translateY(-50%);
width: 100%;
}
.progress li { .progress li {
cursor: pointer; cursor: pointer;
} }
.progress-bar {
--progress-bar-total-segments: calc(v-bind('totalSetupSteps') - 1); /* Substract 1 because the first step has no progress. */
--percentage-each-step-width: calc(100% / var(--progress-bar-total-segments));
--percentage-at-current-step: calc(calc(v-bind('currentSetupStep') / var(--progress-bar-total-segments)) * 100%);
position: absolute;
top: calc(50% - calc(var(--wiz-progress-indicator-border-width) / 2));
transform: translateY(-50%);
background-color: var(--color-accent);
height: var(--wiz-progress-indicator-border-width);
position: absolute;
transition: width 500ms ease-out;
width: calc(var(--percentage-at-current-step) - var(--percentage-each-step-width));
z-index: 2;
}
/* Progress indicator dot. */ /* Progress indicator dot. */
.progress li span { .progress li span {
background-color: var(--color-background-column); background-color: var(--color-background-column);
@ -445,10 +475,14 @@ label {
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color); box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color);
content: ''; content: '';
cursor: pointer; cursor: pointer;
display: block; display: inline-block;
height: var(--wiz-progress-indicator-size); height: var(--wiz-progress-indicator-size);
position: relative; position: relative;
width: var(--wiz-progress-indicator-size); width: var(--wiz-progress-indicator-size);
transition-duration: 500ms;
transition-property: background-color, border, box-shadow;
transition-delay: 250ms;
z-index: 3;
} }
.progress li.disabled span { .progress li.disabled span {
@ -469,19 +503,6 @@ label {
box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-current); box-shadow: 0 0 0 var(--wiz-progress-indicator-border-width) var(--wiz-progress-indicator-color-current);
} }
/* 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 { .setup-step {
background-color: var(--color-background-column); background-color: var(--color-background-column);
border-radius: var(--border-radius); border-radius: var(--border-radius);