peezy-tech/jojo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-05-12 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve label filtering exclusion (#10702)

Browse source 
Adds a new button on the right side of the label's filter menu items to explicitly exclude labels.

The new button is reachable with the keyboard by using the vertical arrow keys to reach the label you want to exclude and then the horizontal arrow keys to select the exclusion button.

The new button will only be visible when hovering the menu item or reaching it with the keyboard.

Adjusted the alignment of labels when at least one label is selected so that users can clearly discern which labels are selected or not.

Resolves #3302

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10702
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Luis <luis@adame.dev>
Co-committed-by: Luis <luis@adame.dev>
This commit is contained in:
Luis 2026-02-08 00:31:31 +01:00 • committed by Gusted
parent 239d7168e1
commit 3f7859f52d
16 changed files with 372 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web_src/css/index.css
View file

@ -84,6 +84,7 @@
@import "./review.css";
@import "./actions.css";
@import "./migrate.css";
@import "./issues.css";
@tailwind utilities;
@import "./helpers.css";

75
web_src/css/issues.css Normal file
View file

@ -0,0 +1,75 @@
/* Copyright 2025 The Forgejo Authors. All rights reserved.
* SPDX-License-Identifier: GPL-3.0-or-later */
.archived-label-filter:has(#archived-label-filter:not(:checked))
[data-is-archived] {
display: none !important;
}
.menu .item:has(> .label-filter-item) .label-exclude-item-btn {
opacity: 0;
position: absolute;
right: 0;
height: 100%;
width: 40px;
background: none;
color: var(--color-secondary-dark-5);
@media (any-hover: none) {
opacity: 1;
}
&.active {
color: var(--color-secondary-dark-10);
}
&:is(:hover, :focus-visible),
&.selected {
background: var(--color-secondary);
color: var(--color-secondary-dark-7);
}
}
.ui.menu .ui.dropdown .menu > .item:has(> .label-filter-item) {
max-width: 288px;
@media (any-hover: none) {
padding-right: 50px !important;
}
&:hover,
&.selected,
&:has(.label-exclude-item-btn.active) {
padding-right: 50px !important;
.label-exclude-item-btn {
opacity: 1;
}
}
}
.menu:has(> .item[data-selected])
.item:not([data-selected])
> .label-filter-item {
padding-left: 27px;
}
.menu .item .label-filter-item {
width: 100%;
min-width: 0;
}
.menu .item .label-filter-item > .label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
.menu .item .archived-label-indicator {
margin: 0 0 0 10px !important;
@media (prefers-reduced-motion: no-preference) {
transition: transform 200ms ease;
}
}