mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Use remove+add pattern for icons
This commit is contained in:
parent
d98645135b
commit
a3bc8c183e
7 changed files with 62 additions and 42 deletions
|
@ -280,11 +280,10 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
|
||||
function updatePlayPauseState(isPaused) {
|
||||
if (playPauseButtons) {
|
||||
let icons = ['play_arrow', 'pause'];
|
||||
if (isPaused) icons = icons.reverse();
|
||||
|
||||
playPauseButtons.forEach((button) => {
|
||||
button.querySelector('.material-icons').classList.replace(icons[0], icons[1]);
|
||||
const icon = button.querySelector('.material-icons');
|
||||
icon.classList.remove('play_arrow', 'pause');
|
||||
icon.classList.add(isPaused ? 'play_arrow' : 'pause');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -387,9 +386,9 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
|
|||
showMuteButton = false;
|
||||
}
|
||||
|
||||
let icons = ['volume_off', 'volume_up'];
|
||||
if (isMuted) icons = icons.reverse();
|
||||
muteButton.querySelector('.material-icons').classList.replace(icons[0], icons[1]);
|
||||
const muteButtonIcon = muteButton.querySelector('.material-icons');
|
||||
muteButtonIcon.classList.remove('volume_off', 'volume_up');
|
||||
muteButtonIcon.classList.add(isMuted ? 'volume_off' : 'volume_up');
|
||||
|
||||
if (supportedCommands.indexOf('SetVolume') === -1) {
|
||||
showVolumeSlider = false;
|
||||
|
|
|
@ -101,9 +101,8 @@ define(['events', 'playbackManager', 'dom', 'browser', 'css!./iconosd', 'materia
|
|||
function updatePlayerVolumeState(isMuted, volume) {
|
||||
|
||||
if (iconElement) {
|
||||
let icons = ["volume_off", "volume_up"];
|
||||
if (isMuted) icons = icons.reverse();
|
||||
iconElement.classList.replace(icons[0], icons[1]);
|
||||
iconElement.classList.remove('volume_off', 'volume_up');
|
||||
iconElement.classList.add(isMuted ? 'volume_off' : 'volume_up');
|
||||
}
|
||||
if (progressElement) {
|
||||
progressElement.style.width = (volume || 0) + '%';
|
||||
|
|
|
@ -349,18 +349,23 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
|
|||
showVolumeSlider = false;
|
||||
}
|
||||
|
||||
const buttonMute = view.querySelector(".buttonMute");
|
||||
const buttonMuteIcon = buttonMute.querySelector(".material-icons");
|
||||
|
||||
buttonMuteIcon.classList.remove("volume_off", "volume_up");
|
||||
|
||||
if (isMuted) {
|
||||
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute"));
|
||||
view.querySelector(".buttonMute .material-icons").classList.replace("volume_up", "volume_off");
|
||||
buttonMute.setAttribute("title", globalize.translate("Unmute"));
|
||||
buttonMuteIcon.classList.add("volume_off");
|
||||
} else {
|
||||
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute"));
|
||||
view.querySelector(".buttonMute .material-icons").classList.replace("volume_off", "volume_up");
|
||||
buttonMute.setAttribute("title", globalize.translate("Mute"));
|
||||
buttonMuteIcon.classList.add("volume_up");
|
||||
}
|
||||
|
||||
if (showMuteButton) {
|
||||
view.querySelector(".buttonMute").classList.remove("hide");
|
||||
buttonMute.classList.remove("hide");
|
||||
} else {
|
||||
view.querySelector(".buttonMute").classList.add("hide");
|
||||
buttonMute.classList.add("hide");
|
||||
}
|
||||
|
||||
var nowPlayingVolumeSlider = context.querySelector(".nowPlayingVolumeSlider");
|
||||
|
@ -382,9 +387,11 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
|
|||
function updatePlayPauseState(isPaused, isActive) {
|
||||
var context = dlg;
|
||||
var btnPlayPause = context.querySelector(".btnPlayPause");
|
||||
let icons = ["play_circle_filled", "pause_circle_filled"];
|
||||
if (isPaused) icons = icons.reverse();
|
||||
btnPlayPause.querySelector(".material-icons").classList.replace(icons[0], icons[1]);
|
||||
const btnPlayPauseIcon = btnPlayPause.querySelector(".material-icons");
|
||||
|
||||
btnPlayPauseIcon.classList.remove("play_circle_filled", "pause_circle_filled");
|
||||
btnPlayPauseIcon.classList.add(isPaused ? "play_circle_filled" : "pause_circle_filled");
|
||||
|
||||
buttonVisible(btnPlayPause, isActive);
|
||||
}
|
||||
|
||||
|
|
|
@ -181,9 +181,8 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
|
|||
return;
|
||||
}
|
||||
|
||||
let icons = ["arrow_downward", "arrow_upward"];
|
||||
if (values.sortOrder === 'Descending') icons = icons.reverse();
|
||||
btnSortIcon.classList.replace(icons[0], icons[1]);
|
||||
btnSortIcon.classList.remove('arrow_downward', 'arrow_upward');
|
||||
btnSortIcon.classList.add(values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
|
||||
}
|
||||
|
||||
function bindAll(elems, eventName, fn) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue