drsybren/Flamenco
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Setup Screen: Style in-progress text

Browse Source 
* Rename: "... finding Blenders ..." to "Looking for Blender installs..."
* Rename: "... checking ..." to "Checking..."
This commit is contained in:
Pablo Vazquez 2022-07-20 18:27:54 +02:00 committed by Francesco Siddi
parent 8b02085c5b
commit 35abc3e02c
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,8 @@
<step-item title="Blender"> <step-item title="Blender">
<p>Choose which Blender to use below:</p> <p>Choose which Blender to use below:</p>
<p v-if="isBlenderExeFinding">... finding Blenders ...</p> <div v-if="isBlenderExeFinding" class="is-in-progress">Looking for Blender installs...</div>
<div v-for="blender in allBlenders" class="blender-selector" <div v-for="blender in allBlenders" class="blender-selector"
:class="{ 'selected-blender': (blender == selectedBlender) }"> :class="{ 'selected-blender': (blender == selectedBlender) }">
<dl> <dl>
@ -54,7 +55,9 @@
<input v-model="customBlenderExe" type="text"> <input v-model="customBlenderExe" type="text">
<button type="submit">Check</button> <button type="submit">Check</button>
</form> </form>
<p v-if="isBlenderExeChecking">... checking ...</p>
<div v-if="isBlenderExeChecking" class="is-in-progress">Checking...</div>
<p v-if="blenderExeCheckResult != null && blenderExeCheckResult.is_usable" class="check-ok"> <p v-if="blenderExeCheckResult != null && blenderExeCheckResult.is_usable" class="check-ok">
Found something, it is selected above.</p> Found something, it is selected above.</p>
<p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed"> <p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
@ -329,4 +332,23 @@ body.is-first-time-wizard #app {
display: block; display: block;
margin-left: auto; margin-left: auto;
} }
.is-in-progress {
animation: is-in-progress 3s infinite linear;
background-image: linear-gradient(to left, var(--color-text-muted), rgba(255, 255, 255, 0.25), var(--color-text-muted));
background-size: 200px;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes is-in-progress {
0% {
background-position: 0px;
}
100% {
background-position: 200px;
}
}
</style> </style>