Skip to content
This repository has been archived by the owner on Apr 16, 2023. It is now read-only.

Commit

Permalink
Merge pull request #8 from nik01010/AddStatusHighlightColors
Browse files Browse the repository at this point in the history 
Add status highlight colors
  • Loading branch information
@nik01010
nik01010 authored Feb 15, 2019
2 parents bd0665f + 9882e38 commit ad52b52
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 32 deletions.
2 changes: 1 addition & 1 deletion DESCRIPTION
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Package: dashboardthemes
Type: Package
Title: Customise the appearance of Shiny dashboard applications using themes
Version: 1.0.2
Version: 1.0.3
Authors@R: person("Nik", "Lilovski", email = "nik.lilovski@outlook.com",
role = c("aut", "cre"))
Maintainer: Nik Lilovski <nik.lilovski@outlook.com>
Expand Down
15 changes: 10 additions & 5 deletions NEWS.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
### dashboardthemes ----------------------------------------
### dashboardthemes

### v1.0.3
* Added option to change Primary/Success/Warning/Danger status highlight font colour.
* Enables better visibility of header titles in boxes that use a specific status.
* Updated all theme options with a status highlight font colour.

### v1.0.2
* Fixed small bug when viewing dashboards at smartphone screen resolution - first sidebar tab link was hidden.
Expand All @@ -17,21 +22,21 @@
* First BETA release for Github.


### v0.0.0.9003 --------------------------------------------
### v0.0.0.9003
* Added new theme.
* Added support for datatable formatting.


### v0.0.0.9002 --------------------------------------------
### v0.0.0.9002
* Fixed problem with textbox and drop-box font colour and drop-box menu background colour.


### v0.0.0.9001 --------------------------------------------
### v0.0.0.9001
* Introduced four new arguments in shinyDashboardThemeDIY:
sidebarPadding, sidebarMenuBackColor, sidebarMenuPadding, sidebarMenuBorderRadius.
* Fixed problem with sidebar sub-tabs.


