diff --git a/R/cards.R b/R/cards.R index dfb864dc..0cafb7b7 100644 --- 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 index db6b0927..94e07914 100644 --- 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 index 21a4da08..eaa6b818 100644 --- 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 new file mode 100644 index 00000000..8e9447fb --- /dev/null +++ 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 index 56a7664c..9dec59e2 100644 --- 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 index d3c28195..c632f8ce 100644 --- a/man/bs4Card.Rd +++ b/man/bs4Card.Rd @@ -18,7 +18,7 @@ bs4Card(..., title = NULL, footer = NULL, status = NULL, \item{footer}{Optional footer text.} -\item{status}{The status of the card header. "primary", "success", "warning", "danger". NULL by default.} +\item{status}{The status of the card header. "primary", "secondary", "success", "warning", "danger", "white", "light", "dark". NULL by default.} \item{elevation}{Card elevation.} @@ -47,7 +47,7 @@ the user to collapse the box.} \item{closable}{If TRUE, display a button in the upper right that allows the user to close the box.} -\item{labelStatus}{status of the box label: "danger", "success", "primary", "warning".} +\item{labelStatus}{status of the box label: "primary", "secondary", "success", "warning", "danger", "white", "light", "dark".} \item{labelText}{Label text.} diff --git a/man/bs4TabCard.Rd b/man/bs4TabCard.Rd index 70030477..e973eb07 100644 --- a/man/bs4TabCard.Rd +++ b/man/bs4TabCard.Rd @@ -4,14 +4,32 @@ \alias{bs4TabCard} \title{Create a Boostrap 4 tabCard} \usage{ -bs4TabCard(..., title = NULL, width = 6, height = NULL, - elevation = NULL, side = c("left", "right")) +bs4TabCard(..., title = NULL, status = NULL, elevation = NULL, + solidHeader = FALSE, headerBorder = TRUE, gradientColor = NULL, + tabStatus = NULL, width = 6, height = NULL, side = c("left", + "right")) } \arguments{ \item{...}{Contents of the box: should be \link{bs4TabPanel}.} \item{title}{TabCard title.} +\item{status}{The status of the card header. "primary", "secondary", "success", "warning", "danger", "white", "light", "dark". NULL by default.} + +\item{elevation}{tabCard elevation.} + +\item{solidHeader}{Should the header be shown with a solid color background?} + +\item{headerBorder}{Whether to display a border between the header and body. +TRUE by default} + +\item{gradientColor}{If NULL (the default), the background of the box will be +white. Otherwise, a color string. "primary", "success", "warning" or "danger".} + +\item{tabStatus}{The status of the tabs buttons over header. "primary", "secondary", "success", "warning", "danger", "white", "light", "dark". +NULL by default, "light" if status is set. +A vector is possible with a colour for each tab button} + \item{width}{The width of the box, using the Bootstrap grid system. This is used for row-based layouts. The overall width of a region is 12, so the default width of 4 occupies 1/3 of that width. For column-based @@ -21,8 +39,6 @@ contains the box.} \item{height}{The height of a box, in pixels or other CSS unit. By default the height scales automatically with the content.} -\item{elevation}{tabCard elevation.} - \item{side}{Side of the box the tabs should be on (\code{"left"} or \code{"right"}).} } diff --git a/man/bs4TabSetPanel.Rd b/man/bs4TabSetPanel.Rd index 0ea2ab02..635350ee 100644 --- a/man/bs4TabSetPanel.Rd +++ b/man/bs4TabSetPanel.Rd @@ -4,13 +4,19 @@ \alias{bs4TabSetPanel} \title{Create a tabSetPanel} \usage{ -bs4TabSetPanel(..., side) +bs4TabSetPanel(..., side, status = NULL, tabStatus = NULL) } \arguments{ \item{...}{Slot for \link{bs4TabPanel}.} \item{side}{Side of the box the tabs should be on (\code{"left"} or \code{"right"}).} + +\item{status}{The status of the card header. "primary", "secondary", "success", "warning", "danger", "white", "light", "dark". NULL by default.} + +\item{tabStatus}{The status of the tabs buttons over header. "primary", "secondary", "success", "warning", "danger", "white", "light", "dark". +NULL by default, "light" if status is set. +A vector is possible with a colour for each tab button} } \description{ Imported by bs4TabCard. Do not use outside!