diff --git a/client-nuxt/components/GenericItem.vue b/client-nuxt/components/GenericItem.vue
index 774592dba3a3e94ff37bce44450334a0029ae815..5835a24f67b8c4169bfbb2d60d5edf6de26dc339 100644
--- a/client-nuxt/components/GenericItem.vue
+++ b/client-nuxt/components/GenericItem.vue
@@ -7,7 +7,7 @@
elevation="2"
:type="skeletonLoaderType"
></v-skeleton-loader>
- <v-card v-else flat class="mt-3">
+ <v-card v-else flat class="mt-3" :color="color">
<v-toolbar flat :color="toolbarColor">
<v-btn nuxt x-small text class="mr-3" @click="goToItemListLocation()"
><v-icon left>mdi-arrow-left</v-icon>{{ itemListLabel }}</v-btn
@@ -89,8 +89,8 @@
</v-toolbar>
<v-card-text>
- <v-card flat>
- <v-toolbar dense flat
+ <v-card flat :color="color">
+ <v-toolbar dense flat :color="color"
><v-toolbar-title>Description</v-toolbar-title>
</v-toolbar>
<v-card-text v-if="item.description">
@@ -125,6 +125,7 @@ export default {
default:
'card-heading, list-item-avatar-two-line@3, article, table-heading, table-thead, table-tfoot',
},
+ color: { type: String, default: null },
flat: { type: Boolean, default: false },
},
@@ -145,7 +146,7 @@ export default {
},
// TODO : choose color for toolbar
toolbarColor() {
- return this.$vuetify.theme.dark ? null : 'grey lighten-3'
+ return this.$vuetify.theme.dark ? null : this.color
},
},
diff --git a/client-nuxt/components/WorkflowInvocation.vue b/client-nuxt/components/WorkflowInvocation.vue
index c7a47264408568969ef7090ae8f4b1a2b1cb8369..0f348f3f328581c73ff1581ac99be191eecd5dfb 100644
--- a/client-nuxt/components/WorkflowInvocation.vue
+++ b/client-nuxt/components/WorkflowInvocation.vue
@@ -1,10 +1,14 @@
<template>
<v-card flat>
- <v-expansion-panels focusable multiple>
- <v-expansion-panel v-for="step in steps" :key="step.step_id">
- <v-expansion-panel-header disable-icon-rotate>
+ <v-expansion-panels focusable multiple :color="color">
+ <v-expansion-panel
+ v-for="step in steps"
+ :key="step.step_id"
+ :color="color"
+ >
+ <v-expansion-panel-header disable-icon-rotate :color="color">
<v-row no-gutters>
- <v-col>
+ <v-col :color="color">
{{ step.step_id }}. {{ step.tool.name }}
<span class="text-caption text--secondary ml-2"
><v-chip small>{{ step.tool.version }}</v-chip></span
@@ -16,15 +20,16 @@
<analysis-state :state="step.job.state"></analysis-state>
</template>
</v-expansion-panel-header>
- <v-expansion-panel-content>
+ <v-expansion-panel-content :color="color">
<template v-if="Object.keys(step.job.params).length > 0">
<v-list-item
v-for="k in Object.keys(step.job.params)"
:key="k"
dense
+ :color="color"
>
<template #default>
- <v-list-item-content>
+ <v-list-item-content :color="color">
<v-list-item-subtitle>
<v-badge
color="secondary"
@@ -37,7 +42,7 @@
>
</v-list-item>
</template>
- <v-card v-else flat>
+ <v-card v-else flat :color="color">
<v-card-text class="pb-0">
<v-alert border="left" text type="info" class="mt-4">
No parameter
@@ -56,7 +61,10 @@ export default {
components: {
AnalysisState,
},
- props: { steps: { type: Array, default: () => [] } },
+ props: {
+ steps: { type: Array, default: () => [] },
+ color: { type: String, default: null },
+ },
methods: {
getCols() {
if (this.$vuetify.breakpoint.xlOnly) {
diff --git a/client-nuxt/nuxt.config.js b/client-nuxt/nuxt.config.js
index 95e2b9eecbd4425ec5b9614b13af292aa6804157..887d3d4f75956f3a759e0ac578af4fd9954e4a68 100644
--- a/client-nuxt/nuxt.config.js
+++ b/client-nuxt/nuxt.config.js
@@ -142,6 +142,9 @@ export default {
darken3: '#000000',
darken4: '#000000',
},
+ project: colors.red.lighten2,
+ analysis: colors.green.lighten2,
+
// accent: '#82B1FF',
// error: '#FF5252',
// info: '#2196F3',
diff --git a/client-nuxt/pages/projects/_id.vue b/client-nuxt/pages/projects/_id.vue
index 918d90724183edd54b72d3c7081f16d65b9b97b7..4f0bc2ac5ef54ab67779ee848c2a61f21bf6805a 100644
--- a/client-nuxt/pages/projects/_id.vue
+++ b/client-nuxt/pages/projects/_id.vue
@@ -7,6 +7,7 @@
:item-location="projectLocation"
:item-list-location="projectsListLocation"
:loading="$fetchState.pending"
+ color="project"
>
<template #content>
<v-toolbar flat bottom color="transparent">
diff --git a/client-nuxt/pages/projects/_id/analysis/_analysisId.vue b/client-nuxt/pages/projects/_id/analysis/_analysisId.vue
index 20354fac9419982ac6765d7f3e01d5a45a5bde97..f8a4c50967c885189810a8ff309f4b6dd6fb5534 100644
--- a/client-nuxt/pages/projects/_id/analysis/_analysisId.vue
+++ b/client-nuxt/pages/projects/_id/analysis/_analysisId.vue
@@ -9,11 +9,12 @@
:item-list-location="analysisListLocation"
:item-actions="computedAnalysisActions"
:loading="$fetchState.pending"
+ color="analysis"
>
<template #content>
<v-card-text>
- <v-card flat outlined>
- <v-toolbar flat>
+ <v-card flat outlined color="analysis">
+ <v-toolbar flat color="analysis">
<v-toolbar-title> Workflow invocation</v-toolbar-title></v-toolbar
>
@@ -24,6 +25,7 @@
invocation.steps.length > 0
"
:steps="stepsWithJobMetrics"
+ color="analysis"
></workflow-invocation>
<v-card-text v-else>
<v-alert
@@ -48,8 +50,8 @@
</v-card>
</v-card-text>
<v-card-text>
- <v-card v-if="experimentId" flat outlined>
- <v-toolbar dense flat
+ <v-card v-if="experimentId" flat outlined color="analysis">
+ <v-toolbar dense flat color="analysis"
><v-toolbar-title>
{{ sanitizedAnalysis.experiments[0].name }}
</v-toolbar-title>
@@ -86,7 +88,7 @@
>
</v-card-text>
<v-card-text>
- <v-card flat outlined>
+ <v-card flat outlined color="analysis">
<v-data-table
v-if="sanitizedAnalysis"
:headers="phenotypeCategoriesHeader"
@@ -96,9 +98,10 @@
:search="phenotype_search"
multi-sort
class="elevation-0"
+ color="analysis"
>
<template v-slot:top>
- <v-toolbar flat dense>
+ <v-toolbar flat dense color="analysis">
<v-toolbar-title> Phenotype Categories </v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-text-field