Skip to content
Snippets Groups Projects
Commit a743f25c authored by Remi  PLANEL's avatar Remi PLANEL
Browse files

start adding color definition for project and analysis

parent b046a16a
No related branches found
No related tags found
1 merge request!101Draft: Resolve "Color theme"
Pipeline #80888 passed
......@@ -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
},
},
......
<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) {
......
......@@ -142,6 +142,9 @@ export default {
darken3: '#000000',
darken4: '#000000',
},
project: colors.red.lighten2,
analysis: colors.green.lighten2,
// accent: '#82B1FF',
// error: '#FF5252',
// info: '#2196F3',
......
......@@ -7,6 +7,7 @@
:item-location="projectLocation"
:item-list-location="projectsListLocation"
:loading="$fetchState.pending"
color="project"
>
<template #content>
<v-toolbar flat bottom color="transparent">
......
......@@ -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
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment