From c0f60cdfacf911038f635a5d8ced8439b14c34b6 Mon Sep 17 00:00:00 2001 From: PaulJonasJost Date: Thu, 27 Jun 2024 10:50:11 +0200 Subject: [PATCH 1/3] added stylesheet --- program/shinyApp/www/styles.css | 41 +++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 program/shinyApp/www/styles.css diff --git a/program/shinyApp/www/styles.css b/program/shinyApp/www/styles.css new file mode 100644 index 00000000..52c564f3 --- /dev/null +++ b/program/shinyApp/www/styles.css @@ -0,0 +1,41 @@ +body { + background-color: #f8f7fa; +} +body, label, input, button, select, h4, h3, h2 { + color: #3b3b3b; +} +.tabbable > .nav > li > a { + background-color: #dedede; + color: black +} +.tabbable > .nav > li[class=active] > a { + background-color: #7a7e80; color:black +} +.custom-modal .modal-dialog { + width: 90%; + max-width: 90%; +} +#sidebar_data_selection { + background-color: #70BF4F47; +} +#sidebar_pre_processing { + background-color: #3897F147; +} +#sidebar_sampleCorrelation { + background-color: #A208BA35; +} +#sidebar_pca { + background-color: #FD8D3347; +} +#sidebar_significance_analysis { + background-color: #FFD33547; +} +#sidebar_heatmap { + background-color: #70BF4F47; +} +#sidebar_single_gene_visualisation { + background-color: #3897F147; +} +#sidebar_enrichment_analysis { + background-color: #A208BA35; +} \ No newline at end of file From 8a9215c5c83a0a760e44bcbc26bd4d7326200f6c Mon Sep 17 00:00:00 2001 From: PaulJonasJost Date: Thu, 27 Jun 2024 12:56:48 +0200 Subject: [PATCH 2/3] individual colors for tabs --- program/shinyApp/ui.R | 87 ++++++++++++++++++++++++++++----- program/shinyApp/www/styles.css | 41 ---------------- 2 files changed, 74 insertions(+), 54 deletions(-) delete mode 100644 program/shinyApp/www/styles.css diff --git a/program/shinyApp/ui.R b/program/shinyApp/ui.R index 2f2d537a..d30155c8 100644 --- a/program/shinyApp/ui.R +++ b/program/shinyApp/ui.R @@ -87,31 +87,92 @@ ui <- shiny::fluidPage( max-width: 90%; } #sidebar_data_selection { - background-color: #EC001447; + background-color: #70BF4F47; } #sidebar_pre_processing { - background-color: #FD8D3347; + background-color: #3897F147; } #sidebar_sampleCorrelation { - background-color: #FFD33547; - } - #sidebar_significance_analysis { - background-color: #70BF4F47; + background-color: #A208BA35; } #sidebar_pca { - background-color: #3897F147; + background-color: #FD8D3347; } - #sidebar_volcano_plot { - background-color: #A208BA47; + #sidebar_significance_analysis { + background-color: #FFD33547; } #sidebar_heatmap { - background-color: #EC001447; + background-color: #70BF4F47; } #sidebar_single_gene_visualisation { - background-color: #FD8D3347; + background-color: #3897F147; } #sidebar_enrichment_analysis { - background-color: #FFD33547; + background-color: #A208BA35; + } + .tabbable > .nav > li > a[data-value='Data selection'] { + background-color: #70BF4F47 !important; /* Lighter Green */ + color: black + } + .tabbable > .nav > li[class=active] > a[data-value='Data selection'] { + background-color: #70BF4F !important; /* Strong Green */ + color: white !important; + } + .tabbable > .nav > li > a[data-value='Pre-processing'] { + background-color: #3897F147 !important; /* Lighter Blue */ + color: black !important; + } + .tabbable > .nav > li[class=active] > a[data-value='Pre-processing'] { + background-color: #3897F1 !important; /* Strong Blue */ + color: white !important; + } + .tabbable > .nav > li > a[data-value='Sample Correlation'] { + background-color: #A208BA35 !important; /* Lighter Purple */ + color: black !important; + } + .tabbable > .nav > li[class=active] > a[data-value='Sample Correlation'] { + background-color: #A208BA !important; /* Strong Purple */ + color: white !important; + } + .tabbable > .nav > li > a[data-value='PCA'] { + background-color: #FD8D3347 !important; /* Lighter Orange */ + color: black !important; + } + .tabbable > .nav > li[class=active] > a[data-value='PCA'] { + background-color: #FD8D33 !important; /* Strong Orange */ + color: white !important; + } + .tabbable > .nav > li > a[data-value='Significance Analysis'] { + background-color: #FFD33547 !important; /* Lighter Yellow */ + color: black !important; + } + .tabbable > .nav > li > a[data-value='Heatmap'] { + background-color: #70BF4F47 !important; /* Lighter Green */ + color: black !important; + } + .tabbable > .nav > li[class=active] > a[data-value='Heatmap'] { + background-color: #70BF4F !important; /* Strong Green */ + color: white !important; + } + .tabbable > .nav > li > a[data-value='Single Gene Visualisations'] { + background-color: #3897F147 !important; /* Lighter Blue */ + color: black !important; + } + .tabbable > .nav > li[class=active] > a[data-value='Single Gene Visualisations'] { + background-color: #3897F1 !important; /* Strong Blue */ + color: white !important; + } + .tabbable > .nav > li > a[data-value='Enrichment Analysis'] { + background-color: #FD8D3347 !important; /* Lighter Orange */ + color: black !important; + } + .tabbable > .nav > li[class=active] > a[data-value='Enrichment Analysis'] { + background-color: #A208BA35 !important; /* Lighter Purple */ + color: black !important; + } + .tabbable > .nav > li[class=active] > a[data-value='Significance Analysis'] { + background-color: #A208BA !important; /* Strong Purple */ + color: white !important; } ")) ), @@ -181,8 +242,8 @@ ui <- shiny::fluidPage( data_selection_panel, pre_processing_panel, sampleCorrelation_UI("sample_correlation"), - significance_analysis_UI("SignificanceAnalysis"), pca_UI("PCA"), + significance_analysis_UI("SignificanceAnalysis"), heatmap_UI("Heatmap"), single_gene_visualisation_UI("single_gene_visualisation"), enrichment_analysis_UI("EnrichmentAnalysis") diff --git a/program/shinyApp/www/styles.css b/program/shinyApp/www/styles.css deleted file mode 100644 index 52c564f3..00000000 --- a/program/shinyApp/www/styles.css +++ /dev/null @@ -1,41 +0,0 @@ -body { - background-color: #f8f7fa; -} -body, label, input, button, select, h4, h3, h2 { - color: #3b3b3b; -} -.tabbable > .nav > li > a { - background-color: #dedede; - color: black -} -.tabbable > .nav > li[class=active] > a { - background-color: #7a7e80; color:black -} -.custom-modal .modal-dialog { - width: 90%; - max-width: 90%; -} -#sidebar_data_selection { - background-color: #70BF4F47; -} -#sidebar_pre_processing { - background-color: #3897F147; -} -#sidebar_sampleCorrelation { - background-color: #A208BA35; -} -#sidebar_pca { - background-color: #FD8D3347; -} -#sidebar_significance_analysis { - background-color: #FFD33547; -} -#sidebar_heatmap { - background-color: #70BF4F47; -} -#sidebar_single_gene_visualisation { - background-color: #3897F147; -} -#sidebar_enrichment_analysis { - background-color: #A208BA35; -} \ No newline at end of file From 4fba17135e94ed2bd0128b8909ac0307c25cb1e2 Mon Sep 17 00:00:00 2001 From: PaulJonasJost Date: Sun, 30 Jun 2024 13:12:36 +0200 Subject: [PATCH 3/3] Start the journey button in right color --- program/shinyApp/R/data_selection/ui.R | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/program/shinyApp/R/data_selection/ui.R b/program/shinyApp/R/data_selection/ui.R index b57750f4..2719c66a 100644 --- a/program/shinyApp/R/data_selection/ui.R +++ b/program/shinyApp/R/data_selection/ui.R @@ -173,7 +173,7 @@ data_selection_main_panel <- mainPanel( label = "Start the Journey", width = "100%", icon = icon('rocket'), - style = "color: #fffff; background-color: #EC001447; border-color: #000000" + style = "color: #fffff; background-color: #70BF4F47; border-color: #000000" ), # hidden button hidden(actionButton(