feat(board): collapse issues + pull requests

Closes #17
nikku · Jun 2, 2019 · 589f765 · 589f765
1 parent 83a2d40
commit 589f765
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 132 deletions.
diff --git a/packages/board/src/Card.scss b/packages/board/src/Card.scss
@@ -1,114 +1,124 @@
+@import "variables";
+
 .board-card-container {
   width: 100%;
   margin-bottom: 10px;
+}
 
-  .board-card {
-    background: white;
-    border-radius: 4px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-    position: relative;
-    z-index: 1;
-    padding: 4px 8px;
-  }
+
+.board-card {
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  position: relative;
+  z-index: 1;
+  padding: 4px 8px;
 
   .header {
     margin-bottom: 7px;
-    display: flex;
-    align-items: baseline;
   }
+}
 
-  .spacer {
-    flex: 1;
-  }
+.header {
+  display: flex;
+  align-items: center;
+}
 
-  .issue-type {
-    margin-right: 3px;
-  }
+.spacer {
+  flex: 1;
+}
 
-  .issue-type-pull-request {
-    color: #6cc644;
-  }
+.issue-type {
+  margin-right: 3px;
+}
 
-  .issue-number {
-    font-weight: bold;
-    margin-right: 7px;
-  }
+.issue-type-pull-request {
+  color: #6cc644;
+}
 
