From 2ac1441d23f495c6d964e1a3df237b7425b108c3 Mon Sep 17 00:00:00 2001 From: vedhav Date: Mon, 7 Oct 2024 19:21:48 +0530 Subject: [PATCH] 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; +}