Skip to content

Commit

Permalink
update cards
Browse files Browse the repository at this point in the history
  • Loading branch information
DivadNojnarg committed Mar 16, 2024
1 parent f0cd856 commit 9e91cb3
Show file tree
Hide file tree
Showing 22 changed files with 296 additions and 436 deletions.
1 change: 0 additions & 1 deletion NAMESPACE
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ export(f7Skeleton)
export(f7Slide)
export(f7Slider)
export(f7SmartSelect)
export(f7SocialCard)
export(f7SplitLayout)
export(f7Stepper)
export(f7SubNavbar)
Expand Down
2 changes: 2 additions & 0 deletions NEWS.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,15 @@
- `container` is deprecated, removed from Framework7.
- `f7Navbar()`:
- `shadow` and `subtitle` have been removed in Framework7.
- `f7SocialCard()` is deprecated as the same result can be achieved with `f7Card()`.

## 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).
- `f7Button()` get a new `tonal` style.
- `f7Card()` get a new `raised` and `divider` parameters.
- Fix various issues in documentation.

# shinyMobile 1.0.1
Expand Down
271 changes: 57 additions & 214 deletions R/f7Card.R
Original file line number Diff line number Diff line change
Expand Up @@ -10,57 +10,62 @@
#' @param footer Footer content, if any. Must be wrapped in a tagList.
#' @param outline Outline style. FALSE by default.
#' @param height Card height. NULL by default.
#' @param raised Card shadow. FALSE by default.
#' @param divider Card header/footer dividers. FALSE by default.
#'
#' @examples
#' # Simple card
#' if(interactive()){
#' library(shiny)
#' library(shinyMobile)
#' if (interactive()) {
#' library(shiny)
#' library(shinyMobile)
#'
#' shinyApp(
#' ui = f7Page(
#' title = "Cards",
#' f7SingleLayout(
#' navbar = f7Navbar(title = "f7Card"),
#' f7Card("This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element."),
#' f7Card(
#' title = "Card header",
#' "This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element.",
#' footer = tagList(
#' f7Button(color = "blue", label = "My button"),
#' f7Badge("Badge", color = "green")
#' )
#' shinyApp(
#' ui = f7Page(
#' title = "Cards",
#' options = list(dark = FALSE),
#' f7SingleLayout(
#' navbar = f7Navbar(title = "f7Card"),
#' f7Card("This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element."),
#' f7Card(
#' title = "Card header",
#' raised = TRUE,
#' outline = TRUE,
#' divider = TRUE,
#' div(class = "date", "March 16, 2024"),
#' "This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element.",
#' footer = "Card footer"
#' ),
#' f7Card(
#' title = "Card header",
#' image = "https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg",
#' "This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element.",
#' footer = tagList(
#' f7Link("Link 1", href = "https://google.com"),
#' f7Badge("Badge", color = "green")
#' )
#' )
#' )
#' ),
#' f7Card(
#' title = "Card header",
#' image = "https://loremflickr.com/320/240",
#' "This is a simple card with plain text,
#' but cards can also contain their own header,
#' footer, list view, image, or any other element.",
#' footer = tagList(
#' f7Button(color = "blue", label = "My button"),
#' f7Badge("Badge", color = "green")
#' )
#' )
#' )
#' ),
#' server = function(input, output) {}
#' )
#' server = function(input, output) {}
#' )
#' }
#'
#' @author David Granjon, \email{dgranjon@@ymail.com}
#'
#' @export
f7Card <- function(..., image = NULL, title = NULL, footer = NULL, outline = FALSE,
height = NULL) {

height = NULL, raised = FALSE, divider = FALSE) {
cardCl <- "card"
if (!is.null(image)) cardCl <- paste0(cardCl, " demo-card-header-pic")
if (outline) cardCl <- paste0(cardCl, " card-outline")
if (!is.null(image)) cardCl <- paste(cardCl, "demo-card-header-pic")
if (outline) cardCl <- paste(cardCl, "card-outline")
if (raised) cardCl <- paste(cardCl, "card-raised")
if (divider) cardCl <- paste(cardCl, "card-header-divider card-footer-divider")

cardStyle <- NULL
if (!is.null(height)) {
Expand All @@ -79,84 +84,44 @@ f7Card <- function(..., image = NULL, title = NULL, footer = NULL, outline = FAL
if (!is.null(image)) {
shiny::tags$div(
style = paste0("background-image:url(", image, ")"),
class = "card-header align-items-flex-end",
class = "card-header",
valign = "bottom",
title
)
} else {
shiny::tags$div(class = "card-header", title)
}
}

#footer
# footer
footerTag <- if (!is.null(footer)) {
shiny::tags$div(class = "card-footer", footer)
}

# main tag
mainTag <- if (!is.null(image)) {
shiny::tags$div(
class = "card demo-card-header-pic",
headerTag,
contentTag,
footerTag
)
} else {
shiny::tags$div(
class = cardCl,
headerTag,
contentTag,
footerTag
)
}

return(mainTag)
shiny::tags$div(
class = cardCl,
headerTag,
contentTag,
footerTag
)
}


#' Framework7 social card
#'
#' `r lifecycle::badge("deprecated")`.
#' \code{f7SocialCard} is a special card for social content.
#'
#' @rdname card
#'
#' @param ... Card content.
#' @param image Author img.
#' @param author Author.
#' @param date Date.
#' @param footer Footer content, if any. Must be wrapped in a tagList.
#'
#' @examples
#' # Social card
#' if(interactive()){
#' library(shiny)
#' library(shinyMobile)
#'
#' shinyApp(
#' ui = f7Page(
#' title = "Social Card",
#' f7SingleLayout(
#' navbar = f7Navbar(title = "f7SocialCard"),
#' f7SocialCard(
#' image = "https://loremflickr.com/g/320/240/paris",
#' author = "John Doe",
#' date = "Monday at 3:47 PM",
#' "What a nice photo i took yesterday!",
#' img(src = "https://loremflickr.com/g/320/240/paris", width = "100%"),
#' footer = tagList(
#' f7Badge("1", color = "yellow"),
#' f7Badge("2", color = "green"),
#' f7Badge("3", color = "blue")
#' )
#' )
#' )
#' ),
#' server = function(input, output) {}
#' )
#' }
#'
#' @export
#' @keywords internal
f7SocialCard <- function(..., image = NULL, author = NULL, date = NULL,
footer = NULL) {
lifecycle::deprecate_warn("1.1.0", "f7SocialCard", "f7Card()")

headerTag <- shiny::tags$div(
class = "card-header",
Expand All @@ -181,10 +146,6 @@ f7SocialCard <- function(..., image = NULL, author = NULL, date = NULL,
)
}





#' Framework7 expandable card
#'
#' \code{f7ExpandableCard} is a card that can expand. Ideal for a
Expand All @@ -204,70 +165,11 @@ f7SocialCard <- function(..., image = NULL, author = NULL, date = NULL,
#'
#' @note For \link{f7ExpandableCard}, image and color are not compatible. Choose one of them.
#'
#' @examples
#' # Expandable card
#' if(interactive()){
#' library(shiny)
#' library(shinyMobile)
#'
#' shinyApp(
#' ui = f7Page(
#' title = "Expandable Cards",
#' f7SingleLayout(
#' navbar = f7Navbar(
#' title = "Expandable Cards",
#' hairline = FALSE,
#' shadow = TRUE
#' ),
#' f7ExpandableCard(
#' id = "card1",
#' title = "Expandable Card 1",
#' color = "blue",
#' subtitle = "Click on me pleaaaaase",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' ),
#' f7ExpandableCard(
#' id = "card2",
#' title = "Expandable Card 2",
#' color = "green",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' ),
#' f7ExpandableCard(
#' id = "card3",
#' title = "Expandable Card 3",
#' image = "https://i.pinimg.com/originals/73/38/6e/73386e0513d4c02a4fbb814cadfba655.jpg",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' ),
#' f7ExpandableCard(
#' id = "card4",
#' title = "Expandable Card 4",
#' fullBackground = TRUE,
#' image = "https://i.ytimg.com/vi/8q_kmxwK5Rg/maxresdefault.jpg",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' )
#' )
#' ),
#' server = function(input, output) {}
#' )
#' }
#'
#' @example inst/examples/card/app.R
#' @export
f7ExpandableCard <- function(..., id = NULL, title = NULL,
subtitle = NULL, color = NULL,
image = NULL, fullBackground = FALSE) {

cardColorCl <- if (!is.null(color)) paste0("bg-color-", color)

# card header if any
Expand Down Expand Up @@ -355,8 +257,6 @@ f7ExpandableCard <- function(..., id = NULL, title = NULL,
)
}



#' Update Framework7 expandable card
#'
#' \code{updateF7Card} maximizes an \link{f7ExpandableCard} on the client.
Expand All @@ -366,63 +266,6 @@ f7ExpandableCard <- function(..., id = NULL, title = NULL,
#'
#' @rdname card
#' @export
#'
#' @examples
#' # Update expandable card
#' if (interactive()) {
#' library(shiny)
#' library(shinyMobile)
#'
#' shinyApp(
#' ui = f7Page(
#' title = "Expandable Cards",
#' f7SingleLayout(
#' navbar = f7Navbar(
#' title = "Expandable Cards",
#' hairline = FALSE,
#' shadow = TRUE
#' ),
#' f7ExpandableCard(
#' id = "card1",
#' title = "Expandable Card 1",
#' image = "https://i.pinimg.com/originals/73/38/6e/73386e0513d4c02a4fbb814cadfba655.jpg",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' ),
#'
#' hr(),
#' f7BlockTitle(title = "Click below to expand the card!") %>% f7Align(side = "center"),
#' f7Button(inputId = "go", label = "Go"),
#' br(),
#' f7ExpandableCard(
#' id = "card2",
#' title = "Expandable Card 2",
#' fullBackground = TRUE,
#' image = "https://cdn.pixabay.com/photo/2017/10/03/18/55/mountain-2813667_960_720.png",
#' "Framework7 - is a free and open source HTML mobile framework
#' to develop hybrid mobile apps or web apps with iOS or Android
#' native look and feel. It is also an indispensable prototyping apps tool
#' to show working app prototype as soon as possible in case you need to."
#' )
#' )
#' ),
#' server = function(input, output, session) {
#'
#' observeEvent(input$go, {
#' updateF7Card(id = "card2")
#' })
#'
#' observe({
#' list(
#' print(input$card1),
#' print(input$card2)
#' )
#' })
#' }
#' )
#' }
updateF7Card <- function(id, session = shiny::getDefaultReactiveDomain()) {
session$sendInputMessage(id, NULL)
}
1 change: 0 additions & 1 deletion _pkgdown.yml
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@ reference:
contents:
- '`f7Card`'
- '`f7ExpandableCard`'
- '`f7SocialCard`'


- title: Lists
Expand Down
Loading

0 comments on commit 9e91cb3

Please sign in to comment.