Merge pull request #25 from atusy/fuzzyhelp-resize

feat(fuzzyhelp): improve Shiny UI
atusy · May 5, 2024 · a4ed5a5 · a4ed5a5
2 parents 70c9a60 + a1734dc
commit a4ed5a5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 33 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -1,6 +1,11 @@
-# felp 0.5.1
-
-- Fixed `fuzzyhelp()` not showing preview on RStudio Server.
+# felp 0.6.0
+
+- Fixed `fuzzyhelp()` not showing preview on RStudio Server (#23).
+- Remove **covr** and **rmarkdown** from suggests (#24).
+- Improved Shiny UI of `fuzzyhelp()` (#25)
+    - resize with CSS instead of JS so that resize works properly on Chrome and Firefox
+    - increase height of help viewer
+    - theming TOC to be striped, be dense, and to highlight hovered-row
 
 # felp 0.5.0
 

diff --git a/R/fuzzyhelp.R b/R/fuzzyhelp.R
@@ -277,42 +277,17 @@ create_ui <- function(query = "", background = FALSE) {
     miniUI::miniContentPanel(
       shiny::textInput(
         "query",
-        label = "Search query",
+        label = NULL,
+        placeholder = "Search query",
         value = paste(query, collapse = " "),
         width = "100%"
       ),
       reactable::reactableOutput("tocViewer", width = "100%", height = "200px"),
-      htmltools::tags$div(
-        id = "bar",
-        style = paste(
-          "width: 100%; height: 8px; cursor: row-resize;",
-          "background-color: transparent;"
-        ),
-        draggable = "true"
-      ),
       shiny::uiOutput("helpViewer"),
-      style = "display: grid; grid-template-rows: auto auto auto 1fr"
+      style = "display: grid; grid-template-rows: auto auto 1fr"
     ),
     htmltools::tags$style("
-      #tocViewer {
-        overflow: hidden;
-      }
-    "),
-    htmltools::tags$script("
-      (function(){
-        // Resize tocViewer
-        const toc = document.getElementById('tocViewer');
-        const bar = document.getElementById('bar');
-        let screenY, tocHeight
-        bar.addEventListener('dragstart', function() {
-          screenY = window.event.screenY;
-          tocHeight = toc.getBoundingClientRect().height;
-        });
-        bar.addEventListener('drag', function() {
-          const diff = window.event.screenY - screenY;
-          toc.style.height = tocHeight + diff + 'px';
-        });
-      })();
+      #tocViewer { overflow: hidden; resize: vertical; margin-bottom: 15px }
     "),
     style = "display: grid; grid-template-rows: auto 1fr; height: 100vh"
   )
@@ -350,7 +325,14 @@ create_server <- function(
         defaultPageSize = 20,
         selection = "single",
         defaultSelected = if (nrow(toc_matched) != 0) 1L,
-        onClick = "select"
+        onClick = "select",
+        striped = TRUE,
+        highlight = TRUE,
+        theme = reactable::reactableTheme(
+          cellPadding = "2px",
+          style = list(fontSize = "0.9em"),
+          highlight = "beige"
+        )
       )
     }))
     reactiveSelection <- shiny::reactive({