Final UI/UX changes (#905)

Minor css cleanup

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

Author: vedhav

R/tm_a_pca.R

@@ -229,7 +229,6 @@ ui_a_pca <- function(id, ...) {
   }
 
   tagList(
-    include_css_files("custom"),
     teal.widgets::standard_layout(
       output = teal.widgets::white_small_well(
         uiOutput(ns("all_plots"))

R/tm_data_table.R

@@ -158,7 +158,6 @@ ui_page_data_table <- function(id, pre_output = NULL, post_output = NULL) {
   ns <- NS(id)
 
   tagList(
-    include_css_files("custom"),
     teal.widgets::standard_layout(
       output = teal.widgets::white_small_well(
         bslib::page_fluid(

R/tm_file_viewer.R

@@ -103,13 +103,12 @@ ui_viewer <- function(id, ...) {
   ns <- NS(id)
 
   tagList(
-    include_css_files("custom"),
     teal.widgets::standard_layout(
       output = tags$div(
         uiOutput(ns("output"))
       ),
       encoding = tags$div(
-        class = "file_viewer_encoding",
+        style = "overflow-y: hidden; overflow-x: auto;",
         tags$label("Encodings", class = "text-primary"),
         shinyTree::shinyTree(
           ns("tree"),
@@ -173,7 +172,7 @@ srv_viewer <- function(id, input_path) {
         tags$img(src = con_type$selected_path, alt = "file does not exist")
       } else if (file_extension == "pdf") {
         tags$embed(
-          class = "embed_pdf",
+          style = "height: 600px; width: 100%;",
           src = con_type$selected_path
         )
       } else if (!isFALSE(con_type$output_text[1])) {

R/tm_front_page.R

@@ -119,33 +119,32 @@ ui_front_page <- function(id, ...) {
   ns <- NS(id)
 
   tagList(
-    include_css_files("custom"),
     tags$div(
       id = "front_page_content",
-      class = "ml-8",
+      style = "margin-left: 2rem;",
       tags$div(
         id = "front_page_headers",
         get_header_tags(args$header_text)
       ),
       tags$div(
         id = "front_page_tables",
-        class = "ml-4",
+        style = "margin-left: 2rem;",
         get_table_tags(args$tables, ns)
       ),
       tags$div(
         id = "front_page_custom_html",
-        class = "my-4",
+        style = "margin-left: 2rem;",
         args$additional_tags
       ),
       if (length(args$datanames) > 0L) {
         tags$div(
           id = "front_page_metabutton",
-          class = "m-4",
+          style = "margin: 1rem;",
           actionButton(ns("metadata_button"), "Show metadata")
         )
       },
       tags$footer(
-        class = ".small",
+        class = "small",
         get_footer_tags(args$footnotes)
       )
     )
@@ -228,7 +227,7 @@ get_table_tags <- function(tables, ns) {
       tableOutput(ns(paste0("table_", idx)))
     )
   }))
-  return(table_tags)
+  table_tags
 }
 
 get_footer_tags <- function(footnotes) {
@@ -255,11 +254,11 @@ convert_metadata_to_dataframe <- function(raw_metadata, datanames) {
     if (is.null(metadata)) {
       return(data.frame(Dataset = character(0), Name = character(0), Value = character(0)))
     }
-    return(data.frame(
+    data.frame(
       Dataset = dataname,
       Name = names(metadata),
       Value = unname(unlist(lapply(metadata, as.character)))
-    ))
+    )
   }, raw_metadata, datanames, SIMPLIFY = FALSE)
   do.call(rbind, output)
 }

R/tm_g_scatterplot.R

@@ -362,11 +362,11 @@ ui_g_scatterplot <- function(id, ...) {
   )
 
   tagList(
-    include_css_files("custom"),
     teal.widgets::standard_layout(
       output = teal.widgets::white_small_well(
         teal.widgets::plot_with_settings_ui(id = ns("scatter_plot")),
-        tags$h1(tags$strong("Selected points:"), class = "text-center font-150p"),
+        tags$br(),
+        tags$h1(tags$strong("Selected points:"), style = "font-size: 150%;"),
         teal.widgets::get_dt_rows(ns("data_table"), ns("data_table_rows")),
         DT::dataTableOutput(ns("data_table"), width = "100%")
       ),
@@ -470,16 +470,16 @@ ui_g_scatterplot <- function(id, ...) {
             tags$div(
               id = ns("label_pos"),
               tags$div(tags$strong("Stats position")),
-              tags$div(class = "inline-block w-10", helpText("Left")),
+              tags$div(style = "display: inline-block; width: 70%;", helpText("Left")),
               tags$div(
-                class = "inline-block w-70",
+                style = "display: inline-block; width: 70%;",
                 teal.widgets::optionalSliderInput(
                   ns("pos"),
                   label = NULL,
                   min = 0, max = 1, value = .99, ticks = FALSE, step = .01
                 )
               ),
-              tags$div(class = "inline-block w-10", helpText("Right"))
+              tags$div(style = "display: inline-block; width: 10%;", helpText("Right"))
             ),
             teal.widgets::optionalSliderInput(
               ns("label_size"), "Stats font size",

R/tm_missing_data.R

@@ -183,7 +183,6 @@ tm_missing_data <- function(label = "Missing data",
 ui_page_missing_data <- function(id, pre_output = NULL, post_output = NULL) {
   ns <- NS(id)
   tagList(
-    include_css_files("custom"),
     teal.widgets::standard_layout(
       output = teal.widgets::white_small_well(
         uiOutput(ns("dataset_tabs"))
@@ -372,9 +371,9 @@ encoding_missing_data <- function(id, summary_per_patient = FALSE, ggtheme, data
     uiOutput(ns("variables")),
     actionButton(
       ns("filter_na"),
-      tags$span("Select only vars with missings", class = "whitespace-normal"),
+      tags$span("Select only vars with missings", style = "white-space: normal;"),
       width = "100%",
-      class = "mb-4"
+      style = "margin-bottom: 1rem;"
     ),
     conditionalPanel(
       is_tab_active_js(ns("summary_type"), "Summary"),

R/tm_variable_browser.R

@@ -142,7 +142,6 @@ ui_variable_browser <- function(id,
   ns <- NS(id)
 
   tags$div(
-    include_css_files("custom"),
     shinyjs::useShinyjs(),
     teal.widgets::standard_layout(
       output = tags$div(
@@ -156,8 +155,10 @@ ui_variable_browser <- function(id,
             })
           ),
           teal.widgets::white_small_well(
+            ### Reporter
             teal.reporter::add_card_button_ui(ns("add_reporter"), label = "Add Report Card"),
             tags$br(), tags$br(),
+            ###
             uiOutput(ns("ui_histogram_display")),
             uiOutput(ns("ui_numeric_display")),
             teal.widgets::plot_with_settings_ui(ns("variable_plot")),
@@ -236,11 +237,11 @@ srv_variable_browser <- function(id,
               tabPanel(
                 dataname,
                 tags$div(
-                  class = "mt-4",
+                  style = "margin-top: 1rem;",
                   textOutput(ns(paste0("dataset_summary_", dataname)))
                 ),
                 tags$div(
-                  class = "mt-4",
+                  style = "margin-top: 1rem;",
                   teal.widgets::get_dt_rows(
                     ns(paste0("variable_browser_", dataname)),
                     ns(paste0("variable_browser_", dataname, "_rows"))

R/utils.R

@@ -234,29 +234,6 @@ variable_type_icons <- function(var_type) {
   ))
 }
 
-#' Include `CSS` files from `/inst/css/` package directory to application header
-#'
-#' `system.file` should not be used to access files in other packages, it does
-#' not work with `devtools`. Therefore, we redefine this method in each package
-#' as needed. Thus, we do not export this method
-#'
-#' @param pattern (`character`) optional, regular expression to match the file names to be included.
-#'
-#' @return HTML code that includes `CSS` files.
-#' @keywords internal
-#'
-include_css_files <- function(pattern = "*") {
-  css_files <- list.files(
-    system.file("css", package = "teal.modules.general", mustWork = TRUE),
-    pattern = pattern, full.names = TRUE
-  )
-  if (length(css_files) == 0) {
-    return(NULL)
-  }
-  singleton(tags$head(lapply(css_files, includeCSS)))
-}
-
-#' JavaScript condition to check if a specific tab is active
 #'
 #' @param id (`character(1)`) the id of the tab panel with tabs.
 #' @param name (`character(1)`) the name of the tab.