mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #5717 from grafixeyehero/Add-filter-status-Indicator-legacy

Browse source 
Add filter status indicator
This commit is contained in:
Bill Thornton 2024-08-20 16:45:52 -04:00 • committed by GitHub
commit 31fbc08269
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 123 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/filterdialog/filterIndicator.js Normal file
View file

@ -0,0 +1,49 @@
import './filterIndicator.scss';
function getFilterStatus(query) {
return Boolean(
query.Filters
|| query.IsFavorite
|| query.VideoTypes
|| query.SeriesStatus
|| query.Is4K
|| (query.IsHD !== undefined && query.IsHD !== null)
|| query.IsSD
|| query.Is3D
|| query.HasSubtitles
|| query.HasTrailer
|| query.HasSpecialFeature
|| query.HasThemeSong
|| query.HasThemeVideo
|| query.IsMissing
|| query.ParentIndexNumber
|| query.Genres
|| query.Tags
|| query.Years
|| query.OfficialRatings
|| query.IsUnaired
);
}
export function setFilterStatus(page, query) {
const hasFilters = getFilterStatus(query);
const btnFilterWrapper = page.querySelector('.btnFilter-wrapper');
if (btnFilterWrapper) {
let indicatorElem = btnFilterWrapper.querySelector('.filterIndicator');
if (!indicatorElem && hasFilters) {
btnFilterWrapper.insertAdjacentHTML(
'afterbegin',
'<div class="filterIndicator">!</div>'
);
btnFilterWrapper.classList.add('btnFilterWithIndicator');
indicatorElem = btnFilterWrapper.querySelector('.filterIndicator');
}
if (indicatorElem) {
indicatorElem.classList.toggle('hide', !hasFilters);
}
}
}

21
src/components/filterdialog/filterIndicator.scss Normal file
View file

@ -0,0 +1,21 @@
.btnFilterWithIndicator {
position: relative;
}
.filterIndicator {
color: #fff;
position: absolute;
top: 2px;
right: 2px;
width: 1.8em;
height: 1.8em;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 60%;
border-radius: 100em;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
background: #03a9f4;
font-weight: bold;
}