diff --git a/DESCRIPTION b/DESCRIPTION index f0dc51a..667b71e 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,7 +1,7 @@ Package: shinymaterial Type: Package Title: Implement Material Design in Shiny Applications -Version: 0.1.0.9000 +Version: 0.2.1 Authors@R: c( person("Eric", "Anderson", role = c("aut", "cre"), email = "eric.ray.anderson@gmail.com"), person("Alvin", "Wang", role = c("ctb", "cph"), comment = "Materialize CSS library"), @@ -17,12 +17,3 @@ Imports: shiny (>= 0.7.0) Encoding: UTF-8 LazyData: true RoxygenNote: 6.0.1 -NeedsCompilation: no -Packaged: 2017-04-14 19:58:37 UTC; ericanderson -Author: Eric Anderson [aut, cre], - Alvin Wang [ctb, cph] (Materialize CSS library), - Alan Chang [ctb, cph] (Materialize CSS library), - Alex Mark [ctb, cph] (Materialize CSS library), - Kevin Louie [ctb, cph] (Materialize CSS library) -Repository: CRAN -Date/Publication: 2017-04-15 05:14:08 UTC diff --git a/NAMESPACE b/NAMESPACE index 2cacbf2..dde3fb5 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -1,12 +1,22 @@ +export(material_button) export(material_card) +export(material_checkbox) export(material_column) export(material_depth) +export(material_dropdown) +export(material_floating_button) export(material_input) export(material_modal) +export(material_number_box) export(material_page) export(material_parallax) +export(material_password_box) +export(material_radio_button) export(material_row) export(material_side_nav) -export(material_tabs) +export(material_slider) +export(material_switch) export(material_tab_content) +export(material_tabs) +export(material_text_box) diff --git a/R/shiny-material-button.R b/R/shiny-material-button.R index 8f536d1..f08aba7 100644 --- a/R/shiny-material-button.R +++ b/R/shiny-material-button.R @@ -1,26 +1,22 @@ -material_button <- function(input_id, label, icon = NULL) { - - required_arguments <- c("icon") - - for(required_argument.i in required_arguments){ - if(is.null(get(required_argument.i))){ - stop( - material_missing_argument_error_message( - argument = required_argument.i, - input_id = input_id, - type = "button", - additional_text = - paste0( - '\nSet icon = "no_icon" to not include an icon', - "\nPlease goto http://materializecss.com/icons.html for available icons", - '\ne.g. icon = "search"' - ) - ) - ) - } - } - - if(icon != "no_icon"){ +#' Create a shinymaterial button +#' +#' Build a shinymaterial button. The initial value is zero, and increases by one on each press. +#' @param input_id String. The input identifier used to access the value. +#' @param label String. The button text. +#' @param icon String. The name of the icon. Leave empty for no icon. Visit \url{http://materializecss.com/icons.html} for a list of available icons. +#' @param depth Integer. The amount of depth of the button. The value should be between 0 and 5. Leave empty for the default depth. +#' @param color String. The color of the button. Leave empty for the default color. Visit \url{http://materializecss.com/color.html} for a list of available colors. +#' @examples +#' material_button( +#' input_id = "example_button", +#' label = "Button", +#' icon = "cloud", +#' depth = 5, +#' color = "blue lighten-2" +#' ) +material_button <- function(input_id, label, icon = NULL, depth = NULL, color = NULL) { + + if(!is.null(icon)){ icon_tag <- shiny::HTML( paste0( @@ -31,14 +27,27 @@ material_button <- function(input_id, label, icon = NULL) { } else { icon_tag <- NULL } - + create_material_object( js_file = "shiny-material-button.js", material_tag_list = shiny::tagList( shiny::tags$button( - class = "waves-effect waves-light btn shiny-material-button", + class = + paste0( + "waves-effect waves-light btn shiny-material-button", + ifelse( + is.null(depth), + "", + paste0(" z-depth-", depth) + ), + ifelse( + is.null(color), + "", + paste0(" ", color) + ) + ), id = input_id, value = 0, icon_tag, diff --git a/R/shiny-material-card.R b/R/shiny-material-card.R index d7278ce..955e670 100644 --- a/R/shiny-material-card.R +++ b/R/shiny-material-card.R @@ -3,15 +3,25 @@ #' UI content can be placed in cards to organize items on a page. #' @param title String. The title of the card #' @param ... The UI elements to place in the card +#' @param depth Integer. The amount of depth of the card. The value should be between 0 and 5. Leave empty for the default depth. #' @examples #' material_card( #' title = "Example Card", -#' shiny::tags$h1("Card Content") +#' depth = 5, +#' shiny::tags$h5("Card Content") #' ) -material_card <- function(title, ...){ - +material_card <- function(title, ..., depth = NULL){ + shiny::tags$div( - class = "card", + class = + paste0( + "card", + ifelse( + is.null(depth), + "", + paste0(" z-depth-", depth) + ) + ), shiny::tags$div( class = "card-content", shiny::tags$span( diff --git a/R/shiny-material-checkbox.R b/R/shiny-material-checkbox.R index 8b7a3c3..3dc4a10 100644 --- a/R/shiny-material-checkbox.R +++ b/R/shiny-material-checkbox.R @@ -1,21 +1,55 @@ -material_checkbox <- function(input_id, label, initial_value = NULL) { +#' Create a shinymaterial checkbox +#' +#' Build a shinymaterial checkbox. The value is a boolean (TRUE if checked, FALSE if not checked). +#' @param input_id String. The input identifier used to access the value. +#' @param label String. The checkbox label. +#' @param initial_value Boolean. Is the checkbox initially checked? +#' @param color String. The color of the check. Leave empty for the default color. Visit \url{http://materializecss.com/color.html} for a list of available colors. \emph{This input requires using color hex codes, rather than the word form. E.g., '#ef5350', rather than 'red lighten-1'.} +#' @examples +#' material_checkbox( +#' input_id = "example_checkbox", +#' label = "Checkbox", +#' initial_value = TRUE, +#' color = "ef5350" +#' ) +material_checkbox <- function(input_id, label, initial_value = FALSE, color = NULL) { - required_arguments <- c("initial_value") - - for(required_argument.i in required_arguments){ - if(is.null(get(required_argument.i))){ - stop( - material_missing_argument_error_message( - argument = required_argument.i, - input_id = input_id, - type = "checkbox", - additional_text = + if(!is.null(color)){ + + checkbox_style <- + shiny::tagList( + shiny::tags$head( + shiny::tags$style( paste0( - '\ninitial_value is a boolean (TRUE or FALSE)' + ' + .shinymaterial-checkbox-', input_id,':checked + label:before { + top: -4px; + left: -3px; + width: 12px; + height: 22px; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-right: 2px solid ', color, '; + border-bottom: 2px solid ', color, '; + -webkit-transform: rotate(40deg); + -moz-transform: rotate(40deg); + -ms-transform: rotate(40deg); + -o-transform: rotate(40deg); + transform: rotate(40deg); + -webkit-backface-visibility: hidden; + -webkit-transform-origin: 100% 100%; + -moz-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + -o-transform-origin: 100% 100%; + transform-origin: 100% 100%; } + ' ) + ) ) ) - } + + } else { + checkbox_style <- shiny::tags$div() } create_material_object( @@ -31,10 +65,16 @@ material_checkbox <- function(input_id, label, initial_value = NULL) { paste0( '', - '"/>' + ' checked="checked"/>', + '/>' ) ) ), @@ -43,7 +83,8 @@ material_checkbox <- function(input_id, label, initial_value = NULL) { label ) ) - ) + ), + checkbox_style ) ) } diff --git a/R/shiny-material-column.R b/R/shiny-material-column.R index 954738f..82f30f3 100644 --- a/R/shiny-material-column.R +++ b/R/shiny-material-column.R @@ -1,9 +1,9 @@ #' Create a column to organize UI content #' #' UI content can be placed in columns to organize items on a page. -#' @param ... The UI elements to place in the column -#' @param width Integer. The width of the column. The value should be between 1 and 12 -#' @param offset Integer. The offset to the left of the column. The value should be between 0 and 11 +#' @param ... The UI elements to place in the column. +#' @param width Integer. The width of the column. The value should be between 1 and 12. +#' @param offset Integer. The offset to the left of the column. The value should be between 0 and 11. #' @examples #' material_column( #' width = 4, diff --git a/R/shiny-material-depth.R b/R/shiny-material-depth.R index b88a77c..d5e9255 100644 --- a/R/shiny-material-depth.R +++ b/R/shiny-material-depth.R @@ -1,7 +1,7 @@ #' Add depth to a UI element #' -#' Give a UI element an illusion of depth by creating a shadow. -#' @param ... The UI elements to place in the column +#' Give a UI element the perception of depth by creating a shadow. +#' @param ... The UI elements to apply the depth. #' @param depth Integer. The amount of depth. The value should be between 0 and 5. A value of 0 can be used to remove depth from objects that have depth by default. #' @examples #' material_depth( diff --git a/R/shiny-material-dropdown.R b/R/shiny-material-dropdown.R index 9450f01..b46a4c1 100644 --- a/R/shiny-material-dropdown.R +++ b/R/shiny-material-dropdown.R @@ -1,40 +1,52 @@ -material_dropdown <- function(input_id, label, choices = NULL, selected = NULL, multiple = NULL) { - - required_arguments <- c("choices", - "selected", - "multiple") - - for(required_argument.i in required_arguments){ - if(is.null(get(required_argument.i))){ - stop( - material_missing_argument_error_message( - argument = required_argument.i, - input_id = input_id, - type = "dropdown", - additional_text = +#' Create a shinymaterial dropdown +#' +#' Build a shinymaterial dropdown. +#' @param input_id String. The input identifier used to access the value. +#' @param label String. The dropdown label. +#' @param choices Named vector. The option names and underyling values. +#' @param selected String. The initially selected underyling value. +#' @param multiple Boolean. Can multiple items be selected? +#' @param color String. The color of the dropdown choices. Leave empty for the default color. Visit \url{http://materializecss.com/color.html} for a list of available colors. \emph{This input requires using color hex codes, rather than the word form. E.g., '#ef5350', rather than 'red lighten-1'.} +#' @examples +#' material_dropdown( +#' input_id = "example_dropdown", +#' label = "Drop down", +#' choices = c( +#' "Chicken" = "c", +#' "Steak" = "s", +#' "Fish" = "f" +#' ), +#' selected = c("c"), +#' multiple = FALSE, +#' color = "#ef5350" +#' ) +material_dropdown <- function(input_id, label, choices = NULL, selected = NULL, multiple = NULL, color = NULL){ + + if(!is.null(color)){ + + dropdown_style <- + shiny::tagList( + shiny::tags$head( + shiny::tags$style( paste0( - '\nSet selected = "no_selection" to select the first item in the list', - '\nSet multiple = TRUE for a multi-select' + ' + #shiny-material-dropdown-', input_id, ' ul.dropdown-content.select-dropdown li span { + color: ', color, '; + } + ' ) + ) ) ) - } + + } else { + dropdown_style <- shiny::tags$div() } - + has_names <- !is.null(names(choices)) - - if(length(selected) > 1 & !multiple){ - stop( - paste0( - "Argument 'selected' must be of length 1 when argument 'mutliple' = FALSE ", - "\ninput_id: ", input_id, - "\ntype: ", "dropdown" - ) - ) - } - + if(length(selected) == 1){ - if(selected == "no_selection"){ + if(is.null(selected)){ selected_index <- 1 } else { selected_index <- which(choices == selected) @@ -42,7 +54,7 @@ material_dropdown <- function(input_id, label, choices = NULL, selected = NULL, } else { selected_index <- which(choices %in% selected) } - + material_option_tag_list <- shiny::tagList() #comment for(i in 1:length(choices)){ @@ -66,13 +78,14 @@ material_dropdown <- function(input_id, label, choices = NULL, selected = NULL, ) ) } - + create_material_object( js_file = "shiny-material-dropdown.js", material_tag_list = shiny::tagList( shiny::tags$div( class = "input-field", + id = paste0('shiny-material-dropdown-', input_id), shiny::HTML( paste0( "