Merge branch 'f7-v8.3.2' of github.com:RinteRface/shinyMobile into f7…

…-v8.3.2

R/f7Button.R

@@ -16,7 +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}.
+#' @param icon Button icon. Expect \link{f7Icon}.
 #'
 #' @author David Granjon, \email{dgranjon@@ymail.com}
 #'

R/update-app.R

@@ -15,6 +15,14 @@
 #'
 #' @export
 updateF7App <- function(options, session = shiny::getDefaultReactiveDomain()) {
+
+  # if color in options, convert color to hex
+  if (!is.null(options$color)) {
+    if (options$color %in% getF7Colors()) {
+      options$color <- colorToHex(options$color)
+    }
+  }
+
   sendCustomMessage("update-app", options, session)
 }
 

inst/examples/gallery/app.R

@@ -63,7 +63,24 @@ shinyApp(
         f7Panel(
           title = "Right Panel",
           side = "right",
-          "Blabla",
+          f7Radio(
+            inputId = "theme",
+            label = "Theme",
+            choices = c("md", "ios"),
+            selected = "md"
+          ),
+          f7Radio(
+            inputId = "dark",
+            label = "Mode",
+            choices = c("dark", "light"),
+            selected = "dark"
+          ),
+          f7Radio(
+            inputId = "color",
+            label = "Color",
+            choices = getF7Colors(),
+            selected = "primary"
+          ),
           effect = "floating",
           options = list(swipe = TRUE)
         )
@@ -124,6 +141,34 @@ shinyApp(
     )
   ),
   server = function(input, output, session) {
+
+    # update theme
+    observeEvent(input$theme, ignoreInit = TRUE, {
+      updateF7App(
+        options = list(
+          theme = input$theme
+        )
+      )
+    })
+
+    # update mode
+    observeEvent(input$dark, ignoreInit = TRUE, {
+      updateF7App(
+        options = list(
+          dark = ifelse(input$dark == "dark", TRUE, FALSE)
+        )
+      )
+    })
+
+    # update color
+    observeEvent(input$color, ignoreInit = TRUE, {
+      updateF7App(
+        options = list(
+          color = input$color
+        )
+      )
+    })
+
     # input validation
     observe({
       validateF7Input(inputId = "text", info = "Whatever")

inst/examples/update_app/app.R

@@ -70,8 +70,9 @@ app <- shinyApp(
   server = function(input, output, session) {
     observeEvent(input$goButton, {
       f7Dialog(
+        id = "test2",
         title = "Dialog title",
-        text = "This is an alert dialog"
+        text = "This is an alert dialog",
         type = "confirm"
       )
     })

srcjs/handlers/updateApp.js

@@ -10,6 +10,8 @@ $(function() {
       app.setColorTheme(message.color);
     }
 
+    // Note that app.setDarkMode does not work in tab layout
+    // That's why we need to manually add/remove dark/light class
     if (message.hasOwnProperty("dark")) {
       if (message.dark) {
         $("html").addClass("dark");
@@ -36,11 +38,6 @@ $(function() {
       }
     }
 
-    // Remove color, dark and theme params from message
-    delete message.color;
-    delete message.dark;
-    delete message.theme;
-
     // Merge new config to existing one
     app.utils.extend(app.params, message);
   });

vignettes/update-app.Rmd

@@ -143,9 +143,10 @@ shinyApp(
   }
 )
 ```
-TODO: shinylive example
 
-Note that the given `color` should be a valid hexadecimal color. You can call `updateF7App` multiple times, and the app will update the given configuration settings accordingly.
+Note that the color can both be a color of `getF7Colors()` (like "primary", "pink" or  "teal") or a hexadecimal color. You can call `updateF7App` multiple times, and the app will update the given configuration settings accordingly.
+
+TODO: shinylive example
 
 ### Updating component configuration