use bslib layout method

gaospecial · Dec 28, 2023 · 7b65eab · 7b65eab
1 parent f0f046d
commit 7b65eab
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 33 deletions.
diff --git a/inst/shiny/shinyApp.R b/inst/shiny/shinyApp.R
@@ -77,14 +77,14 @@ bs_theme = bs_theme |>
 
 # NATIVE SHINY UI ------------------------------------------------------------------
 
-ui = fluidPage(
+ui = page_sidebar(
   theme = bs_theme(version = 5),
   tags$head(
     tags$link(rel = "stylesheet", type = "text/css", href = "shinyApp.css")
   ),
-  titlePanel("ggVennDiagram Shiny App"),
-  sidebarLayout(
-    sidebarPanel(
+  title = "ggVennDiagram Shiny App",
+  sidebar = sidebar(
+    width = "30%",
       # Set number
       sliderInput(
         inputId = 'nsets',
@@ -103,29 +103,29 @@ ui = fluidPage(
       accordion(
         open = FALSE,
         accordion_panel(
-        "Label Controls",
-        numericInput("set_size", "size of set label", 5, min = 0, max = 10, step = 1),
-        selectInput("label", "mode",c("both", "count", "percent", "none"), selected = "both"),
-        selectInput("label_geom", 'geom', c("text", "label"), selected = "label"),
-        numericInput("label_alpha", "alpha", 0.5, min = 0, max = 1, step = 0.1),
-        colourInput("label_color", "color", value = "white"),
-        numericInput("label_size", "size", 3),
-        numericInput("label_percent_digit", "digit", 0, step = 1, min = 0, max = 3),
-        numericInput("label_txtWidth", 'text width', 40, step = 1, min = 1, max = 100)
-      ),
-      accordion_panel(
-        "Edge Controls",
-        selectInput("edge_lty", "line type", c("solid", "dashed", "dotted", "dotdash", "longdash", "twodash"), selected = "solid"),
-        numericInput("edge_size", 'size', 1, step = 1, min = 0, max = 10)
-      ),
-      accordion_panel(
-        "Upset Controls",
-        numericInput("nintersects", "nintersects", 20, min = 1, max = 100, step = 1),
-        selectInput("order.intersect.by", "order of intersect",c("size", "name", "none"), selected = "none"),
-        selectInput("order.set.by", 'order of set', c("size", "name", "none"), selected = 'none'),
-        numericInput("relative_height", 'relative height', 3, min = 2, max = 6, step = 0.1),
-        numericInput('relative_width', 'relative width', 0.3, min = 0.1, max = 1, step = 0.1)
-      ),
+          "Label Controls",
+          numericInput("set_size", "size of set label", 5, min = 0, max = 10, step = 1),
+          selectInput("label", "mode",c("both", "count", "percent", "none"), selected = "both"),
+          selectInput("label_geom", 'geom', c("text", "label"), selected = "label"),
+          numericInput("label_alpha", "alpha", 0.5, min = 0, max = 1, step = 0.1),
+          colourInput("label_color", "color", value = "white"),
+          numericInput("label_size", "size", 3),
+          numericInput("label_percent_digit", "digit", 0, step = 1, min = 0, max = 3),
+          numericInput("label_txtWidth", 'text width', 40, step = 1, min = 1, max = 100)
+        ),
+        accordion_panel(
+          "Edge Controls",
+          selectInput("edge_lty", "line type", c("solid", "dashed", "dotted", "dotdash", "longdash", "twodash"), selected = "solid"),
+          numericInput("edge_size", 'size', 1, step = 1, min = 0, max = 10)
+        ),
+        accordion_panel(
+          "Upset Controls",
+          numericInput("nintersects", "nintersects", 20, min = 1, max = 100, step = 1),
+          selectInput("order.intersect.by", "order of intersect",c("size", "name", "none"), selected = "none"),
+          selectInput("order.set.by", 'order of set', c("size", "name", "none"), selected = 'none'),
+          numericInput("relative_height", 'relative height', 3, min = 2, max = 6, step = 0.1),
+          numericInput('relative_width', 'relative width', 0.3, min = 0.1, max = 1, step = 0.1)
+        ),
       ),
 
 
@@ -147,7 +147,7 @@ ui = fluidPage(
       actionButton("plot_btn", "Plot Now!"),
     ),
 
-    mainPanel = mainPanel(
+    card(
       uiOutput('plot_note'),
 
       # plot
@@ -156,22 +156,27 @@ ui = fluidPage(
       # download button
       conditionalPanel(
         condition = "output.plot",
-        downloadButton("download_png", "Download as PNG"),
-        downloadButton("download_pdf", "Download as PDF")
+        uiOutput("download_btns")
+
       )
 
     )
-  )
-
 )
 
 
 
+
 # SERVER SIDE FUNCTIONS ---------------------------------------------------
 
 
 server = function(input, output, session) {
 
+  output$download_btns = renderUI({
+    # list = lapply(c())
+    tagList(downloadButton("download_png", "Download as PNG"),
+    downloadButton("download_pdf", "Download as PDF"))
+  })
+
   # 动态生成文本输入框的UI
   output$text_inputs = renderUI({
     # 生成 nsets 个文本输入框

diff --git a/inst/shiny/www/shinyApp.css b/inst/shiny/www/shinyApp.css
@@ -1,4 +1,4 @@
-.form-control {
+.form-control input {
   padding: 0rem;
 }