add quest log aesthetic.

2021-01-17 16:12:32 +01:00
parent 1d3c8dee73
commit d3a6487dc8
17 changed files with 319 additions and 26 deletions
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { ProjectResult } from "../models/project";
+  import selectionStore from "../stores/selection";
+  import Icon from "./Icon.svelte";
+  import ProjectProgress from "./ProjectProgress.svelte";
+
+  export let project: ProjectResult;
+
+  let selected: boolean;
+  let completed: boolean;
+
+  function handleClick() {
+    window.location.hash = "#" + project.id;
+    selectionStore.change("hash", project.id);
+  }
+
+  $: selected = $selectionStore.hash === project.id;
+  $: completed = !project.active;
+</script>
+
+<div class="ql-list-item" on:click={handleClick} class:selected>
+  <div class="icon" class:completed>
+    <Icon block name={project.icon} />
+  </div>
+  <div class="header">
+    <div class="name">{project.name}</div>
+    <ProjectProgress project={project} />
+  </div>
+</div>
+
+<style>
+  div.ql-list-item {
+    display: flex;
+    flex-direction: row;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+
+    color: #777;
+    padding: 0.2em;
+    padding-bottom: 0.05em;
+
+    cursor: pointer;
+  }
+  div.ql-list-item:hover {
+    color: #ccc;
+    background-color: #191919;
+  }
+
+  div.ql-list-item.selected {
+    background-color: #222;
+  }
+
+  div.icon {
+    color: #444;
+
+    padding: 0.3em 0.5ch;
+    padding-right: 1ch;
+  }
+  div.ql-list-item.selected div.icon {
+    color: #666;
+  }
+  div.icon.completed {
+    color: #484;
+  }
+  div.ql-list-item.selected div.icon.completed {
+    color: #78ff78;
+  }
+  div.ql-list-item:hover div.icon {
+    color: #ccc;
+  }
+
+  div.header {
+    flex-grow: 1;
+    flex-shrink: 0;
+    padding-right: 0.5ch;
+  }
+</style>