Add a 'copy to clipboard' button to addresses

Rosuav · Nov 8, 2024 · 51fe0e5 · 51fe0e5
1 parent a50d431
commit 51fe0e5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/httpstatic/chan_form.js b/httpstatic/chan_form.js
@@ -258,7 +258,11 @@ const view_element = { //Matches _element_types (see Pike code)
 	simple: (el, r) => [LABEL(SPAN(el.label)), PRE(r.fields[el.name])],
 	url: (el, r) => [LABEL(SPAN(el.label)), A({href: r.fields[el.name]}, r.fields[el.name])],
 	paragraph: (el, r) => [LABEL(SPAN(el.label)), BR(), PRE(r.fields[el.name])],
-	address: (el, r) => PRE(r.fields[el.name]),
+	address: (el, r) => DIV({class: "twocol"}, [
+		PRE(r.fields[el.name]),
+		DIV({class: "column"}, BUTTON({class: "clipbtn", "data-copyme": r.fields[el.name],
+			title: "Click to copy address"}, "📋")),
+	]),
 	checkbox: (el, r) => UL([
 		(el.label || []).map((l, i) => LI({class: r.fields[el.name + (-i || "")] ? "checkbox-checked" : "checkbox-unchecked"}, [
 			LABEL(SPAN(r.fields[el.name + (-i || "")] ? "Selected" : "Unselected")),

diff --git a/modules/http/chan_form.pike b/modules/http/chan_form.pike
@@ -146,6 +146,19 @@ tr.archived {
 }
 tr.row-default {background: #eef;}
 tr.row-alternate {background: #efe;}
+.twocol {
+	display: flex;
+	gap: 1em;
+}
+.twocol > * {
+	width: max-content;
+	margin: 0;
+}
+.column {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+}
 </style>
 " + shared_styles;