refactor(settings): move button styles to CSS and replace SVG innerHTML with safe DOM API creation
This commit is contained in:
166
src/settings.ts
166
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 = `
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
`;
|
||||
const eyeOffIcon = `
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path 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"/>
|
||||
<path d="M1 1l22 22"/>
|
||||
<path d="M9.53 9.53A3 3 0 0 0 12 15a3 3 0 0 0 2.47-5.47"/>
|
||||
<path d="M14.47 14.47A3 3 0 0 1 12 9a3 3 0 0 1-2.47 5.47"/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path 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"></path>
|
||||
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||
</svg>
|
||||
`;
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user