diff --git a/src/settings.ts b/src/settings.ts
index 65ff55c..abc2eb2 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -62,35 +62,19 @@ export class JiraSettingTab extends PluginSettingTab {
const toggleBtn = document.createElement("button");
toggleBtn.type = "button";
- toggleBtn.style.marginLeft = "8px";
- toggleBtn.style.background = "none";
- toggleBtn.style.border = "none";
- toggleBtn.style.cursor = "pointer";
+ toggleBtn.classList.add("jira-password-toggle");
let visible = false;
- const eyeIcon = `
-
- `;
- const eyeOffIcon = `
-
- `;
-
- toggleBtn.innerHTML = eyeIcon;
+ const icon = createEyeIcon();
+ toggleBtn.appendChild(icon);
toggleBtn.onclick = () => {
visible = !visible;
text.inputEl.type = visible ? "text" : "password";
- toggleBtn.innerHTML = visible ? eyeOffIcon : eyeIcon;
+ toggleBtn.replaceChild(
+ visible ? createEyeOffIcon() : createEyeIcon(),
+ toggleBtn.firstChild!
+ );
};
text.inputEl.parentElement?.appendChild(toggleBtn);
@@ -137,20 +121,9 @@ export class JiraSettingTab extends PluginSettingTab {
const removeBtn = document.createElement("button");
removeBtn.type = "button";
- removeBtn.innerHTML = `
-
- `;
- removeBtn.style.background = "none";
- removeBtn.style.border = "none";
- removeBtn.style.cursor = "pointer";
- removeBtn.style.marginLeft = "8px";
+ removeBtn.classList.add("jira-issue-remove-btn");
removeBtn.title = "Remove";
+ removeBtn.appendChild(createTrashIcon());
removeBtn.onclick = async () => {
this.plugin.settings.issues.splice(idx, 1);
@@ -188,3 +161,124 @@ export class JiraSettingTab extends PluginSettingTab {
containerEl.appendChild(details);
}
}
+
+function createEyeIcon(): SVGSVGElement {
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ svg.setAttribute("width", "18");
+ svg.setAttribute("height", "18");
+ svg.setAttribute("viewBox", "0 0 24 24");
+ svg.setAttribute("fill", "none");
+ svg.setAttribute("stroke", "currentColor");
+ svg.setAttribute("stroke-width", "2");
+ svg.setAttribute("stroke-linecap", "round");
+ svg.setAttribute("stroke-linejoin", "round");
+
+ const path1 = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "path"
+ );
+ path1.setAttribute("d", "M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z");
+ const circle = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "circle"
+ );
+ circle.setAttribute("cx", "12");
+ circle.setAttribute("cy", "12");
+ circle.setAttribute("r", "3");
+
+ svg.appendChild(path1);
+ svg.appendChild(circle);
+ return svg;
+}
+
+// Функция для создания SVG-иконки "глаз зачёркнутый"
+function createEyeOffIcon(): SVGSVGElement {
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ svg.setAttribute("width", "18");
+ svg.setAttribute("height", "18");
+ svg.setAttribute("viewBox", "0 0 24 24");
+ svg.setAttribute("fill", "none");
+ svg.setAttribute("stroke", "currentColor");
+ svg.setAttribute("stroke-width", "2");
+ svg.setAttribute("stroke-linecap", "round");
+ svg.setAttribute("stroke-linejoin", "round");
+
+ const path1 = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "path"
+ );
+ path1.setAttribute(
+ "d",
+ "M17.94 17.94A10.94 10.94 0 0 1 12 19c-7 0-11-7-11-7a21.81 21.81 0 0 1 5.06-6.06"
+ );
+ const path2 = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "path"
+ );
+ path2.setAttribute("d", "M1 1l22 22");
+ const path3 = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "path"
+ );
+ path3.setAttribute("d", "M9.53 9.53A3 3 0 0 0 12 15a3 3 0 0 0 2.47-5.47");
+ const path4 = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "path"
+ );
+ path4.setAttribute("d", "M14.47 14.47A3 3 0 0 1 12 9a3 3 0 0 1-2.47 5.47");
+
+ svg.appendChild(path1);
+ svg.appendChild(path2);
+ svg.appendChild(path3);
+ svg.appendChild(path4);
+ return svg;
+}
+
+// Функция для создания SVG-иконки "корзина" (удаление)
+function createTrashIcon(): SVGSVGElement {
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ svg.setAttribute("width", "16");
+ svg.setAttribute("height", "16");
+ svg.setAttribute("viewBox", "0 0 24 24");
+ svg.setAttribute("fill", "none");
+ svg.setAttribute("stroke", "red");
+ svg.setAttribute("stroke-width", "2");
+ svg.setAttribute("stroke-linecap", "round");
+ svg.setAttribute("stroke-linejoin", "round");
+
+ const polyline = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "polyline"
+ );
+ polyline.setAttribute("points", "3 6 5 6 21 6");
+ const path1 = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "path"
+ );
+ path1.setAttribute(
+ "d",
+ "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"
+ );
+ const line1 = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "line"
+ );
+ line1.setAttribute("x1", "10");
+ line1.setAttribute("y1", "11");
+ line1.setAttribute("x2", "10");
+ line1.setAttribute("y2", "17");
+ const line2 = document.createElementNS(
+ "http://www.w3.org/2000/svg",
+ "line"
+ );
+ line2.setAttribute("x1", "14");
+ line2.setAttribute("y1", "11");
+ line2.setAttribute("x2", "14");
+ line2.setAttribute("y2", "17");
+
+ svg.appendChild(polyline);
+ svg.appendChild(path1);
+ svg.appendChild(line1);
+ svg.appendChild(line2);
+ return svg;
+}
diff --git a/styles.css b/styles.css
index e70748c..e462b8c 100644
--- a/styles.css
+++ b/styles.css
@@ -15,3 +15,21 @@
background: var(--background-modifier-hover);
border-color: var(--interactive-accent);
}
+
+.jira-password-toggle {
+ margin-left: 8px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ vertical-align: middle;
+ padding: 0;
+}
+
+.jira-issue-remove-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+ margin-left: 8px;
+ vertical-align: middle;
+ padding: 0;
+}