CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 09:38:55 +13:00
Code Issues Projects Releases Wiki Activity

working ProgressCircle

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-05-05 10:02:48 +02:00
parent 91518bdef8
commit 72dd292e17
1 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
packages/bbui/src/ProgressCircle/ProgressCircle.svelte
View file

@ -1,11 +1,17 @@
<script>
// WIP! Does not yet work.
import "@spectrum-css/progresscircle/dist/index-vars.css"
import { tweened } from "svelte/motion"
import { cubicOut } from "svelte/easing"
export let small
export let large
export let size = "M"
function convertSize(size) {
switch (size) {
case "S":
return "small"
case "L":
return "large"
default:
return
}
}
export let value = false
export let minValue = 0
@ -13,17 +19,21 @@
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 = `transform: rotate(${angle}deg);`
subMask2Style = "transform: rotate(-180deg);"
} else if (percentage > 50) {
angle = -180 + ((percentage - 50) / 50) * 180
subMask1Style = "transform: rotate(0deg);"
subMask2Style = `transform: rotate(${angle}deg);`
$: calculateSubMasks(value)
function calculateSubMasks(value) {
if (value) {
let percentage = ((value - minValue) / (maxValue - minValue)) * 100
let angle
if (percentage > 0 && percentage <= 50) {
angle = -180 + (percentage / 50) * 180
subMask1Style = `transform: rotate(${angle}deg);`
subMask2Style = "transform: rotate(-180deg);"
} else if (percentage > 50) {
angle = -180 + ((percentage - 50) / 50) * 180
subMask1Style = "transform: rotate(0deg);"
subMask2Style = `transform: rotate(${angle}deg);`
}
}
}
@ -31,11 +41,10 @@
</script>
<div
on:click
class:spectrum-ProgressBar--indeterminate={!value}
class:spectrum-ProgressCircle--small={small}
class:spectrum-ProgressCircle--large={large}
class:spectrum-ProgressCircle--overBackground={overBackground}
class="spectrum-ProgressCircle"
class="spectrum-ProgressCircle spectrum-ProgressCircle--{convertSize(size)}"
>
<div class="spectrum-ProgressCircle-track" />
<div class="spectrum-ProgressCircle-fills">