### v0.0.0.9000 --------------------------------------------
### v0.0.0.9000
* ALPHA release.
* Known issues: some application components have not been fully customised.
88 changes: 63 additions & 25 deletions R/dashboardthemes.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
###
### Contact: Nik Lilovski (nik.lilovski@outlook.com)
###
### Last updated: 04 March 2018
### Last updated: 15 February 2019
###
#' dashboardthemes: a package for custom themes in shinydashboard applications
#'
Expand Down Expand Up @@ -340,6 +340,10 @@ shinyDashboardLogo <- function(theme){
#'
#' @param appFontFamily String. Application font.
#' @param appFontColor String. Application font colour.
#' @param primaryFontColor String. Primary status highlight font colour.
#' @param successFontColor String. Success status highlight font colour.
#' @param warningFontColor String. Warning status highlight font colour.
#' @param dangerFontColor String. Danger status highlight font colour.
#' @param bodyBackColor String. Main page background colour.
#' @param logoBackColor String. Logo background colour.
#' @param headerButtonBackColor String. Sidebar toggle button background colour.
Expand Down Expand Up @@ -419,6 +423,10 @@ shinyDashboardLogo <- function(theme){
#' ### general
#' appFontFamily = "Arial"
#' ,appFontColor = "rgb(0,0,0)"
#' ,primaryFontColor = "rgb(0,0,0)"
#' ,successFontColor = "rgb(0,0,0)"
#' ,warningFontColor = "rgb(0,0,0)"
#' ,dangerFontColor = "rgb(0,0,0)"
#' ,bodyBackColor = "rgb(248,248,248)"
#'
#' ### header
Expand Down Expand Up @@ -536,22 +544,24 @@ shinyDashboardLogo <- function(theme){
#' )
#' @seealso \code{\link{shinyDashboardThemes}, \link{shinyDashboardLogoDIY}, \link{cssGradientThreeColors}}
#' @export
shinyDashboardThemeDIY <- function(appFontFamily, appFontColor, logoBackColor, bodyBackColor, headerButtonBackColor, headerButtonIconColor,
headerButtonBackColorHover, headerButtonIconColorHover, headerBackColor, headerBoxShadowColor,
headerBoxShadowSize, sidebarBackColor, sidebarPadding, sidebarShadowRadius, sidebarShadowColor,
sidebarMenuBackColor, sidebarMenuPadding, sidebarMenuBorderRadius, sidebarUserTextColor, sidebarSearchBackColor,
sidebarSearchIconColor, sidebarSearchBorderColor, sidebarTabTextColor, sidebarTabTextSize, sidebarTabBorderStyle,
sidebarTabBorderColor, sidebarTabBorderWidth, sidebarTabBackColorSelected, sidebarTabTextColorSelected,
sidebarTabRadiusSelected, sidebarTabTextColorHover, sidebarTabBackColorHover, sidebarTabBorderStyleHover,
sidebarTabBorderColorHover, sidebarTabBorderWidthHover, sidebarTabRadiusHover, boxBackColor, boxBorderRadius,
boxShadowSize, boxShadowColor, boxTitleSize, boxDefaultColor, boxPrimaryColor, boxSuccessColor, boxWarningColor,
boxDangerColor, tabBoxTabColor, tabBoxTabTextSize, tabBoxTabTextColor, tabBoxTabTextColorSelected, tabBoxBackColor,
tabBoxHighlightColor, tabBoxBorderRadius, buttonBackColor, buttonTextColor, buttonBorderColor, buttonBorderRadius,
buttonBackColorHover, buttonTextColorHover, buttonBorderColorHover, buttonHeight = 34, buttonPadding = "6px 12px",
textboxBackColor, textboxBorderColor, textboxBorderRadius, textboxBackColorSelect, textboxBorderColorSelect,
textboxHeight = 34, textboxPadding = "6px 12px", tableBackColor, tableBorderColor,
tableBorderTopSize, tableBorderRowSize) {

shinyDashboardThemeDIY <- function(
appFontFamily, appFontColor, logoBackColor, bodyBackColor, headerButtonBackColor, headerButtonIconColor,
headerButtonBackColorHover, headerButtonIconColorHover, headerBackColor, headerBoxShadowColor,
headerBoxShadowSize, sidebarBackColor, sidebarPadding, sidebarShadowRadius, sidebarShadowColor,
sidebarMenuBackColor, sidebarMenuPadding, sidebarMenuBorderRadius, sidebarUserTextColor, sidebarSearchBackColor,
sidebarSearchIconColor, sidebarSearchBorderColor, sidebarTabTextColor, sidebarTabTextSize, sidebarTabBorderStyle,
sidebarTabBorderColor, sidebarTabBorderWidth, sidebarTabBackColorSelected, sidebarTabTextColorSelected,
sidebarTabRadiusSelected, sidebarTabTextColorHover, sidebarTabBackColorHover, sidebarTabBorderStyleHover,
sidebarTabBorderColorHover, sidebarTabBorderWidthHover, sidebarTabRadiusHover, boxBackColor, boxBorderRadius,
boxShadowSize, boxShadowColor, boxTitleSize, boxDefaultColor, boxPrimaryColor, boxSuccessColor, boxWarningColor,
boxDangerColor, tabBoxTabColor, tabBoxTabTextSize, tabBoxTabTextColor, tabBoxTabTextColorSelected, tabBoxBackColor,
tabBoxHighlightColor, tabBoxBorderRadius, buttonBackColor, buttonTextColor, buttonBorderColor, buttonBorderRadius,
buttonBackColorHover, buttonTextColorHover, buttonBorderColorHover, buttonHeight = 34, buttonPadding = "6px 12px",
textboxBackColor, textboxBorderColor, textboxBorderRadius, textboxBackColorSelect, textboxBorderColorSelect,
textboxHeight = 34, textboxPadding = "6px 12px", tableBackColor, tableBorderColor,
tableBorderTopSize, tableBorderRowSize, primaryFontColor = "auto", successFontColor = "auto",
warningFontColor = "auto", dangerFontColor = "auto"
) {

htmltools::tags$head(

Expand Down Expand Up @@ -810,8 +820,8 @@ shinyDashboardThemeDIY <- function(appFontFamily, appFontColor, logoBackColor, b
}
/* box: primary color */
.box.box-solid.box-primary>.box-header, .box.box-primary>.box-header {
color: ', appFontColor, ';
.box.box-solid.box-primary>.box-header h3, .box.box-primary>.box-header h3 {
color: ', primaryFontColor, ';
}
.box.box-solid.box-primary>.box-header {
background: ', boxPrimaryColor, ';
Expand All @@ -826,8 +836,8 @@ shinyDashboardThemeDIY <- function(appFontFamily, appFontColor, logoBackColor, b
}
/* box: success color */
.box.box-solid.box-success>.box-header, .box.box-success>.box-header {
color: ', appFontColor, ';
.box.box-solid.box-success>.box-header h3, .box.box-success>.box-header h3 {
color: ', successFontColor, ';
}
.box.box-solid.box-success>.box-header {
background: ', boxSuccessColor, ';
Expand All @@ -842,8 +852,8 @@ shinyDashboardThemeDIY <- function(appFontFamily, appFontColor, logoBackColor, b
}
/* box: warning color */
.box.box-solid.box-warning>.box-header, .box.box-warning>.box-header {
color: ', appFontColor, ';
.box.box-solid.box-warning>.box-header h3, .box.box-warning>.box-header h3 {
color: ', warningFontColor, ';
}
.box.box-solid.box-warning>.box-header {
background: ', boxWarningColor, ';
Expand All @@ -858,8 +868,8 @@ shinyDashboardThemeDIY <- function(appFontFamily, appFontColor, logoBackColor, b
}
/* box: danger color */
.box.box-solid.box-danger>.box-header, .box.box-danger>.box-header {
color: ', appFontColor, ';
.box.box-solid.box-danger>.box-header h3, .box.box-danger>.box-header h3 {
color: ', dangerFontColor, ';
}
.box.box-solid.box-danger>.box-header {
background: ', boxDangerColor, ';
Expand Down Expand Up @@ -1276,6 +1286,10 @@ theme_blue_gradient <- shinyDashboardThemeDIY(
### general
appFontFamily = "Arial"
,appFontColor = "rgb(0,0,0)"
,primaryFontColor = "rgb(0,0,0)"
,successFontColor = "rgb(0,0,0)"
,warningFontColor = "rgb(0,0,0)"
,dangerFontColor = "rgb(0,0,0)"
,bodyBackColor = "rgb(248,248,248)"

### header
Expand Down Expand Up @@ -1400,6 +1414,10 @@ theme_boe_website <- shinyDashboardThemeDIY(
### general
appFontFamily = "Arial"
,appFontColor = "rgb(42,102,98)"
,primaryFontColor = "rgb(0,0,0)"
,successFontColor = "rgb(0,0,0)"
,warningFontColor = "rgb(0,0,0)"
,dangerFontColor = "rgb(0,0,0)"
,bodyBackColor = "rgb(255,255,254)"

### header
Expand Down Expand Up @@ -1500,6 +1518,10 @@ theme_grey_light <- shinyDashboardThemeDIY(
### general
appFontFamily = "Arial"
,appFontColor = "rgb(45,45,45)"
,primaryFontColor = "rgb(15,15,15)"
,successFontColor = "rgb(15,15,15)"
,warningFontColor = "rgb(15,15,15)"
,dangerFontColor = "rgb(15,15,15)"
,bodyBackColor = "rgb(240,240,240)"

### header
Expand Down Expand Up @@ -1599,6 +1621,10 @@ theme_grey_dark <- shinyDashboardThemeDIY(
### general
appFontFamily = "Arial"
,appFontColor = "rgb(205,205,205)"
,primaryFontColor = "rgb(255,255,255)"
,successFontColor = "rgb(255,255,255)"
,warningFontColor = "rgb(255,255,255)"
,dangerFontColor = "rgb(255,255,255)"
,bodyBackColor = "rgb(45,55,65)"

### header
Expand Down Expand Up @@ -1699,6 +1725,10 @@ theme_onenote <- shinyDashboardThemeDIY(
### general
appFontFamily = "Arial"
,appFontColor = "rgb(0,0,0)"
,primaryFontColor = "rgb(0,0,0)"
,successFontColor = "rgb(0,0,0)"
,warningFontColor = "rgb(0,0,0)"
,dangerFontColor = "rgb(0,0,0)"
,bodyBackColor = "rgb(255,255,255)"

### header
Expand Down Expand Up @@ -1823,6 +1853,10 @@ theme_poor_mans_flatly <- shinyDashboardThemeDIY(
### general
appFontFamily = "Arial"
,appFontColor = "rgb(33,37,41)"
,primaryFontColor = "rgb(245,245,245)"
,successFontColor = "rgb(33,37,41)"
,warningFontColor = "rgb(33,37,41)"
,dangerFontColor = "rgb(33,37,41)"
,bodyBackColor = "rgb(255,255,255)"

### header
Expand Down Expand Up @@ -1923,6 +1957,10 @@ theme_purple_gradient <- shinyDashboardThemeDIY(
### general
appFontFamily = "Arial"
,appFontColor = "rgb(128,177,221)"
,primaryFontColor = "rgb(255,255,255)"
,successFontColor = "rgb(255,255,255)"
,warningFontColor = "rgb(255,255,255)"
,dangerFontColor = "rgb(255,255,255)"
,bodyBackColor = cssGradientThreeColors(
direction = "down"
,colorStart = "rgb(49,56,107)"
Expand Down
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@ Example of creating a custom theme object. Each parameter can be changed as requ
### general
appFontFamily = "Arial"
,appFontColor = "rgb(0,0,0)"
,primaryFontColor = "rgb(0,0,0)"
,successFontColor = "rgb(0,0,0)"
,warningFontColor = "rgb(0,0,0)"
,dangerFontColor = "rgb(0,0,0)"
,bodyBackColor = "rgb(248,248,248)"

### header
Expand Down
16 changes: 15 additions & 1 deletion man/shinyDashboardThemeDIY.Rd
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions vignettes/using_dashboardthemes.Rmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,10 @@ Example of creating a custom theme object. Each parameter can be changed as requ
### general
appFontFamily = "Arial"
,appFontColor = "rgb(0,0,0)"
,primaryFontColor = "rgb(0,0,0)"
,successFontColor = "rgb(0,0,0)"
,warningFontColor = "rgb(0,0,0)"
,dangerFontColor = "rgb(0,0,0)"
,bodyBackColor = "rgb(248,248,248)"
### header
Expand Down

0 comments on commit ad52b52

Please sign in to comment.