Use flipBox without an image

[cthomson8]

Is it possible to use flipBox without an image? I have tried using main_img = NULL but this produces a distorted green circle with the word "Avatar". I want to be able to use icons (svgs) in the main_img field but these get filled with the same green colour.

flipBox(
            id = 1,
            main_img = "https://image.flaticon.com/icons/svg/42/42877.svg",
            header_img = "https://image.flaticon.com/icons/svg/119/119595.svg",
            front_title = "John Doe",
            back_title = "About John",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
            sed do eiusmod tempor incididunt ut labore et dolore magna 
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
            ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit 
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
            occaecat cupidatat non proident, sunt in culpa qui officia 
            deserunt mollit anim id est laborum",
            fluidRow(
              dashboardLabel("Label 1", status = "info"),
              dashboardLabel("Label 2", status = "success"),
              dashboardLabel("Label 3", status = "warning"),
              dashboardLabel("Label 4", status = "primary"),
              dashboardLabel("Label 5", status = "danger")
            ),
            hr(),
            fluidRow(
              column(
                width = 4,
                align = "center",
                starBlock(grade = 5),
                starBlock(grade = 5, color = "olive"),
                starBlock(grade = 1, color = "maroon"),
                starBlock(grade = 3, color = "teal")
              ),
              column(
                width = 4,
                align = "center",
                appButton(
                  url = "http://google.com",
                  label = "Users",
                  icon = "fa fa-users",
                  enable_badge = TRUE,
                  badgeColor = "purple",
                  badgeLabel = 891
                ),
                appButton(
                  label = "Edit",
                  icon = "fa fa-edit",
                  enable_badge = FALSE,
                  badgeColor = NULL,
                  badgeLabel = NULL
                )
              )
            ),
            back_content = tagList(
              column(
                width = 12,
                align = "center",
                sliderInput(
                  "obs", 
                  "Number of observations:",
                  min = 0, 
                  max = 1000, 
                  value = 500
                )
              ),
              plotOutput("distPlot")
            ) )

[jimbrig]

@cthomson8

We made a (preliminary) version of this function in our open-source tychobratools package for this purpose. See the flip_box function's code for more details.

I have also attached a quick demonstration GIF here as well.

@DivadNojnarg let me know if you would be interested and I will dedicate some time to cleaning up the code in the future and can fork>PR if you want to implement this here.

[DivadNojnarg]

Hi Jim, feel free to PR! This is a neat feature

[jimbrig]

@DivadNojnarg just submitted a PR for you to review. Let me know if you have any questions or concerns.

[DivadNojnarg]

Closing as per latest update:

library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      fluidRow(
        column(
          width = 6,
          uiOutput("active_side"), 
          flipBox(
            id = "myflipbox", 
            trigger = "hover",
            width = 12,
            front = div(
              class = "text-center",
              h1("Flip on hover"),
              img(
                src = "https://image.flaticon.com/icons/svg/149/149076.svg",
                height = "300px",
                width = "100%"
              )
            ),
            back = div(
              class = "text-center",
              height = "300px",
              width = "100%",
              h1("Flip on hover"),
              p("More information....")
            )
          )
        ),
        column(
          width = 6,
          uiOutput("active_side_2"),
          flipBox(
            id = "myflipbox2",
            width = 12,
            front = div(
              class = "text-center",
              h1("Flip on click"),
              img(
                src = "https://image.flaticon.com/icons/svg/149/149076.svg",
                height = "300px",
                width = "100%"
              )
            ),
            back = div(
              class = "text-center",
              height = "300px",
              width = "100%",
              h1("Flip on click"),
              p("More information....")
            )
          )
        )
      )
    )
  ),

  server = function(input, output, session) {
    output$active_side <- renderUI({
      side <- if (input$myflipbox) "front" else "back"
      dashboardBadge(side, color = "blue")
    })

    output$active_side_2<- renderUI({
      side <- if (input$myflipbox2) "front" else "back"
      dashboardBadge(side, color = "blue")
    })
  }
 )