Browse Source

add tooltips to progress bars.

main
Gisle Aune 4 years ago
parent
commit
1a3a8949f8
  1. 2
      svelte-ui/src/components/GoalEntry.svelte
  2. 26
      svelte-ui/src/components/Progress.svelte

2
svelte-ui/src/components/GoalEntry.svelte

@ -51,7 +51,7 @@ import EveryMinute from "./EveryMinute.svelte";
{/if}
<div class="progress">
<Progress count={goal.completedAmount} target={goal.amount} />
<Progress thinner gray count={msElapsed} target={msLength} />
<Progress thinner gray count={msElapsed} target={msLength} titleTime />
</div>
</ParentEntry>

26
svelte-ui/src/components/Progress.svelte

@ -15,12 +15,15 @@
export let thin = false;
export let thinner = false;
export let gray = false;
export let titlePercentageOnly = false;
export let titleTime = false;
let offClass = COLORS[0];
let onClass = COLORS[1];
let ons = 0;
let offs = 1;
let nonSegmented = false;
let title = "";
$: {
let level = Math.floor(count / target);
@ -53,9 +56,30 @@
// or a browser freeze if you set the target very high.
nonSegmented = (target >= 50);
}
$: {
const percentage = ((count / target) * 100).toFixed(0);
if (titlePercentageOnly) {
title = `${percentage}%`;
} else if (titleTime) {
let unit = "days";
let progressTime = (count / 86400000);
let totaltTime = (target / 86400000);
if (totaltTime < 1) {
unit = "hours";
totaltTime *= 24;
progressTime *= 24;
}
title = `${progressTime.toFixed(1)} / ${totaltTime.toFixed(1)} ${unit} (${percentage}%)`;
} else {
title = `${count} / ${target} (${percentage}%)`
}
}
</script>
<div class="bar" class:thin class:thinner>
<div class="bar" title="{title}" class:thin class:thinner>
{#if nonSegmented}
<div style="flex: {ons}" class={"non-segmented on " + onClass}></div>
<div style="flex: {offs}" class={"non-segmented off " + offClass}></div>

Loading…
Cancel
Save