icon changes

insightsengineering · Oct 7, 2024 · 2ac1441 · 2ac1441
1 parent bb3dc00
commit 2ac1441
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}