Browse Source

add tooltips to progress bars.

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

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

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { GoalResult } from "../models/goal"; import type { GoalResult } from "../models/goal";
import type { ModalData } from "../stores/modal"; import type { ModalData } from "../stores/modal";
import EveryMinute from "./EveryMinute.svelte";
import EveryMinute from "./EveryMinute.svelte";
import Option from "./Option.svelte"; import Option from "./Option.svelte";
import OptionRow from "./OptionRow.svelte"; import OptionRow from "./OptionRow.svelte";
import ParentEntry from "./ParentEntry.svelte"; import ParentEntry from "./ParentEntry.svelte";
@ -51,7 +51,7 @@ import EveryMinute from "./EveryMinute.svelte";
{/if} {/if}
<div class="progress"> <div class="progress">
<Progress count={goal.completedAmount} target={goal.amount} /> <Progress count={goal.completedAmount} target={goal.amount} />
<Progress thinner gray count={msElapsed} target={msLength} />
<Progress thinner gray count={msElapsed} target={msLength} titleTime />
</div> </div>
</ParentEntry> </ParentEntry>

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

@ -15,12 +15,15 @@
export let thin = false; export let thin = false;
export let thinner = false; export let thinner = false;
export let gray = false; export let gray = false;
export let titlePercentageOnly = false;
export let titleTime = false;
let offClass = COLORS[0]; let offClass = COLORS[0];
let onClass = COLORS[1]; let onClass = COLORS[1];
let ons = 0; let ons = 0;
let offs = 1; let offs = 1;
let nonSegmented = false; let nonSegmented = false;
let title = "";
$: { $: {
let level = Math.floor(count / target); let level = Math.floor(count / target);
@ -53,9 +56,30 @@
// or a browser freeze if you set the target very high. // or a browser freeze if you set the target very high.
nonSegmented = (target >= 50); 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> </script>
<div class="bar" class:thin class:thinner>
<div class="bar" title="{title}" class:thin class:thinner>
{#if nonSegmented} {#if nonSegmented}
<div style="flex: {ons}" class={"non-segmented on " + onClass}></div> <div style="flex: {ons}" class={"non-segmented on " + onClass}></div>
<div style="flex: {offs}" class={"non-segmented off " + offClass}></div> <div style="flex: {offs}" class={"non-segmented off " + offClass}></div>

Loading…
Cancel
Save