MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip: update ProgressCircle to take values

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-05 09:30:52 +02:00
parent 69583d1151
commit ff7d222273
1 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
packages/bbui/src/ProgressCircle/ProgressCircle.svelte
View File

@ -1,29 +1,52 @@
<script> <script>
// WIP! Does not yet work. // WIP! Does not yet work.
import "@spectrum-css/progresscircle/dist/index-vars.css" import "@spectrum-css/progresscircle/dist/index-vars.css"
import { tweened } from 'svelte/motion'; import { tweened } from "svelte/motion"
import { cubicOut } from 'svelte/easing'; import { cubicOut } from "svelte/easing"
export let value = false export let small
export let small; export let large
export let large;
export let overBackground; export let value = false
export let minValue = 0
export let maxValue = 0
let subMask1Style
let subMask2Style
if (!value) {
let percentage = ((value - minValue) / (maxValue - minValue)) * 100
let angle
if (percentage > 0 && percentage <= 50) {
angle = -180 + (percentage / 50) * 180
subMask1Style = `rotate(${angle}deg)`
subMask2Style = "rotate(-180deg)"
} else if (percentage > 50) {
angle = -180 + ((percentage - 50) / 50) * 180
subMask1Style = "rotate(0deg)"
subMask2Style = `rotate(${angle}deg)`
}
}
export let overBackground
</script> </script>
<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressCircle--small={small} class:spectrum-ProgressCircle--large={large} class="spectrum-ProgressCircle"> <div
<div class="spectrum-ProgressCircle-track"></div> class:spectrum-ProgressBar--indeterminate={!value}
<div class="spectrum-ProgressCircle-fills"> class:spectrum-ProgressCircle--small={small}
<div class="spectrum-ProgressCircle-fillMask1"> class:spectrum-ProgressCircle--large={large}
<div class="spectrum-ProgressCircle-fillSubMask1"> class="spectrum-ProgressCircle"
<div class="spectrum-ProgressCircle-fill"></div> >
</div> <div class="spectrum-ProgressCircle-track" />
<div class="spectrum-ProgressCircle-fills">
<div class="spectrum-ProgressCircle-fillMask1">
<div class="spectrum-ProgressCircle-fillSubMask1" style={subMask1Style}>
<div class="spectrum-ProgressCircle-fill" />
</div> </div>
<div class="spectrum-ProgressCircle-fillMask2"> </div>
<div class="spectrum-ProgressCircle-fillSubMask2"> <div class="spectrum-ProgressCircle-fillMask2">
<div class="spectrum-ProgressCircle-fill"></div> <div class="spectrum-ProgressCircle-fillSubMask2" style={subMask2Style}>
</div> <div class="spectrum-ProgressCircle-fill" />
</div> </div>
</div> </div>
</div> </div>
</div>