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

Add btnFilter-wrapper to fix hover styling

Browse source 
Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>
This commit is contained in:
grafixeyehero 2024-08-17 01:55:30 +03:00
parent f6a29d868a
commit 5d2b614865
6 changed files with 41 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/filterdialog/filterIndicator.js
View file

@ -3,6 +3,7 @@ import './filterIndicator.scss';
export function getFilterStatus(query) { export function getFilterStatus(query) {
return Boolean( return Boolean(
query.Filters query.Filters
|| query.IsFavorite
|| query.VideoTypes || query.VideoTypes
|| query.SeriesStatus || query.SeriesStatus
|| query.Is4K || query.Is4K
@ -25,18 +26,18 @@ export function getFilterStatus(query) {
} }
export function setFilterStatus(page, hasFilters) { export function setFilterStatus(page, hasFilters) {
const btnFilter = page.querySelector('.btnFilter'); const btnFilterWrapper = page.querySelector('.btnFilter-wrapper');
if (btnFilter) { if (btnFilterWrapper) {
let indicatorElem = btnFilter.querySelector('.filterIndicator'); let indicatorElem = btnFilterWrapper.querySelector('.filterIndicator');
if (!indicatorElem && hasFilters) { if (!indicatorElem && hasFilters) {
btnFilter.insertAdjacentHTML( btnFilterWrapper.insertAdjacentHTML(
'beforeend', 'afterbegin',
'<div class="filterIndicator">!</div>' '<div class="filterIndicator">!</div>'
); );
btnFilter.classList.add('btnFilterWithIndicator'); btnFilterWrapper.classList.add('btnFilterWithIndicator');
indicatorElem = btnFilter.querySelector('.filterIndicator'); indicatorElem = btnFilterWrapper.querySelector('.filterIndicator');
} }
if (indicatorElem) { if (indicatorElem) {

16
src/components/filterdialog/filterIndicator.scss
View file

@ -2,22 +2,18 @@
position: relative; position: relative;
} }
.btnFilterWithIndicator > div {
margin-left: 3px;
}
.filterIndicator { .filterIndicator {
color: #fff; color: #fff;
position: absolute; position: absolute;
top: -7px; top: 2px;
right: 0; right: 2px;
width: 1.6em; width: 1.8em;
height: 1.6em; height: 1.8em;
z-index: 100000000; z-index: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 45%; font-size: 60%;
border-radius: 100em; 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); 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; background: #03a9f4;

4
src/controllers/livetv.html
View file

@ -61,7 +61,9 @@
<div class="pageTabContent" id="channelsTab" data-index="2"> <div class="pageTabContent" id="channelsTab" data-index="2">
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter sectionTitleButton" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-wrap padded-left padded-right"></div>
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">

8
src/controllers/movies/movies.html
View file

@ -6,7 +6,9 @@
<button is="paper-icon-button-light" class="btnShuffle autoSize hide" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnShuffle autoSize hide" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@ -48,7 +50,9 @@
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical">

16
src/controllers/music/music.html
View file

@ -15,7 +15,9 @@
<button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnShuffle musicglobalButton" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@ -57,7 +59,9 @@
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@ -73,7 +77,9 @@
<div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x"> <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x">
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div class="alphaPicker alphaPicker-fixed alphaPicker-vertical"> <div class="alphaPicker alphaPicker-fixed alphaPicker-vertical">
@ -94,7 +100,9 @@
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnShuffle autoSize" title="${Shuffle}"><span class="material-icons shuffle" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div is="emby-itemscontainer" id="items" class="itemsContainer vertical-list" style="max-width:67.5em;margin: 0 auto;"></div> <div is="emby-itemscontainer" id="items" class="itemsContainer vertical-list" style="max-width:67.5em;margin: 0 auto;"></div>

8
src/controllers/shows/tvrecommended.html
View file

@ -5,7 +5,9 @@
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer padded-left padded-right"></div> <div is="emby-itemscontainer" class="itemsContainer padded-left padded-right"></div>
@ -59,7 +61,9 @@
<div class="paging"></div> <div class="paging"></div>
<button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSelectView autoSize" title="${ButtonSelectView}"><span class="material-icons view_comfy" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button> <button is="paper-icon-button-light" class="btnSort autoSize" title="${Sort}"><span class="material-icons sort_by_alpha" aria-hidden="true"></span></button>
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button> <div class="btnFilter-wrapper">
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${Filter}"><span class="material-icons filter_list" aria-hidden="true"></span></button>
</div>
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"> <div is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right">
</div> </div>