update css

NEWS.md

@@ -1,5 +1,6 @@
 # teal.widgets 0.1.1.9009
 
+* Updated `standard_layout` function to contain class not id for each output block.
 * Added the `dim` slot to the list returned by the `plot_with_settings` module.
 
 ### New features

R/draggable_buckets.R

@@ -53,12 +53,10 @@ draggable_buckets <- function(input_id, label, elements = character(), buckets)
   elements_iterator$it <- 0
 
   shiny::tagList(
-    shiny::tags$head(shiny::singleton(
+    shiny::singleton(shiny::tags$head(
       shiny::includeScript(system.file("widgets/draggable_buckets.js", package = "teal.widgets"))
     )),
-    shiny::tags$head(shiny::singleton(
-      shiny::includeCSS(system.file("css/draggable_buckets.css", package = "teal.widgets"))
-    )),
+    include_css_files("draggable_buckets.css"),
     shiny::div(
       shiny::tags$span(label),
       render_unbucketed_elements(elements = elements, elements_iterator = elements_iterator, widget_id = input_id),

R/include_css_js.R

@@ -16,5 +16,5 @@ include_css_files <- function(pattern = "*") {
   if (length(css_files) == 0) {
     return(NULL)
   }
-  return(singleton(lapply(css_files, includeCSS)))
+  return(shiny::singleton(shiny::tags$head(lapply(css_files, shiny::includeCSS))))
 }

R/optionalInput.R

@@ -112,6 +112,7 @@ optionalSelectInput <- function(inputId, # nolint
     "show-subtext" = TRUE,
     "live-search" = ifelse(length(choices) > 10, TRUE, FALSE)
   )
+
   options <- if (!identical(options, list())) {
     c(options, default_options[setdiff(names(default_options), names(options))])
   } else {
@@ -141,25 +142,28 @@ optionalSelectInput <- function(inputId, # nolint
     ui[[3]] <- append(ui[[3]], list(div(class = "label-help", label_help)), after = 1)
   }
 
-  if (is.null(choices)) {
-    return(shinyjs::hidden(ui))
-  } else {
-    if (fixed) {
-      return(div(
-        shinyjs::hidden(ui),
-        tags$label(id = paste0(inputId, "_textonly"), class = "control-label", sub(":[[:space:]]+$", "", label)),
-        if (length(selected) > 0) {
-          tags$code(
-            id = paste0(inputId, "_valueonly"),
-            paste(selected, collapse = ", ")
-          )
-        },
-        label_help
-      ))
+  shiny::tagList(
+    include_css_files(pattern = "picker_input"),
+    if (is.null(choices)) {
+      shinyjs::hidden(ui)
     } else {
-      return(ui)
+      if (fixed) {
+        div(
+          shinyjs::hidden(ui),
+          tags$label(id = paste0(inputId, "_textonly"), class = "control-label", sub(":[[:space:]]+$", "", label)),
+          if (length(selected) > 0) {
+            tags$code(
+              id = paste0(inputId, "_valueonly"),
+              paste(selected, collapse = ", ")
+            )
+          },
+          label_help
+        )
+      } else {
+        ui
+      }
     }
-  }
+  )
 }
 
 #' Update `optionalSelectInput`

R/panel_group.R

@@ -68,9 +68,8 @@ panel_item <- function(title, ..., collapsed = TRUE, input_id = NULL) {
         `aria-expanded` = ifelse(collapsed, "false", "true"),
         icon("angle-down", class = "dropdown-icon"),
         tags$label(
-          class = "panel-title",
+          class = "panel-title inline",
           title,
-          style = "display:inline"
         )
       ),
       tags$div(

R/plot_with_settings.R

@@ -10,8 +10,8 @@ plot_with_settings_ui <- function(id) {
   ns <- NS(id)
 
   tagList(
-    tags$head(
-      tags$script(
+    shiny::singleton(shiny::tags$head(
+      shiny::tags$script(
         # nolint start
         sprintf(
           '$(document).on("shiny:connected", function(e) {
@@ -33,8 +33,8 @@ plot_with_settings_ui <- function(id) {
           ns("plot_modal_width") # session input$ variable name
         )
       )
-    ),
-    include_css_files("plot_modal"),
+    )),
+    include_css_files("plot_with_settings"),
     tags$div(
       id = ns("plot-with-settings"),
       tags$div(
@@ -404,8 +404,8 @@ plot_with_settings_srv <- function(id,
               )
             ),
             div(
-              type_download_ui(ns("modal_downbutton")),
-              style = "float:right;"
+              class = "float-right",
+              type_download_ui(ns("modal_downbutton"))
             ),
             div(
               align = "center",
@@ -477,7 +477,7 @@ type_download_ui <- function(id) {
       ),
       conditionalPanel(
         condition = paste0("input['", ns("file_name"), "'] != ''"),
-        downloadButton(ns("data_download"), label = character(0), class = "btn-sm", style = "width:100%")
+        downloadButton(ns("data_download"), label = character(0), class = "btn-sm w-full")
       )
     )
   )

R/standard_layout.R

@@ -44,9 +44,9 @@ standard_layout <- function(output,
 
   tag_output <- div(
     class = "well",
-    div(id = "pre-output", pre_output),
-    div(id = "output", output),
-    div(id = "post-output", post_output)
+    div(class = "pre-output", pre_output),
+    div(class = "output", output),
+    div(class = "post-output", post_output)
   )
 
   tag_enc_out <- if (!is.null(encoding)) {

R/table_with_settings.R

@@ -99,8 +99,8 @@ table_with_settings_srv <- function(id, table_r, show_hide_signal = reactive(TRU
           modalDialog(
             easyClose = TRUE,
             div(
-              type_download_ui_table(ns("modal_downbutton")),
-              style = "float:right;"
+              class = "float-right",
+              type_download_ui_table(ns("modal_downbutton"))
             ),
             uiOutput(ns("table_out_modal"), class = "table_out_container")
           )
@@ -165,7 +165,7 @@ type_download_ui_table <- function(id) {
       ),
       conditionalPanel(
         condition = paste0("input['", ns("file_name"), "'] != ''"),
-        downloadButton(ns("data_download"), label = character(0), class = "btn-sm", style = "width:100%")
+        downloadButton(ns("data_download"), label = character(0), class = "btn-sm w-full")
       )
     )
   )

R/verbatim_popup.R

@@ -23,9 +23,9 @@ verbatim_popup_ui <- function(id, button_label, ...) {
   checkmate::assert_string(button_label)
   ns <- shiny::NS(id)
   shiny::tagList(
-    shiny::tags$head(shiny::singleton(
-      shiny::includeScript(system.file("js/verbatim_popup.js", package = "teal.widgets"))
-    )),
+    shiny::singleton(
+      shiny::tags$head(shiny::includeScript(system.file("js/verbatim_popup.js", package = "teal.widgets")))
+    ),
     shiny::actionButton(ns("button"), label = button_label, ...)
   )
 }
@@ -101,31 +101,34 @@ button_click_observer <- function(click_event, copy_button_id, copied_area_id, m
   shiny::observeEvent(
     click_event(),
     handlerExpr = {
-      shiny::showModal(shiny::modalDialog(
-        shiny::tagList(
-          shiny::tags$div(
+      shiny::showModal(
+        shiny::modalDialog(
+          shiny::tagList(
+            include_css_files(pattern = "verbatim_popup"),
+            shiny::tags$div(
+              class = "mb-4",
+              shiny::actionButton(
+                copy_button_id,
+                "Copy to Clipboard",
+                onclick = paste0("copyToClipboard('", copied_area_id, "')")
+              ),
+              shiny::modalButton("Dismiss")
+            ),
+            shiny::tags$pre(id = copied_area_id, modal_content()),
+          ),
+          title = modal_title,
+          footer = shiny::tagList(
             shiny::actionButton(
               copy_button_id,
               "Copy to Clipboard",
-              onclick = paste0("copyToClipboard('", copied_area_id, "')")
+              onclick = paste0("'copyToClipboard(", copied_area_id, "')")
             ),
-            shiny::modalButton("Dismiss"),
-            style = "margin-bottom: 15px;"
-          ),
-          shiny::tags$pre(id = copied_area_id, modal_content()),
-        ),
-        title = modal_title,
-        footer = shiny::tagList(
-          shiny::actionButton(
-            copy_button_id,
-            "Copy to Clipboard",
-            onclick = paste0("'copyToClipboard(", copied_area_id, "')")
+            shiny::modalButton("Dismiss")
           ),
-          shiny::modalButton("Dismiss")
-        ),
-        size = "l",
-        easyClose = TRUE
-      ))
+          size = "l",
+          easyClose = TRUE
+        )
+      )
     }
   )
 }

R/white_small_well.R

@@ -15,9 +15,11 @@
 #'
 #' white_small_well(shiny::htmlOutput("summary"))
 white_small_well <- function(...) {
-  tags$div(
-    class = "well well-sm",
-    style = "background-color: white;",
-    ...
+  shiny::tagList(
+    include_css_files(pattern = "custom"),
+    tags$div(
+      class = "well well-sm bg-white",
+      ...
+    )
   )
 }

inst/css/custom.css

@@ -1,20 +1,5 @@
-/* to set the alignment of pickerInput dropdowns */
-.dropdown-menu.open {
-  width: 100%;
-}
+/* teal.widgets custom css */
 
-/* display waiting box at bottom right corner when Shiny is computing */
-.shinybusymessage {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 140px;
-  margin: 15px;
-  padding: 5px 0 5px 10px;
-  text-align: left;
-  font-weight: bold;
-  font-size: 100%;
-  color: #ffffff;
-  background-color: #347ab7;
-  z-index: 105;
-}
+.bg-white {
+  background-color: white;
+}

inst/css/draggable_buckets.css

@@ -1,3 +1,5 @@
+/* teal.widgets draggable css */
+
 .draggableBuckets {
   display: block;
   gap: 1rem;

inst/css/panel.css

@@ -1,2 +1,13 @@
-.panel-title { font-size: 14px; } /*same as everywhere else*/
-.panel-body { background-color: #f5f5f5; } /*same as panel-title*/
+/* teal.widgets panel css */
+
+.panel-title {
+  font-size: 14px;
+} /* same as everywhere else */
+
+.panel-body {
+  background-color: #f5f5f5;
+} /* same as panel-title */
+
+.inline {
+  display: inline;
+}

inst/css/picker_input.css

@@ -1,5 +1,6 @@
+/* teal.widgets picker_input css */
 
 /* to set the alignment of pickerInput dropdowns */
 .dropdown-menu.open {
   width: 100%;
-}
+}

inst/css/plot_with_settings.css

@@ -0,0 +1,62 @@
+/* teal.widgets plot_with_settings css */
+
+.well .output {
+  position: relative;
+}
+
+.plot-settings-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: flex-end;
+  margin-bottom: -15px;
+}
+
+.plot-settings-buttons .btn {
+  font-size: inherit;
+  background: inherit;
+  border: none;
+  background-color: transparent;
+}
+
+.plot-settings-buttons .dropdown .dropdown-toggle .caret {
+  display: none;
+}
+
+.plot-modal .modal .modal-dialog {
+  width: 90%;
+}
+
+.plot_out_container {
+  overflow-x: auto;
+}
+
+.plot_out_container div:nth-child(1) {
+  margin-top: 30px;
+}
+
+.plot-modal .modal .modal-dialog .modal-content .modal-body .plot-modal-sliders {
+  overflow: hidden;
+}
+
+.plot-modal .modal .modal-dialog .modal-content .modal-body .plot-modal-sliders div:nth-child(1) {
+  float: left;
+  width: 40%;
+}
+
+.plot-modal .modal .modal-dialog .modal-content .modal-body .plot-modal-sliders div:nth-child(2) {
+  float: right;
+  width: 40%;
+}
+
+.dropdown-menu {
+  background: rgb(255, 255, 255, 1);
+}
+
+.float-right {
+  float: right;
+}
+
+.w-full {
+  width: 100%;
+}