Resolve "Issue board card design"

3 files changed, 232 insertions, 48 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index d956777a86b..2315a48a306 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -1,18 +1,24 @@
 <script>
-import $ from 'jquery';
+import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { sprintf, __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
 import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../eventhub';
-import tooltip from '../../vue_shared/directives/tooltip';
+import IssueDueDate from './issue_due_date.vue';
+import IssueTimeEstimate from './issue_time_estimate.vue';
 import boardsStore from '../stores/boards_store';
 
 export default {
   components: {
-    UserAvatarLink,
     Icon,
+    UserAvatarLink,
+    TooltipOnTruncate,
+    IssueDueDate,
+    IssueTimeEstimate,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     issue: {
@@ -45,8 +51,8 @@ export default {
   },
   data() {
     return {
-      limitBeforeCounter: 3,
-      maxRender: 4,
+      limitBeforeCounter: 2,
+      maxRender: 3,
       maxCounter: 99,
     };
   },
@@ -55,7 +61,9 @@ export default {
       return this.issue.assignees.length - this.limitBeforeCounter;
     },
     assigneeCounterTooltip() {
-      return `${this.assigneeCounterLabel} more`;
+      const { numberOverLimit, maxCounter } = this;
+      const count = numberOverLimit > maxCounter ? maxCounter : numberOverLimit;
+      return sprintf(__('%{count} more assignees'), { count });
     },
     assigneeCounterLabel() {
       if (this.numberOverLimit > this.maxCounter) {
@@ -80,6 +88,10 @@ export default {
     showLabelFooter() {
       return this.issue.labels.find(l => this.showLabel(l)) !== undefined;
     },
+    issueReferencePath() {
+      const { referencePath, groupId } = this.issue;
+      return !groupId ? referencePath.split('#')[0] : null;
+    },
   },
   methods: {
     isIndexLessThanlimit(index) {
@@ -96,11 +108,9 @@ export default {
       return index < this.limitBeforeCounter;
     },
     assigneeUrl(assignee) {
+      if (!assignee) return '';
       return `${this.rootPath}${assignee.username}`;
     },
-    assigneeUrlTitle(assignee) {
-      return `Assigned to ${assignee.name}`;
-    },
     avatarUrlTitle(assignee) {
       return `Avatar for ${assignee.name}`;
     },
@@ -108,19 +118,29 @@ export default {
       if (!label.id) return false;
       return true;
     },
-    filterByLabel(label, e) {
+    filterByLabel(label) {
+      if (!this.updateFilters) return;
+      const labelTitle = encodeURIComponent(label.title);
+      const filter = `label_name[]=${labelTitle}`;
+
+      this.applyFilter(filter);
+    },
+    filterByWeight(weight) {
       if (!this.updateFilters) return;
 
+      const issueWeight = encodeURIComponent(weight);
+      const filter = `weight=${issueWeight}`;
+
+      this.applyFilter(filter);
+    },
+    applyFilter(filter) {
       const filterPath = boardsStore.filter.path.split('&');
-      const labelTitle = encodeURIComponent(label.title);
-      const param = `label_name[]=${labelTitle}`;
-      const labelIndex = filterPath.indexOf(param);
-      $(e.currentTarget).tooltip('hide');
+      const filterIndex = filterPath.indexOf(filter);
 
-      if (labelIndex === -1) {
-        filterPath.push(param);
+      if (filterIndex === -1) {
+        filterPath.push(filter);
       } else {
-        filterPath.splice(labelIndex, 1);
+        filterPath.splice(filterIndex, 1);
       }
 
       boardsStore.filter.path = filterPath.join('&');
@@ -141,24 +161,62 @@ export default {
 <template>
   <div>
     <div class="board-card-header">
-      <h4 class="board-card-title">
+      <h4 class="board-card-title append-bottom-0 prepend-top-0">
         <icon
           v-if="issue.confidential"
+          v-gl-tooltip
           name="eye-slash"
-          class="confidential-icon"
-        />
-        <a
+          :title="__('Confidential')"
+          class="confidential-icon append-right-4"
+          :aria-label="__('Confidential')"
+        /><a
           :href="issue.path"
           :title="issue.title"
           class="js-no-trigger"
           @mousemove.stop>{{ issue.title }}</a>
+      </h4>
+    </div>
+    <div
+      v-if="showLabelFooter"
+      class="board-card-labels prepend-top-4 d-flex flex-wrap"
+    >
+      <button
+        v-for="label in issue.labels"
+        v-if="showLabel(label)"
+        :key="label.id"
+        v-gl-tooltip
+        :style="labelStyle(label)"
+        :title="label.description"
+        class="badge color-label append-right-4 prepend-top-4"
+        type="button"
+        @click="filterByLabel(label)"
+      >
+        {{ label.title }}
+      </button>
+    </div>
+    <div class="board-card-footer d-flex justify-content-between align-items-end">
+      <div class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container">
         <span
-          v-if="issueId"
-          class="board-card-number append-right-5"
+          v-if="issue.referencePath"
+          class="board-card-number d-flex append-right-8 prepend-top-8"
         >
-          {{ issue.referencePath }}
+          <tooltip-on-truncate
+            v-if="issueReferencePath"
+            :title="issueReferencePath"
+            placement="bottom"
+            class="board-issue-path block-truncated bold"
+          >{{ issueReferencePath }}</tooltip-on-truncate>#{{ issue.iid }}
         </span>
-      </h4>
+        <span class="board-info-items prepend-top-8 d-inline-block">
+          <issue-due-date
+            v-if="issue.dueDate"
+            :date="issue.dueDate"
+          /><issue-time-estimate
+            v-if="issue.timeEstimate"
+            :estimate="issue.timeEstimate"
+          />
+        </span>
+      </div>
       <div class="board-card-assignee">
         <user-avatar-link
           v-for="(assignee, index) in issue.assignees"
@@ -167,38 +225,26 @@ export default {
           :link-href="assigneeUrl(assignee)"
           :img-alt="avatarUrlTitle(assignee)"
           :img-src="assignee.avatar"
-          :tooltip-text="assigneeUrlTitle(assignee)"
+          :img-size="24"
           class="js-no-trigger"
           tooltip-placement="bottom"
-        />
+        >
+          <span class="js-assignee-tooltip">
+            <span class="bold d-block">Assignee</span>
+            {{ assignee.name }} 
+            <span class="text-white-50">@{{ assignee.username }}</span>
+          </span>
+        </user-avatar-link>
         <span
           v-if="shouldRenderCounter"
-          v-tooltip
+          v-gl-tooltip
           :title="assigneeCounterTooltip"
           class="avatar-counter"
+          data-placement="bottom"
         >
           {{ assigneeCounterLabel }}
         </span>
       </div>
     </div>
-    <div
-      v-if="showLabelFooter"
-      class="board-card-footer"
-    >
-      <button
-        v-for="label in issue.labels"
-        v-if="showLabel(label)"
-        :key="label.id"
-        v-tooltip
-        :style="labelStyle(label)"
-        :title="label.description"
-        class="badge color-label"
-        type="button"
-        data-container="body"
-        @click="filterByLabel(label, $event)"
-      >
-        {{ label.title }}
-      </button>
-    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue
new file mode 100644
index 00000000000..025ef7e9743
--- /dev/null
+++ b/app/assets/javascripts/boards/components/issue_due_date.vue
@@ -0,0 +1,90 @@
+<script>
+import dateFormat from 'dateformat';
+import { GlTooltip } from '@gitlab-org/gitlab-ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
+import { getDayDifference, getTimeago, dateInWords } from '~/lib/utils/datetime_utility';
+
+export default {
+  components: {
+    Icon,
+    GlTooltip,
+  },
+  props: {
+    date: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      const timeago = getTimeago();
+      const { timeDifference, standardDateFormat } = this;
+      const formatedDate = standardDateFormat;
+
+      if (timeDifference >= -1 && timeDifference < 7) {
+        return `${timeago.format(this.issueDueDate)} (${formatedDate})`;
+      }
+
+      return timeago.format(this.issueDueDate);
+    },
+    body() {
+      const { timeDifference, issueDueDate, standardDateFormat } = this;
+
+      if (timeDifference === 0) {
+        return __('Today');
+      } else if (timeDifference === 1) {
+        return __('Tomorrow');
+      } else if (timeDifference === -1) {
+        return __('Yesterday');
+      } else if (timeDifference > 0 && timeDifference < 7) {
+        return dateFormat(issueDueDate, 'dddd', true);
+      }
+
+      return standardDateFormat;
+    },
+    issueDueDate() {
+      return new Date(this.date);
+    },
+    timeDifference() {
+      const today = new Date();
+      return getDayDifference(today, this.issueDueDate);
+    },
+    isPastDue() {
+      if (this.timeDifference >= 0) return false;
+      return true;
+    },
+    standardDateFormat() {
+      const today = new Date();
+      const isDueInCurrentYear = today.getFullYear() === this.issueDueDate.getFullYear();
+
+      return dateInWords(this.issueDueDate, true, isDueInCurrentYear);
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <span
+      ref="issueDueDate"
+      class="board-card-info card-number"
+    >
+      <icon
+        :class="{'text-danger': isPastDue, 'board-card-info-icon': true}"
+        name="calendar"
+      /><time
+        :class="{'text-danger': isPastDue}"
+        datetime="date"
+        class="board-card-info-text">{{ body }}</time>
+    </span>
+    <gl-tooltip
+      :target="() => $refs.issueDueDate"
+      placement="bottom"
+    >
+      <span class="bold">{{ __('Due date') }}</span>
+      <br />
+      <span :class="{'text-danger-muted': isPastDue}">{{ title }}</span>
+    </gl-tooltip>
+  </span>
+</template>
diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue
new file mode 100644
index 00000000000..efc7daf7812
--- /dev/null
+++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue
@@ -0,0 +1,48 @@
+<script>
+import { GlTooltip } from '@gitlab-org/gitlab-ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
+
+export default {
+  components: {
+    Icon,
+    GlTooltip,
+  },
+  props: {
+    estimate: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return stringifyTime(parseSeconds(this.estimate), true);
+    },
+    timeEstimate() {
+      return stringifyTime(parseSeconds(this.estimate));
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <span
+      ref="issueTimeEstimate"
+      class="board-card-info card-number"
+    >
+      <icon
+        name="hourglass"
+        css-classes="board-card-info-icon"
+      /><time class="board-card-info-text">{{ timeEstimate }}</time>
+    </span>
+    <gl-tooltip
+      :target="() => $refs.issueTimeEstimate"
+      placement="bottom"
+      class="js-issue-time-estimate"
+    >
+      <span class="bold d-block">{{ __('Time estimate') }}</span>
+      {{ title }}
+    </gl-tooltip>
+  </span>
+</template>