Skip to content

Commit

Permalink
add new page arg for scrollable content
Browse files Browse the repository at this point in the history
  • Loading branch information
hypebright committed May 21, 2024
1 parent e618754 commit 39ba086
Show file tree
Hide file tree
Showing 18 changed files with 277 additions and 31 deletions.
2 changes: 1 addition & 1 deletion NEWS.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ the check icon position. Default to left.
- `f7Panel()` has new "floating"/"push" effects as well as a new `options` parameter
to pass in extra configuration. See https://framework7.io/docs/panel#panel-parameters.
- `f7VirtualList()` has new `outline`, `dividers` and `strong` styles. Additionally, `mode` was added with the following possible values: `simple`, `links`, `media` or `contacts`.
- `f7Popup()` has a new `push` effect (pushing the main view behind on opening).
- `f7Popup()` has a new `push` effect (pushing the main view behind on opening). There's also a new argument called `page` that can control whether or not the popup behaves as a page and can scroll- handy for popups with more content.
- `f7Radio()` has a new `position` parameter to control
the check icon position. Default to left (like `f7CheckboxGroup()`).
Also, `f7Radio()` inherits from `f7List()` styling parameters such as `inset`, `outline`,`dividers`, `strong` for more styling option.
Expand Down
28 changes: 22 additions & 6 deletions R/f7Popup.R
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
#' @param closeButton Add or not a button to easily close the popup.
#' Default to \code{TRUE}.
#' @param push Push effect. Default to TRUE.
#' @param page Allow content to be scrollable, as a page. Default to FALSE.
#' @param session Shiny session object.
#'
#' @export
Expand All @@ -36,6 +37,7 @@ f7Popup <- function(..., id, title = NULL,
fullsize = FALSE,
closeButton = TRUE,
push = TRUE,
page = FALSE,
session = shiny::getDefaultReactiveDomain()) {
message <- dropNulls(
list(
Expand All @@ -49,18 +51,32 @@ f7Popup <- function(..., id, title = NULL,
)
)

content <- shiny::tags$div(
class = "block",
if (!is.null(title)) shiny::tags$div(class = "block-title", title),
...
)
if (page) {
content <- shiny::tags$div(
class = "page",
shiny::tags$div(
class = "page-content",
shiny::tags$div(
class = "block",
if (!is.null(title)) shiny::tags$div(class = "block-title", title),
...
)
)
)
} else {
content <- shiny::tags$div(
class = "block",
if (!is.null(title)) shiny::tags$div(class = "block-title", title),
...
)
}

if (closeButton) {
content <- htmltools::tagAppendChild(
content,
shiny::tags$a(
class = "link popup-close",
style = "position: absolute; top: -15px; right: 10px;",
style = sprintf("position: absolute; top: %s; right: 10px;", ifelse(page, "15px", "-15px")),
href = "#",
f7Icon("multiply")
)
Expand Down
68 changes: 61 additions & 7 deletions inst/examples/popup/app.R
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,75 @@ app <- shinyApp(
navbar = f7Navbar(
title = "f7Popup"
),
f7Block(f7Button("toggle", "Toggle Popup"))
f7Block(f7Button("toggle1", "Toggle Popup")),
br(),
f7Block(f7Button("toggle2", "Toggle Page Popup"))
)
),
server = function(input, output, session) {
output$res <- renderPrint(input$text)

observeEvent(input$toggle, {
output$res1 <- renderPrint(input$text)
output$res2 <- renderPrint(input$text2)

observeEvent(input$toggle1, {
f7Popup(
id = "popup",
id = "popup1",
title = "My first popup",
f7Text(
"text", "Popup content",
"text1", "Popup content",
"This is my first popup ever, I swear!"
),
verbatimTextOutput("res")
verbatimTextOutput("res1")
)
})

observeEvent(input$toggle2, {
f7Popup(
id = "popup2",
title = "My first popup",
page = TRUE,
f7Text(
"text2", "Popup content",
"Look at me, I can scroll!"
),
verbatimTextOutput("res2"),
p("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
hendrerit magna non sem iaculis, ac rhoncus est pulvinar. Interdum et
malesuada fames ac ante ipsum primis in faucibus. In sagittis vel lacus
ac bibendum. Maecenas mollis, diam nec fermentum sollicitudin, massa
lectus ullamcorper orci, in laoreet lectus quam nec lacus.
Nulla sollicitudin imperdiet metus, quis mollis justo finibus varius.
In mattis malesuada enim in tincidunt. Nulla vehicula dui lacus,
iaculis condimentum dui dapibus ac. Cras elit nunc, auctor vestibulum
odio id, iaculis posuere arcu. Mauris dignissim id lectus sit amet
vestibulum. Nam rutrum sit amet augue vel interdum. Donec sed orci vitae
eros eleifend posuere vitae id nibh. Donec faucibus erat in placerat
feugiat. Sed sodales facilisis eros, porta viverra purus pretium eu.
Morbi vehicula metus lacus, id commodo mauris posuere nec. Vivamus
ornare et lacus et lobortis. Etiam tristique elit id eros ornare,
vel faucibus mauris hendrerit. Nulla elit nulla, consequat sit amet
neque et, ultrices elementum diam. Etiam dignissim elit a arcu pulvinar,
ut dapibus elit maximus. Mauris ultricies nulla in mauris laoreet, at
lacinia lorem maximus. Nulla sed enim diam. In ac felis dignissim,
euismod augue nec, tempus augue. Maecenas eget aliquam mi.
In tincidunt massa a velit suscipit, ac dapibus mi laoreet. Vestibulum
lacinia nulla lorem, nec blandit quam sollicitudin at. Pellentesque
in vehicula lacus. Etiam vitae lectus malesuada, hendrerit mauris eu,
placerat elit. Mauris vehicula dictum pharetra. Etiam interdum vehicula
urna, ac blandit lectus posuere id. Nullam facilisis tincidunt sem et
pretium. Praesent pulvinar feugiat augue, quis pretium nunc vestibulum a.
Morbi id eros eget lectus placerat placerat. Morbi dapibus viverra
orci nec pellentesque. Vestibulum mollis gravida sem, quis tincidunt
sem maximus gravida. Nam id egestas augue, sit amet egestas orci. Duis
porttitor lectus sit amet efficitur auctor. Quisque dui ante, eleifend
eget nibh a, tincidunt interdum nisi. Integer varius tempor erat, in
commodo neque elementum ut. Maecenas eu lorem ultrices, posuere neque ac,
aliquam ante. Maecenas eu volutpat arcu. Morbi hendrerit sem sed vehicula
sodales. Quisque ultrices massa erat, vel accumsan risus vehicula eu.
Donec laoreet aliquet est, a consequat odio viverra lacinia. Suspendisse
id iaculis risus. Vestibulum posuere dignissim lacus quis ornare. Nam
dapibus efficitur neque sed tristique."
)
)
})

Expand All @@ -31,7 +85,7 @@ app <- shinyApp(

f7Toast(
position = "top",
text = paste("Popup is", popupStatus)
text = paste("Popup1 is", popupStatus)
)
})
}
Expand Down
71 changes: 64 additions & 7 deletions man/f7Popup.Rd

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

65 changes: 65 additions & 0 deletions test.R
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
library(shiny)
library(shinyMobile)

searchModuleUI <- function(id) {
ns <- NS(id)
f7Tab(
title = "test",
tabName = "test",
f7Searchbar(id = ns("search1")),
f7VirtualList(
id = ns("vlist"),
strong = TRUE,
dividers = TRUE,
items = lapply(1:1000, function(i) {
f7VirtualListItem(
id = paste0("vlist-item-", i),
title = paste("Title", i),
subtitle = paste("Subtitle", i),
header = paste("Header", i),
footer = paste("Footer", i),
right = paste("Right", i),
paste0("Content", i),
media = img(style = "border-radius: 8px",
src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
)
})
)
)
}

shinyApp(
ui = f7Page(
title = "Virtual List",
f7TabLayout(
navbar = f7Navbar(
title = "SlamStats",
leftPanel = TRUE,
rightPanel = tagList(
tags$a(
class = "link icon-only panel-open",
`data-panel` = "right",
f7Icon("gear_alt")
)
)
),
panels = tagList(
f7Panel(title = "Left Panel",
side = "left",
"Blabla",
effect = "reveal"),
f7Panel(title = "Right Panel",
side = "right",
"Blabla",
effect = "push")
),
f7Tabs(
animated = TRUE,
searchModuleUI("test")
)
)
),
server = function(input, output) {

}
)
2 changes: 1 addition & 1 deletion tests/testthat/_snaps/f7Popup/popup-app-001.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"input": {
"popup": true
"popup1": true
}
}
Binary file modified tests/testthat/_snaps/f7Popup/popup-app-001_.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions tests/testthat/_snaps/f7Popup/popup-app-002.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"input": {
"popup": true,
"text": "balbla"
"popup1": true,
"text1": "balbla"
},
"output": {
"res": "[1] \"balbla\""
"res1": "NULL"
}
}
Binary file modified tests/testthat/_snaps/f7Popup/popup-app-002_.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion tests/testthat/_snaps/f7Popup/popup-app-003.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"input": {
"popup": false
"popup1": false
}
}
Binary file modified tests/testthat/_snaps/f7Popup/popup-app-003_.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions tests/testthat/_snaps/f7Popup/popup-app-004.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"input": {
"popup2": true
}
}
Binary file added tests/testthat/_snaps/f7Popup/popup-app-004_.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions tests/testthat/_snaps/f7Popup/popup-app-005.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"input": {
"popup2": true,
"text2": "balbla"
},
"output": {
"res2": "[1] \"balbla\""
}
}
Binary file added tests/testthat/_snaps/f7Popup/popup-app-005_.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions tests/testthat/_snaps/f7Popup/popup-app-006.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"input": {
"popup2": false
}
}
Binary file added tests/testthat/_snaps/f7Popup/popup-app-006_.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 39ba086

Please sign in to comment.