Browse Source

add thin progress bars to stuff, fix tiny issue with progress bars when they're too smol.

main
Gisle Aune 4 years ago
parent
commit
ceddd3fbf2
  1. 23
      svelte-ui/src/components/GoalEntry.svelte
  2. 5
      svelte-ui/src/components/ParentEntry.svelte
  3. 31
      svelte-ui/src/components/Progress.svelte
  4. 1
      svelte-ui/src/components/ProjectEntry.svelte
  5. 5
      svelte-ui/src/components/QLListItem.svelte
  6. 32
      svelte-ui/src/components/TimeProgress.svelte

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

@ -6,6 +6,7 @@
import OptionRow from "./OptionRow.svelte";
import ParentEntry from "./ParentEntry.svelte";
import Progress from "./Progress.svelte";
import TimeProgress from "./TimeProgress.svelte";
export let goal: GoalResult = null;
export let showAllOptions = false;
@ -13,31 +14,11 @@
let mdGoalEdit: ModalData;
let mdGoalDelete: ModalData;
let msLength: number;
let msElapsed: number;
let now = Date.now();
$: mdGoalEdit = {name:"goal.edit", goal};
$: mdGoalDelete = {name:"goal.delete", goal};
$: {
const start = Date.parse(goal.startTime)
const length = Date.parse(goal.endTime) - start;
msLength = length;
msElapsed = 0;
if (now > start) {
if (now > start + length) {
msElapsed = length;
} else {
msElapsed = Math.round(now - start);
}
}
}
</script>
<EveryMinute bind:now={now} />
<ParentEntry
full={showAllOptions}
entry={goal}
@ -51,7 +32,7 @@
{/if}
<div class="progress">
<Progress count={goal.completedAmount} target={goal.amount} />
<Progress thinner gray count={msElapsed} target={msLength} titleTime />
<TimeProgress startTime={goal.startTime} endTime={goal.endTime} />
</div>
</ParentEntry>

5
svelte-ui/src/components/ParentEntry.svelte

@ -6,6 +6,7 @@
import LinkHook from "./LinkHook.svelte";
import Markdown from "./Markdown.svelte";
import ProjectProgress from "./ProjectProgress.svelte";
import TimeProgress from "./TimeProgress.svelte";
interface EntryIconHolder {
icon: IconName
@ -30,6 +31,7 @@
export let headerLink = "";
export let hideProgress: boolean = false;
export let hideIcon: boolean = false;
export let showTimeProgress: boolean = false;
let iconName: IconName;
@ -68,6 +70,9 @@
</div>
{#if (!hideProgress && entry.tasks != null)}
<ProjectProgress project={entry} />
{#if showTimeProgress && entry.endTime}
<TimeProgress startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
{/if}
{/if}
{#if (full)}
<Markdown source={entry.description} />

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

@ -78,6 +78,10 @@
title = `${count} / ${target} (${percentage}%)`
}
}
$: {
console.log(ons, offs);
}
</script>
<div class="bar" title="{title}" class:thin class:thinner>
@ -101,7 +105,8 @@
margin: 0;
box-sizing: border-box;
width: 100%;
height: 1em;
height: 16px;
margin: 0.5px 0;
}
div.bar > div {
@ -109,7 +114,8 @@
flex-basis: 0;
display: inline-block;
box-sizing: border-box;
border: 1px solid #111;
margin: 0 0.5px;
border: 0.25px solid #111;
}
div.non-segmented {
@ -134,12 +140,29 @@
}
div.bar.thin {
height: 0.25em;
height: 3px;
}
div.bar.thinner {
height: 0.125em;
height: 1px;
}
div.bar.thinner div {
border-bottom: none;
border-top: none;
}
div.bar.thinner div.none {
background-color: #111111;
}
@media screen and (min-width: 1200) {
div.bar div {
margin: 1px 1px;
}
div.bar.thin {
height: 4px;
}
div.bar.thinner {
height: 4px;
}
}
</style>

1
svelte-ui/src/components/ProjectEntry.svelte

@ -31,6 +31,7 @@ import taskStore from "../stores/tasks";
headerLink={linkProject ? "/projects#"+project.id : ""}
hideProgress={hideProgress}
hideIcon={hideIcon}
showTimeProgress={!hideProgress}
>
{#if showAllOptions}
<OptionRow>

5
svelte-ui/src/components/QLListItem.svelte

@ -4,6 +4,7 @@
import DaysLeft from "./DaysLeft.svelte";
import Icon from "./Icon.svelte";
import ProjectProgress from "./ProjectProgress.svelte";
import TimeProgress from "./TimeProgress.svelte";
export let project: ProjectResult;
@ -33,6 +34,9 @@
{/if}
</div>
<ProjectProgress project={project} />
{#if project.endTime}
<TimeProgress startTime={project.createdTime} endTime={project.endTime} />
{/if}
</div>
</div>
@ -63,6 +67,7 @@
padding: 0.3em 0.5ch;
padding-right: 1ch;
padding-top: 0.4em;
}
div.ql-list-item.selected div.icon {
color: #666;

32
svelte-ui/src/components/TimeProgress.svelte

@ -0,0 +1,32 @@
<script lang="ts">
import EveryMinute from "./EveryMinute.svelte";
import Progress from "./Progress.svelte";
export let startTime: string | Date;
export let endTime: string | Date;
let msLength: number;
let msElapsed: number;
let now = Date.now();
$: {
const start = (startTime instanceof Date) ? startTime.getTime() : Date.parse(startTime)
const length = ((endTime instanceof Date) ? endTime.getTime() : Date.parse(endTime)) - start;
msLength = length;
msElapsed = 0;
if (now > start) {
if (now > start + length) {
msElapsed = length;
} else {
msElapsed = Math.round(now - start);
}
}
}
$: console.log(startTime, endTime, msLength, msElapsed, msElapsed < msLength)
</script>
<EveryMinute bind:now={now} />
<Progress thinner gray count={msElapsed} target={msLength} titleTime />
Loading…
Cancel
Save