Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Update card summary design #255

Merged
merged 10 commits into from
May 4, 2023
Merged

Update card summary design #255

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b787652
move NA and Inf to right of summary
asbates Apr 26, 2023
c1e01aa
add icons for NA/Inf in card summary
asbates Apr 27, 2023
e75c7a9
display categorical value in card summary
asbates Apr 27, 2023
a235f83
value display in summary for data filter
asbates Apr 27, 2023
ac3c65a
value display summary for date time filter
asbates Apr 27, 2023
432b315
formatting of selected values in range summary
asbates Apr 28, 2023
b49d8cd
use en dash to separate dates + datetimes in card summary
asbates Apr 28, 2023
7136707
increase font size of input elements
asbates Apr 28, 2023
6c9f702
only display selected levels if < 40 characters
asbates May 1, 2023
f65c493
Merge branch 'filter_panel_refactor@main' into 220_card_summary@filte…
asbates May 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions R/FilterStateChoices.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,8 +585,28 @@ ChoicesFilterState <- R6::R6Class( # nolint
content_summary = function(id) {
n_selected <- length(private$get_selected())
tagList(
tags$span(sprintf("%s levels selected", n_selected)),
if (isTRUE(private$get_keep_na())) tags$span("NA") else NULL
tags$span(
class = "filter-card-summary-value",
paste0(private$get_selected(), collapse = ", ")
),
tags$span(
class = "filter-card-summary-controls",
if (isTRUE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("check")
)
} else if (isFALSE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("xmark")
)
} else {
NULL
}
)
)
}
)
Expand Down
24 changes: 22 additions & 2 deletions R/FilterStateDate.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,8 +476,28 @@ DateFilterState <- R6::R6Class( # nolint
min <- selected[1]
max <- selected[2]
tagList(
tags$span(paste0(min, " - ", max)),
if (isTRUE(private$get_keep_na())) tags$span("NA") else NULL
tags$span(
class = "filter-card-summary-value",
paste0(min, " - ", max)
),
tags$span(
class = "filter-card-summary-controls",
if (isTRUE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("check")
)
} else if (isFALSE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("xmark")
)
} else {
NULL
}
)
)
}
)
Expand Down
24 changes: 22 additions & 2 deletions R/FilterStateDatettime.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -597,8 +597,28 @@ DatetimeFilterState <- R6::R6Class( # nolint
min <- selected[1]
max <- selected[2]
tagList(
tags$span(paste0(min, " - ", max)),
if (isTRUE(private$get_keep_na())) tags$span("NA") else NULL
tags$span(
class = "filter-card-summary-value",
paste0(min, " - ", max)
),
tags$span(
class = "filter-card-summary-controls",
if (isTRUE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("check")
)
} else if (isFALSE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("xmark")
)
} else {
NULL
}
)
)
}
)
Expand Down
21 changes: 19 additions & 2 deletions R/FilterStateLogical.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,8 +414,25 @@ LogicalFilterState <- R6::R6Class( # nolint
# and if NA are included also
content_summary = function(id) {
tagList(
tags$span(private$get_selected()),
if (isTRUE(private$get_keep_na())) tags$span("NA") else NULL
tags$span(private$get_selected(), class = "filter-card-summary-value"),
tags$span(
class = "filter-card-summary-controls",
if (isTRUE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("check")
)
} else if (isFALSE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("xmark")
)
} else {
NULL
}
)
)
}
)
Expand Down
37 changes: 34 additions & 3 deletions R/FilterStateRange.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,9 +392,40 @@ RangeFilterState <- R6::R6Class( # nolint
min <- selected[1]
max <- selected[2]
tagList(
tags$span(paste0(min, " - ", max)),
if (isTRUE(private$get_keep_na())) tags$span("NA") else NULL,
if (isTRUE(private$get_keep_inf())) tags$span("Inf") else NULL
tags$span(paste0(min, " - ", max), class = "filter-card-summary-value"),
tags$span(
class = "filter-card-summary-controls",
if (isTRUE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("check")
)
} else if (isFALSE(private$get_keep_na()) && private$na_count > 0) {
tags$span(
class = "filter-card-summary-na",
"NA",
shiny::icon("xmark")
)
} else {
NULL
},
if (isTRUE(private$get_keep_inf()) && private$inf_count > 0) {
tags$span(
class = "filter-card-summary-inf",
"Inf",
shiny::icon("check")
)
} else if (isFALSE(private$get_keep_inf()) && private$inf_count > 0) {
tags$span(
class = "filter-card-summary-inf",
"Inf",
shiny::icon("xmark")
)
} else {
NULL
}
)
)
},

Expand Down
22 changes: 21 additions & 1 deletion inst/css/filter-panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,10 +276,30 @@ a.remove_all:hover {
.filter-card-summary {
width: 100%;
display: flex;
justify-content: space-between;
grid-area: summary;
}

.filter-card-summary-value {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.filter-card-summary-controls {
margin-left: auto;
display: flex;
gap: 1em;
}

.fa-check {
color: var(--bs-success, var(--success, #3c763d))
}

.fa-xmark {
color: var(--bs-danger, var(--danger, #a94442))
}

.filter-card-varlabel {
color: var(--bs-gray-500, var(--gray, darkgray));
margin-left: 0.5em;
Expand Down