bs4TabCard: Allow background and header colours like cards

- Allow to define different colour for each tab button - Update list of colours available for status in documentation modifié : R/cards.R modifié : R/deps.R modifié : bs4Dash.Rproj nouveau fichier : inst/bs4Dash-0.2.0/bs4Dash.css modifié : inst/examples/showcase/classic/global.R modifié : man/bs4Card.Rd modifié : man/bs4TabCard.Rd modifié : man/bs4TabSetPanel.Rd
Yusuf759 · Jan 29, 2019 · d9aafa4 · d9aafa4
1 parent 41f466b
commit d9aafa4
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 31 deletions.
diff --git a/R/cards.R b/R/cards.R
@@ -5,7 +5,7 @@
 #' @param ... Contents of the box.
 #' @param title Optional title.
 #' @param footer Optional footer text.
-#' @param status The status of the card header. "primary", "success", "warning", "danger". NULL by default.
+#' @param status The status of the card header. "primary", "secondary", "success", "warning", "danger", "white", "light", "dark", "transparent". NULL by default.
 #' @param elevation Card elevation. 
 #' @param solidHeader Should the header be shown with a solid color background?
 #' @param headerBorder Whether to display a border between the header and body.
@@ -24,7 +24,7 @@
 #' @param collapsed If TRUE, start collapsed. This must be used with
 #'   \code{collapsible=TRUE}.
 #' @param closable If TRUE, display a button in the upper right that allows the user to close the box.
-#' @param labelStatus status of the box label: "danger", "success", "primary", "warning".
+#' @param labelStatus status of the box label: "primary", "secondary", "success", "warning", "danger", "white", "light", "dark", "transparent".
 #' @param labelText Label text.
 #' @param labelTooltip Label tooltip displayed on hover.
 #' @param dropdownMenu List of items in the the boxtool dropdown menu. Use \link{dropdownItemList}.
