bachir/drupal-figli-compta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Turn Compte/Type filters into hover dropdowns, add a clear button to each filter

Browse Source 
A native <select multiple> can't collapse to a single-line trigger and
open as an overlay on hover -- it's either an always-open multi-row
list box or a single-value dropdown, not both. Replaced with a custom
dropdown: a trigger showing the current selection ("Tous" / "Maud,
Ouidade"), and a checkbox list shown on hover via a plain CSS :hover
rule (no open/close state needed). Checkboxes instead of ctrl/shift+click,
but same result -- several comptes/types at once -- with a more
discoverable interaction (no keyboard modifier to know about).

Also added a "✕ Effacer ce filtre" button next to Compte/Client/Type/
Année, shown only once that filter is active. Directly addresses the
Client filter specifically being painful to clear (select the text,
delete, press enter) -- one click now.
This commit is contained in:
bachir
2026-09-05 21:55:50 +02:00
parent 319b22207d
commit bb01c2dd90
2 changed files with 108 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/modules/custom/figli_compta_ledger/css/home.css
+72 -6
View File
@@ -58,13 +58,79 @@ html.gin--dark-mode #figli-home-app {
border-radius: 4px;
}
/* Compte/Type filters: <select multiple> so ctrl/shift+click can select
several values, rendered as a short scrollable list (size="4") rather
than the single-line native default -- needs an explicit width, since
a multi-row select sizes to its widest option's natural width
otherwise, unlike a single-line select's fixed line box. */
#figli-home-app .figli-toolbar select[multiple] {
/* Each filter control + its "✕ effacer" button, side by side. */
#figli-home-app .figli-filter-row {
display: flex;
align-items: center;
gap: 0.25rem;
}
#figli-home-app .figli-filter-clear {
background: transparent;
border: none;
color: var(--figli-text-light);
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
padding: 0.15rem;
}
#figli-home-app .figli-filter-clear:hover {
color: var(--figli-error);
}
/* Compte/Type filters: a native <select multiple> can't collapse to a
single-line trigger and expand as an overlay -- it's either a
single-line dropdown, or an always-open multi-row list box. Custom
dropdown instead: a trigger showing the current selection, and a
checkbox list overlay shown on hover (pure CSS, no open/close state
needed) -- checkboxes rather than ctrl/shift+click, but same result
(several comptes/types at once) with an even more discoverable
interaction (no keyboard modifier to know about).*/
#figli-home-app .figli-multiselect {
position: relative;
}
#figli-home-app .figli-multiselect-trigger {
font-size: 0.85rem;
padding: 0.2rem 0.4rem;
background: var(--figli-bg);
color: var(--figli-text);
border: 1px solid var(--figli-border);
border-radius: 4px;
width: 9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
#figli-home-app .figli-multiselect-arrow {
float: right;
color: var(--figli-text-light);
}
#figli-home-app .figli-multiselect-panel {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 20;
min-width: 100%;
white-space: nowrap;
background: var(--figli-bg);
color: var(--figli-text);
border: 1px solid var(--figli-border);
border-radius: 4px;
padding: 0.3rem 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#figli-home-app .figli-multiselect:hover .figli-multiselect-panel {
display: block;
}
#figli-home-app .figli-multiselect-option {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
font-weight: 400;
padding: 0.15rem 0;
}
#figli-home-app .figli-client-input {