vilmibm/trunkless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

button styling

Browse Source
This commit is contained in:
nate smith 2024-02-19 00:40:08 -08:00
parent 240efcfac1
commit 17f7333513
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/main.js
View File

@ -15,7 +15,7 @@ class Button extends HTMLButtonElement {
constructor() { constructor() {
super(); super();
this.addEventListener("click", this.click); this.addEventListener("click", this.click);
this.setAttribute("style", "min-width:4em"); this.setAttribute("style", "min-width:2.3em");
} }
} }
@ -43,13 +43,16 @@ class LineRemover extends Button {
} }
class LinePinner extends Button { class LinePinner extends Button {
connectedCallback() {
this.innerText = "pin";
}
click() { click() {
const l = this.closest("div.line"); const l = this.closest("div.line");
l.classList.toggle("unpinned"); l.classList.toggle("unpinned");
if (l.classList.contains("unpinned")) { if (l.classList.contains("unpinned")) {
this.innerText = "pin"; this.innerText = "pin";
} else { } else {
this.innerText = "unpin"; this.innerHTML = "<strong>pin</strong>";
} }
} }
} }
@ -84,7 +87,7 @@ class LineEditor extends Button {
} }
done() { done() {
this.editing = false; this.editing = false;
this.innerText = "edit"; this.innerText = "✎";
this.span.innerText = this.i.value; this.span.innerText = this.i.value;
this.f.remove(); this.f.remove();
this.span.setAttribute("style", "display:inline"); this.span.setAttribute("style", "display:inline");
@ -96,7 +99,7 @@ class LineEditor extends Button {
return; return;
} }
this.editing = true; this.editing = true;
this.innerText = "done"; this.innerHTML = "<strong>✓</strong>";
this.span.setAttribute("style", "display:none"); this.span.setAttribute("style", "display:none");
this.i.value = this.span.innerText; this.i.value = this.span.innerText;
this.parentElement.appendChild(this.f); this.parentElement.appendChild(this.f);

12
templates/index.tmpl
View File

@ -4,8 +4,8 @@
<title>Trunkless</title> <title>Trunkless</title>
<style> <style>
div.line:not(.unpinned) > .linetext { div.line:not(.unpinned) > .linetext {
font-weight: bold; font-weight: bold;
} }
</style> </style>
</head> </head>
<body> <body>
@ -18,11 +18,11 @@ div.line:not(.unpinned) > .linetext {
<template id="linetmpl"> <template id="linetmpl">
<span class="linecontrols"> <span class="linecontrols">
<button is="line-pinner">pin</button> <button is="line-pinner">pin</button>
<button is="line-editor">edit</button> <button is="line-editor">✎</button>
<button is="line-upper">up</button> <button is="line-upper">↑</button>
<button is="line-downer">down</button> <button is="line-downer">↓</button>
<button is="line-remover">remove</button>
<button is="source-shower"></button> <button is="source-shower"></button>
<button is="line-remover">X</button>
</span> </span>
<span class="linetext"></span> <span class="linetext"></span>
<p is="source-text"></p> <p is="source-text"></p>