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

Move icons into class

This commit is contained in:
Dmitry Lyzo 2020-04-25 10:00:20 +03:00
parent 73d39fe055
commit d088f5ef05
74 changed files with 229 additions and 233 deletions

View file

@ -18,7 +18,7 @@ define(["loading", "appRouter", "layoutManager", "appSettings", "apphost", "focu
var cardImageContainer;
if (item.showIcon) {
cardImageContainer = '<i class="cardImageIcon material-icons">' + item.icon + "</i>";
cardImageContainer = '<i class="cardImageIcon material-icons ' + item.icon + '"></i>';
} else {
cardImageContainer = '<div class="cardImage" style="' + item.cardImageStyle + '"></div>';
}

View file

@ -303,16 +303,16 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? "" : " hide";
var playIcon = session.PlayState.IsPaused ? 'pause' : 'play';
const playIcon = session.PlayState.IsPaused ? 'pause' : 'play_arrow';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><i class="material-icons">' + playIcon + '</i></button>';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><i class="material-icons">stop</i></button>';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><i class="material-icons ' + playIcon + '"></i></button>';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><i class="material-icons stop"></i></button>';
btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? "" : " hide";
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("ViewPlaybackInfo") + '"><i class="material-icons">info</i></button>';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("ViewPlaybackInfo") + '"><i class="material-icons info"></i></button>';
btnCssClass = session.ServerId && -1 !== session.SupportedCommands.indexOf("DisplayMessage") && session.DeviceId !== connectionManager.deviceId() ? "" : " hide";
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("SendMessage") + '"><i class="material-icons">message</i></button>';
html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("SendMessage") + '"><i class="material-icons message"></i></button>';
html += "</div>";
html += '<div class="sessionNowPlayingStreamInfo" style="padding:.5em 0 1em;">';
@ -368,7 +368,7 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
html += progress + "%";
html += "</progress>";
html += "<span style='color:#00a4dc;margin-left:5px;margin-right:5px;'>" + progress + "%</span>";
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonStop") + '" onclick="DashboardPage.stopTask(this, \'' + task.Id + '\');" class="autoSize"><i class="material-icons">cancel</i></button>';
html += '<button type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonStop") + '" onclick="DashboardPage.stopTask(this, \'' + task.Id + '\');" class="autoSize"><i class="material-icons cancel"></i></button>';
} else if (task.State === "Cancelling") {
html += '<span style="color:#cc0000;">' + globalize.translate("LabelStopping") + "</span>";
}
@ -571,11 +571,9 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
row.querySelector(".btnSessionStop").classList.add("hide");
}
if (session.PlayState && session.PlayState.IsPaused) {
btnSessionPlayPause.querySelector("i").innerHTML = "&#xE037;";
} else {
btnSessionPlayPause.querySelector("i").innerHTML = "pause";
}
let icons = ["play_arrow", "pause"];
if (session.PlayState && session.PlayState.IsPaused) icons = icons.reverse();
btnSessionPlayPause.querySelector("i").classList.replace(icons[0], icons[1]);
row.querySelector(".sessionNowPlayingStreamInfo").innerHTML = DashboardPage.getSessionNowPlayingStreamInfo(session);
row.querySelector(".sessionNowPlayingTime").innerHTML = DashboardPage.getSessionNowPlayingTime(session);

View file

@ -103,7 +103,7 @@ define(["loading", "libraryMenu", "globalize", "cardStyle", "emby-button", "emby
html += '<div class="cardImage coveredImage" style="background-image:url(\'' + plugin.thumbImage + "');\">";
html += "</div>";
} else {
html += '<i class="cardImageIcon material-icons">folder</i>';
html += '<i class="cardImageIcon material-icons folder"></i>';
}
html += "</a>";

View file

@ -47,7 +47,7 @@ define(["loading", "libraryMenu", "dom", "globalize", "cardStyle", "emby-button"
html += '<div class="cardImage coveredImage" style="background-image:url(\'' + plugin.ImageUrl + "');\">";
html += "</div>";
} else {
html += '<i class="cardImageIcon material-icons">folder</i>';
html += '<i class="cardImageIcon material-icons folder"></i>';
}
html += configPageUrl ? "</a>" : "</div>";

View file

@ -49,7 +49,7 @@ define(["jQuery", "loading", "datetime", "dom", "globalize", "emby-input", "emby
var trigger = task.Triggers[i];
html += '<div class="listItem listItem-border">';
html += '<i class="material-icons listItemIcon">schedule</i>';
html += '<i class="material-icons listItemIcon schedule"></i>';
if (trigger.MaxRuntimeMs) {
html += '<div class="listItemBody two-line">';
} else {
@ -68,7 +68,7 @@ define(["jQuery", "loading", "datetime", "dom", "globalize", "emby-input", "emby
}
html += "</div>";
html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDelete") + '"><i class="material-icons">delete</i></button>';
html += '<button class="btnDeleteTrigger" data-index="' + i + '" type="button" is="paper-icon-button-light" title="' + globalize.translate("ButtonDelete") + '"><i class="material-icons delete"></i></button>';
html += "</div>";
}

View file

@ -40,7 +40,7 @@ define(["jQuery", "loading", "events", "globalize", "serverNotifications", "date
}
html += '<div class="listItem listItem-border scheduledTaskPaperIconItem" data-status="' + task.State + '">';
html += "<a is='emby-linkbutton' style='margin:0;padding:0;' class='clearLink listItemIconContainer' href='scheduledtask.html?id=" + task.Id + "'>";
html += '<i class="material-icons listItemIcon">schedule</i>';
html += '<i class="material-icons listItemIcon schedule"></i>';
html += "</a>";
html += '<div class="listItemBody two-line">';
html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:left;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";

View file

@ -76,12 +76,12 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
var index = 0;
var html = '<div class="paperList">' + headers.map(function (h) {
var li = '<div class="listItem">';
li += '<i class="material-icons listItemIcon">info</i>';
li += '<i class="material-icons listItemIcon info"></i>';
li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + h.Name + ": " + (h.Value || "") + "</h3>";
li += '<div class="listItemBodyText secondary">' + (h.Match || "") + "</div>";
li += "</div>";
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteIdentificationHeader listItemButton" data-index="' + index + '"><i class="material-icons">delete</i></button>';
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteIdentificationHeader listItemButton" data-index="' + index + '"><i class="material-icons delete"></i></button>';
li += "</div>";
index++;
return li;
@ -132,11 +132,11 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
function renderXmlDocumentAttributes(page, attribute) {
var html = '<div class="paperList">' + attribute.map(function (h) {
var li = '<div class="listItem">';
li += '<i class="material-icons listItemIcon">info</i>';
li += '<i class="material-icons listItemIcon info"></i>';
li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + h.Name + " = " + (h.Value || "") + "</h3>";
li += "</div>";
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><i class="material-icons">delete</i></button>';
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><i class="material-icons delete"></i></button>';
return li += "</div>";
}).join("") + "</div>";
var elem = $(".xmlDocumentAttributeList", page).html(html).trigger("create");
@ -174,11 +174,11 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
var index = 0;
var html = '<div class="paperList">' + profiles.map(function (h) {
var li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
li += '<i class="material-icons listItemIcon">info</i>';
li += '<i class="material-icons listItemIcon info"></i>';
li += '<div class="listItemBody">';
li += '<h3 class="listItemBodyText">' + (h.Format || "") + "</h3>";
li += "</div>";
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-index="' + index + '"><i class="material-icons">delete</i></button>';
li += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-index="' + index + '"><i class="material-icons delete"></i></button>';
li += "</div>";
index++;
return li;
@ -270,7 +270,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
}
html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>';
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons delete"></i></button>';
html += "</div>";
}
@ -331,7 +331,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
}
html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>';
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons delete"></i></button>';
html += "</div>";
}
@ -415,7 +415,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
}
html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>';
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons delete"></i></button>';
html += "</div>";
}
@ -487,7 +487,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
}
html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>';
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons delete"></i></button>';
html += "</div>";
}
@ -567,7 +567,7 @@ define(["jQuery", "loading", "fnchecked", "emby-select", "emby-button", "emby-in
}
html += "</a>";
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons">delete</i></button>';
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-profileindex="' + i + '"><i class="material-icons delete"></i></button>';
html += "</div>";
}

View file

@ -40,7 +40,7 @@ define(["jQuery", "globalize", "loading", "libraryMenu", "listViewStyle", "emby-
html += "</div>";
if ("User" == profile.Type) {
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate("ButtonDelete") + '"><i class="material-icons">delete</i></button>';
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + globalize.translate("ButtonDelete") + '"><i class="material-icons delete"></i></button>';
}
html += "</div>";

View file

@ -1749,7 +1749,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
html += '<h2 class="sectionTitle sectionTitle-cards">';
html += "<span>" + type.name + "</span>";
html += "</h2>";
html += '<button class="btnAddToCollection sectionTitleButton" type="button" is="paper-icon-button-light" style="margin-left:1em;"><i class="material-icons" icon="add">add</i></button>';
html += '<button class="btnAddToCollection sectionTitleButton" type="button" is="paper-icon-button-light" style="margin-left:1em;"><i class="material-icons add"></i></button>';
html += "</div>";
html += '<div is="emby-itemscontainer" class="itemsContainer collectionItemsContainer vertical-wrap padded-left padded-right">';
var shape = "MusicAlbum" == type.type ? getSquareShape(false) : getPortraitShape(false);
@ -2078,7 +2078,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
bindAll(view, ".btnCancelTimer", "click", onCancelTimerClick);
bindAll(view, ".btnDeleteItem", "click", onDeleteClick);
bindAll(view, ".btnDownload", "click", onDownloadClick);
view.querySelector(".btnMoreCommands i").innerHTML = "&#xE5D3;";
view.querySelector(".trackSelections").addEventListener("submit", onTrackSelectionsSubmit);
view.querySelector(".btnSplitVersions").addEventListener("click", function () {
splitVersions(self, view, apiClient, params);

View file

@ -26,7 +26,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="' + padderClass + '"></div>';
html += '<div class="cardContent searchImage">';
html += '<div class="cardImageContainer coveredImage"><i class="cardImageIcon material-icons">dvr</i></div>';
html += '<div class="cardImageContainer coveredImage"><i class="cardImageIcon material-icons dvr"></i></div>';
html += "</div>";
html += "</div>";
html += '<div class="cardFooter visualCardBox-cardFooter">';
@ -101,7 +101,7 @@ define(["jQuery", "globalize", "scripts/taskbutton", "dom", "libraryMenu", "layo
for (var i = 0, length = providers.length; i < length; i++) {
var provider = providers[i];
html += '<div class="listItem">';
html += '<i class="listItemIcon material-icons">dvr</i>';
html += '<i class="listItemIcon material-icons dvr"></i>';
html += '<div class="listItemBody two-line">';
html += '<a is="emby-linkbutton" style="display:block;padding:0;margin:0;text-align:left;" class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + "&id=" + provider.Id + '">';
html += '<h3 class="listItemBodyText">';

View file

@ -268,7 +268,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
hasCardImageContainer = true;
} else if (!virtualFolder.showNameWithIcon) {
html += '<div class="cardImageContainer editLibrary" style="cursor:pointer;">';
html += '<i class="cardImageIcon-small material-icons">' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + "</i>";
html += '<i class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></i>';
hasCardImageContainer = true;
}
@ -281,7 +281,7 @@ define(["jQuery", "apphost", "scripts/taskbutton", "loading", "libraryMenu", "gl
if (!imgUrl && virtualFolder.showNameWithIcon) {
html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
html += '<i class="cardImageIcon-small material-icons">' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + "</i>";
html += '<i class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></i>';
if (virtualFolder.showNameWithIcon) {
html += '<div style="margin:1em 0;position:width:100%;">';

View file

@ -545,10 +545,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
function updateFullscreenIcon() {
if (playbackManager.isFullscreen(currentPlayer)) {
view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("ExitFullscreen"));
view.querySelector(".btnFullscreen i").innerHTML = "&#xE5D1;";
view.querySelector(".btnFullscreen i").classList.replace("fullscreen", "fullscreen_exit");
} else {
view.querySelector(".btnFullscreen").setAttribute("title", globalize.translate("Fullscreen") + " (f)");
view.querySelector(".btnFullscreen i").innerHTML = "fullscreen";
view.querySelector(".btnFullscreen i").classList.replace("fullscreen_exit", "fullscreen");
}
}
@ -748,10 +748,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
function updatePlayPauseState(isPaused) {
var button = view.querySelector(".btnPause i");
if (isPaused) {
button.innerHTML = "&#xE037;";
button.classList.replace("pause", "play_arrow");
button.setAttribute("title", globalize.translate("ButtonPlay") + " (k)");
} else {
button.innerHTML = "pause";
button.classList.replace("play_arrow", "pause");
button.setAttribute("title", globalize.translate("ButtonPause") + " (k)");
}
}
@ -885,10 +885,10 @@ define(["playbackManager", "dom", "inputManager", "datetime", "itemHelper", "med
if (isMuted) {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Unmute") + " (m)");
view.querySelector(".buttonMute i").innerHTML = "&#xE04F;";
view.querySelector(".buttonMute i").classList.replace("volume_up", "volume_off");
} else {
view.querySelector(".buttonMute").setAttribute("title", globalize.translate("Mute") + " (m)");
view.querySelector(".buttonMute i").innerHTML = "&#xE050;";
view.querySelector(".buttonMute i").classList.replace("volume_off", "volume_up");
}
if (showMuteButton) {

View file

@ -108,7 +108,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper-
li += h;
li += "</h3>";
li += "</div>";
li += '<button type="button" is="paper-icon-button-light" class="blockedTag btnDeleteTag listItemButton" data-tag="' + h + '"><i class="material-icons">delete</i></button>';
li += '<button type="button" is="paper-icon-button-light" class="blockedTag btnDeleteTag listItemButton" data-tag="' + h + '"><i class="material-icons delete"></i></button>';
return li += "</div>";
}).join("");
@ -143,7 +143,7 @@ define(["jQuery", "datetime", "loading", "libraryMenu", "listViewStyle", "paper-
itemHtml += "</h3>";
itemHtml += '<div class="listItemBodyText secondary">' + getDisplayTime(a.StartHour) + " - " + getDisplayTime(a.EndHour) + "</div>";
itemHtml += "</div>";
itemHtml += '<button type="button" is="paper-icon-button-light" class="btnDelete listItemButton" data-index="' + index + '"><i class="material-icons">delete</i></button>';
itemHtml += '<button type="button" is="paper-icon-button-light" class="btnDelete listItemButton" data-index="' + index + '"><i class="material-icons delete"></i></button>';
itemHtml += "</div>";
index++;
return itemHtml;

View file

@ -104,7 +104,7 @@ define(["loading", "dom", "globalize", "date-fns", "dfnshelper", "paper-icon-but
html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + "');\">";
} else {
html += '<div class="' + imageClass + ' flex align-items-center justify-content-center">';
html += '<i class="material-icons cardImageIcon">person</i>';
html += '<i class="material-icons cardImageIcon person"></i>';
}
html += "</div>";
@ -182,7 +182,7 @@ define(["loading", "dom", "globalize", "date-fns", "dfnshelper", "paper-icon-but
html += '<div class="cardImage" style="background-image:url(\'' + user.ImageUrl + "');\">";
html += "</div>";
} else {
html += '<i class="cardImageIcon material-icons">person</i>';
html += '<i class="cardImageIcon material-icons person"></i>';
}
html += "</a>";