From 1bce69e1e0f54e8cef293fbd80c295a375154a26 Mon Sep 17 00:00:00 2001 From: vedhav Date: Tue, 17 Sep 2024 15:42:43 +0200 Subject: [PATCH 1/9] push local changes --- R/FilterState.R | 8 +-- R/FilteredData.R | 85 ++++++++++++++---------- R/FilteredDataset.R | 133 ++++++++++++++++++-------------------- inst/css/filter-panel.css | 48 ++++++++------ 4 files changed, 148 insertions(+), 126 deletions(-) diff --git a/R/FilterState.R b/R/FilterState.R index c73147e3d..6833bdc84 100644 --- a/R/FilterState.R +++ b/R/FilterState.R @@ -338,7 +338,7 @@ FilterState <- R6::R6Class( # nolint actionLink( inputId = ns("back"), label = NULL, - icon = icon("circle-arrow-left", lib = "font-awesome"), + icon = icon("far fa-circle-arrow-left"), title = "Rewind state", class = "filter-card-back", style = "display: none" @@ -348,7 +348,7 @@ FilterState <- R6::R6Class( # nolint actionLink( inputId = ns("reset"), label = NULL, - icon = icon("circle-arrow-up", lib = "font-awesome"), + icon = icon("far fa-circle-arrow-up"), title = "Restore original state", class = "filter-card-back", style = "display: none" @@ -357,8 +357,8 @@ FilterState <- R6::R6Class( # nolint if (isFALSE(private$is_anchored())) { actionLink( inputId = ns("remove"), - label = icon("circle-xmark", lib = "font-awesome"), - title = "Remove filter", + label = icon("far fa-circle-xmark"), + title = "Remove filter asdfasdfaksdfk", class = "filter-card-remove" ) } diff --git a/R/FilteredData.R b/R/FilteredData.R index 9b56ee937..60fcb651d 100644 --- a/R/FilteredData.R +++ b/R/FilteredData.R @@ -553,45 +553,61 @@ FilteredData <- R6::R6Class( # nolint ns <- NS(id) tags$div( id = id, # not used, can be used to customize CSS behavior - class = "well", include_js_files(pattern = "togglePanelItems"), - tags$div( - style = "display: flex; justify-content: space-between;", - tags$span("Active Filter Variables", class = "text-primary", style = "font-weight: 700;"), - tags$div( - style = "min-width: 60px;", - uiOutput(ns("remove_all_filters_ui")), - tags$a( - class = "remove_all", - tags$i( - class = "fa fa-angle-down", - title = "fold/expand ...", - onclick = sprintf( - "togglePanelItems(this, ['%s', '%s'], 'fa-angle-down', 'fa-angle-right');", - ns("filter_active_vars_contents"), - ns("filters_active_count") + bslib::accordion( + id = ns("main_filter_accordian"), + bslib::accordion_panel( + "Filter Data", + icon = icon("fas fa-filter"), + tags$div( + div( + id = ns("available_filters_ui"), + style = "margin-left: -7rem; z-index: 100; display: flex; flex-direction: row-reverse; align-items: center; width: 4.5rem;", + private$ui_available_filters(ns("available_filters")), + uiOutput(ns("remove_all_filters_ui")) + ), + tags$div( + id = ns("filter_active_vars_contents"), + tagList( + lapply( + isolate(active_datanames()), + function(dataname) { + fdataset <- private$get_filtered_dataset(dataname) + fdataset$ui_active(id = ns(dataname), allow_add = private$allow_add) + } + ) ) + ), + tags$div( + id = ns("filters_active_count"), + style = "display: none;", + textOutput(ns("teal_filters_count")) ) - ), - private$ui_available_filters(ns("available_filters")) + ) ) ), - tags$div( - id = ns("filter_active_vars_contents"), - tagList( - lapply( - isolate(active_datanames()), - function(dataname) { - fdataset <- private$get_filtered_dataset(dataname) - fdataset$ui_active(id = ns(dataname), allow_add = private$allow_add) - } + tags$script( + HTML( + sprintf( + " + $(document).ready(function() { + $('#%s').appendTo('#%s > .accordion-item > .accordion-header'); + $('#%s > .accordion-item > .accordion-header').css({ + 'display': 'flex' + }); + $('#%s i').css({ + 'color': 'var(--bs-accordion-color)', + 'font-size': '1.3rem', + 'margin-bottom': '0.7rem' + }); + }); + ", + ns("available_filters_ui"), + ns("main_filter_accordian"), + ns("main_filter_accordian"), + ns("available_filters_ui") ) ) - ), - tags$div( - id = ns("filters_active_count"), - style = "display: none;", - textOutput(ns("teal_filters_count")) ) ) }, @@ -633,8 +649,7 @@ FilteredData <- R6::R6Class( # nolint req(is_filter_removable()) actionLink( inputId = session$ns("remove_all_filters"), - label = "", - icon("circle-xmark", lib = "font-awesome"), + label = "Clear", title = "Remove active filters", class = "remove_all" ) @@ -927,7 +942,7 @@ FilteredData <- R6::R6Class( # nolint actionLink( ns("show"), label = NULL, - icon = icon("plus", lib = "font-awesome"), + icon = icon("far fa-square-check"), title = "Available filters", class = "remove pull-right" ), diff --git a/R/FilteredDataset.R b/R/FilteredDataset.R index 998f5f4d8..abf0d1c59 100644 --- a/R/FilteredDataset.R +++ b/R/FilteredDataset.R @@ -212,64 +212,85 @@ FilteredDataset <- R6::R6Class( # nolint id = id, include_css_files("filter-panel"), include_js_files(pattern = "icons"), - tags$div( - id = ns("whole_ui"), # to hide it entirely - fluidRow( - style = "padding: 0px 15px 0px 15px;", + bslib::accordion( + id = ns("dataset_filter_accordian"), + class = "teal-slice-dataset-filter", + bslib::accordion_panel( + dataname, + icon = icon("fas fa-table"), tags$div( - style = "display: flex; align-items: center; justify-content: space-between;", - tags$div( - style = "display: flex;", - tags$span(dataname, class = "filter_panel_dataname"), + id = ns("whole_ui"), # to hide it entirely + div( + id = ns("filter_util_icons"), + style = "display: flex; flex-direction: row-reverse; align-items: center; width: 3.5rem; margin-left: -3.5rem; z-index: 99;", if (allow_add) { tags$a( class = "filter-icon add-filter", + style = "font-weight: 100; font-size: 1.3rem; color: black; padding: 0.2rem;", tags$i( id = ns("add_filter_icon"), class = "fa fa-plus", title = "fold/expand transform panel", onclick = sprintf( - "togglePanelItems(this, '%s', 'fa-plus', 'fa-minus');", - ns("add_panel") + "togglePanelItems(this, '%s', 'fa-plus', 'fa-minus'); + $('#%s .accordion-button.collapsed').click()", + ns("add_panel"), + ns("dataset_filter_accordian") ) ) ) + }, + uiOutput(ns("remove_filters_ui")) + ), + fluidRow( + style = "padding: 0px 15px 0px 15px;", + if (allow_add) { + tags$div( + id = ns("add_panel"), + class = "add-panel", + style = "display: none;", + self$ui_add(ns(private$dataname)) + ) } ), tags$div( - style = "min-width: 40px; z-index: 1; display: flex; justify-content: flex-end;", - uiOutput(ns("collapse_ui")), - uiOutput(ns("remove_filters_ui")) - ) - ), - if (allow_add) { - tags$div( - id = ns("add_panel"), - class = "add-panel", + id = ns("filter_count_ui"), style = "display: none;", - self$ui_add(ns(private$dataname)) + tagList( + textOutput(ns("filter_count")) + ) + ), + tags$div( + # id needed to insert and remove UI to filter single variable as needed + # it is currently also used by the above module to entirely hide this panel + id = ns("filters"), + class = "parent-hideable-list-group", + tagList( + lapply( + names(private$get_filter_states()), + function(x) { + tagList(private$get_filter_states()[[x]]$ui_active(id = ns(x))) + } + ) + ) ) - } - ), - tags$div( - id = ns("filter_count_ui"), - style = "display: none;", - tagList( - textOutput(ns("filter_count")) ) - ), - tags$div( - # id needed to insert and remove UI to filter single variable as needed - # it is currently also used by the above module to entirely hide this panel - id = ns("filters"), - class = "parent-hideable-list-group", - tagList( - lapply( - names(private$get_filter_states()), - function(x) { - tagList(private$get_filter_states()[[x]]$ui_active(id = ns(x))) - } - ) + ) + ), + tags$script( + HTML( + sprintf( + " + $(document).ready(function() { + $('#%s').appendTo('#%s > .accordion-item > .accordion-header'); + $('#%s > .accordion-item > .accordion-header').css({ + 'display': 'flex' + }); + }); + ", + ns("filter_util_icons"), + ns("dataset_filter_accordian"), + ns("dataset_filter_accordian") ) ) ) @@ -309,32 +330,6 @@ FilteredDataset <- R6::R6Class( # nolint } ) - is_filter_collapsible <- reactive({ - filter_count() != 0 - }) - - output$collapse_ui <- renderUI({ - req(is_filter_collapsible()) - tags$a( - id = session$ns("collapse"), - class = "filter-icon", - tags$i( - id = session$ns("collapse_icon"), - class = "fa fa-angle-down", - title = "fold/expand dataset filters", - # TODO: clickWhenClassPresent() is used to hide the add_ui pannel during a collapse of the UI. - # In the future, it should be completely handled by collapsing the UI by positioning. - onclick = sprintf( - "togglePanelItems(this, ['%s', '%s'], 'fa-angle-down', 'fa-angle-right'); - clickWhenClassPresent('%s', 'fa-minus', this.classList.contains('fa-angle-right'));", - session$ns("filter_count_ui"), - session$ns("filters"), - session$ns("add_filter_icon") - ) - ) - ) - }) - is_filter_removable <- reactive({ non_anchored <- Filter(function(x) !x$anchored, self$get_filter_state()) isTRUE(length(non_anchored) > 0) @@ -347,7 +342,6 @@ FilteredDataset <- R6::R6Class( # nolint shinyjs::hide("filter_count_ui") shinyjs::show("filters") shinyjs::toggle("remove_filters_ui", condition = is_filter_removable()) - shinyjs::toggle("collapse_ui", condition = is_filter_collapsible()) shinyjs::runjs( sprintf( "setAndRemoveClass('#%s', 'fa-angle-down', 'fa-angle-right')", @@ -362,8 +356,9 @@ FilteredDataset <- R6::R6Class( # nolint actionLink( session$ns("remove_filters"), label = "", - icon = icon("circle-xmark", lib = "font-awesome"), - class = "filter-icon" + icon = icon("far fa-circle-xmark"), + class = "filter-icon", + style = "font-weight: 100; font-size: 1.3rem; color: black; padding: 0.2rem;", ) }) diff --git a/inst/css/filter-panel.css b/inst/css/filter-panel.css index b7bf8c7c9..59c47eca9 100644 --- a/inst/css/filter-panel.css +++ b/inst/css/filter-panel.css @@ -1,10 +1,6 @@ /* teal.slice filter-panel css */ -.well { - padding: 15px; -} - -a.filter-icon { +/* a.filter-icon { font-weight: normal; float: right; border: 0; @@ -41,19 +37,21 @@ a.filter-icon_all:hover { } .filter-icon.add-filter { - max-height: 20px; + max-height: 1.5rem; align-self: flex-end; - margin-left: 7px; + margin-left: 1rem; background: white; - border-radius: 5px; + border-radius: 0.2rem; border: solid 1px #e3e3e3; } .filter-icon.add-filter:has(.fa-minus) { border-radius: 5px 5px 0px 0px; border-bottom-color: white; - border-bottom-width: 2px; -} + border-bottom-width: 0.2rem; + margin-bottom: -1px; + z-index: 1; +} */ .add-panel { background: white; @@ -191,16 +189,11 @@ a.remove:hover { a.remove_all { cursor: pointer; - font-weight: normal; - float: right; - border: 0; - background-color: transparent; color: rgb(136, 0, 0, 0.72); - font-weight: 100; - font-size: 0.9em; - padding: 2px 4px; - margin-top: 0; + font-size: 1rem; + margin: 0.5rem; opacity: 50%; + text-decoration: none; } a.remove_all:hover { @@ -515,3 +508,22 @@ a.remove_all:hover { flex: 1 0 50px; padding: 0em 1em; } + +.teal-slice-dataset-filter .accordion-button { + --bs-accordion-btn-padding-y: 0.5rem; + --bs-accordion-btn-padding-x: 0.5rem; +} + +.teal-slice-dataset-filter .accordion i { + font-size: 1rem; + margin-bottom: 0.5rem; +} + +.teal-slice-dataset-filter .accordion .filter-card-back i { + font-weight: 600; +} + +.teal-slice-dataset-filter .accordion-button:not(.collapsed)::after, +.teal-slice-dataset-filter .accordion-button::after { + display: none; +} From 53f6166122d81c4cab6a9197973aa5082c388a57 Mon Sep 17 00:00:00 2001 From: vedhav Date: Tue, 24 Sep 2024 18:48:32 +0530 Subject: [PATCH 2/9] fix: bring the same filter-panel view to non-teal app --- DESCRIPTION | 2 +- R/FilteredData.R | 50 +++++++++++++++++++-------------------- inst/css/filter-panel.css | 12 ++++++++++ 3 files changed, 37 insertions(+), 27 deletions(-) diff --git a/DESCRIPTION b/DESCRIPTION index 81a89c49e..497e17d4c 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -34,7 +34,7 @@ BugReports: https://github.com/insightsengineering/teal.slice/issues Depends: R (>= 4.0) Imports: - bslib (>= 0.4.0), + bslib (>= 0.8.0), checkmate (>= 2.1.0), dplyr (>= 1.0.5), grDevices, diff --git a/R/FilteredData.R b/R/FilteredData.R index 60fcb651d..c86d764b4 100644 --- a/R/FilteredData.R +++ b/R/FilteredData.R @@ -503,6 +503,7 @@ FilteredData <- R6::R6Class( # nolint ns <- NS(id) tags$div( id = ns(NULL), # used for hiding / showing + class = "teal-slice filter-panel", include_css_files(pattern = "filter-panel"), include_js_files(pattern = "togglePanelItems"), shinyjs::useShinyjs(), @@ -731,36 +732,33 @@ FilteredData <- R6::R6Class( # nolint #' ui_overview = function(id) { ns <- NS(id) - tags$div( - id = id, # not used, can be used to customize CSS behavior - class = "well", - tags$div( - class = "row", - tags$div( - class = "col-sm-9", - tags$label("Active Filter Summary", class = "text-primary mb-4") - ), - tags$div( - class = "col-sm-3", - tags$a( - class = "filter-icon", - tags$i( - class = "fa fa-angle-down", - title = "fold/expand ...", - onclick = sprintf( - "togglePanelItems(this, '%s', 'fa-angle-down', 'fa-angle-right');", - ns("filters_overview_contents") + bslib::accordion( + id = ns("main_filter_accordian"), + bslib::accordion_panel( + title = "Active Filter Summary", + tagList( + tags$div( + class = "col-sm-3", + tags$a( + class = "filter-icon", + tags$i( + class = "fa fa-angle-down", + title = "fold/expand ...", + onclick = sprintf( + "togglePanelItems(this, '%s', 'fa-angle-down', 'fa-angle-right');", + ns("filters_overview_contents") + ) ) ) + ), + tags$div( + id = ns("filters_overview_contents"), + tags$div( + class = "teal_active_summary_filter_panel", + tableOutput(ns("table")) + ) ) ) - ), - tags$div( - id = ns("filters_overview_contents"), - tags$div( - class = "teal_active_summary_filter_panel", - tableOutput(ns("table")) - ) ) ) }, diff --git a/inst/css/filter-panel.css b/inst/css/filter-panel.css index 59c47eca9..4f74c0742 100644 --- a/inst/css/filter-panel.css +++ b/inst/css/filter-panel.css @@ -527,3 +527,15 @@ a.remove_all:hover { .teal-slice-dataset-filter .accordion-button::after { display: none; } + +.teal-slice.filter-panel .accordion-button:hover { + --bs-accordion-btn-bg: #c5c5c5; + --bs-accordion-active-bg: #c5c5c5; +} + +.teal-slice.filter-panel .accordion-button { + --bs-accordion-btn-bg: #ededed; + --bs-accordion-active-bg: #ededed; + --bs-accordion-btn-padding-x: 1rem; + --bs-accordion-btn-padding-y: 0.8rem; +} From 1e58151494b077897ea3511ac60c0fe84b14fee9 Mon Sep 17 00:00:00 2001 From: vedhav Date: Tue, 24 Sep 2024 18:49:26 +0530 Subject: [PATCH 3/9] fix: only open accordion when + is clicked and not when - is clicked --- R/FilteredDataset.R | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/R/FilteredDataset.R b/R/FilteredDataset.R index abf0d1c59..cf4c3d968 100644 --- a/R/FilteredDataset.R +++ b/R/FilteredDataset.R @@ -233,7 +233,9 @@ FilteredDataset <- R6::R6Class( # nolint title = "fold/expand transform panel", onclick = sprintf( "togglePanelItems(this, '%s', 'fa-plus', 'fa-minus'); - $('#%s .accordion-button.collapsed').click()", + if ($(this).hasClass('fa-minus')) { + $('#%s .accordion-button.collapsed').click(); + }", ns("add_panel"), ns("dataset_filter_accordian") ) From 1d04ea5f2b68d95beeafe3248899b527ac79dbc9 Mon Sep 17 00:00:00 2001 From: vedhav Date: Thu, 26 Sep 2024 07:15:35 +0530 Subject: [PATCH 4/9] chore: push some minor css changes --- R/FilteredData.R | 17 ++++++++++------- R/FilteredDataset.R | 15 +++++++++------ inst/css/filter-panel.css | 5 +++++ 3 files changed, 24 insertions(+), 13 deletions(-) diff --git a/R/FilteredData.R b/R/FilteredData.R index c86d764b4..0a47fb3e3 100644 --- a/R/FilteredData.R +++ b/R/FilteredData.R @@ -501,7 +501,7 @@ FilteredData <- R6::R6Class( # nolint #' @return `shiny.tag` ui_filter_panel = function(id, active_datanames = self$datanames) { ns <- NS(id) - tags$div( + bslib::page_fluid( id = ns(NULL), # used for hiding / showing class = "teal-slice filter-panel", include_css_files(pattern = "filter-panel"), @@ -565,7 +565,7 @@ FilteredData <- R6::R6Class( # nolint id = ns("available_filters_ui"), style = "margin-left: -7rem; z-index: 100; display: flex; flex-direction: row-reverse; align-items: center; width: 4.5rem;", private$ui_available_filters(ns("available_filters")), - uiOutput(ns("remove_all_filters_ui")) + uiOutput(ns("remove_all_filters_ui")) ), tags$div( id = ns("filter_active_vars_contents"), @@ -648,11 +648,14 @@ FilteredData <- R6::R6Class( # nolint output$remove_all_filters_ui <- renderUI({ req(is_filter_removable()) - actionLink( - inputId = session$ns("remove_all_filters"), - label = "Clear", - title = "Remove active filters", - class = "remove_all" + tags$div( + style = "display: flex;", + actionLink( + inputId = session$ns("remove_all_filters"), + label = "Clear", + title = "Remove active filters", + class = "remove_all" + ) ) }) diff --git a/R/FilteredDataset.R b/R/FilteredDataset.R index cf4c3d968..278d4f8e6 100644 --- a/R/FilteredDataset.R +++ b/R/FilteredDataset.R @@ -355,12 +355,15 @@ FilteredDataset <- R6::R6Class( # nolint output$remove_filters_ui <- renderUI({ req(is_filter_removable()) - actionLink( - session$ns("remove_filters"), - label = "", - icon = icon("far fa-circle-xmark"), - class = "filter-icon", - style = "font-weight: 100; font-size: 1.3rem; color: black; padding: 0.2rem;", + tags$div( + style = "display: flex;", + actionLink( + session$ns("remove_filters"), + label = "", + icon = icon("far fa-circle-xmark"), + class = "filter-icon", + style = "font-weight: 100; font-size: 1.3rem; color: black; padding: 0.2rem;", + ) ) }) diff --git a/inst/css/filter-panel.css b/inst/css/filter-panel.css index 4f74c0742..6ee49afa2 100644 --- a/inst/css/filter-panel.css +++ b/inst/css/filter-panel.css @@ -539,3 +539,8 @@ a.remove_all:hover { --bs-accordion-btn-padding-x: 1rem; --bs-accordion-btn-padding-y: 0.8rem; } + +.teal-slice.filter-panel .btn { + --bs-btn-padding-x: 1em; + --bs-btn-padding-y: 0.5em; +} From c2af019f567d661e2e7cbd36e4599d32e5b2d6a6 Mon Sep 17 00:00:00 2001 From: vedhav Date: Thu, 26 Sep 2024 17:47:43 +0530 Subject: [PATCH 5/9] feat: add active filter badge count --- R/FilteredData.R | 2 +- R/FilteredDataset.R | 15 +++++++++++++++ R/FilteredDatasetDataframe.R | 4 +++- inst/css/filter-panel.css | 10 ++++++++++ 4 files changed, 29 insertions(+), 2 deletions(-) diff --git a/R/FilteredData.R b/R/FilteredData.R index 0a47fb3e3..a5fef3088 100644 --- a/R/FilteredData.R +++ b/R/FilteredData.R @@ -565,7 +565,7 @@ FilteredData <- R6::R6Class( # nolint id = ns("available_filters_ui"), style = "margin-left: -7rem; z-index: 100; display: flex; flex-direction: row-reverse; align-items: center; width: 4.5rem;", private$ui_available_filters(ns("available_filters")), - uiOutput(ns("remove_all_filters_ui")) + uiOutput(ns("remove_all_filters_ui")) ), tags$div( id = ns("filter_active_vars_contents"), diff --git a/R/FilteredDataset.R b/R/FilteredDataset.R index 278d4f8e6..ede363ca5 100644 --- a/R/FilteredDataset.R +++ b/R/FilteredDataset.R @@ -220,6 +220,7 @@ FilteredDataset <- R6::R6Class( # nolint icon = icon("fas fa-table"), tags$div( id = ns("whole_ui"), # to hide it entirely + uiOutput(ns("active_filter_badge")), div( id = ns("filter_util_icons"), style = "display: flex; flex-direction: row-reverse; align-items: center; width: 3.5rem; margin-left: -3.5rem; z-index: 99;", @@ -288,10 +289,13 @@ FilteredDataset <- R6::R6Class( # nolint $('#%s > .accordion-item > .accordion-header').css({ 'display': 'flex' }); + $('#%s').appendTo('#%s .accordion-header .accordion-title'); }); ", ns("filter_util_icons"), ns("dataset_filter_accordian"), + ns("dataset_filter_accordian"), + ns("active_filter_badge"), ns("dataset_filter_accordian") ) ) @@ -317,6 +321,17 @@ FilteredDataset <- R6::R6Class( # nolint length(self$get_filter_state()) }) + + output$active_filter_badge <- renderUI({ + if (filter_count() == 0) { + return(NULL) + } + tags$span( + filter_count(), + class = "teal-slice data-filter-badge-count" + ) + }) + output$filter_count <- renderText( sprintf( "%d filter%s applied", diff --git a/R/FilteredDatasetDataframe.R b/R/FilteredDatasetDataframe.R index 589ba583e..0e84acc0e 100644 --- a/R/FilteredDatasetDataframe.R +++ b/R/FilteredDatasetDataframe.R @@ -232,7 +232,9 @@ DataframeFilteredDataset <- R6::R6Class( # nolint ui_add = function(id) { ns <- NS(id) tagList( - tags$label("Add", tags$code(self$get_dataname()), "filter"), + tags$div( + tags$label("Add", tags$code(self$get_dataname()), "filter") + ), private$get_filter_states()[["filter"]]$ui_add(id = ns("filter")) ) }, diff --git a/inst/css/filter-panel.css b/inst/css/filter-panel.css index 6ee49afa2..3fad388d8 100644 --- a/inst/css/filter-panel.css +++ b/inst/css/filter-panel.css @@ -544,3 +544,13 @@ a.remove_all:hover { --bs-btn-padding-x: 1em; --bs-btn-padding-y: 0.5em; } + +.teal-slice.data-filter-badge-count { + border-radius: 1em; + font-size: 0.7em; + padding: 0 0.5em; + vertical-align: top; + margin-left: 0.2em; + background: rgba(var(--bs-primary-rgb), 0.8); + color: var(--bs-primary-bg-subtle); +} From 08351448f2496c7132d8dcae7a4b854bea95dfa3 Mon Sep 17 00:00:00 2001 From: vedhav Date: Thu, 3 Oct 2024 17:17:27 +0530 Subject: [PATCH 6/9] push local style changes --- R/FilteredData.R | 27 +++++---------------------- R/FilteredDataset.R | 1 - inst/css/filter-panel.css | 4 ---- 3 files changed, 5 insertions(+), 27 deletions(-) diff --git a/R/FilteredData.R b/R/FilteredData.R index a5fef3088..a212bbca4 100644 --- a/R/FilteredData.R +++ b/R/FilteredData.R @@ -559,7 +559,6 @@ FilteredData <- R6::R6Class( # nolint id = ns("main_filter_accordian"), bslib::accordion_panel( "Filter Data", - icon = icon("fas fa-filter"), tags$div( div( id = ns("available_filters_ui"), @@ -599,7 +598,7 @@ FilteredData <- R6::R6Class( # nolint $('#%s i').css({ 'color': 'var(--bs-accordion-color)', 'font-size': '1.3rem', - 'margin-bottom': '0.7rem' + 'margin-bottom': '0.3rem' }); }); ", @@ -739,27 +738,11 @@ FilteredData <- R6::R6Class( # nolint id = ns("main_filter_accordian"), bslib::accordion_panel( title = "Active Filter Summary", - tagList( - tags$div( - class = "col-sm-3", - tags$a( - class = "filter-icon", - tags$i( - class = "fa fa-angle-down", - title = "fold/expand ...", - onclick = sprintf( - "togglePanelItems(this, '%s', 'fa-angle-down', 'fa-angle-right');", - ns("filters_overview_contents") - ) - ) - ) - ), + tags$div( + id = ns("filters_overview_contents"), tags$div( - id = ns("filters_overview_contents"), - tags$div( - class = "teal_active_summary_filter_panel", - tableOutput(ns("table")) - ) + class = "teal_active_summary_filter_panel", + tableOutput(ns("table")) ) ) ) diff --git a/R/FilteredDataset.R b/R/FilteredDataset.R index ede363ca5..e29af9a2b 100644 --- a/R/FilteredDataset.R +++ b/R/FilteredDataset.R @@ -217,7 +217,6 @@ FilteredDataset <- R6::R6Class( # nolint class = "teal-slice-dataset-filter", bslib::accordion_panel( dataname, - icon = icon("fas fa-table"), tags$div( id = ns("whole_ui"), # to hide it entirely uiOutput(ns("active_filter_badge")), diff --git a/inst/css/filter-panel.css b/inst/css/filter-panel.css index 3fad388d8..09d0ff65c 100644 --- a/inst/css/filter-panel.css +++ b/inst/css/filter-panel.css @@ -482,10 +482,6 @@ a.remove_all:hover { margin-top: 0em; } -.popover-body { - margin-bottom: -1rem; -} - .available-filters { margin-top: 0em; } From bb3dc007a907aa99a43d37ffd44c86b9e6a9c2d5 Mon Sep 17 00:00:00 2001 From: vedhav Date: Sat, 5 Oct 2024 00:39:55 +0530 Subject: [PATCH 7/9] auto hide the add ui when accordion is collapsed --- R/FilteredDataset.R | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/R/FilteredDataset.R b/R/FilteredDataset.R index e29af9a2b..a17c94371 100644 --- a/R/FilteredDataset.R +++ b/R/FilteredDataset.R @@ -381,6 +381,26 @@ FilteredDataset <- R6::R6Class( # nolint ) }) + # If the accordion input is `NULL` it is being collapsed. + # It has the accordion panel label if it is expanded. + observeEvent(input$dataset_filter_accordian, ignoreNULL = FALSE, { + if (is.null(input$dataset_filter_accordian)) { + # Hiding the `add_panel` dropdown and changing the minus icon to plus + # TODO: simplify this implementation. This is done in multiple places + shinyjs::runjs( + sprintf( + "var element = $('#%s.fa-minus'); + if (element.length) { + element.click(); + $('#%s').hide(); + }", + session$ns("add_filter_icon"), + session$ns("add_panel") + ) + ) + } + }) + private$session_bindings[[session$ns("remove_filters")]] <- observeEvent(input$remove_filters, { logger::log_debug("FilteredDataset$srv_active@1 removing all non-anchored filters, dataname: { dataname }") self$clear_filter_states() From 2ac1441d23f495c6d964e1a3df237b7425b108c3 Mon Sep 17 00:00:00 2001 From: vedhav Date: Mon, 7 Oct 2024 19:21:48 +0530 Subject: [PATCH 8/9] icon changes --- R/FilterState.R | 2 +- R/FilteredData.R | 46 +++++++++++----------- R/FilteredDataset.R | 9 ++--- inst/css/filter-panel.css | 80 ++++++++++++++++++++++++++++++++++++++- 4 files changed, 108 insertions(+), 29 deletions(-) diff --git a/R/FilterState.R b/R/FilterState.R index 6833bdc84..5e5a20a0c 100644 --- a/R/FilterState.R +++ b/R/FilterState.R @@ -359,7 +359,7 @@ FilterState <- R6::R6Class( # nolint inputId = ns("remove"), label = icon("far fa-circle-xmark"), title = "Remove filter asdfasdfaksdfk", - class = "filter-card-remove" + class = "teal-slice filter-icon" ) } ) diff --git a/R/FilteredData.R b/R/FilteredData.R index a212bbca4..69a06aaa7 100644 --- a/R/FilteredData.R +++ b/R/FilteredData.R @@ -555,14 +555,15 @@ FilteredData <- R6::R6Class( # nolint tags$div( id = id, # not used, can be used to customize CSS behavior include_js_files(pattern = "togglePanelItems"), + class = "teal-slice", bslib::accordion( id = ns("main_filter_accordian"), bslib::accordion_panel( "Filter Data", tags$div( div( - id = ns("available_filters_ui"), - style = "margin-left: -7rem; z-index: 100; display: flex; flex-direction: row-reverse; align-items: center; width: 4.5rem;", + id = ns("additional_filter_helpers"), + class = "teal-slice available-filters", private$ui_available_filters(ns("available_filters")), uiOutput(ns("remove_all_filters_ui")) ), @@ -597,15 +598,14 @@ FilteredData <- R6::R6Class( # nolint }); $('#%s i').css({ 'color': 'var(--bs-accordion-color)', - 'font-size': '1.3rem', - 'margin-bottom': '0.3rem' + 'font-size': '1rem' }); }); ", - ns("available_filters_ui"), + ns("additional_filter_helpers"), ns("main_filter_accordian"), ns("main_filter_accordian"), - ns("available_filters_ui") + ns("additional_filter_helpers") ) ) ) @@ -651,9 +651,10 @@ FilteredData <- R6::R6Class( # nolint style = "display: flex;", actionLink( inputId = session$ns("remove_all_filters"), - label = "Clear", + label = "", title = "Remove active filters", - class = "remove_all" + icon = icon("far fa-circle-xmark"), + class = "teal-slice filter-icon remove-all" ) ) }) @@ -734,15 +735,18 @@ FilteredData <- R6::R6Class( # nolint #' ui_overview = function(id) { ns <- NS(id) - bslib::accordion( - id = ns("main_filter_accordian"), - bslib::accordion_panel( - title = "Active Filter Summary", - tags$div( - id = ns("filters_overview_contents"), + tags$div( + class = "teal-slice", + bslib::accordion( + id = ns("main_filter_accordian"), + bslib::accordion_panel( + title = "Active Filter Summary", tags$div( - class = "teal_active_summary_filter_panel", - tableOutput(ns("table")) + id = ns("filters_overview_contents"), + tags$div( + class = "teal_active_summary_filter_panel", + tableOutput(ns("table")) + ) ) ) ) @@ -923,12 +927,10 @@ FilteredData <- R6::R6Class( # nolint tags$div( id = ns("available_menu"), shinyWidgets::dropMenu( - actionLink( - ns("show"), - label = NULL, - icon = icon("far fa-square-check"), - title = "Available filters", - class = "remove pull-right" + tags$a( + id = ns("show"), + class = "available-menu", + bsicons::bs_icon("plus-square", size = "1.4rem", class = "teal-slice filter-icon"), ), tags$div( class = "menu-content", diff --git a/R/FilteredDataset.R b/R/FilteredDataset.R index a17c94371..761f4bf7e 100644 --- a/R/FilteredDataset.R +++ b/R/FilteredDataset.R @@ -210,6 +210,7 @@ FilteredDataset <- R6::R6Class( # nolint if_multiple_filter_states <- length(private$get_filter_states()) > 1 tags$span( id = id, + class = "teal-slice", include_css_files("filter-panel"), include_js_files(pattern = "icons"), bslib::accordion( @@ -222,11 +223,10 @@ FilteredDataset <- R6::R6Class( # nolint uiOutput(ns("active_filter_badge")), div( id = ns("filter_util_icons"), - style = "display: flex; flex-direction: row-reverse; align-items: center; width: 3.5rem; margin-left: -3.5rem; z-index: 99;", + class = "teal-slice filter-util-icons", if (allow_add) { tags$a( - class = "filter-icon add-filter", - style = "font-weight: 100; font-size: 1.3rem; color: black; padding: 0.2rem;", + class = "teal-slice filter-icon", tags$i( id = ns("add_filter_icon"), class = "fa fa-plus", @@ -375,8 +375,7 @@ FilteredDataset <- R6::R6Class( # nolint session$ns("remove_filters"), label = "", icon = icon("far fa-circle-xmark"), - class = "filter-icon", - style = "font-weight: 100; font-size: 1.3rem; color: black; padding: 0.2rem;", + class = "teal-slice filter-icon" ) ) }) diff --git a/inst/css/filter-panel.css b/inst/css/filter-panel.css index 09d0ff65c..233e3de84 100644 --- a/inst/css/filter-panel.css +++ b/inst/css/filter-panel.css @@ -512,7 +512,6 @@ a.remove_all:hover { .teal-slice-dataset-filter .accordion i { font-size: 1rem; - margin-bottom: 0.5rem; } .teal-slice-dataset-filter .accordion .filter-card-back i { @@ -550,3 +549,82 @@ a.remove_all:hover { background: rgba(var(--bs-primary-rgb), 0.8); color: var(--bs-primary-bg-subtle); } + +.teal-slice.filter-util-icons { + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 3.5rem; + margin-left: -4rem; +} + +.teal-slice.filter-util-icons a { + z-index: 100; +} + +.teal-slice.filter-util-icons .filter-icon { + font-weight: 100; + font-size: 1rem; + color: black; + padding: 0.2rem; +} + +.teal-slice.available-filters { + margin-left: -7rem; + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 4.5rem; + cursor: pointer; +} + +.teal-slice.available-filters a { + position: relative; + display: flex; + z-index: 100; + opacity: 0.5; + transition: 0.1s; +} + +.teal-slice.available-filters a:hover { + opacity: 1; +} + +.teal-slice.available-filters .available-menu { + display: flex; + text-decoration: none; +} + +.teal-slice.filter-icon { + cursor: pointer; + font-weight: 100; + font-size: 1rem; + color: black; + padding: 0.2rem; + opacity: 0.5; + transition: 0.1s; +} + +.teal-slice.filter-icon { + display: flex; + text-decoration: none; +} + +.teal-slice.filter-icon.remove-all i { + opacity: 0.5; + transition: 0.1s; + color: var(--bs-danger); +} + +.teal-slice.filter-icon.remove-all i:hover { + opacity: 1; +} + +.teal-slice.filter-icon:hover { + opacity: 1; +} + +.teal-slice .accordion-button:not(.collapsed)::after, +.accordion-button::after { + scale: 0.8; +} From eb84955f870a628f70fca847376328edfaacc3e2 Mon Sep 17 00:00:00 2001 From: vedhav Date: Mon, 7 Oct 2024 19:33:16 +0530 Subject: [PATCH 9/9] add bsicons dependency --- DESCRIPTION | 1 + 1 file changed, 1 insertion(+) diff --git a/DESCRIPTION b/DESCRIPTION index 497e17d4c..3c9edc9a5 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -35,6 +35,7 @@ Depends: R (>= 4.0) Imports: bslib (>= 0.8.0), + bsicons, checkmate (>= 2.1.0), dplyr (>= 1.0.5), grDevices,