From 81b3ab8942b0401a23b07ea329b9272a45c7eabc Mon Sep 17 00:00:00 2001
From: "kazzer@ub.uni-leipzig.de" <kazzer@uni-leipzig.de>
Date: Tue, 14 Jun 2022 15:17:05 +0200
Subject: [PATCH] refs #21607 [finc] vf6 makes new keep-filters feature more
accessible
* adds filter reset warning texts and colors
* overwrites vertical align
---
local/languages/de.ini | 2 +
local/languages/en.ini | 1 +
themes/finc-accessibility/scss/compiled.scss | 68 ++++++-
.../templates/search/filters.phtml | 169 ++++++++++++++++++
themes/finc/scss/_customVariables.scss | 7 +-
themes/finc/scss/compiled.scss | 16 +-
6 files changed, 256 insertions(+), 7 deletions(-)
create mode 100644 themes/finc-accessibility/templates/search/filters.phtml
diff --git a/local/languages/de.ini b/local/languages/de.ini
index fdd1f1f1949..9ae5320b155 100644
--- a/local/languages/de.ini
+++ b/local/languages/de.ini
@@ -678,6 +678,7 @@ cat_establish_account = "Bitte geben Sie folgende Angaben ein"
cat_password_abbrev = "Passwort Katalog"
cat_username_abbrev = "Benutzername Katalog"
cited_articles = "Cited Articles"
+clear_tag_filter = "Filter zurücksetzen"
close = schließen
comment_error_load = "Fehler: Laden der Kommentareinträge fehlgeschlagen"
comment_error_save = "Fehler: Speichern des Kommentars fehlgeschlagen"
@@ -885,6 +886,7 @@ create a new list = "erstellen Sie eine neue Liste"
page_reload_hint = "Seite wird neu geladen"
page_reload_on_select_hint = "Seite wird bei Auswahl des Filters '%%filter_name%%' neu geladen"
page_reload_on_deselect_hint = "Seite wird neu geladen, wenn der Filter '%%filter_name%%' abgewählt wird"
+page_reload_on_deselect_all_hint = "Seite wird neu geladen, wenn Filter zurückgesetzt werden"
page_reload_on_exclude_hint = "Seite wird neu geladen, wenn der Filter '%%filter_name%%' aus den Suchergebnissen ausgeschlossen wird"
password_too_short = "Zu kurz"
password_very_weak = "Sehr schwach"
diff --git a/local/languages/en.ini b/local/languages/en.ini
index 540e6182b18..5b49b12f7e5 100644
--- a/local/languages/en.ini
+++ b/local/languages/en.ini
@@ -847,6 +847,7 @@ create a new list = "Create a New List"
page_reload_hint = "Page will refresh immediately"
page_reload_on_select_hint = "Page will refresh when filter '%%filter_name%%' is selected"
page_reload_on_deselect_hint = "Page will refresh when filter '%%filter_name%%' is deselected"
+page_reload_on_deselect_all_hint = "Page will refresh when filters are deselected"
page_reload_on_exclude_hint = "Page will refresh when filter '%%filter_name%%' is selected for exclusion from the search results"
password_too_short = "Too short"
password_very_weak = "Very weak"
diff --git a/themes/finc-accessibility/scss/compiled.scss b/themes/finc-accessibility/scss/compiled.scss
index 8f930d159bf..c4c4d75a239 100644
--- a/themes/finc-accessibility/scss/compiled.scss
+++ b/themes/finc-accessibility/scss/compiled.scss
@@ -17,6 +17,21 @@
// $brand-info: #a0d3e8 !default; // cornflower
// $brand-success: #085218 !default; // sea-green
// $brand-warning: #f08a24 !default; // carrot
+
+$black: #000;
+$white: #fff;
+$brand-primary: #204563 !default;
+$brand-warning: #f08a24 !default;
+$sidebar-item-active-hover-bg: transparentize($brand-primary, .1) !default;
+$sidebar-facet-active-hover-color: $white !default;
+
+// Variables for search-filter-remove in Header
+$search-filter-remove-hover-bg: $brand-warning !default;
+$search-filter-remove-hover-color: $black !default; //
+
+$search-filter-remove-icon: '\f00d';
+
+
// -------------------------------------------------------
// 1.2 DO NOT define site-specific colours in finc - this will be done in site-specific themes
// -------------------------------------------------------
@@ -44,7 +59,8 @@
// ATTENTION: any change made here will affect ALL subsequent branches !!!
//// Result List ol, ul that contains li.result or facet group / side facets that contains li.facet
-.record-list, .facet-group > ul {
+.record-list,
+.facet-group > ul {
list-style: none;
margin: 0;
padding: 0;
@@ -64,14 +80,60 @@
}
}
+// Keep Filters elements in header
+.reset-filters-btn {
+ background-color: $brand-warning;
+ color: $black;
+
+ &:focus,
+ &:hover {
+ background: $sidebar-item-active-hover-bg;
+ color: $sidebar-facet-active-hover-color;
+ }
+}
+
+.active-filters {
+ .filters .filter-value:focus,
+ .filters .filter-value:hover,
+ .search-filter-remove:visited,
+ .search-filter-remove:focus,
+ .search-filter-remove:hover,
+ .search-filter-remove:visited:focus,
+ .search-filter-remove:visited:hover {
+ background: $search-filter-remove-hover-bg;
+ color: $search-filter-remove-hover-color;
+ }
+
+ .filters .filter-value:focus,
+ .filters .filter-value:hover {
+ .search-filter-remove::after {
+ color: $red;
+ }
+
+ .search-filter-remove,
+ .search-filter-remove:visited {
+ color: $search-filter-remove-hover-color !important; // keep !important
+ }
+ }
+}
+
+.search-filter-remove::after {
+ content: $search-filter-remove-icon;
+}
+
// remove filter links styling
a.remove-filter {
display: flex;
width: 100%;
}
-.record-tab.active{
+.record-tab.active {
.load-tab-content {
display: none;
}
-}
\ No newline at end of file
+}
+
+// overwrite vertical align
+#dropdown-toggle-Format {
+ vertical-align: unset;
+}
diff --git a/themes/finc-accessibility/templates/search/filters.phtml b/themes/finc-accessibility/templates/search/filters.phtml
new file mode 100644
index 00000000000..d30559c7b49
--- /dev/null
+++ b/themes/finc-accessibility/templates/search/filters.phtml
@@ -0,0 +1,169 @@
+<!-- finc-accessibility - search - filters -->
+<?php
+ if (!isset($this->params)) {
+ // No current search, use last search in memory
+ $params = $this->searchMemory()->getLastSearchParams($this->searchClassId);
+ } else {
+ // clone params so that the manipulation doesn't cause trouble e.g. for facets
+ $params = clone $this->params;
+ }
+
+ $lastSort = $this->searchMemory()->getLastSort($this->searchClassId);
+ $options = $this->searchOptions($this->searchClassId);
+ $hasDefaultsApplied = $params->hasDefaultsApplied();
+ $filterCount = $this->searchbox()->getFilterCount($checkboxFilters, $filterList);
+
+ // Determine whether the only filters applied are the default ones; this controls
+ // when we display or hide the reset button:
+ $defaultFilters = $options->getDefaultFilters();
+ $onlyDefaultsApplied = count($defaultFilters) == $filterCount;
+ foreach ($defaultFilters as $currentDefault) {
+ if (!$params->hasFilter($currentDefault)) {
+ $onlyDefaultsApplied = false;
+ break;
+ }
+ }
+
+ $advancedSearch = $this->searchType === 'advanced';
+?>
+<?php ob_start(); ?>
+ <?php foreach ($checkboxFilters as $filter): ?>
+ <?php if ($filter['selected']): ?>
+ <span class="filter-value">
+ <?php
+ $removeLink = isset($urlQuery)
+ ? $urlQuery->removeFilter($filter['filter'])
+ : $this->searchMemory()->getEditLink(
+ $this->searchClassId, 'removeFilter', $filter['filter']
+ );
+ $desc = $this->translate($filter['desc']);
+ $ariaLabel = $this->translate('Remove filter') . ' ' . $this->escapeHtmlAttr($desc);
+ ?>
+ <?=$desc?>
+ <?php if($removeLink): ?>
+ <a class="search-filter-remove" aria-label="<?=$ariaLabel?>" href="<?=$removeLink?>"><!--icon from css --></a>
+ <?php endif; ?>
+ </span>
+ <?php endif ?>
+ <?php endforeach; ?>
+
+ <?php foreach ($filterList as $field => $data): ?>
+ <div class="title-value-pair">
+ <span class="filters-title"><?=$this->transEsc($field)?>:</span>
+ <?php /* finc: set number of filters from one group for display in dropdown to '> 1'
+ so 2 and more filters from one group will be presented in a dropdown rather
+ than as a long chain of terms - CK */ ?>
+ <?php if (count($data) > 1): ?>
+ <div class="search-filter-dropdown dropdown">
+ <?php $dropdown = true; ?>
+ <?php $safeId = preg_replace('/[^a-zA-Z0-9]/', '', $field); ?>
+ <button id="dropdown-toggle-<?=$safeId?>" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+ <?=$this->transEsc('filter_toggle_entries', ['%%count%%' => count($data)])?>
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-toggle-<?=$safeId?>">
+ <?php else: ?>
+ <?php $dropdown = false; ?>
+ <?php endif; ?>
+ <?php foreach ($data as $index => $value): ?>
+ <?php if ($dropdown): ?>
+ <li>
+ <?php endif; ?>
+ <?php
+ switch ($value['operator']) {
+ case 'NOT':
+ $operatorChar = '-';
+ $join = $this->transEsc('NOT');
+ break;
+ case 'OR':
+ $operatorChar = '~';
+ $join = $this->transEsc('OR');
+ break;
+ case 'AND':
+ $operatorChar = '';
+ $join = $this->transEsc('AND');
+ break;
+ default:
+ $operatorChar = $join = '';
+ }
+ $operatorClass = $this->escapeHtmlAttr(strtolower($value['operator']));
+ ?>
+ <span class="filters-term filters-<?=$operatorClass?>">
+ <?=($index > 0 || 'NOT' === $value['operator']) ? $join : '' ?>
+ </span>
+ <span class="filter-value filters-<?=$operatorClass?>">
+ <?php /* finc uses entire text + icon as link for larger interaction area; adds more detailed aria-label */ ?>
+ <?php
+ $removeLink = isset($this->urlQuery)
+ ? $urlQuery->removeFacet($value['field'], $value['value'], $value['operator'])
+ : $this->searchMemory()->getEditLink($this->searchClassId, 'removeFacet', $value);
+ ?>
+ <a class="search-filter-remove"
+ aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_hint', ['%%filter_name%%' => $value['displayText']])?>"
+ href="<?=$removeLink?>">
+ <span class="text">
+ <?=$this->escapeHtml($value['displayText'])?>
+ </span>
+ <!--icon from css -->
+ </a>
+ </span>
+ <?php if ($dropdown): ?>
+ </li>
+ <?php endif; ?>
+ <?php endforeach; ?>
+ <?php if ($dropdown): ?>
+ </ul>
+ </div>
+ <?php endif; ?>
+ </div>
+ <?php endforeach; ?>
+<?php $filters = ob_get_contents(); ?>
+<?php ob_end_clean(); ?>
+
+<?php if ($hasDefaultsApplied || $filterCount > 0): ?>
+ <?php
+ $resetLink = null;
+ if (!$onlyDefaultsApplied) {
+ $resetLink = isset($urlQuery)
+ ? $urlQuery->removeAllFilters()->resetDefaultFilters()
+ : $this->searchMemory()->getEditLink($this->searchClassId, 'removeAllFilters', 1);
+ }
+ ?>
+ <?php // Normal view ?>
+ <div class="active-filters hidden-xs">
+ <?php if ($resetLink && $options->getRetainFilterSetting()): ?>
+ <?php /* finc adds verbose reload warning via aria-label */ ?>
+ <a class="reset-filters-btn" href="<?=$resetLink?>"
+ aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_all_hint', ['%%filter_name%%' => $value['displayText']])?>"
+ >
+ <?=$this->transEsc('reset_filters_button') ?>
+ </a>
+ <?php elseif ($advancedSearch): ?>
+ <p class="adv_search_filters"><?=$this->transEsc('adv_search_filters')?>:</p>
+ <?php endif; ?>
+ <div class="filters">
+ <?=$filters ?>
+ </div>
+ <div class="clearfix"></div>
+ </div>
+ <?php // Narrow view ?>
+ <div class="active-filters visible-xs">
+ <div class="filters-toggle-bar">
+ <?php if ($resetLink && $options->getRetainFilterSetting()): ?>
+ <?php /* finc adds verbose reload warning via aria-label */ ?>
+ <a class="reset-filters-btn active" href="<?=$resetLink?>"
+ aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_all_hint', ['%%filter_name%%' => $value['displayText']])?>">
+ <?=$this->transEsc('reset_filters_button')?>
+ </a>
+ <?php endif; ?>
+ <div class="filters-toggle collapsed" data-toggle="collapse" data-target="#active-filters-mobile">
+ <?=$this->transEsc('show_filters_html', ['%%count%%' => $filterCount])?>
+ </div>
+ <div class="clearfix"></div>
+ </div>
+ <div id="active-filters-mobile" class="filters filters-bar collapse">
+ <?=$filters ?>
+ </div>
+ <div class="clearfix"></div>
+ </div>
+<?php endif; ?>
+<!-- finc-accessibility - search - filters - END -->
diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index 8decbf465c9..dd5d88f3335 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -29,6 +29,7 @@ $brand-success: #085218 !default; // darker green = #3c763d
$brand-warning: #f08a24 !default;
$traffic-light-yellow: #ff0 !default;
+$red: #f00;
$white: #fff;
$ghost: #fafafa;
$snow: #f9f9f9;
@@ -161,6 +162,10 @@ $btn-header-nav-medium-only-padding: 6px 2px !default;
// Padding for toolbar buttons in record view/detail view
$record-view-toolbar-button-padding: .5rem;
+// search-filter-remove in Header
+$search-filter-remove-hover-bg: $brand-warning !default;
+$search-filter-remove-hover-color: $black !default; //
+
//// BADGES (elements in sidebar that hold the hit numbers)
$badge-bg: transparent !default;
$badge-color: $jet !default;
@@ -171,7 +176,7 @@ $badge-link-hover-color: saturate($brand-danger, 50%) !default;
$sidebar-badge-fa-color: darken($brand-secondary, 40%) !default;
//// Arrows
-$slick-arrow-hover-color: red !default;
+$slick-arrow-hover-color: $red !default;
//// Navbar toggler
$navbar-default-toggle-hover-bg: $white !default;
diff --git a/themes/finc/scss/compiled.scss b/themes/finc/scss/compiled.scss
index 97fe1b1dafc..fb79b34546d 100644
--- a/themes/finc/scss/compiled.scss
+++ b/themes/finc/scss/compiled.scss
@@ -242,6 +242,7 @@ h4 {
list-style-type: none;
}
}
+
// ol {}
// li {}
// dl {}
@@ -2887,7 +2888,7 @@ body:not(.offcanvas) .sidebar {
.sidebar .facet.active,
.sidebar a.active {
background-color: $brand-warning;
- color: $black;
+ color: $sidebar-facet-active-color;
// also include icon
.fa {
@@ -2919,13 +2920,22 @@ body:not(.offcanvas) .sidebar {
.sidebar .facet.active {
&:focus,
&:hover {
- color: $white;
+ color: $sidebar-facet-active-hover-color;
// also include icon
.fa {
color: inherit;
}
}
+
+ &:visited {
+ color: $sidebar-facet-active-color !important; // keep important
+
+ &:focus,
+ &:hover {
+ color: $sidebar-facet-active-hover-color !important; // keep important
+ }
+ }
}
// #13625 avoid ugly linebreaks with overlong words, RL
@@ -3033,7 +3043,7 @@ body:not(.offcanvas) .sidebar {
.facet.active > &,
.sidebar a.active > & {
background-color: transparent;
- color: $btn-primary-color;
+ color: $sidebar-facet-active-hover-color;
}
}
--
GitLab