zev/modulearn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a more standard progress bar

Browse Source
This commit is contained in:
zevav
2020-10-02 02:12:53 +02:00
parent 086c30f6b9
commit c2a4357020
1 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
modulearn/src/Module.svelte
View File

@@ -10,21 +10,20 @@
let styl; let selected; let progress; let styl; let selected; let progress;
$: selected = $currentModule && $currentModule.name === module.name $: selected = $currentModule && $currentModule.name === module.name
$: if (selected) progress = getProgress($position) $: if (selected) {
$: styl = selected progress = getProgress($position)
? `background: linear-gradient(to right, var(--finished-bg) 0%, var(--finished-bg) ${progress + 1}%, var(--pending-bg) ${100 - progress}%, var(--pending-bg) 100%)` }
: ""
// TODO: add checkboxes for 'want to watch' // TODO: add checkboxes for 'want to watch'
// TODO: gray out watched modules // TODO: gray out watched modules
</script> </script>
<div on:click={() => dispatcher("selectModule", { module })} ><span style="{styl}" >I want to {module.outcome}.</span></div> <div on:click={() => dispatcher("selectModule", { module })} >
{#if progress} <span style="{styl}" >I want to {module.outcome}.</span>
<div> {#if selected}
<progress value={progress} max=100>Hi</progress> <progress value={progress} max=100>Hi</progress>
{/if}
</div> </div>
{/if}
<style> <style>