From d3e5b0db4c553dd06b25d61d5b32ecb6ca982bac Mon Sep 17 00:00:00 2001
From: Martin Elff <martin@elff.eu>
Date: Thu, 14 Nov 2024 10:43:49 +0100
Subject: [PATCH] Rectangular scrollers

---
 pkg/R/widget-virtual-table.R     |  61 +++++++++--------
 pkg/inst/css/virtable-widget.css | 112 +++++++++++++++++++++++++++++++
 2 files changed, 144 insertions(+), 29 deletions(-)

diff --git a/pkg/R/widget-virtual-table.R b/pkg/R/widget-virtual-table.R
index b7b1694..66ae938 100644
--- a/pkg/R/widget-virtual-table.R
+++ b/pkg/R/widget-virtual-table.R
@@ -44,6 +44,9 @@ virtable_widget <- function(x,
                                readout=FALSE,
                                continuous_update=continuous_update)
     
+    row_control$add_class("row-control")
+    col_control$add_class("col-control")
+
     scroll_up_button <- Button(icon="angle-up")
     scroll_up_button$add_class("scroll-up-button")
     scroll_down_button <- Button(icon="angle-down")
@@ -64,26 +67,26 @@ virtable_widget <- function(x,
     page_right_button <- Button(icon="angle-double-right")
     page_right_button$add_class("page-right-button")   
     
-    # col_plus_button <- Button(icon="plus")
-    # col_plus_button$add_class("col-plus-button")
-    # col_minus_button <- Button(icon="minus")
-    # col_minus_button$add_class("col-minus-button")
+    col_plus_button <- Button(icon="plus")
+    col_plus_button$add_class("col-plus-button")
+    col_minus_button <- Button(icon="minus")
+    col_minus_button$add_class("col-minus-button")
     
-    # row_plus_button <- Button(icon="plus")
-    # row_plus_button$add_class("row-plus-button")
-    # row_minus_button <- Button(icon="minus")
-    # row_minus_button$add_class("row-minus-button")
+    row_plus_button <- Button(icon="plus")
+    row_plus_button$add_class("row-plus-button")
+    row_minus_button <- Button(icon="minus")
+    row_minus_button$add_class("row-minus-button")
     
-    row_scrollbar <- VBox(#row_plus_button,
-                          #row_minus_button,
+    row_scrollbar <- VBox(row_plus_button,
+                          row_minus_button,
                           page_up_button,
                           scroll_up_button,
                           row_control,
                           scroll_down_button,
                           page_down_button)
     
-    col_scrollbar <- HBox(#col_plus_button,
-                          #col_minus_button,
+    col_scrollbar <- HBox(col_plus_button,
+                          col_minus_button,
                           page_left_button,
                           scroll_left_button,
                           col_control,
@@ -218,18 +221,18 @@ virtable_widget <- function(x,
         row_control$value <- 100*row_prop_new
     }
     
-    # col_pagesize_increase <- function(...){
-    #     col_pagesize_control$value <- min(col_pagesize_control$value + 1L,ncol(x))
-    # }
-    # col_pagesize_decrease <- function(...){
-    #     col_pagesize_control$value <- max(col_pagesize_control$value - 1L,1L)
-    # }
-    # row_pagesize_increase <- function(...){
-    #     row_pagesize_control$value <- min(row_pagesize_control$value + 1L,nrow(x))
-    # }
-    # row_pagesize_decrease <- function(...){
-    #     row_pagesize_control$value <- max(row_pagesize_control$value - 1L,1L)
-    # }
+    col_pagesize_increase <- function(...){
+        col_pagesize_control$value <- min(col_pagesize_control$value + 1L,ncol(x))
+    }
+    col_pagesize_decrease <- function(...){
+        col_pagesize_control$value <- max(col_pagesize_control$value - 1L,1L)
+    }
+    row_pagesize_increase <- function(...){
+        row_pagesize_control$value <- min(row_pagesize_control$value + 1L,nrow(x))
+    }
+    row_pagesize_decrease <- function(...){
+        row_pagesize_control$value <- max(row_pagesize_control$value - 1L,1L)
+    }
     
     update_content <- function(...){
         row_pagesize <- min(row_pagesize_control$value,nrow(x))
@@ -302,11 +305,11 @@ virtable_widget <- function(x,
     page_up_button$on_click(page_up)
     page_down_button$on_click(page_down)    
     
-    # col_plus_button$on_click(col_pagesize_increase)
-    # col_minus_button$on_click(col_pagesize_decrease)
+    col_plus_button$on_click(col_pagesize_increase)
+    col_minus_button$on_click(col_pagesize_decrease)
 
-    # row_plus_button$on_click(row_pagesize_increase)
-    # row_minus_button$on_click(row_pagesize_decrease)
+    row_plus_button$on_click(row_pagesize_increase)
+    row_minus_button$on_click(row_pagesize_decrease)
      
     display(get_grid_table_css())
     display(get_virtable_widget_css())
@@ -328,7 +331,7 @@ fmt_tab_section <- function(x,i,j) UseMethod("fmt_tab_section")
 #' @export
 fmt_tab_section.default <- function(x,i,j) format(x[i,j])
 
-#' @describeIn virtable_widget Dibble method
+#' @describeIn virtable_widget Tibble method
 #' @export
 fmt_tab_section.tbl_df <- function(x,i,j)  
     format(
diff --git a/pkg/inst/css/virtable-widget.css b/pkg/inst/css/virtable-widget.css
index 3884a27..f2d53e7 100644
--- a/pkg/inst/css/virtable-widget.css
+++ b/pkg/inst/css/virtable-widget.css
@@ -167,6 +167,27 @@ button.row-minus-button {
     line-height: 16px;
 }
 
+button.scroll-left-button,
+button.scroll-right-button,
+button.page-left-button,
+button.page-right-button,
+button.col-plus-button,
+button.col-minus-button {
+    width: 20px;
+    height: 20px;
+}
+
+button.scroll-up-button,
+button.scroll-down-button,
+button.page-up-button,
+button.page-down-button,
+button.row-plus-button,
+button.row-minus-button {
+    width: 20px;
+    height: 26px;
+}
+
+
 button.scroll-up-button,
 button.page-up-button,
 button.row-plus-button,
@@ -214,3 +235,94 @@ button.page-right-button {
 .scrollbar-inactive .page-down-button {
     display: none;
 }
+
+.widget-slider.col-control {
+    background: whitesmoke;
+    border: 1px solid lightgray;
+}
+
+
+.widget-hslider.col-control {
+    height: 20px;
+}
+
+.widget-slider.col-control .slider-container {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.widget-slider.col-control .slider.noUi-target {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: unset;
+}
+
+.widget-slider.col-control .slider.noUi-horizontal {
+    height: 20px;
+    border-radius:0;
+}
+
+.widget-slider.col-control .slider.noUi-horizontal .slider-container {
+    padding-left: 20px;
+}
+
+.widget-slider.col-control .slider.noUi-horizontal .noUi-handle {
+    height: 20px;
+    width: 20px;
+    border-radius:0;
+    top: 0;
+    right: -10px;
+}
+
+.widget-slider.col-control .noUi-connects {
+    background: transparent;
+}
+
+.widget-slider.col-control .noUi-handle:hover,
+.widget-slider.col-control .noUi-handle-lower:hover,
+.widget-slider.col-control .noUi-touch-area:hover{
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.widget-slider.row-control {
+    background: whitesmoke;
+    border: 1px solid lightgray;
+}
+
+.widget-vslider.row-control {
+    width: 20px;
+}
+
+.widget-slider.row-control .slider-container {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.widget-slider.row-control .slider.noUi-target {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: unset;
+}
+
+.widget-slider.row-control .slider.noUi-vertical {
+    width: 20px;
+    border-radius:0;
+}
+
+.widget-slider.row-control .slider.noUi-vertical .slider-container {
+    padding-left: 0;
+}
+
+.widget-slider.row-control .slider.noUi-vertical .noUi-handle {
+    height: 20px;
+    width: 20px;
+    border-radius:0;
+    top: -10px;
+    right: 0;
+}
+
+.widget-slider.row-control .noUi-connects {
+    background: transparent;
+}
+