julien/failwell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 (task record) blob in step # column

Browse Source
This commit is contained in:
Julien Calixte
2023-04-15 18:55:31 +02:00
parent cba119b3fc
commit 6bf41b9d61
2 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/modules/record/components/StepRecord.vue
View File

@@ -51,19 +51,21 @@ const isSuperiorToEstimation = computed(() => {
<template> <template>
<tr v-if="step" class="step-record"> <tr v-if="step" class="step-record">
<td class="rank"> <td class="td-rank">
{{ stepNumber }} <div class="rank">
<div v-if="isCurrentStep" class="blob green"></div>
<span v-else>
{{ stepNumber }}
</span>
</div>
</td> </td>
<td class="status"> <td class="status">
<span v-if="stepRecord?.end && !isSuperiorToEstimation">✅</span> <span v-if="stepRecord?.end && !isSuperiorToEstimation">✅</span>
<span v-else-if="isSuperiorToEstimation"> ⚠️ </span> <span v-else-if="isSuperiorToEstimation"> ⚠️ </span>
<span v-else>⌛</span> <span v-else>⌛</span>
</td> </td>
<td> <td class="step-title">
<div class="step-title"> {{ step.title }}
<div v-if="isCurrentStep" class="blob green"></div>
{{ step.title }}
</div>
</td> </td>
<td class="estimation minutes">{{ step.estimation }} min</td> <td class="estimation minutes">{{ step.estimation }} min</td>
<td class="minutes" v-if="stepRecord">{{ duration }} min</td> <td class="minutes" v-if="stepRecord">{{ duration }} min</td>
@@ -85,22 +87,23 @@ $blob-size: 15px;
.rank { .rank {
text-align: right; text-align: right;
display: flex;
justify-content: end;
align-items: center;
min-height: 30px;
} }
.blob { .blob {
border-radius: 50%; border-radius: 50%;
min-height: $blob-size; height: $blob-size;
min-width: $blob-size; width: $blob-size;
background: rgba(51, 217, 178, 1); background: rgba(51, 217, 178, 1);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 1); box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
animation: pulse 2s infinite; animation: pulse 2s infinite;
} }
.step-title { .step-title {
display: flex;
align-items: center;
padding-right: 1rem; padding-right: 1rem;
gap: 1rem;
} }
.minutes { .minutes {

2
src/modules/record/components/TaskRecord.vue
View File

@@ -46,7 +46,7 @@ const isSuperiorToEstimation = computed(() => {
</h1> </h1>
<h2 class="subtitle" v-if="record">{{ formatLongDate(record.start) }}</h2> <h2 class="subtitle" v-if="record">{{ formatLongDate(record.start) }}</h2>
<record-controls :task-id="taskId" :record-id="recordId" /> <record-controls :task-id="taskId" :record-id="recordId" />
<table class="table is-striped is-narrow is-hoverable is-fullwidth"> <table class="table is-striped is-hoverable is-fullwidth">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>