From d766720b1587ad525df809c08c7cb5da60818dc9 Mon Sep 17 00:00:00 2001 From: dmpe Date: Thu, 3 Mar 2016 10:14:17 +0100 Subject: [PATCH 1/5] add collapsible sidebar which is capable of showing only icons Addresses: https://github.com/rstudio/shinydashboard/issues/74 --- R/dashboardHeader.R | 12 ++++++------ R/dashboardPage.R | 16 ++++++++++++---- R/dashboardSidebar.R | 5 ++--- inst/shinydashboard.css | 4 ++-- man/dashboardPage.Rd | 6 +++++- 5 files changed, 27 insertions(+), 16 deletions(-) diff --git a/R/dashboardHeader.R b/R/dashboardHeader.R index 001e07e6..b9ad0b41 100644 --- a/R/dashboardHeader.R +++ b/R/dashboardHeader.R @@ -158,8 +158,8 @@ dashboardHeader <- function(..., title = NULL, titleWidth = NULL, disable = FALS #' @export dropdownMenu <- function(..., type = c("messages", "notifications", "tasks"), - badgeStatus = "primary", icon = NULL, .list = NULL) -{ + badgeStatus = "primary", icon = NULL, .list = NULL) { + type <- match.arg(type) if (!is.null(badgeStatus)) validateStatus(badgeStatus) items <- c(list(...), .list) @@ -220,8 +220,8 @@ dropdownMenu <- function(..., #' @seealso \code{\link{dashboardHeader}} for example usage. #' @export messageItem <- function(from, message, icon = shiny::icon("user"), time = NULL, - href = NULL) -{ + href = NULL) { + tagAssert(icon, type = "i") if (is.null(href)) href <- "#" @@ -250,8 +250,8 @@ messageItem <- function(from, message, icon = shiny::icon("user"), time = NULL, #' @seealso \code{\link{dashboardHeader}} for example usage. #' @export notificationItem <- function(text, icon = shiny::icon("warning"), - status = "success", href = NULL) -{ + status = "success", href = NULL) { + tagAssert(icon, type = "i") validateStatus(status) if (is.null(href)) href <- "#" diff --git a/R/dashboardPage.R b/R/dashboardPage.R index 0fdf0815..2e18403b 100644 --- a/R/dashboardPage.R +++ b/R/dashboardPage.R @@ -9,6 +9,9 @@ #' provided, it will try to extract the title from the \code{dashboardHeader}. #' @param skin A color theme. One of \code{"blue"}, \code{"black"}, #' \code{"purple"}, \code{"green"}, \code{"red"}, or \code{"yellow"}. +#' @param sideBarMini TRUE or FALSE (default). False collapses sidebar completly +#' while TRUE will show collapsed sidebar with icon(s). Title will, however, +#' not become responsive. #' #' @seealso \code{\link{dashboardHeader}}, \code{\link{dashboardSidebar}}, #' \code{\link{dashboardBody}}. @@ -29,7 +32,7 @@ #' } #' @export dashboardPage <- function(header, sidebar, body, title = NULL, - skin = c("blue", "black", "purple", "green", "red", "yellow")) { + skin = c("blue", "black", "purple", "green", "red", "yellow"), sideBarMini = FALSE) { tagAssert(header, type = "header", class = "main-header") tagAssert(sidebar, type = "aside", class = "main-sidebar") @@ -41,8 +44,8 @@ dashboardPage <- function(header, sidebar, body, title = NULL, if (x$name == "span" && !is.null(x$attribs$class) && x$attribs$class == "logo" && - length(x$children) != 0) - { + length(x$children) != 0) { + x$children[[1]] } else { "" @@ -57,8 +60,13 @@ dashboardPage <- function(header, sidebar, body, title = NULL, body ) + sideBar <- NULL + if (sideBarMini == TRUE) { + sideBar <- " sidebar-mini" + } + addDeps( - tags$body(class = paste0("skin-", skin), style = "min-height: 611px;", + tags$body(class = paste0("skin-", skin, sideBar), style = "min-height: 611px;", shiny::bootstrapPage(content, title = title) ) ) diff --git a/R/dashboardSidebar.R b/R/dashboardSidebar.R index 8e2068e8..1404f34d 100644 --- a/R/dashboardSidebar.R +++ b/R/dashboardSidebar.R @@ -117,7 +117,7 @@ dashboardSidebar <- function(..., disable = FALSE, width = NULL) { custom_css, tags$section( class = "sidebar", - `data-disable` = if(disable) 1 else NULL, + `data-disable` = if(disable) TRUE else NULL, list(...) ) ) @@ -320,8 +320,7 @@ menuItem <- function(text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "gr #' @rdname sidebarMenu #' @export menuSubItem <- function(text, tabName = NULL, href = NULL, newtab = TRUE, - icon = shiny::icon("angle-double-right"), selected = NULL) -{ + icon = shiny::icon("angle-double-right"), selected = NULL) { if (!is.null(href) && !is.null(tabName)) { stop("Can't specify both href and tabName") diff --git a/inst/shinydashboard.css b/inst/shinydashboard.css index 7a2af9a2..948ec48e 100644 --- a/inst/shinydashboard.css +++ b/inst/shinydashboard.css @@ -58,7 +58,7 @@ a > .info-box { color: #333; } -/* Disable bouncy transition for sidebar toggle. */ +/* Disable bouncy transition for sidebar toggle. .content-wrapper, .right-side, .main-footer { @@ -74,7 +74,7 @@ a > .info-box { -o-transition: all 0 none; transition: none; } - +*/ /* Shiny Server Pro logout panel needs to be raised above menu bar */ .shiny-server-account { diff --git a/man/dashboardPage.Rd b/man/dashboardPage.Rd index d8b8969a..76556a0e 100644 --- a/man/dashboardPage.Rd +++ b/man/dashboardPage.Rd @@ -5,7 +5,7 @@ \title{Dashboard page} \usage{ dashboardPage(header, sidebar, body, title = NULL, skin = c("blue", "black", - "purple", "green", "red", "yellow")) + "purple", "green", "red", "yellow"), sideBarMini = FALSE) } \arguments{ \item{header}{A header created by \code{dashboardHeader}.} @@ -19,6 +19,10 @@ provided, it will try to extract the title from the \code{dashboardHeader}.} \item{skin}{A color theme. One of \code{"blue"}, \code{"black"}, \code{"purple"}, \code{"green"}, \code{"red"}, or \code{"yellow"}.} + +\item{sideBarMini}{TRUE or FALSE (default). False collapses sidebar completly +while TRUE will show collapsed sidebar with icon(s). Title will, however, +not become responsive.} } \description{ This creates a dashboard page for use in a Shiny app. From 2bee3e7482fa3caed0a1bd8861137e79d703cdfb Mon Sep 17 00:00:00 2001 From: dmpe Date: Tue, 22 Mar 2016 11:41:26 +0100 Subject: [PATCH 2/5] address some comments by wch --- R/dashboardHeader.R | 10 ++++++---- R/dashboardPage.R | 8 +++++--- R/dashboardSidebar.R | 3 ++- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/R/dashboardHeader.R b/R/dashboardHeader.R index b9ad0b41..95c9f0ba 100644 --- a/R/dashboardHeader.R +++ b/R/dashboardHeader.R @@ -158,7 +158,8 @@ dashboardHeader <- function(..., title = NULL, titleWidth = NULL, disable = FALS #' @export dropdownMenu <- function(..., type = c("messages", "notifications", "tasks"), - badgeStatus = "primary", icon = NULL, .list = NULL) { + badgeStatus = "primary", icon = NULL, .list = NULL) +{ type <- match.arg(type) if (!is.null(badgeStatus)) validateStatus(badgeStatus) @@ -220,7 +221,8 @@ dropdownMenu <- function(..., #' @seealso \code{\link{dashboardHeader}} for example usage. #' @export messageItem <- function(from, message, icon = shiny::icon("user"), time = NULL, - href = NULL) { + href = NULL) +{ tagAssert(icon, type = "i") if (is.null(href)) href <- "#" @@ -250,8 +252,8 @@ messageItem <- function(from, message, icon = shiny::icon("user"), time = NULL, #' @seealso \code{\link{dashboardHeader}} for example usage. #' @export notificationItem <- function(text, icon = shiny::icon("warning"), - status = "success", href = NULL) { - + status = "success", href = NULL) +{ tagAssert(icon, type = "i") validateStatus(status) if (is.null(href)) href <- "#" diff --git a/R/dashboardPage.R b/R/dashboardPage.R index 2e18403b..6dc7293b 100644 --- a/R/dashboardPage.R +++ b/R/dashboardPage.R @@ -32,7 +32,9 @@ #' } #' @export dashboardPage <- function(header, sidebar, body, title = NULL, - skin = c("blue", "black", "purple", "green", "red", "yellow"), sideBarMini = FALSE) { + skin = c("blue", "black", "purple", "green", "red", "yellow"), + sideBarMini = FALSE) +{ tagAssert(header, type = "header", class = "main-header") tagAssert(sidebar, type = "aside", class = "main-sidebar") @@ -44,8 +46,8 @@ dashboardPage <- function(header, sidebar, body, title = NULL, if (x$name == "span" && !is.null(x$attribs$class) && x$attribs$class == "logo" && - length(x$children) != 0) { - + length(x$children) != 0) + { x$children[[1]] } else { "" diff --git a/R/dashboardSidebar.R b/R/dashboardSidebar.R index 1404f34d..3ee6dd68 100644 --- a/R/dashboardSidebar.R +++ b/R/dashboardSidebar.R @@ -320,7 +320,8 @@ menuItem <- function(text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "gr #' @rdname sidebarMenu #' @export menuSubItem <- function(text, tabName = NULL, href = NULL, newtab = TRUE, - icon = shiny::icon("angle-double-right"), selected = NULL) { + icon = shiny::icon("angle-double-right"), selected = NULL) +{ if (!is.null(href) && !is.null(tabName)) { stop("Can't specify both href and tabName") From 5ccb201f02f996f250d9326f18ddf952c41a27be Mon Sep 17 00:00:00 2001 From: dmpe Date: Tue, 22 Mar 2016 12:54:47 +0100 Subject: [PATCH 3/5] should be now working move them to dashboardSidebar delete spaces --- R/dashboardHeader.R | 2 -- R/dashboardPage.R | 13 ++----------- R/dashboardSidebar.R | 16 ++++++++++++++-- inst/shinydashboard.js | 4 ++++ man/dashboardPage.Rd | 6 +----- man/dashboardSidebar.Rd | 6 +++++- 6 files changed, 26 insertions(+), 21 deletions(-) diff --git a/R/dashboardHeader.R b/R/dashboardHeader.R index 95c9f0ba..001e07e6 100644 --- a/R/dashboardHeader.R +++ b/R/dashboardHeader.R @@ -160,7 +160,6 @@ dropdownMenu <- function(..., type = c("messages", "notifications", "tasks"), badgeStatus = "primary", icon = NULL, .list = NULL) { - type <- match.arg(type) if (!is.null(badgeStatus)) validateStatus(badgeStatus) items <- c(list(...), .list) @@ -223,7 +222,6 @@ dropdownMenu <- function(..., messageItem <- function(from, message, icon = shiny::icon("user"), time = NULL, href = NULL) { - tagAssert(icon, type = "i") if (is.null(href)) href <- "#" diff --git a/R/dashboardPage.R b/R/dashboardPage.R index 6dc7293b..0f82fa34 100644 --- a/R/dashboardPage.R +++ b/R/dashboardPage.R @@ -9,9 +9,6 @@ #' provided, it will try to extract the title from the \code{dashboardHeader}. #' @param skin A color theme. One of \code{"blue"}, \code{"black"}, #' \code{"purple"}, \code{"green"}, \code{"red"}, or \code{"yellow"}. -#' @param sideBarMini TRUE or FALSE (default). False collapses sidebar completly -#' while TRUE will show collapsed sidebar with icon(s). Title will, however, -#' not become responsive. #' #' @seealso \code{\link{dashboardHeader}}, \code{\link{dashboardSidebar}}, #' \code{\link{dashboardBody}}. @@ -32,9 +29,7 @@ #' } #' @export dashboardPage <- function(header, sidebar, body, title = NULL, - skin = c("blue", "black", "purple", "green", "red", "yellow"), - sideBarMini = FALSE) -{ + skin = c("blue", "black", "purple", "green", "red", "yellow")) { tagAssert(header, type = "header", class = "main-header") tagAssert(sidebar, type = "aside", class = "main-sidebar") @@ -62,13 +57,9 @@ dashboardPage <- function(header, sidebar, body, title = NULL, body ) - sideBar <- NULL - if (sideBarMini == TRUE) { - sideBar <- " sidebar-mini" - } addDeps( - tags$body(class = paste0("skin-", skin, sideBar), style = "min-height: 611px;", + tags$body(class = paste0("skin-", skin), style = "min-height: 611px;", shiny::bootstrapPage(content, title = title) ) ) diff --git a/R/dashboardSidebar.R b/R/dashboardSidebar.R index 3ee6dd68..a04e1d9a 100644 --- a/R/dashboardSidebar.R +++ b/R/dashboardSidebar.R @@ -8,6 +8,9 @@ #' @param width The width of the sidebar. This must either be a number which #' specifies the width in pixels, or a string that specifies the width in CSS #' units. +#' @param sideBarMini TRUE or FALSE (default). False collapses sidebar completly +#' while TRUE will show collapsed sidebar with icon(s). Title will, however, +#' not become responsive. #' #' @seealso \code{\link{sidebarMenu}} #' @@ -59,7 +62,8 @@ #' ) #' } #' @export -dashboardSidebar <- function(..., disable = FALSE, width = NULL) { +dashboardSidebar <- function(..., disable = FALSE, width = NULL, + sideBarMini = FALSE) { width <- validateCssUnit(width) # Set up custom CSS for custom width @@ -113,11 +117,19 @@ dashboardSidebar <- function(..., disable = FALSE, width = NULL) { ')))) } + # sideBar <- NULL + # if (sideBarMini == TRUE) { + # sideBar <- " sidebar-mini" + # } + # sideBar + + tags$aside(class = "main-sidebar", custom_css, tags$section( class = "sidebar", - `data-disable` = if(disable) TRUE else NULL, + `data-disable` = if (disable) 1 else NULL, + `data-minify` = if (sideBarMini) 1 else NULL, list(...) ) ) diff --git a/inst/shinydashboard.js b/inst/shinydashboard.js index 6f6677d9..24b8f3ae 100644 --- a/inst/shinydashboard.js +++ b/inst/shinydashboard.js @@ -55,6 +55,10 @@ $(function() { $(".navbar > .sidebar-toggle").hide(); } + // Optionally display only sidebar icons + if ($("section.sidebar").data("minify")) { + $("body").addClass("sidebar-mini sidebar-collapse"); + } // menuOutputBinding // ------------------------------------------------------------------ diff --git a/man/dashboardPage.Rd b/man/dashboardPage.Rd index 76556a0e..d8b8969a 100644 --- a/man/dashboardPage.Rd +++ b/man/dashboardPage.Rd @@ -5,7 +5,7 @@ \title{Dashboard page} \usage{ dashboardPage(header, sidebar, body, title = NULL, skin = c("blue", "black", - "purple", "green", "red", "yellow"), sideBarMini = FALSE) + "purple", "green", "red", "yellow")) } \arguments{ \item{header}{A header created by \code{dashboardHeader}.} @@ -19,10 +19,6 @@ provided, it will try to extract the title from the \code{dashboardHeader}.} \item{skin}{A color theme. One of \code{"blue"}, \code{"black"}, \code{"purple"}, \code{"green"}, \code{"red"}, or \code{"yellow"}.} - -\item{sideBarMini}{TRUE or FALSE (default). False collapses sidebar completly -while TRUE will show collapsed sidebar with icon(s). Title will, however, -not become responsive.} } \description{ This creates a dashboard page for use in a Shiny app. diff --git a/man/dashboardSidebar.Rd b/man/dashboardSidebar.Rd index aba589ca..33817c08 100644 --- a/man/dashboardSidebar.Rd +++ b/man/dashboardSidebar.Rd @@ -4,7 +4,7 @@ \alias{dashboardSidebar} \title{Create a dashboard sidebar.} \usage{ -dashboardSidebar(..., disable = FALSE, width = NULL) +dashboardSidebar(..., disable = FALSE, width = NULL, sideBarMini = FALSE) } \arguments{ \item{...}{Items to put in the sidebar.} @@ -14,6 +14,10 @@ dashboardSidebar(..., disable = FALSE, width = NULL) \item{width}{The width of the sidebar. This must either be a number which specifies the width in pixels, or a string that specifies the width in CSS units.} + +\item{sideBarMini}{TRUE or FALSE (default). False collapses sidebar completly +while TRUE will show collapsed sidebar with icon(s). Title will, however, +not become responsive.} } \description{ A dashboard sidebar typically contains a \code{\link{sidebarMenu}}, although From e2353dd9d724cc5bb1fcd951a0fb408bc4bc56e6 Mon Sep 17 00:00:00 2001 From: dmpe Date: Tue, 22 Mar 2016 12:56:45 +0100 Subject: [PATCH 4/5] delete space again --- R/dashboardPage.R | 1 - R/dashboardSidebar.R | 7 ------- 2 files changed, 8 deletions(-) diff --git a/R/dashboardPage.R b/R/dashboardPage.R index 0f82fa34..0fdf0815 100644 --- a/R/dashboardPage.R +++ b/R/dashboardPage.R @@ -57,7 +57,6 @@ dashboardPage <- function(header, sidebar, body, title = NULL, body ) - addDeps( tags$body(class = paste0("skin-", skin), style = "min-height: 611px;", shiny::bootstrapPage(content, title = title) diff --git a/R/dashboardSidebar.R b/R/dashboardSidebar.R index a04e1d9a..82b2a625 100644 --- a/R/dashboardSidebar.R +++ b/R/dashboardSidebar.R @@ -117,13 +117,6 @@ dashboardSidebar <- function(..., disable = FALSE, width = NULL, ')))) } - # sideBar <- NULL - # if (sideBarMini == TRUE) { - # sideBar <- " sidebar-mini" - # } - # sideBar - - tags$aside(class = "main-sidebar", custom_css, tags$section( From 6cc07c693c67aaf77a9c8791fe04a8e7bc9ed825 Mon Sep 17 00:00:00 2001 From: dmpe Date: Thu, 7 Apr 2016 19:37:01 +0200 Subject: [PATCH 5/5] Adds parameter shortTitle which makes the title behave responsively. Per email request of @jackolney --- NEWS | 5 +++++ R/dashboardHeader.R | 9 +++++++-- R/dashboardSidebar.R | 4 ++-- man/dashboardHeader.Rd | 7 +++++-- man/dashboardSidebar.Rd | 4 ++-- 5 files changed, 21 insertions(+), 8 deletions(-) diff --git a/NEWS b/NEWS index d26178f8..5330bf2e 100644 --- a/NEWS +++ b/NEWS @@ -2,6 +2,11 @@ shinydashboard 0.5.1.9000 -------------------------------------------------------------------------------- * Updated to AdminLTE 2.3.2 (1ee281b). +* Adds collapsible sidebar which is capable of showing only icons (PR #133) + +* Sidebar can animate into the page when clicked on the menu hide/show item + in the top header (#79) + shinydashboard 0.5.1 -------------------------------------------------------------------------------- diff --git a/R/dashboardHeader.R b/R/dashboardHeader.R index 001e07e6..12318580 100644 --- a/R/dashboardHeader.R +++ b/R/dashboardHeader.R @@ -7,6 +7,8 @@ #' will also be used as the title shown in the browser's title bar. If you #' want that to be different from the text in the dashboard header bar, set #' the \code{title} in \code{\link{dashboardPage}}. +#' @param shortTitle A short title for responsive dashboards. Only relevant if +#' \code{dashboardSidebar(sideBarMini = T)} #' @param titleWidth The width of the title area. This must either be a number #' which specifies the width in pixels, or a string that specifies the width #' in CSS units. @@ -86,7 +88,8 @@ #' ) #' } #' @export -dashboardHeader <- function(..., title = NULL, titleWidth = NULL, disable = FALSE, .list = NULL) { +dashboardHeader <- function(..., title = NULL, shortTitle = NULL, titleWidth = NULL, + disable = FALSE, .list = NULL) { items <- c(list(...), .list) lapply(items, tagAssert, type = "li", class = "dropdown") @@ -115,7 +118,9 @@ dashboardHeader <- function(..., title = NULL, titleWidth = NULL, disable = FALS tags$header(class = "main-header", custom_css, style = if (disable) "display: none;", - span(class = "logo", title), + a(class = "logo", + span(class = "logo-lg", title), + span(class = "logo-mini", shortTitle)), tags$nav(class = "navbar navbar-static-top", role = "navigation", # Embed hidden icon so that we get the font-awesome dependency span(shiny::icon("bars"), style = "display:none;"), diff --git a/R/dashboardSidebar.R b/R/dashboardSidebar.R index 82b2a625..d0268e20 100644 --- a/R/dashboardSidebar.R +++ b/R/dashboardSidebar.R @@ -9,8 +9,8 @@ #' specifies the width in pixels, or a string that specifies the width in CSS #' units. #' @param sideBarMini TRUE or FALSE (default). False collapses sidebar completly -#' while TRUE will show collapsed sidebar with icon(s). Title will, however, -#' not become responsive. +#' while TRUE will show collapsed sidebar with icon(s). Use +#' \code{dashboardHeader(shortTitle = "DB Demo")} for responsive title. #' #' @seealso \code{\link{sidebarMenu}} #' diff --git a/man/dashboardHeader.Rd b/man/dashboardHeader.Rd index 02cf4bd0..45cdedd4 100644 --- a/man/dashboardHeader.Rd +++ b/man/dashboardHeader.Rd @@ -4,8 +4,8 @@ \alias{dashboardHeader} \title{Create a header for a dashboard page} \usage{ -dashboardHeader(..., title = NULL, titleWidth = NULL, disable = FALSE, - .list = NULL) +dashboardHeader(..., title = NULL, shortTitle = NULL, titleWidth = NULL, + disable = FALSE, .list = NULL) } \arguments{ \item{...}{Items to put in the header. Should be \code{\link{dropdownMenu}}s.} @@ -15,6 +15,9 @@ will also be used as the title shown in the browser's title bar. If you want that to be different from the text in the dashboard header bar, set the \code{title} in \code{\link{dashboardPage}}.} +\item{shortTitle}{A short title for responsive dashboards. Only relevant if +\code{dashboardSidebar(sideBarMini = T)}} + \item{titleWidth}{The width of the title area. This must either be a number which specifies the width in pixels, or a string that specifies the width in CSS units.} diff --git a/man/dashboardSidebar.Rd b/man/dashboardSidebar.Rd index 33817c08..ae97eb68 100644 --- a/man/dashboardSidebar.Rd +++ b/man/dashboardSidebar.Rd @@ -16,8 +16,8 @@ specifies the width in pixels, or a string that specifies the width in CSS units.} \item{sideBarMini}{TRUE or FALSE (default). False collapses sidebar completly -while TRUE will show collapsed sidebar with icon(s). Title will, however, -not become responsive.} +while TRUE will show collapsed sidebar with icon(s). Use +\code{dashboardHeader(shortTitle = "DB Demo")} for responsive title.} } \description{ A dashboard sidebar typically contains a \code{\link{sidebarMenu}}, although