Allow multiple rows and adjust row height when all panels in a row are collapsed

It would be great to better manage the case of multiple rows and adjust row height when all panels are collapsed in a given row. Let's say we want 5 panels: 3 panels (A, B,C) on first row, and 2 panels (D, E) on second row. These 5 panels can be represented like this:

| A | B | C |
|_ D _|_ E _|

If we collapse B and C we should get:

| A |||
|_ D _|_ E _|

or maybe (with widened A):

|   A   |||
|_ D _|_ E _|

However, if we collapse A, B and C we should get:

...
|_D_|_E_|

(where the 3 periods represent 3 small icons that allow to expand A, B and C), instead of:

||||
|_D_|_E_|

In effect, when the user collapses all panels in a row, it is fair to assume this user wants to save space on the screen and have a better use of the screen space; so letting one row get smaller (in the vertical dimension) makes sense. It would be particularly helpfull if we initially have:

| A |||
|_D_|_E_|
|__  F  __|

and we want to have a closer look comparing A and F:

| A |||
...
|__  F  __|

(the height of the second row being much smaller). The vertical behaviour would then bear some resemblance with the example at https://shiny.rstudio.com/gallery/nutrition-calculator.html (note that this example lacks the horizontal collapsing advantages of shinypanels).

The example (very draft) code below is very quick and dirty, using fluidPage() and fluidRow() combined with shinypanels functions (which does not work well together). Still hopefully it'll help discussion.

This is an example (very draft) code which illustrates what I mean:

library(shiny)
library(shinypanels)

# Adapted from https://rdrr.io/cran/shinypanels/src/inst/examples/basic-panel.R

styles <- "
.topbar {
    padding: 20px 55px;
    background-color: #2e4856;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
}

.top_title {
  margin-left: 24px;
  display: flex;
}

.topbar__img {
  height: auto;
  width: 72px;
}

.top_line {
  border-left: 1px solid #ffffff;
  margin-left: 10px;
  font-weight: 700;
}

.topbar-modal, .tex_sub {
  font-size: 14px;
  color: #fff;
}

@media only screen and (min-width: 768px) {
  .topbar, .tex_sub {
    font-size: 20px;
  }
}

@media only screen and (min-width: 1024px) {
  .topbar, .tex_sub {
    font-size: 32px;
  }
}
"

ui <- 

  fluidPage(

  fluidRow(

  panelsPage(
  styles = styles,
  header = div(style="", class="topbar",
               img(class="topbar__img", src = "https://datasketch.github.io/landing-gcs/images/logo.webp"),
               HTML("<div class = 'top_title'> HERRAMIENTA <div class = 'top_line'> <div style = 'margin-left: 10px;'> ESTIMACIÓN DE BIODIVERSIDAD Y <span class = 'tex_sub'>CAPTURA DE CO<sub>2</sub></span></div></div></div>"),
               modalButton(id = 'id-but-mod', modal_id = 'test', label = HTML('<i class="fa fa-info-circle" style="font-size:31px;color:#fff"></i>'))
  ),
  modal(id = 'test', title = 'Test modal title', p('Modal ipsum')),
  panel(title = "First Panel", color = "chardonnay", collapsed = FALSE, width =  400,
        head = h2("Head"),
        body = div(
          h2("Body"),
          selectizeInput("selector", "Select One", choices = c("First", "Second"), selected = "Fist"),
          textInput("text", "Text input"),
          radioButtons("radioButtons1", "Radio Buttons", choices = c("First", "Second"), inline = TRUE),
          radioButtons("radioButtons2", "Radio Buttons", choices = c("First", "Second"), inline = FALSE),
          img(src="https://placeimg.com/640/180/any"),
          modalButton(modal_id = 'test', label = 'Test modal')
        ),
        footer = NULL
  ),
  panel(title = "Visualize", color = "magenta", collapsed = FALSE,
        head = h2("Head 2"),
        body = list(
          box(title = "New box",
              collapsed = FALSE,
              p("Lorem ipsum 3"),
              selectInput("selector2", "Select", choices = 1980:2019)
          ),
          h2(textOutput("selected")),
          img(src="https://placeimg.com/640/180/nature")
        ),
        footer = list(
          div(class="panel-title", "Tipos de visualización"),
          h3("This is a footer")
        )
  ),

  panel(title = "Third panel", color = "blue", collapsed = FALSE,
        head = h2("Head 3"),
        body = list(
          plotOutput(outputId = "distPlot")
        ),
        footer = list(
          div(class="panel-title", "Title for footer"),
          h3("Footer text.")
        )
  )
  )
),

fluidRow(
  panelsPage(
  panel(title = "Panel 4 (second row)", color = "magenta", collapsed = FALSE,
        head = h2("Head 4"),
        body = list(
          box(title = "New box",
              collapsed = FALSE,
              p("Lorem ipsum 3"),
              selectInput("selector4", "Select", choices = 1980:2019)
          ),
          h2(textOutput("selected")),
          img(src="https://placeimg.com/640/180/nature")
        ),
        footer = list(
          div(class="panel-title", "Tipos de visualización"),
          h3("This is a footer")
        )
  ),

  panel(title = "Panel 5 (second row)", color = "blue", collapsed = FALSE,
        head = h2("Head 5"),
        body = list(
          plotOutput(outputId = "distPlot")
        ),
        footer = list(
          div(class="panel-title", "Title for footer"),
          h3("Footer text.")
        )
      )
    )
  )
)

server <- function(input, output, session) {

  output$selected <- renderText({
    input$selector
  })

  output$distPlot <- renderPlot({
    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = 11
    )
    hist(x, breaks = bins,
         col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")

  })

}
shinyApp(ui, server)

datasketch / shinypanels

Allow multiple rows and adjust row height when all panels in a row are collapsed #97