Applied new popup style to Jobs view and fixed manga library populating twice sometimes
This commit is contained in:
db-2001
parent
9309a4e28f
commit
9accca0ad2
@ -240,18 +240,39 @@
|
||||
</publication-details>
|
||||
</publication-viewer>
|
||||
</popup>
|
||||
|
||||
|
||||
<popup id="jobStatusView">
|
||||
<blur-background id="blurBackgroundJobStatus" onclick="jobStatusView.style.display= 'none';"></blur-background>
|
||||
<blur-background id="blurBackgroundSettingsPopup" onclick="jobStatusView.style.display = 'none';"></blur-background>
|
||||
<popup-window>
|
||||
<div>
|
||||
<div id="jobStatusRunning" style="border-right: 1px solid gray;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="jobStatusWaiting" style="border-left: 1px solid gray;"></div>
|
||||
</div>
|
||||
<border-bar>
|
||||
<popup-title>Jobs</popup-title>
|
||||
<popup-close onclick="jobStatusView.style.display = 'none'">×</popup-close>
|
||||
</border-bar>
|
||||
<popup-content>
|
||||
|
||||
<div class="popup-section">
|
||||
RUNNING JOBS
|
||||
<div class="section-content" id="jobStatusRunning">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-section">
|
||||
QUEUED JOBS
|
||||
<div class="section-content" id="jobStatusWaiting">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</popup-content>
|
||||
|
||||
<border-bar>
|
||||
<!-- <div class="button-container">
|
||||
<border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
|
||||
</div> -->
|
||||
</border-bar>
|
||||
|
||||
</popup-window>
|
||||
</popup>
|
||||
</viewport>
|
||||
|
||||
<footer>
|
||||
|
||||
@ -360,7 +360,6 @@ createMonitorJobButton.addEventListener("click", () => {
|
||||
CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
|
||||
UpdateJobs();
|
||||
mangaViewerPopup.style.display = "none";
|
||||
ResetContent();
|
||||
});
|
||||
startJobButton.addEventListener("click", () => {
|
||||
StartJob(selectedJob.id);
|
||||
@ -374,7 +373,6 @@ deleteJobButton.addEventListener("click", () => {
|
||||
RemoveJob(selectedJob.id);
|
||||
UpdateJobs();
|
||||
mangaViewerPopup.style.display = "none";
|
||||
ResetContent();
|
||||
});
|
||||
|
||||
function ShowMangaWindow(job, manga, event, add){
|
||||
@ -764,14 +762,6 @@ function UpdateJobs(){
|
||||
GetMonitorJobs().then((json) => {
|
||||
if(monitoringJobsCount != json.length){
|
||||
ResetContent();
|
||||
//console.log(json);
|
||||
json.forEach(job => {
|
||||
var mangaView = CreateManga(job.manga, job.mangaConnector.name);
|
||||
mangaView.addEventListener("click", (event) => {
|
||||
ShowMangaWindow(job, job.manga, event, false);
|
||||
});
|
||||
tasksContent.appendChild(mangaView);
|
||||
});
|
||||
monitoringJobsCount = json.length;
|
||||
}
|
||||
});
|
||||
@ -831,39 +821,44 @@ function createJob(jobjson){
|
||||
|
||||
|
||||
var wrapper = document.createElement("div");
|
||||
wrapper.className = "jobWrapper";
|
||||
wrapper.className = "section-item";
|
||||
wrapper.id = GetValidSelector(jobjson.id);
|
||||
|
||||
var image = document.createElement("img");
|
||||
image.className = "jobImage";
|
||||
image.src = GetCoverUrl(manga.internalId);
|
||||
wrapper.appendChild(image);
|
||||
|
||||
|
||||
var details = document.createElement("div");
|
||||
details.className = 'jobDetails';
|
||||
|
||||
var title = document.createElement("span");
|
||||
title.className = "jobTitle";
|
||||
if(jobjson.chapter != null)
|
||||
title.innerText = `${manga.sortName} - ${jobjson.chapter.fileName}`;
|
||||
else if(jobjson.manga != null)
|
||||
title.innerText = manga.sortName;
|
||||
wrapper.appendChild(title);
|
||||
details.appendChild(title);
|
||||
|
||||
var progressBar = document.createElement("progress");
|
||||
progressBar.className = "jobProgressBar";
|
||||
progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
|
||||
wrapper.appendChild(progressBar);
|
||||
details.appendChild(progressBar);
|
||||
|
||||
var progressSpan = document.createElement("span");
|
||||
progressSpan.className = "jobProgressSpan";
|
||||
progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`;
|
||||
progressSpan.innerText = "0% 00:00:00";
|
||||
wrapper.appendChild(progressSpan);
|
||||
progressSpan.innerText = "Pending...";
|
||||
details.appendChild(progressSpan);
|
||||
|
||||
var cancelSpan = document.createElement("span");
|
||||
cancelSpan.className = "jobCancel";
|
||||
cancelSpan.innerText = "Cancel";
|
||||
cancelSpan.addEventListener("click", () => CancelJob(jobjson.id));
|
||||
wrapper.appendChild(cancelSpan);
|
||||
details.appendChild(cancelSpan);
|
||||
|
||||
wrapper.appendChild(details);
|
||||
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
|
||||
@ -420,6 +420,13 @@ popup popup-window {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
popup#jobStatusView popup-window {
|
||||
left: 20%;
|
||||
top: 20%;
|
||||
height: 60%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
popup-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -894,82 +901,60 @@ footer-tag-popup::before{
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#jobStatusView {
|
||||
z-index: 50;
|
||||
#jobStatusRunning > .section-item {
|
||||
flex-direction: row;
|
||||
height: 150px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#jobStatusView > popup-window {
|
||||
top: 80px;
|
||||
width: 50%;
|
||||
max-height: calc(100% - 140px);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
background-color: transparent;
|
||||
#jobStatusWaiting > .section-item {
|
||||
flex-direction: row;
|
||||
height: 150px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#jobStatusView > popup-window > div {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
width: 50%;
|
||||
margin: 0;
|
||||
max-height: 100%;
|
||||
.section-item > .jobImage {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#jobStatusView > popup-window > div > div {
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
.jobDetails {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jobWrapper {
|
||||
width: 90%;
|
||||
margin: 2px 5%;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background-color: rgba(187,187,187,0.4);
|
||||
border-radius: 3px;
|
||||
.section-item > .jobDetails > .jobTitle {
|
||||
margin: 5px;
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
text-wrap: wrap;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobImage {
|
||||
height: 90%;
|
||||
width: 20%;
|
||||
left: 5px;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobTitle {
|
||||
position: absolute;
|
||||
left: calc(20% + 10px);
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobProgressBar {
|
||||
position: absolute;
|
||||
left: calc(20% + 10px);
|
||||
bottom: calc(12pt + 10px);
|
||||
width: calc(80% - 20px);
|
||||
.section-item > .jobDetails > .jobProgressBar {
|
||||
margin: 5px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobProgressSpan {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: calc(12pt + 20px);
|
||||
width: 60%;
|
||||
text-align: right;
|
||||
.section-item > .jobDetails > .jobProgressSpan {
|
||||
margin: 5px;
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.jobWrapper > .jobCancel {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 5px;
|
||||
.section-item > .jobDetails > .jobCancel {
|
||||
margin-top: auto;
|
||||
margin-bottom: 5px;
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
font-size: 12pt;
|
||||
color: var(--secondary-color);
|
||||
cursor: pointer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user