Adjust style of RegEx tab

- Fixed min-height for inputs and controls
- Inputs, controls and outputs won't overlap
- Build out HTML instead of using fillCol()
- Modified textInputCode() to allow additional items into input-group for library button
- Use input-group instead of form-group for textInputCode()

R/gadget_ui.R

@@ -30,18 +30,26 @@ regexplain_gadget_ui <- function(text = NULL, pattern = NULL, start_page = "Text
       miniTabPanel(
         "RegEx", icon = icon('terminal'),
         miniContentPanel(
-          fillCol(
-            flex = c(1, 3),
-            fillCol(
-              flex = c(1, 1),
-              fillRow(
-                flex = c(6, 1),
-                textInputCode('pattern', 'RegEx', width = "100%",
-                              value = pattern,
-                              placeholder = "Standard RegEx, e.g. \\w+_\\d{2,4}\\s+"),
-                tags$div(style = "margin-top: 23px; margin-left:6px;",
-                         actionButton("library_show", "Library", class = "btn-success"))
-              ),
+          tags$div(
+            id = "regexPage",
+            class = "container-fluid",
+            style = "height: 90%",
+            fluidRow(
+              id = "regexInput",
+              tags$div(
+                class = "col-12",
+                textInputCode(
+                  'pattern', 'RegEx', width = "100%",
+                  value = pattern,
+                  placeholder = "Standard RegEx, e.g. \\w+_\\d{2,4}\\s+",
+                  tags$span(class = "input-group-btn",
+                            actionButton("library_show", "Library", class = "btn-primary")
+                  )
+                )
+              )
+            ),
+            fluidRow(
+              id = "regexOptions",
               checkboxGroupInput(
                 'regex_options',
                 label = HTML(
@@ -72,8 +80,9 @@ regexplain_gadget_ui <- function(text = NULL, pattern = NULL, start_page = "Text
               )
             ),
             tags$div(
+              id = "regexResult",
               class = "gadget-result",
-              style = "overflow-y: scroll; height: 100%;",
+              style = "overflow-y: scroll; height: 100%; max-height: calc(100% - 90px);",
               htmlOutput('result')
             )
           )

R/shiny_modified_inputs.R

@@ -68,17 +68,18 @@ textAreaInputAlt <- function(inputId, label, value = "", width = NULL, height =
 #' @param width Width of `shiny-input-container` div.
 #' @family modified shiny inputs
 textInputCode <- function(inputId, label, value = "", width = NULL,
-                          placeholder = NULL) {
+                          placeholder = NULL, ...) {
   `%AND%` <- getFromNamespace("%AND%", "shiny")
   value <- shiny::restoreInput(id = inputId, default = value)
 
-  shiny::div(class = "form-group shiny-input-container",
+  shiny::div(class = "input-group shiny-input-container",
              style = if (!is.null(width)) paste0("width: ", shiny::validateCssUnit(width), ";"),
              label %AND% shiny::tags$label(label, `for` = inputId),
              shiny::tags$input(id = inputId, type="text", class="form-control", value=value,
                                style = 'font-family: "Monaco", "Inconsolata", monospace;',
                                autocomplete = "off", autocorrect = "off",
                                autocapitalize = "off", spellcheck = "false",
-                               placeholder = placeholder)
+                               placeholder = placeholder),
+             ...
   )
 }

inst/styles/gadget.css

@@ -65,7 +65,16 @@ dd {
 #help_text_selected > h3 {
   margin-top: 0px;
 }
-
+#regexOptions {
+  padding-left: 15px;
+}
+#regexInput {
+  padding: 0 15px 15px 10px;
+}
+#library_show {
+  margin-top: 25px;
+  padding-left: 10px;
+}
 .gadget-result {
   border: 1px solid #ccc;
   border-radius: 0.5rem;