jellyfin/jellyfin-media-player
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-media-player.git synced 2024-11-23 14:09:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #125 from TheFeelTrain/patch-2

Browse Source 
Style JMP settings modal
This commit is contained in:
Ian Walton 2021-08-02 12:18:03 -04:00 committed by GitHub
commit 33f8f7554f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
native/nativeshell.js
View File

@ -140,19 +140,8 @@ async function showSettingsModal() {
}); });
const modalContainer = document.createElement("div"); const modalContainer = document.createElement("div");
Object.assign(modalContainer.style, { modalContainer.className = "dialogContainer";
position: "fixed", modalContainer.style.backgroundColor = "rgba(0,0,0,0.5)";
top: 10,
bottom: 10,
left: 10,
right: 10,
zIndex: 2000,
width: "100%",
height: "100%",
backgroundColor: "#000000C0",
display: "flex",
justifyContent: "center"
});
modalContainer.addEventListener("click", e => { modalContainer.addEventListener("click", e => {
if (e.target == modalContainer) { if (e.target == modalContainer) {
modalContainer.remove(); modalContainer.remove();
@ -161,34 +150,29 @@ async function showSettingsModal() {
document.body.appendChild(modalContainer); document.body.appendChild(modalContainer);
const modalContainer2 = document.createElement("div"); const modalContainer2 = document.createElement("div");
Object.assign(modalContainer2.style, { modalContainer2.className = "focuscontainer dialog dialog-fixedSize dialog-small formDialog opened";
width: "100%",
maxWidth: "500px",
overflowY: "auto",
margin: "20px",
height: "auto"
});
modalContainer.appendChild(modalContainer2); modalContainer.appendChild(modalContainer2);
const modal = document.createElement("div"); const modalHeader = document.createElement("div");
modal.className = "jmp-settings-modal"; modalHeader.className = "formDialogHeader";
Object.assign(modal.style, { modalContainer2.appendChild(modalHeader);
width: "100%",
padding: "20px",
boxSizing: "border-box",
backgroundColor: "#202020",
height: "min-content",
color: "#fff"
});
modalContainer2.appendChild(modal);
const title = document.createElement("h1"); const title = document.createElement("h3");
title.className = "formDialogHeaderTitle";
title.textContent = "Jellyfin Media Player Settings"; title.textContent = "Jellyfin Media Player Settings";
modal.appendChild(title); modalHeader.appendChild(title);
const modalContents = document.createElement("div");
modalContents.className = "formDialogContent smoothScrollY";
modalContents.style.paddingTop = "2em";
modalContainer2.appendChild(modalContents);
for (let section of settings) { for (let section of settings) {
const group = document.createElement("fieldset"); const group = document.createElement("fieldset");
modal.appendChild(group); group.className = "editItemMetadataForm editMetadataForm dialog-content-centered";
group.style.border = 0;
group.style.outline = 0;
modalContents.appendChild(group);
const createSection = async (clear) => { const createSection = async (clear) => {
if (clear) { if (clear) {
@ -200,16 +184,22 @@ async function showSettingsModal() {
}); });
const legend = document.createElement("legend"); const legend = document.createElement("legend");
legend.textContent = section.key; const legendHeader = document.createElement("h2");
legendHeader.textContent = section.key;
legendHeader.style.textTransform = "capitalize";
legend.appendChild(legendHeader);
group.appendChild(legend); group.appendChild(legend);
for (const setting of section.settings) { for (const setting of section.settings) {
const label = document.createElement("label"); const label = document.createElement("label");
label.className = "inputContainer";
label.style.marginBottom = "1.8em";
label.style.display = "block"; label.style.display = "block";
label.style.textTransform = "capitalize";
if (setting.options) { if (setting.options) {
const safeValues = {}; const safeValues = {};
const control = document.createElement("select"); const control = document.createElement("select");
control.style.maxWidth = "350px"; control.className = "emby-select-withcolor emby-select";
for (const option of setting.options) { for (const option of setting.options) {
safeValues[String(option.value)] = option.value; safeValues[String(option.value)] = option.value;
const opt = document.createElement("option"); const opt = document.createElement("option");
@ -238,7 +228,10 @@ async function showSettingsModal() {
createSection(true); createSection(true);
} }
}); });
label.appendChild(document.createTextNode(setting.key + " ")); const labelText = document.createElement('label');
labelText.className = "inputLabel";
labelText.textContent = setting.key + ": ";
label.appendChild(labelText);
label.appendChild(control); label.appendChild(control);
} else { } else {
const control = document.createElement("input"); const control = document.createElement("input");
@ -257,15 +250,11 @@ async function showSettingsModal() {
} }
const closeContainer = document.createElement("div"); const closeContainer = document.createElement("div");
Object.assign(closeContainer.style, { closeContainer.className = "formDialogFooter";
width: "100%", modalContents.appendChild(closeContainer);
display: "flex",
justifyContent: "flex-end",
paddingTop: "10px"
});
modal.appendChild(closeContainer);
const close = document.createElement("button"); const close = document.createElement("button");
close.className = "raised button-cancel block btnCancel formDialogFooterItem emby-button";
close.textContent = "Close" close.textContent = "Close"
close.addEventListener("click", () => { close.addEventListener("click", () => {
modalContainer.remove(); modalContainer.remove();