Final UI/UX changes

R/init.R

@@ -219,7 +219,7 @@ init <- function(data,
           ),
           tags$header(
             id = "teal-header",
-            style = "margin: 0.5em",
+            style = "margin: 1em 1em 0 1em;",
             tags$div(id = "teal-header-content")
           ),
           ui_teal(
@@ -228,7 +228,7 @@ init <- function(data,
           ),
           tags$footer(
             id = "teal-footer",
-            style = "margin: 0.5em",
+            style = "margin: 0.5em 1em;",
             tags$div(id = "teal-footer-content"),
             ui_session_info("teal-footer-session_info")
           )

R/module_nested_tabs.R

@@ -586,8 +586,8 @@ srv_teal_module <- function(id,
 }
 
 .modules_breadcrumb <- function(module) {
-  tags$span(
-    style = "color: var(--bs-secondary); font-size: medium;opacity: 0.6; margin-left: 0.5em;",
+  tags$div(
+    style = "color: var(--bs-secondary); font-size: large; opacity: 0.6; margin: 0 0.5em 0.5em 0.5em;",
     paste("Home", module$path, sep = " / ")
   )
 }

R/utils.R

@@ -514,9 +514,17 @@ pluralize <- function(x, singular, plural = NULL) {
 .expand_button <- function(id, label, icon) {
   tags$span(
     class = "teal expand-button",
-    tags$a(
+    htmltools::htmlDependency(
+      name = "teal-busy-disable",
+      version = utils::packageVersion("teal"),
+      package = "teal",
+      src = "js",
+      script = "busy-disable.js"
+    ),
+    shinyjs::useShinyjs(),
+    tags$button(
       id = id,
-      class = "action-button",
+      class = "action-button teal-busy-disable",
       role = "button",
       style = "text-decoration: none;",
       tags$span(class = "icon", bsicons::bs_icon(icon, class = "text-primary")),

inst/css/custom.css

@@ -86,11 +86,21 @@ body > div:has(~ #shiny-modal-wrapper .blur_background) {
   transition: max-width 0.3s ease;
 }
 
-.teal.expand-button a {
+.teal.expand-button button {
+  color: var(--bs-primary);
+  background-color: transparent;
   border: 2px solid transparent;
   padding: 0.5rem;
 }
 
+.teal.expand-button button:disabled {
+  color: var(--bs-dark-text-emphasis);
+}
+
+.teal.expand-button:hover button:disabled {
+  border-bottom: 2px solid var(--bs-dark-bg-subtle);
+}
+
 .teal.expand-button .label {
   opacity: 0;
   transition: opacity 0.2s ease;
@@ -100,7 +110,7 @@ body > div:has(~ #shiny-modal-wrapper .blur_background) {
   max-width: 200px;
 }
 
-.teal.expand-button:hover a {
+.teal.expand-button:hover button {
   border-bottom: 2px solid var(--bs-primary-border-subtle);
 }
 

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-busy-disable").prop("disabled", true);
+});
+$(document).on("shiny:idle", function () {
+  $(".teal-busy-disable").prop("disabled", false);
+});

inst/module-navigation/module-navigation.css

@@ -61,10 +61,6 @@
   position: relative;
 }
 
-.dropdown.nav-item-custom .teal-reporter.outline-button .badge {
-  margin-left: 1em;
-}
-
 .teal.dropdown-button {
   border: 2px solid transparent;
   margin: 0.25em;