From 1bce69e1e0f54e8cef293fbd80c295a375154a26 Mon Sep 17 00:00:00 2001
From: vedhav <vedhaviyash4@gmail.com>
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 <vedhaviyash4@gmail.com>
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 <vedhaviyash4@gmail.com>
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 <vedhaviyash4@gmail.com>
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 <vedhaviyash4@gmail.com>
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 <vedhaviyash4@gmail.com>
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 <vedhaviyash4@gmail.com>
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 <vedhaviyash4@gmail.com>
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 <vedhaviyash4@gmail.com>
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,