blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Color status in JobDetails and TaskDetails component

Browse Source 
Create a visual connection with the colors used by the indicators.
This commit is contained in:
Pablo Vazquez 2022-07-05 19:57:09 +02:00
parent 66ad722519
commit 44b30e08de
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/src/components/jobs/JobDetails.vue
View File

@ -27,7 +27,7 @@
<dd>{{ jobData.name }}</dd> <dd>{{ jobData.name }}</dd>
<dt class="field-status" title="Status">Status</dt> <dt class="field-status" title="Status">Status</dt>
<dd>{{ jobData.status }}</dd> <dd class="field-status-label" :class="'status-' + jobData.status">{{ jobData.status }}</dd>
<dt class="field-type" title="Type">Type</dt> <dt class="field-type" title="Type">Type</dt>
<dd>{{ jobType ? jobType.label : jobData.type }}</dd> <dd>{{ jobType ? jobType.label : jobData.type }}</dd>
@ -46,7 +46,6 @@
</dl> </dl>
</TabItem> </TabItem>
</TabsWrapper> </TabsWrapper>
</template> </template>
<div v-else class="details-no-item-selected"> <div v-else class="details-no-item-selected">
@ -208,4 +207,9 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.field-status-label {
color: var(--indicator-color);
font-weight: bold;
}
</style> </style>

7
web/app/src/components/jobs/TaskDetails.vue
View File

@ -10,7 +10,7 @@
<dd>{{ taskData.name }}</dd> <dd>{{ taskData.name }}</dd>
<dt class="field-status" title="Status">Status</dt> <dt class="field-status" title="Status">Status</dt>
<dd>{{ taskData.status }}</dd> <dd class="field-status-label" :class="'status-' + taskData.status">{{ taskData.status }}</dd>
<dt class="field-worker" title="Assigned To">Assigned To</dt> <dt class="field-worker" title="Assigned To">Assigned To</dt>
<dd><worker-link :worker="taskData.worker" /></dd> <dd><worker-link :worker="taskData.worker" /></dd>
@ -91,4 +91,9 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.field-status-label {
color: var(--indicator-color);
font-weight: bold;
}
</style> </style>