Redesign and change position of reporter options

DESCRIPTION

@@ -121,7 +121,6 @@ Collate:
     'module_teal_lockfile.R'
     'module_teal_with_splash.R'
     'module_transform_data.R'
-    'reporter_previewer_module.R'
     'show_rcode_modal.R'
     'tdata.R'
     'teal.R'

R/init.R

@@ -204,6 +204,8 @@ init <- function(data,
     list(
       ui = function(request) {
         bslib::page_fluid(
+          theme = get_teal_bs_theme(),
+          style = "--bs-gutter-x: 0;",
           title = tags$div(
             id = "teal-app-title",
             tags$head(

R/module_bookmark_manager.R

@@ -50,21 +50,11 @@ ui_bookmark_panel <- function(id, modules) {
   is_unbookmarkable <- need_bookmarking(modules)
   shinyOptions(bookmarkStore = bookmark_option)
 
-  # Render bookmark warnings count
   if (!all(is_unbookmarkable) && identical(bookmark_option, "server")) {
-    tags$button(
+    .expand_button(
       id = ns("do_bookmark"),
-      class = "btn action-button wunder_bar_button bookmark_manager_button",
-      title = "Add bookmark",
-      tags$span(
-        suppressMessages(icon("fas fa-bookmark")),
-        if (any(is_unbookmarkable)) {
-          tags$span(
-            sum(is_unbookmarkable),
-            class = "badge-warning badge-count text-white bg-danger"
-          )
-        }
-      )
+      label = "Bookmark",
+      icon = "bookmark-fill"
     )
   }
 }

R/module_filter_manager.R

@@ -54,11 +54,10 @@ NULL
 #' @rdname module_filter_manager
 ui_filter_manager_panel <- function(id) {
   ns <- NS(id)
-  tags$button(
+  .expand_button(
     id = ns("show_filter_manager"),
-    class = "btn action-button wunder_bar_button",
-    title = "View filter mapping",
-    suppressMessages(icon("fas fa-grip"))
+    label = "Filter Manager",
+    icon = "funnel-fill"
   )
 }
 

R/module_nested_tabs.R

@@ -78,28 +78,18 @@ ui_teal_modules_nav <- function(id, modules) {
   tab_content <- ui_teal_module(id = ns("nav"), modules = modules, active_module_id = active_module_id)
   tags$div(
     class = "teal-modules-wrapper",
-    htmltools::htmlDependency(
-      name = "module-navigation",
-      version = utils::packageVersion("teal"),
-      package = "teal",
-      src = "module-navigation",
-      stylesheet = "module-navigation.css",
-      script = "module-navigation.js"
-    ),
     tags$ul(
       id = ns("active_module_id"),
-      style = "align-items: center;",
+      style = "align-items: center; gap: 1em; font-size: large;",
       class = "nav shiny-tab-input", # to mimic nav and mimic tabsetPanel
       `data-tabsetid` = "test",
       tags$div(
         class = "dropdown nav-item-custom",
-        onmouseover = "initNavigationMouseOver.call(this)",
-        onmouseout = "initNavigationMouseOut.call(this)",
-        tags$a(
-          class = "dropdown-toggle active",
-          role = "button",
-          style = "text-decoration: none; border-bottom-color: #0d6efd;",
-          "Modules"
+        .dropdown_button(
+          id = NULL,
+          label = "Module",
+          icon = "diagram-3-fill",
+          add_dropdown = TRUE
         ),
         tags$div(
           class = "dropdown-menu",
@@ -167,7 +157,7 @@ ui_teal_modules_nav_dropdown.teal_module <- function(id, modules, active_module_
     tags$a(
       href = paste0("#", ns("wrapper")), # links button with module content in `tab-content` with same id.
       `data-bs-toggle` = "tab", # signals shiny to treat this element as bootstrap tab buttons for toggle.
-      `data-value` = module_id, # this links module-content with this button.
+      `data-value` = module_id, # this data is set as the shiny input.
       class = c("nav-link", "module-button", "btn-default", if (identical(module_id, active_module_id)) "active"),
       # `nav-link` is required to mimic bslib tab panel.
       modules$label
@@ -231,7 +221,7 @@ ui_teal_module.teal_module <- function(id, modules, active_module_id) {
     id = ns("wrapper"),
     class = c("tab-pane", "teal_module", if (identical(module_id, active_module_id)) "active"),
     tagList(
-      .modules_breadcrumb(modules), # todo:
+      .modules_breadcrumb(modules),
       if (!is.null(modules$datanames)) {
         tagList(
           bslib::layout_sidebar(

R/module_snapshot_manager.R

@@ -87,11 +87,10 @@ NULL
 #' @rdname module_snapshot_manager
 ui_snapshot_manager_panel <- function(id) {
   ns <- NS(id)
-  tags$button(
+  .expand_button(
     id = ns("show_snapshot_manager"),
-    class = "btn action-button wunder_bar_button",
-    title = "View snapshot manager",
-    suppressMessages(icon("fas fa-camera"))
+    label = "Snapshot Manager",
+    icon = "camera-fill"
   )
 }
 

R/module_teal.R

@@ -51,7 +51,6 @@ ui_teal <- function(id, modules) {
   checkmate::assert_class(modules, "teal_modules")
   ns <- NS(id)
   modules <- drop_module(modules, "teal_module_landing")
-  modules <- append_reporter_module(modules)
 
   shiny_busy_message_panel <- conditionalPanel(
     condition = "(($('html').hasClass('shiny-busy')) && (document.getElementById('shiny-notification-panel') == null))", # nolint: line_length.
@@ -68,14 +67,15 @@ ui_teal <- function(id, modules) {
     id = id,
     theme = get_teal_bs_theme(),
     include_teal_css_js(),
-    shiny_busy_message_panel,
-    tags$div(
-      id = ns("options_buttons"),
-      style = "position: absolute; right: 10px;",
-      ui_bookmark_panel(ns("bookmark_manager"), modules),
-      ui_snapshot_manager_panel(ns("snapshot_manager_panel")),
-      ui_filter_manager_panel(ns("filter_manager_panel"))
+    shinyjs::useShinyjs(),
+    htmltools::htmlDependency(
+      name = "module-navigation",
+      version = utils::packageVersion("teal"),
+      package = "teal",
+      src = "module-navigation",
+      stylesheet = "module-navigation.css"
     ),
+    shiny_busy_message_panel,
     tags$div(
       id = ns("tabpanel_wrapper"),
       class = "teal-body",
@@ -94,7 +94,6 @@ srv_teal <- function(id, data, modules, filter = teal_slices()) {
   checkmate::assert_class(filter, "teal_slices")
 
   modules <- drop_module(modules, "teal_module_landing")
-  modules <- append_reporter_module(modules)
 
   moduleServer(id, function(input, output, session) {
     logger::log_debug("srv_teal initializing.")
@@ -103,6 +102,39 @@ srv_teal <- function(id, data, modules, filter = teal_slices()) {
       shinyjs::showLog()
     }
 
+    insertUI(
+      selector = ".teal-modules-wrapper .nav-item-custom",
+      where = "afterEnd",
+      tagList(
+        tags$span(
+          class = "dropdown nav-item-custom",
+          if (is_arg_used(modules, "reporter") && length(extract_module(modules, "teal_module_previewer")) == 0) {
+            .dropdown_button(
+              id = session$ns("show_reporter_menu"),
+              label = "Report",
+              icon = "file-text-fill",
+              add_dropdown = TRUE
+            )
+          },
+          tags$div(
+            class = "dropdown-menu reporter-menu",
+            shinyjs::disabled(
+              .primary_button(session$ns("open_reporter_ui"), "Preview report", icon = "file-earmark-text")
+            ),
+            tags$hr(style = "margin: 0.5rem;"),
+            shinyjs::disabled(teal.reporter::download_report_button_ui(session$ns("download_report"))),
+            teal.reporter::report_load_ui(session$ns("load_report")),
+            tags$hr(style = "margin: 0.5rem;"),
+            teal.reporter::reset_report_button_ui(session$ns("reset_reports"), label = "Reset Report")
+          )
+        ),
+        tags$span(style = "margin-left: auto;"),
+        ui_bookmark_panel(session$ns("bookmark_manager"), modules),
+        ui_snapshot_manager_panel(session$ns("snapshot_manager_panel")),
+        ui_filter_manager_panel(session$ns("filter_manager_panel"))
+      ),
+    )
+
 
     # set timezone in shiny app
     # timezone is set in the early beginning so it will be available also
@@ -172,7 +204,11 @@ srv_teal <- function(id, data, modules, filter = teal_slices()) {
       insertUI(
         selector = ".teal-modules-wrapper .nav-item-custom",
         where = "beforeBegin",
-        actionButton(session$ns("open_teal_data_module_ui"), NULL, icon = icon("database"))
+        .expand_button(
+          id = session$ns("open_teal_data_module_ui"),
+          label = "Load Data",
+          icon = "database-fill"
+        )
       )
       observeEvent(input$open_teal_data_module_ui, ignoreInit = TRUE, ignoreNULL = FALSE, {
         showModal(
@@ -215,11 +251,37 @@ srv_teal <- function(id, data, modules, filter = teal_slices()) {
       insertUI(
         selector = sprintf("#%s", session$ns("tabpanel_wrapper")),
         where = "beforeBegin",
-        ui = tags$div(validate_ui, tags$br())
+        ui = tags$div(validate_ui)
       )
     }
 
     reporter <- teal.reporter::Reporter$new()$set_id(attr(filter, "app_id"))
+    teal.reporter::report_load_srv("load_report", reporter)
+    teal.reporter::download_report_button_srv("download_report", reporter)
+    teal.reporter::reset_report_button_srv("reset_reports", reporter)
+    observeEvent(input$open_reporter_ui, {
+      showModal(
+        div(
+          class = "teal teal-data-module-popup",
+          modalDialog(
+            id = session$ns("teal_data_module_ui"),
+            size = "xl",
+            teal.reporter::reporter_previewer_ui(session$ns("reporter")),
+            easyClose = TRUE
+          )
+        )
+      )
+    })
+
+    observeEvent(reporter$get_reactive_add_card(), {
+      if (reporter$get_reactive_add_card() > 0) {
+        shinyjs::enable(id = "open_reporter_ui")
+      } else {
+        shinyjs::disable(id = "open_reporter_ui")
+      }
+    })
+    setBookmarkExclude(c("open_reporter_ui", "teal_data_module_ui"))
+    teal.reporter::reporter_previewer_srv("reporter", reporter)
     module_labels <- unlist(modules_slot(modules, "label"), use.names = FALSE)
     slices_global <- methods::new(".slicesGlobal", filter, module_labels)
     modules_output <- srv_teal_modules_nav(

R/modules.R

@@ -645,19 +645,6 @@ append_module <- function(modules, module) {
   modules
 }
 
-#' @rdname module_teal
-#' @keywords internal
-#' @noRd
-append_reporter_module <- function(modules) {
-  if (is_arg_used(modules, "reporter") && length(extract_module(modules, "teal_module_previewer")) == 0) {
-    modules <- append_module(
-      modules,
-      reporter_previewer_module(server_args = list(previewer_buttons = c("download", "reset")))
-    )
-  }
-  modules
-}
-
 #' Extract/Remove module(s) of specific class
 #'
 #' Given a `teal_module` or a `teal_modules`, return the elements of the structure according to `class`.

R/utils.R

@@ -491,3 +491,52 @@ pluralize <- function(x, singular, plural = NULL) {
     }
   }
 }
+
+
+#' @keywords internal
+.dropdown_button <- function(id, label, icon, add_dropdown = FALSE) {
+  tags$span(
+    class = "teal dropdown-button",
+    tags$a(
+      id = id,
+      class = "action-button",
+      role = "button",
+      style = "text-decoration: none;",
+      bsicons::bs_icon(icon, class = "text-primary"),
+      label,
+      if (add_dropdown) {
+        bsicons::bs_icon("chevron-down", class = "text-primary dropdown-arrow")
+      }
+    )
+  )
+}
+
+#' @keywords internal
+.expand_button <- function(id, label, icon) {
+  tags$span(
+    class = "teal expand-button",
+    tags$a(
+      id = id,
+      class = "action-button",
+      role = "button",
+      style = "text-decoration: none;",
+      tags$span(class = "icon", bsicons::bs_icon(icon, class = "text-primary")),
+      tags$span(class = "label", label)
+    )
+  )
+}
+
+
+#' @keywords internal
+.primary_button <- function(id, label, icon = NULL) {
+  tags$a(
+    id = id,
+    class = "teal primary-button action-button",
+    role = "button",
+    style = "text-decoration: none;",
+    if (!is.null(icon)) {
+      bsicons::bs_icon(icon, class = "text-primary")
+    },
+    label
+  )
+}