@@ -548,6 +548,9 @@ bs4InfoBox <- function(..., title, value = NULL, icon = NULL,
 #' @param elevation tabCard elevation. 
 #' @param side Side of the box the tabs should be on (\code{"left"} or
 #'   \code{"right"}).
+#'   
+#' @inheritParams bs4Card
+#' @inheritParams bs4TabSetPanel
 #' 
 #' @family cards
 #'
@@ -591,30 +594,44 @@ bs4InfoBox <- function(..., title, value = NULL, icon = NULL,
 #' @author David Granjon, \email{dgranjon@@ymail.com}
 #'
 #' @export
-bs4TabCard <- function(..., title = NULL, width = 6, 
-                       height = NULL, elevation = NULL, 
+bs4TabCard <- function(..., title = NULL, status = NULL, elevation = NULL, 
+                       solidHeader = FALSE, headerBorder = TRUE, gradientColor = NULL,
+                       tabStatus = NULL,
+                       width = 6, height = NULL,  
                        side = c("left", "right")) {
 
   found_active <- FALSE
   side <- match.arg(side)
 
-  tabCardCl <- "card"
+  tabCardCl <- if (!is.null(gradientColor)) {
+    paste0("card bg-", gradientColor, "-gradient")
+  } else {
+    if (is.null(status)) {
+      "card card-default"
+    } else {
+      if (isTRUE(solidHeader)) {
+        paste0("card card-outline card-", status)
+      } else {
+        paste0("card card-", status)
+      }
+    }
+  }
   if (!is.null(elevation)) tabCardCl <- paste0(tabCardCl, " elevation-", elevation)
 
   # header
   headerTag <- shiny::tags$div(
-    class = "card-header d-flex p-0",
+    class = if (isTRUE(headerBorder)) "card-header d-flex p-0" else "card-header d-flex p-0 no-border",
     if (side == "right") {
       shiny::tagList(
-        shiny::tags$h3(class = "card-title p-3", title),
+        if (!is.null(title)) shiny::tags$h3(class = "card-title p-3", title) else NULL,
         # tab menu
-        bs4TabSetPanel(..., side = side)
+        bs4TabSetPanel(..., side = side, tabStatus = tabStatus)
       )
     } else {
       shiny::tagList(
         # tab menu
-        bs4TabSetPanel(..., side = side),
-        shiny::tags$h3(class = "card-title p-3 ml-auto", title)
+        bs4TabSetPanel(..., side = side, tabStatus = tabStatus),
+        if (!is.null(title)) shiny::tags$h3(class = "card-title p-3 ml-auto", title) else NULL
       )
     }
 
@@ -688,15 +705,20 @@ bs4TabCard <- function(..., title = NULL, width = 6,
 #' @param ... Slot for \link{bs4TabPanel}.
 #' @param side Side of the box the tabs should be on (\code{"left"} or
 #'   \code{"right"}).
+#' @param tabStatus The status of the tabs buttons over header. "primary", "secondary", "success", "warning", "danger", "white", "light", "dark", "transparent".
+#'  NULL by default, "light" if status is set.   
+#'  A vector is possible with a colour for each tab button
+#' 
+#' @inheritParams bs4Card
 #' 
 #' @author David Granjon, \email{dgranjon@@ymail.com}
 #'
 #' @export
-bs4TabSetPanel <- function(..., side) {
+bs4TabSetPanel <- function(..., side, status = NULL, tabStatus = NULL) {
 
   tabs <- list(...)
   found_active <- FALSE
-
+  tabStatus <- rep(tabStatus, length.out = length(tabs))
   # handle tabs
   tabSetPanelItem <- lapply(1:length(tabs), FUN = function(i) {
 
@@ -717,9 +739,19 @@ bs4TabSetPanel <- function(..., side) {
     }
 
     shiny::tags$li(
-      class = "nav-item",
+      class = if (!is.null(status) & is.null(tabStatus[i])) {
+        "nav-item bg-light"
+      } else if (!is.null(tabStatus[i])) {
+        paste0("nav-item bg-", tabStatus[i])
+      } else {
+        "nav-item"
+      },
       shiny::tags$a(
-        class = if (active) "nav-link active" else "nav-link",
+        class = if (active) {
+          "nav-link active"
+          } else {
+            "nav-link"
+          },
         href = paste0("#", id),
         `data-toggle` = "tab",
         tabName

diff --git a/R/deps.R b/R/deps.R
@@ -15,6 +15,7 @@ addDeps <- function(x, theme) {
   # put all necessary ressources here
   adminLTE3_js <- "adminlte.js"
   bs4Dash_js <- "bs4Dash.js"
+  bs4Dash_css <- "bs4Dash.css"
   adminLTE3_css <- "adminlte.min.css"
   jquery_ui_js <- "jquery-ui.min.js"
   bootstrap_js <- "bootstrap.bundle.min.js"
@@ -51,7 +52,8 @@ addDeps <- function(x, theme) {
       name = "bs4Dash",
       version = as.character(utils::packageVersion("bs4Dash")),
       src = c(file = system.file("bs4Dash-0.2.0", package = "bs4Dash")),
-      script = bs4Dash_js
+      script = bs4Dash_js,
+      stylesheet = bs4Dash_css
     ),
     # fontawesome
     htmltools::htmlDependency(

diff --git a/bs4Dash.Rproj b/bs4Dash.Rproj
@@ -15,3 +15,4 @@ LaTeX: pdfLaTeX
 BuildType: Package
 PackageUseDevtools: Yes
 PackageInstallArgs: --no-multiarch --with-keep.source
+PackageRoxygenize: rd,collate,namespace
diff --git a/inst/bs4Dash-0.2.0/bs4Dash.css b/inst/bs4Dash-0.2.0/bs4Dash.css
@@ -0,0 +1,43 @@
+.nav-item {
+    background-color: transparent !important;
+}
+
+.bg-primary .nav-link.active {
+    background-color: #007bff!important
+}
+
+.bg-secondary .nav-link.active {
+    background-color: #6c757d!important
+}
+
+.bg-success .nav-link.active {
+    background-color: #28a745!important
+}
+
+.bg-info .nav-link.active {
+    background-color: #17a2b8!important
+}
+
+.bg-warning .nav-link.active {
+    background-color: #ffc107!important
+}
+
+.bg-danger .nav-link.active {
+    background-color: #dc3545!important
+}
+
+.bg-light .nav-link.active {
+    background-color: #f8f9fa!important
+}
+
+.bg-dark .nav-link.active {
+    background-color: #343a40!important
+}
+
+.bg-white .nav-link.active {
+    background-color: #fff!important
+}
+
+.bg-transparent .nav-link.active {
+    background-color: transparent!important
+}
diff --git a/inst/examples/showcase/classic/global.R b/inst/examples/showcase/classic/global.R
@@ -12,7 +12,7 @@ df <- data.frame(x, y1 = sin(x), y2 = cos(x))
 x <- rnorm(200)
 y <- rnorm(200)
 
-
+#' basic_cards_tab ----
 basic_cards_tab <- bs4TabItem(
   tabName = "cards",
   fluidRow(
@@ -58,7 +58,7 @@ basic_cards_tab <- bs4TabItem(
   )
 )
 
-
+#' social_cards_tab ----
 social_cards_tab <- bs4TabItem(
   tabName = "socialcards",
   fluidRow(
@@ -190,7 +190,7 @@ social_cards_tab <- bs4TabItem(
   )
 )
 
-
+# tab_cards_tab ----
 tab_cards_tab <- bs4TabItem(
   tabName = "tabcards",
   fluidRow(
@@ -249,6 +249,8 @@ tab_cards_tab <- bs4TabItem(
         side = "right",
         elevation = 2,
         width = 12,
+        status = "warning",
+        tabStatus = c("dark", "danger", "transparent"),
         bs4TabPanel(
           tabName = "Tab 4",
           active = FALSE,
@@ -295,7 +297,7 @@ tab_cards_tab <- bs4TabItem(
 )
 
 
-
+# sortable_cards_tab ----
 sortable_cards_tab <- bs4TabItem(
   tabName = "sortablecards",
   fluidRow(
@@ -316,7 +318,7 @@ sortable_cards_tab <- bs4TabItem(
 )
 
 
-
+# statsboxes_tab ----
 statsboxes_tab <- bs4TabItem(
   tabName = "statsboxes",
   fluidRow(
@@ -388,7 +390,7 @@ statsboxes_tab <- bs4TabItem(
 )
 
 
-
+# boxes_tab ----
 boxes_tab <- bs4TabItem(
   tabName = "boxes",
   fluidRow(
@@ -407,7 +409,7 @@ boxes_tab <- bs4TabItem(
 
 
 
-
+# value_boxes_tab ----
 value_boxes_tab <- bs4TabItem(
   tabName = "valueboxes",
   h4("Value Boxes"),
@@ -462,7 +464,7 @@ value_boxes_tab <- bs4TabItem(
 )
 
 
-
+# gallery_1_tab ----
 gallery_1_tab <- bs4TabItem(
   tabName = "gallery1",
   fluidRow(
@@ -676,7 +678,7 @@ gallery_1_tab <- bs4TabItem(
 )
 
 
-
+# gallery_2_tab ----
 gallery_2_tab <- bs4TabItem(
   tabName = "gallery2",
   bs4Jumbotron(

diff --git a/man/bs4Card.Rd b/man/bs4Card.Rd
diff --git a/man/bs4TabCard.Rd b/man/bs4TabCard.Rd
diff --git a/man/bs4TabSetPanel.Rd b/man/bs4TabSetPanel.Rd