f7Button has icon param

NEWS.md

@@ -46,7 +46,7 @@
 ## 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.
+- `f7Button()` get a new `tonal` style. It is also possible to pass `icon` as parameter and update the icon with `updateF7Button`.
 - `f7Card()` get a new `raised` and `divider` parameters.
 - `f7CheckboxGroup()` has a new `position` parameter to control
 the check icon position. Default to left.

R/f7Button.R

@@ -16,6 +16,7 @@
 #' @param active Button active state. Default to FALSE. This is useful when
 #' used in \link{f7Segment} with the strong parameter set to TRUE.
 #' @param tonal Button tonal style. Default to FALSE
+#' @param icon Button icon. Expect link{f7Icon}.
 #'
 #' @author David Granjon, \email{dgranjon@@ymail.com}
 #'
@@ -25,7 +26,7 @@
 f7Button <- function(inputId = NULL, label = NULL, href = NULL,
                      color = NULL, fill = TRUE, outline = FALSE,
                      shadow = FALSE, rounded = FALSE, size = NULL,
-                     active = FALSE, tonal = FALSE) {
+                     active = FALSE, tonal = FALSE, icon = NULL) {
   if (!is.null(inputId) && !is.null(href)) stop("Cannot set inputId and src at the same time.")
 
   # outline and fill are incompatible by definition
@@ -56,7 +57,11 @@ f7Button <- function(inputId = NULL, label = NULL, href = NULL,
     class = buttonCl,
     href = if (!is.null(href)) href else NULL,
     `data-val` = if (!is.null(inputId)) value else NULL,
-    label
+    icon,
+    shiny::tags$span(
+      class = "f7-button-label",
+      label
+    )
   )
 }
 
@@ -74,17 +79,24 @@ f7Button <- function(inputId = NULL, label = NULL, href = NULL,
 updateF7Button <- function(inputId, label = NULL, color = NULL,
                            fill = NULL, outline = NULL, shadow = NULL,
                            rounded = NULL, size = NULL, tonal = NULL,
+                           icon = NULL,
                            session = shiny::getDefaultReactiveDomain()) {
   message <- dropNulls(
     list(
-      label = label,
+      label = as.character(
+        shiny::tags$span(
+          class = "f7-button-label",
+          label
+        )
+      ),
       color = color,
       fill = fill,
       outline = outline,
       raised = shadow,
       round = rounded,
       size = size,
-      tonal = tonal
+      tonal = tonal,
+      icon = as.character(icon)
     )
   )
   session$sendInputMessage(inputId, message)

inst/examples/button/app.R

@@ -15,7 +15,8 @@ app <- shiny::shinyApp(
           outline = FALSE,
           fill = TRUE,
           shadow = FALSE,
-          rounded = FALSE
+          rounded = FALSE,
+          icon = f7Icon("speedometer")
         )
       )
     )
@@ -31,7 +32,8 @@ app <- shiny::shinyApp(
         outline = TRUE,
         fill = FALSE,
         tonal = TRUE,
-        size = "large"
+        size = "large",
+        icon = f7Icon("speaker_zzz")
       )
     })
   }

inst/examples/strava/app.R

@@ -64,10 +64,10 @@ brochureApp(
       ),
       tags$a(
         href = "#",
-        class = "link sheet-open",
+        class = "link tab-link sheet-open",
         f7Icon("smallcircle_fill_circle
 "),
-        "Record",
+        span(class = "tabbar-label", "Record"),
         `data-sheet` = "#record"
       ),
       f7TabLink(

inst/examples/strava/pages/messages_page.R

@@ -1,20 +1,5 @@
 new_message_ui <- function(id) {
   ns <- shiny::NS(id)
-
-  user_choices <- f7CheckboxGroup(
-    ns("message_user"),
-    "Contacts",
-    position = "right",
-    choices = colnames(mtcars)[c(1, 3)],
-    style = list(
-      inset = FALSE,
-      outline = FALSE,
-      dividers = TRUE,
-      strong = TRUE
-    )
-  )
-  user_choices[[2]] <- f7Found(user_choices[[2]])
-
   tagAppendAttributes(
     f7Link(
       href = "#",
@@ -29,19 +14,20 @@ new_message <- function(id) {
   moduleServer(
     id,
     function(input, output, session) {
+      ns <- session$ns
+
       observeEvent(input$new_message, {
         f7Popup(
           id = "new-message-popup",
           title = "New Message",
-          f7Searchbar(
-            id = NULL,
-            placeholder = "Search people who follow you"
-          ),
           # TO DO: fix broken search
-          user_choices,
-          f7Block(
-            p("No result found for your search")
-          ) %>% f7NotFound()
+          f7SmartSelect(
+            ns("message_user"),
+            "Contacts",
+            choices = colnames(mtcars)[c(1, 3)],
+            openIn = "popup",
+            multiple = TRUE
+          )
         )
       })
     }

inst/examples/strava/pages/profile_page.R

@@ -25,7 +25,56 @@ profile_page <- function() {
         ),
         tags$div(
           class = "page-content",
-          "TBD"
+          f7List(
+            mode = "media",
+            strong = TRUE,
+            f7ListItem(
+              title = tags$strong(
+                paste(
+                  me$firstname,
+                  me$lastname
+                )
+              ),
+              subtitle = paste(
+                me$city,
+                me$state,
+                sep = ", "
+              ),
+              media = img(
+                src = me$profile,
+                style = "border-radius: 50%;",
+                width = "100%"
+              ),
+              # p(me$bio),
+              f7Grid(
+                cols = 4,
+                f7Chip(
+                  label = paste("Following:", me$friend),
+                  icon = f7Icon("person_3_fill")
+                ),
+                f7Chip(
+                  label = paste("Followers:", me$follower),
+                  icon = f7Icon("person_3_fill")
+                ),
+                f7Button(
+                  "share",
+                  "Share",
+                  icon = f7Icon("square_arrow_up", style = "font-size: 18px;"),
+                  tonal = TRUE,
+                  fill = FALSE,
+                  size = "small"
+                ),
+                f7Button(
+                  "edit",
+                  "Edit",
+                  icon = f7Icon("pencil", style = "font-size: 18px;"),
+                  tonal = TRUE,
+                  fill = FALSE,
+                  size = "small"
+                )
+              )
+            )
+          )
         )
       )
     }

srcjs/bindings/buttonInputBinding.js

@@ -50,13 +50,22 @@ $.extend(f7ButtonInputBinding, {
       }
     }
 
-    // retrieve current label and icon
-    var label = $el.text();
-
+    // retrieve current label
+    var label = $el.find('.f7-button-label');
     // update the requested properties
-    if (data.hasOwnProperty('label')) label = data.label;
-    // produce new html
-    $el.html(label);
+    if (data.hasOwnProperty('label')) {
+      label.replaceWith(data.label);;
+    } 
+
+    // Update icon
+    var icon = $el.find('.f7-icons');
+    if (data.hasOwnProperty('icon')) {
+      if (icon.length === 0) {
+        $(`${data.icon}`).insertBefore(label);
+      } else {
+        icon.replaceWith(data.icon);
+      }
+    }
   },
   subscribe: function(el, callback) {
     $(el).on("click.f7ButtonInputBinding", function(e) {