-  .repository {
-    color: #8b8b8b;
+.issue-number {
+  font-weight: bold;
+  margin-right: 6px;
+}
 
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .title {
-    font-size: 1.1em;
-    margin: -2px -2px 5px -2px;
-  }
+.repository {
+  color: $gray-600;
 
-  .title textarea {
-    width: 100%;
-    line-height: 1.2em;
-    resize: none;
-    border: none;
-    padding: 2px;
-    min-height: 30px;
-    overflow: hidden;
-    color: #525252;
-  }
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .footer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
+.title {
+  font-size: 1.1em;
+  margin: -2px -2px 5px -2px;
+}
 
-  .links {
-    margin-left: auto
-  }
-
-  .links a {
-    color: #cdcdcd;
-  }
-
-  .links a:hover {
-    color: #979797;
+.title textarea {
+  width: 100%;
+  line-height: 1.2em;
+  resize: none;
+  border: none;
+  padding: 2px;
+  min-height: 30px;
+  overflow: hidden;
+  color: $gray-700;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.links {
+  margin-left: auto;
+}
+
+.links a {
+  color: $gray-500;
+}
+
+.links a:hover {
+  color: $gray-600;
+}
+
+
+.assignee {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 3px;
+
+  width: 1.3em;
+  height: 1.3em;
+  line-height: 1.3em;
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
   }
 
-  .card-link {
-    border-top: solid 1px #F0F0F0;
-    margin-top: 1px;
-    padding-top: 1px;
-
-    .link-type {
-      margin-right: 6px;
-      color: #999;
-    }
-
-    .link-depends-on {
-      color: red;
-    }
-
-    .link-required-by {
-      color: orange;
-    }
-
-    .link-related-to {
-      color: #999;
-    }
-
-    .link-part-of {
-      color: lightblue;
-    }
+  &.reviewer:before {
+    content: '';
+    display: block;
+    background: $warning;
+    width: .8em;
+    height: .8em;
+    border: solid 2px white;
+    border-radius: 50%;
+    position: absolute;
+    top: -3px;
+    right: -3px;
   }
+}
 
-  .card-impl {
-    background: #F9F9F9;
-    border-radius: 0 0 4px 4px;
-    margin-top: -2px;
-    box-shadow: inset 0 3px 5px -2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
-    position: relative;
-    padding: 4px 8px;
-  }
+.assignee + .assignee {
+  margin-left: 3px;
 }
diff --git a/packages/board/src/Card.svelte b/packages/board/src/Card.svelte
@@ -5,6 +5,8 @@
 
   import Tag from './components/Tag.svelte';
 
+  import CardLink from './CardLink.svelte';
+
   export let item;
 
   export let className = '';
@@ -17,6 +19,17 @@
   $: labels = item.labels.filter(l => !l.column_label);
   $: pull_request = item.pull_request;
 
+  $: links = item.links;
+
+  $: closedBy = (links.find(link => {
+    const {
+      type,
+      target
+    } = link;
+
+    return type === 'CLOSED_BY';
+  }) || {}).target;
+
   $: assignees = item.assignees;
 
   $: requested_reviewers = item.requested_reviewers || [];
@@ -55,43 +68,6 @@
     color: $gray-800 !important;
     border: solid 1px $gray-600;
   }
-
-  .assignee {
-    border-radius: 3px;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-size: 14px;
-    line-height: 1.5;
-    position: relative;
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    border-radius: 3px;
-
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-
-    &.reviewer:before {
-      content: '';
-      display: block;
-      background: $warning;
-      width: 12px;
-      height: 12px;
-      border: solid 2px white;
-      border-radius: 50%;
-      position: absolute;
-      top: -3px;
-      right: -3px;
-    }
-  }
-
 </style>
 
 <div class="board-card-container { className }" { ...otherProps }>
@@ -144,4 +120,10 @@
       </div>
     </div>
   </div>
+
+  {#if closedBy}
+    <div class="board-card-links">
+      <CardLink item={ closedBy } type="CLOSES" />
+    </div>
+  {/if}
 </div>
diff --git a/packages/board/src/CardLink.svelte b/packages/board/src/CardLink.svelte
@@ -0,0 +1,95 @@
+<script>
+  export let item;
+
+  export let className = '';
+
+  export let type;
+
+  $: id = item.id;
+  $: number = item.number;
+  $: title = item.title;
+  $: repository = item.repository;
+  $: pull_request = item.pull_request;
+
+  $: assignees = item.assignees;
+
+  $: requested_reviewers = item.requested_reviewers || [];
+
+  $: repositoryName = `${repository.owner.login}/${repository.name}`;
+
+  $: cardUrl = `https://github.com/${ repositoryName }/issues/${ number }`;
+</script>
+
+<style lang="scss">
+  @import "./Card";
+
+  .card-link {
+    border-top: solid 1px #F0F0F0;
+    margin-top: 1px;
+    padding-top: 1px;
+
+    .link-type {
+      margin-right: 6px;
+      color: #999;
+    }
+
+    .link-depends-on {
+      color: red;
+    }
+
+    .link-required-by {
+      color: orange;
+    }
+
+    .link-related-to {
+      color: #999;
+    }
+
+    .link-part-of {
+      color: lightblue;
+    }
+  }
+
+  .card-impl {
+    background: #F9F9F9;
+    border-radius: 0 0 4px 4px;
+    margin-top: -6px;
+    box-shadow: inset 0 3px 5px -2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
+    position: relative;
+    padding: 8px 8px 4px 8px;
+  }
+
+  .card-link .assignee {
+    width: 1.1em;
+    height: 1.1em;
+    line-height: 1.1em;
+  }
+</style>
+
+<div class="card-link" class:card-impl={ type === 'CLOSES' }>
+  <div class="header">
+    {#if pull_request}
+      PR
+    {/if}
+
+    <a href={ cardUrl }
+       target="_blank"
+       rel="noopener noreferrer"
+       class="issue-number"
+    >{ number }</a>
+    <span class="repository" title={ repositoryName }>{ repositoryName }</span>
+    <span class="spacer"></span>
+
+    {#each assignees as assignee}
+      <span class="assignee" title="{ assignee.login } assigned">
+        <img src="{ assignee.avatar_url }&s=40" alt="{ assignee.login } avatar" />
+      </span>
+    {/each}
+
+    {#each requested_reviewers as reviewer}
+      <span class="assignee reviewer" title="{ reviewer.login } requested for review">
+        <img src="{ reviewer.avatar_url }&s=40" alt="{ reviewer.login } avatar" />
+      </span>
+    {/each}
+  </div>
+</div>