From 0f2b07de7eedb56fd11492b96b7be108ea9d9701 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Fri, 1 Nov 2024 23:50:55 -0700 Subject: [PATCH] feat: implement preview modal with dynamic content and styling adjustments --- src/home/rendering/render-preview-modal.ts | 42 ++---------- src/home/sorting/sorting-manager.ts | 6 +- static/index.html | 31 +++++++++ static/style/inverted-style.css | 74 ++++++++++++++++++++-- static/style/style.css | 74 ++++++++++++++++++++-- 5 files changed, 174 insertions(+), 53 deletions(-) diff --git a/src/home/rendering/render-preview-modal.ts b/src/home/rendering/render-preview-modal.ts index f9d80c3a..f31314af 100644 --- a/src/home/rendering/render-preview-modal.ts +++ b/src/home/rendering/render-preview-modal.ts @@ -1,41 +1,11 @@ -export const modal = document.createElement("div"); -modal.classList.add("preview"); -const modalContent = document.createElement("div"); -modalContent.classList.add("preview-content"); -const modalHeader = document.createElement("div"); -modalHeader.classList.add("preview-header"); -export const titleAnchor = document.createElement("a"); -titleAnchor.setAttribute("target", "_blank"); -export const titleHeader = document.createElement("h1"); -const closeButton = document.createElement("button"); -closeButton.classList.add("close-preview"); -closeButton.innerHTML = ``; -const modalBody = document.createElement("div"); -modalBody.classList.add("preview-body"); -export const modalBodyInner = document.createElement("div"); -modalBodyInner.classList.add("preview-body-inner"); -modalHeader.appendChild(closeButton); -titleAnchor.appendChild(titleHeader); -const openNewLinkIcon = ``; -const openNewLink = document.createElement("span"); -openNewLink.classList.add("open-new-link"); -openNewLink.innerHTML = openNewLinkIcon; - -const errorIcon = ``; -const error = document.createElement("span"); -error.classList.add("error"); -error.innerHTML = errorIcon; - -titleAnchor.appendChild(error); -titleAnchor.appendChild(openNewLink); -modalHeader.appendChild(titleAnchor); -modalBody.appendChild(modalBodyInner); -modalContent.appendChild(modalHeader); -modalContent.appendChild(modalBody); -modal.appendChild(modalContent); -document.body.appendChild(modal); +export const modal = document.getElementById("preview-modal") as HTMLDivElement; +export const titleAnchor = document.getElementById("preview-title-anchor") as HTMLAnchorElement; +export const titleHeader = document.getElementById("preview-title") as HTMLHeadingElement; +export const modalBodyInner = document.getElementById("preview-body-inner") as HTMLDivElement; export const issuesContainer = document.getElementById("issues-container"); +const closeButton = modal.querySelector(".close-preview") as HTMLButtonElement; + closeButton.addEventListener("click", closeModal); document.addEventListener("keydown", (event) => { if (event.key === "Escape") { diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts index baa7b8c5..d6d37813 100644 --- a/src/home/sorting/sorting-manager.ts +++ b/src/home/sorting/sorting-manager.ts @@ -26,8 +26,8 @@ export class SortingManager { } public render() { - this._toolBarFilters.appendChild(this._sortingButtons); this._toolBarFilters.appendChild(this._filterTextBox); + this._toolBarFilters.appendChild(this._sortingButtons); } private _generateFilterTextBox() { @@ -51,7 +51,7 @@ export class SortingManager { const issuesContainer = document.getElementById("issues-container") as HTMLDivElement; - const filterIssues = () => { + function filterIssues() { try { const filterText = textBox.value.toLowerCase(); const issues = Array.from(issuesContainer.children) as HTMLDivElement[]; @@ -69,7 +69,7 @@ export class SortingManager { } catch (error) { return renderErrorInModal(error as Error); } - }; + } // Observer to detect when children are added to the issues container (only once) const observer = new MutationObserver(() => { diff --git a/static/index.html b/static/index.html index 00f0e242..a75d9c3d 100644 --- a/static/index.html +++ b/static/index.html @@ -47,6 +47,37 @@ >
+
+
+
+ + +

+ + + + + + + + + + + +
+
+
+
+
+