diff --git a/NEWS.md b/NEWS.md index 93fb406a..47e64baf 100644 --- a/NEWS.md +++ b/NEWS.md @@ -8,11 +8,14 @@ - `multiCollapse` has been removed in Framework7. - `f7AddMessages()` is definitely removed. Deprecated from other releases. - `f7Appbar()` has been removed in Framework7. We have no alternative to replace it. +- `f7Block()`: + - `hairlines` is deprecated since removed from Framework7. ## Minor change - `f7Messages()`: the corresponding input is now a list of lists, each item being a single `f7Message()`. The previous setting was not optimal R,the JS binding was returning a array of objects, which can't be easily translated to R. We now return an object of objects which becomes a list of lists. +- `f7Block()` gains an `outline` parameter (add grey border). # shinyMobile 1.0.1 diff --git a/R/f7Block.R b/R/f7Block.R index 15b22292..97916bf3 100644 --- a/R/f7Block.R +++ b/R/f7Block.R @@ -4,111 +4,127 @@ #' #' @param ... Block content. Also for \link{f7BlockHeader} and \link{f7BlockFooter}. #' @param hairlines Whether to allow hairlines. TRUE by default. -#' @param strong Whether to put the text in bold. FALSE by default. +#' @param strong Add white background so that text is highlighted. FALSE by default. #' @param inset Whether to set block inset. FALSE by default. Works only if strong is TRUE. #' @param tablet Whether to make block inset only on large screens. FALSE by default. +#' @param outline Block border. Default to FALSE. #' #' @rdname block #' @examples -#' if(interactive()){ -#' library(shiny) -#' library(shinyMobile) -#' -#' shinyApp( -#' ui = f7Page( -#' title = "Blocks", -#' f7SingleLayout( -#' navbar = f7Navbar(title = "f7Block"), -#' f7BlockTitle(title = "A large title", size = "large"), -#' f7Block( -#' f7BlockHeader(text = "Header"), -#' "Here comes paragraph within content block. +#' if (interactive()) { +#' library(shiny) +#' library(shinyMobile) +#' +#' shinyApp( +#' ui = f7Page( +#' title = "Blocks", +#' f7SingleLayout( +#' navbar = f7Navbar(title = "f7Block"), +#' f7BlockTitle(title = "A large title", size = "large"), +#' f7Block( +#' f7BlockHeader(text = "Header"), +#' "Here comes paragraph within content block. #' Donec et nulla auctor massa pharetra #' adipiscing ut sit amet sem. Suspendisse #' molestie velit vitae mattis tincidunt. #' Ut sit amet quam mollis, vulputate #' turpis vel, sagittis felis.", -#' f7BlockFooter(text = "Footer") -#' ), -#' -#' f7BlockTitle(title = "A medium title", size = "medium"), -#' f7Block( -#' strong = TRUE, -#' f7BlockHeader(text = "Header"), -#' "Here comes paragraph within content block. +#' f7BlockFooter(text = "Footer") +#' ), +#' f7BlockTitle(title = "A medium title", size = "medium"), +#' f7Block( +#' strong = TRUE, +#' outline = TRUE, +#' f7BlockHeader(text = "Header"), +#' "Here comes paragraph within content block. #' Donec et nulla auctor massa pharetra #' adipiscing ut sit amet sem. Suspendisse #' molestie velit vitae mattis tincidunt. #' Ut sit amet quam mollis, vulputate #' turpis vel, sagittis felis.", -#' f7BlockFooter(text = "Footer") -#' ), -#' -#' f7BlockTitle(title = "A normal title", size = NULL), -#' f7Block( -#' inset = TRUE, -#' strong = TRUE, -#' f7BlockHeader(text = "Header"), -#' "Here comes paragraph within content block. +#' f7BlockFooter(text = "Footer") +#' ), +#' f7BlockTitle(title = "A normal title", size = NULL), +#' f7Block( +#' inset = TRUE, +#' strong = TRUE, +#' f7BlockHeader(text = "Header"), +#' "Here comes paragraph within content block. #' Donec et nulla auctor massa pharetra #' adipiscing ut sit amet sem. Suspendisse #' molestie velit vitae mattis tincidunt. #' Ut sit amet quam mollis, vulputate #' turpis vel, sagittis felis.", -#' f7BlockFooter(text = "Footer") -#' ), -#' f7Block( -#' tablet = TRUE, -#' strong = TRUE, -#' f7BlockHeader(text = "Header"), -#' "Here comes paragraph within content block. +#' f7BlockFooter(text = "Footer") +#' ), +#' f7Block( +#' inset = TRUE, +#' tablet = TRUE, +#' strong = TRUE, +#' f7BlockHeader(text = "Header"), +#' "Here comes paragraph within content block. #' Donec et nulla auctor massa pharetra #' adipiscing ut sit amet sem. Suspendisse #' molestie velit vitae mattis tincidunt. #' Ut sit amet quam mollis, vulputate #' turpis vel, sagittis felis.", -#' f7BlockFooter(text = "Footer") -#' ), -#' f7Block( -#' inset = TRUE, -#' strong = TRUE, -#' hairlines = FALSE, -#' f7BlockHeader(text = "Header"), -#' "Here comes paragraph within content block. +#' f7BlockFooter(text = "Footer") +#' ), +#' f7Block( +#' inset = TRUE, +#' strong = TRUE, +#' outline = TRUE, +#' f7BlockHeader(text = "Header"), +#' "Here comes paragraph within content block. #' Donec et nulla auctor massa pharetra #' adipiscing ut sit amet sem. Suspendisse #' molestie velit vitae mattis tincidunt. #' Ut sit amet quam mollis, vulputate #' turpis vel, sagittis felis.", -#' f7BlockFooter(text = "Footer") -#' ) -#' ) -#' ), -#' server = function(input, output) {} -#' ) +#' f7BlockFooter(text = "Footer") +#' ) +#' ) +#' ), +#' server = function(input, output) {} +#' ) #' } #' #' @author David Granjon, \email{dgranjon@@ymail.com} #' #' @export f7Block <- function(..., hairlines = TRUE, strong = FALSE, inset = FALSE, - tablet = FALSE) { - + tablet = FALSE, outline = FALSE) { blockCl <- "block" - if (!hairlines) blockCl <- paste0(blockCl, " no-hairlines") + + lifecycle::deprecate_warn( + when = "1.1.0", + what = "f7Block(hairlines)", + details = "hairlines has been + removed from Framework7 and will be removed from shinyMobile + in the next release." + ) + + if (!inset && tablet) { + stop("inset must be TRUE when tablet is TRUE") + } + + if (!strong && inset) { + stop("inset requires strong to be TRUE") + } + if (strong) { - if (inset) { - blockCl <- paste0(blockCl, " block-strong inset") - } else { - blockCl <- paste0(blockCl, " block-strong") + blockCl <- paste(blockCl, "block-strong") + if (inset && !tablet) { + blockCl <- paste(blockCl, "inset") } } - if (tablet) blockCl <- paste0(blockCl, " tablet-inset") + if (tablet) blockCl <- paste(blockCl, "medium-inset") + if (outline) blockCl <- paste(blockCl, "block-outline") - shiny::tags$div( - class = blockCl, - ... - ) + shiny::tags$div( + class = blockCl, + ... + ) } @@ -123,7 +139,7 @@ f7Block <- function(..., hairlines = TRUE, strong = FALSE, inset = FALSE, #' @author David Granjon, \email{dgranjon@@ymail.com} #' #' @export -f7BlockTitle <- function(title = NULL, size = NULL) { +f7BlockTitle <- function(title, size = NULL) { titleCl <- "block-title" if (!is.null(size)) { if (size == "large") { @@ -147,7 +163,7 @@ f7BlockTitle <- function(title = NULL, size = NULL) { #' @rdname block #' #' @export -f7BlockHeader <- function(text = NULL) { +f7BlockHeader <- function(text) { shiny::tags$div(class = "block-header", text) } @@ -161,6 +177,6 @@ f7BlockHeader <- function(text = NULL) { #' @author David Granjon, \email{dgranjon@@ymail.com} #' #' @export -f7BlockFooter <- function(text = NULL) { +f7BlockFooter <- function(text) { shiny::tags$div(class = "block-footer", text) } diff --git a/inst/examples/gallery/tabs/tabCards.R b/inst/examples/gallery/tabs/tabCards.R index 5b0ddd72..9cc1bff7 100644 --- a/inst/examples/gallery/tabs/tabCards.R +++ b/inst/examples/gallery/tabs/tabCards.R @@ -3,7 +3,6 @@ tabCards <- f7Tab( tabName = "Cards", icon = f7Icon("rectangle_stack", f7Badge(8, color = "green")), active = FALSE, - f7BlockTitle(title = "f7Block") %>% f7Align(side = "center"), f7Block( f7BlockHeader(text = "Header"), @@ -16,7 +15,6 @@ tabCards <- f7Tab( f7BlockFooter(text = "Footer") ), br(), - f7BlockTitle(title = "f7Block with wrapper") %>% f7Align(side = "center"), f7Block( strong = TRUE, @@ -30,11 +28,11 @@ tabCards <- f7Tab( f7BlockFooter(text = "Footer") ), br(), - f7BlockTitle(title = "f7Block with wrapper and inset") %>% f7Align(side = "center"), f7Block( inset = TRUE, strong = TRUE, + outline = TRUE, f7BlockHeader(text = "Header"), "Here comes paragraph within content block. Donec et nulla auctor massa pharetra @@ -44,7 +42,6 @@ tabCards <- f7Tab( turpis vel, sagittis felis.", f7BlockFooter(text = "Footer") ), - br(), # classic card without header nor footer @@ -111,7 +108,6 @@ tabCards <- f7Tab( f7BlockTitle(title = "f7MediaCard") %>% f7Align(side = "center"), f7Card( title = "A card with media:", - f7List( mode = "media", lapply(1:2, function(j) { diff --git a/man/block.Rd b/man/block.Rd index 87c6be52..06673fd5 100644 --- a/man/block.Rd +++ b/man/block.Rd @@ -5,21 +5,30 @@ \alias{f7BlockHeader} \title{Framework7 block} \usage{ -f7Block(..., hairlines = TRUE, strong = FALSE, inset = FALSE, tablet = FALSE) +f7Block( + ..., + hairlines = TRUE, + strong = FALSE, + inset = FALSE, + tablet = FALSE, + outline = FALSE +) -f7BlockHeader(text = NULL) +f7BlockHeader(text) } \arguments{ \item{...}{Block content. Also for \link{f7BlockHeader} and \link{f7BlockFooter}.} \item{hairlines}{Whether to allow hairlines. TRUE by default.} -\item{strong}{Whether to put the text in bold. FALSE by default.} +\item{strong}{Add white background so that text is highlighted. FALSE by default.} \item{inset}{Whether to set block inset. FALSE by default. Works only if strong is TRUE.} \item{tablet}{Whether to make block inset only on large screens. FALSE by default.} +\item{outline}{Block border. Default to FALSE.} + \item{text}{Any text.} } \description{ @@ -28,82 +37,82 @@ f7BlockHeader(text = NULL) \code{f7BlockHeader} creates a header content for \link{f7Block}. } \examples{ -if(interactive()){ - library(shiny) - library(shinyMobile) +if (interactive()) { + library(shiny) + library(shinyMobile) - shinyApp( - ui = f7Page( - title = "Blocks", - f7SingleLayout( - navbar = f7Navbar(title = "f7Block"), - f7BlockTitle(title = "A large title", size = "large"), - f7Block( - f7BlockHeader(text = "Header"), - "Here comes paragraph within content block. + shinyApp( + ui = f7Page( + title = "Blocks", + f7SingleLayout( + navbar = f7Navbar(title = "f7Block"), + f7BlockTitle(title = "A large title", size = "large"), + f7Block( + f7BlockHeader(text = "Header"), + "Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.", - f7BlockFooter(text = "Footer") - ), - - f7BlockTitle(title = "A medium title", size = "medium"), - f7Block( - strong = TRUE, - f7BlockHeader(text = "Header"), - "Here comes paragraph within content block. + f7BlockFooter(text = "Footer") + ), + f7BlockTitle(title = "A medium title", size = "medium"), + f7Block( + strong = TRUE, + outline = TRUE, + f7BlockHeader(text = "Header"), + "Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.", - f7BlockFooter(text = "Footer") - ), - - f7BlockTitle(title = "A normal title", size = NULL), - f7Block( - inset = TRUE, - strong = TRUE, - f7BlockHeader(text = "Header"), - "Here comes paragraph within content block. + f7BlockFooter(text = "Footer") + ), + f7BlockTitle(title = "A normal title", size = NULL), + f7Block( + inset = TRUE, + strong = TRUE, + f7BlockHeader(text = "Header"), + "Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.", - f7BlockFooter(text = "Footer") - ), - f7Block( - tablet = TRUE, - strong = TRUE, - f7BlockHeader(text = "Header"), - "Here comes paragraph within content block. + f7BlockFooter(text = "Footer") + ), + f7Block( + inset = TRUE, + tablet = TRUE, + strong = TRUE, + f7BlockHeader(text = "Header"), + "Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.", - f7BlockFooter(text = "Footer") - ), - f7Block( - inset = TRUE, - strong = TRUE, - hairlines = FALSE, - f7BlockHeader(text = "Header"), - "Here comes paragraph within content block. + f7BlockFooter(text = "Footer") + ), + f7Block( + inset = TRUE, + strong = TRUE, + outline = TRUE, + f7BlockHeader(text = "Header"), + "Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis.", - f7BlockFooter(text = "Footer") - ) - ) - ), - server = function(input, output) {} - ) + f7BlockFooter(text = "Footer") + ) + ) + ), + server = function(input, output) {} + ) } } diff --git a/man/f7BlockFooter.Rd b/man/f7BlockFooter.Rd index ad037670..83e98025 100644 --- a/man/f7BlockFooter.Rd +++ b/man/f7BlockFooter.Rd @@ -4,7 +4,7 @@ \alias{f7BlockFooter} \title{Framework7 block footer} \usage{ -f7BlockFooter(text = NULL) +f7BlockFooter(text) } \arguments{ \item{text}{Any text.} diff --git a/man/f7BlockTitle.Rd b/man/f7BlockTitle.Rd index 3e182d9e..3a5115e6 100644 --- a/man/f7BlockTitle.Rd +++ b/man/f7BlockTitle.Rd @@ -4,7 +4,7 @@ \alias{f7BlockTitle} \title{Framework7 block title} \usage{ -f7BlockTitle(title = NULL, size = NULL) +f7BlockTitle(title, size = NULL) } \arguments{ \item{title}{Block title.} diff --git a/tests/testthat/test-f7Block.R b/tests/testthat/test-f7Block.R index 08ba4d8f..b491e73a 100644 --- a/tests/testthat/test-f7Block.R +++ b/tests/testthat/test-f7Block.R @@ -4,42 +4,49 @@ test_that("block class", { expect_true(inherits(f7Block(), "shiny.tag")) expect_equal(f7Block()$attribs$class, "block") - # no hairlines, strong, inset, tablet + expect_error(f7Block(inset = FALSE, tablet = TRUE)) + expect_error(f7Block(inset = TRUE)) + + # basic + expect_equal( + f7Block()$attribs$class, + "block" + ) + + # strong, inset expect_equal( f7Block( - hairlines = FALSE, strong = TRUE, - inset = TRUE, - tablet = TRUE, + inset = TRUE )$attribs$class, - "block no-hairlines block-strong inset tablet-inset" + "block block-strong inset" ) - # no inset + # strong, inset, tablet, outline expect_equal( f7Block( - hairlines = FALSE, strong = TRUE, - inset = FALSE, + inset = TRUE, tablet = TRUE, + outline = TRUE, )$attribs$class, - "block no-hairlines block-strong tablet-inset" + "block block-strong medium-inset block-outline" ) }) test_that("blocktitle", { - expect_true(inherits(f7BlockTitle(), "shiny.tag")) + expect_true(inherits(f7BlockTitle("plop"), "shiny.tag")) expect_equal( - f7BlockTitle()$attribs$class, + f7BlockTitle("plop")$attribs$class, "block-title" ) expect_equal( - f7BlockTitle(size = "large")$attribs$class, + f7BlockTitle("plop", size = "large")$attribs$class, "block-title block-title-large" ) expect_equal( - f7BlockTitle(size = "medium")$attribs$class, + f7BlockTitle("plop", size = "medium")$attribs$class, "block-title block-title-medium" ) })