Final UI/UX changes (#366)

Companion of insightsengineering/teal#1571

Additionally, it improves the preview button's position in the vignette.

Author: vedhav

R/utils.R

@@ -167,9 +167,16 @@ global_knitr_details <- function() {
   shiny::tagList(
     shinyjs::useShinyjs(),
     .custom_css_dependency(),
-    shiny::tags$a(
+    htmltools::htmlDependency(
+      name = "teal-reporter-busy-disable",
+      version = utils::packageVersion("teal.reporter"),
+      package = "teal.reporter",
+      src = "js",
+      script = "busy-disable.js"
+    ),
+    shiny::tags$button(
       id = id,
-      class = sprintf("teal-reporter action-button outline-button %s", class),
+      class = sprintf("teal-reporter action-button teal-reporter-busy-disable outline-button %s", class),
       role = "button",
       style = "text-decoration: none;",
       if (!is.null(icon)) {

inst/css/custom.css

@@ -22,9 +22,11 @@
 .teal-reporter.outline-button {
   padding: 0.3em;
   border-radius: 5px;
+  background: transparent;
 }
 
-.teal-reporter.outline-button.disabled {
+.teal-reporter.outline-button.disabled,
+.teal-reporter.outline-button:disabled {
   pointer-events: none;
   opacity: 0.65;
 }
@@ -34,7 +36,7 @@
   border: solid 1px var(--bs-primary);
 }
 
-.teal-reporter.outline-button.primary:hover {
+.teal-reporter.outline-button.primary:hover:not(:disabled) {
   background: var(--bs-primary-bg-subtle);
 }
 
@@ -43,13 +45,12 @@
   border: solid 1px var(--bs-danger);
 }
 
-.teal-reporter.outline-button.danger:hover {
+.teal-reporter.outline-button.danger:hover:not(:disabled) {
   background: var(--bs-danger-bg-subtle);
 }
 
 .teal-reporter.outline-button .badge {
   margin-top: -1em;
-  margin-left: -0.3em;
 }
 
 .teal-reporter.report-previewer-accordion .accordion-header {

inst/js/busy-disable.js

@@ -0,0 +1,8 @@
+// Primarily added to make sure the user does not open multiple modals when shiny is busy.
+// https://github.com/rstudio/shiny/issues/4261
+$(document).on("shiny:busy", function () {
+  $(".teal-reporter-busy-disable").prop("disabled", true);
+});
+$(document).on("shiny:idle", function () {
+  $(".teal-reporter-busy-disable").prop("disabled", false);
+});

vignettes/previewerReporter.Rmd

@@ -42,17 +42,8 @@ library(bslib)
 
 A basic `shiny` app with the previewer module:
 
-```{r, eval=requireNamespace("ggplot2")}
+```{r, eval=requireNamespace("ggplot2") && interactive()}
 ui <- bslib::page_fluid(
-  # please, specify specific bootstrap version and theme
-  tags$br(),
-  tags$span(
-    ### REPORTER
-    teal.reporter::preview_report_button_ui("previewer")
-    ###
-  ),
-  tags$br(),
-  tags$br(),
   sidebarLayout(
     sidebarPanel(
       uiOutput("encoding")
@@ -73,6 +64,7 @@ server <- function(input, output, session) {
     shiny::tagList(
       ### REPORTER
       teal.reporter::add_card_button_ui("add_reporter", label = "Add Report Card"),
+      teal.reporter::preview_report_button_ui("previewer"),
       ###
       if (input$tabs == "Plot") {
         sliderInput(
@@ -193,5 +185,5 @@ server <- function(input, output, session) {
   ###
 }
 
-if (interactive()) shinyApp(ui = ui, server = server)
+shinyApp(ui = ui, server = server)
 ```

vignettes/simpleReporter.Rmd

@@ -51,7 +51,7 @@ library(rtables)
 
 Simple reporter `shiny` app with separate modules for each button:
 
-```{r, eval=requireNamespace("ggplot2")}
+```{r, eval=requireNamespace("ggplot2") && interactive()}
 ui <- bslib::page_fluid(
   titlePanel(""),
   sidebarLayout(
@@ -143,12 +143,12 @@ server <- function(input, output, session) {
   ###
 }
 
-if (interactive()) shinyApp(ui = ui, server = server)
+shinyApp(ui = ui, server = server)
 ```
 
 Simple reporter `shiny` app with combined buttons modules:
 
-```{r, eval=requireNamespace("ggplot2")}
+```{r, eval=requireNamespace("ggplot2") && interactive()}
 ui <- bslib::page_fluid(
   titlePanel(""),
   sidebarLayout(
@@ -238,5 +238,5 @@ server <- function(input, output, session) {
   ###
 }
 
-if (interactive()) shinyApp(ui = ui, server = server)
+shinyApp(ui = ui, server = server)
 ```

vignettes/teal-reporter.Rmd

@@ -18,7 +18,7 @@ This eliminates the need for manual copy-pasting or writing in markdown.
 
 And it can be done as easy as adding one of the reporting tools to your module:
 
-```{r}
+```{r eval=interactive()}
 library(teal.reporter)
 library(shiny)
 
@@ -32,7 +32,7 @@ server <- function(input, output, session) {
   simple_reporter_srv("simple", Reporter$new(), create_module_card)
 }
 
-if (interactive()) shinyApp(ui, server)
+shinyApp(ui, server)
 ```
 
 ## Where to next