Updated modals to be better for everyone.

js/ui/render.js

@@ -197,12 +197,9 @@ function render_action_bar(model, ev, opts={}) {
 	let str = html`<div class="action-bar">`;
 	if (!shared && event_can_reply(ev)) {
 		str += html`
-		<button class="icon" title="Reply" action="reply-author" data-evid="${ev.id}">
+		<button class="icon" title="Reply" action="reply-to" data-evid="${ev.id}">
 			<img class="icon svg small" src="icon/event-reply.svg"/>
 		</button>
-		<button class="icon" title="Reply All" action="reply-all" data-evid="${ev.id}">
-			<img class="icon svg small" src="icon/event-reply-all.svg"/>
-		</button>
 		<button class="icon react heart ${ab(liked, 'liked', '')}" 
 			action="react-like"
 			data-reaction-id="${reaction_id}"

js/ui/settings.js

@@ -5,7 +5,6 @@ function init_settings(model) {
 	embeds_el.addEventListener("click", on_click_toggle_embeds);
 	embeds_el.checked = model.embeds != "friends";
 	find_node("[role='sign-out']", el).addEventListener("click", on_click_sign_out);
-	find_node("[role='about-nostr']", el).addEventListener("click", open_faqs);
 	const rlist = find_node("#relay-list tbody", el);
 	model.relays.forEach((str) => {
 		rlist.appendChild(new_relay_item(str));

js/ui/state.js

@@ -501,11 +501,13 @@ function init_postbox(model) {
 	// Do reply box
 	// TODO refactor & cleanup reply modal init 
 	find_node("#reply-content").addEventListener("input", oninput_post);
-	find_node("#reply-button").addEventListener("click", onclick_reply);
+	find_node("button[name='reply']")
+		.addEventListener("click", onclick_reply);
+	find_node("button[name='reply-all']")
+		.addEventListener("click", onclick_reply);
 }
 async function onclick_reply(ev) {
-	// Temp method
-	do_send_reply();
+	do_send_reply(ev.target.dataset.all == "1");
 }
 async function onclick_send(ev) {
 	const el = view_get_timeline_el();
@@ -571,9 +573,6 @@ function onclick_any(ev) {
 	const el = ev.target;
 	const action = el.getAttribute("action");
 	switch (action) {
-		case "open-faqs":
-			open_faqs();
-			break;
 		case "toggle-gnav":
 			toggle_gnav(el);
 			break;
@@ -607,11 +606,8 @@ function onclick_any(ev) {
 		case "delete":
 			delete_post(el.dataset.evid);
 			break;
-		case "reply-author":
-			reply_author(el.dataset.evid);
-			break;
-		case "reply-all":
-			reply_all(el.dataset.evid);
+		case "reply-to":
+			reply(el.dataset.evid);
 			break;
 		case "react-like":
 			click_toggle_like(el);

js/ui/util.js

@@ -65,7 +65,7 @@ function click_toggle_like(el) {
  */
 function open_media_preview(url, type) {
 	const el = find_node("#media-preview");
-	el.classList.remove("closed");
+	el.showModal();
 	find_node("img", el).src = url;
 	// TODO handle different medias such as audio and video
 	// TODO add loading state & error checking
@@ -74,7 +74,7 @@ function open_media_preview(url, type) {
 /* close_media_preview closes any present media modal.
  */
 function close_media_preview() {
-	find_node("#media-preview").classList.add("closed");
+	find_node("#media-preview").close();
 }
 
 function delete_post_confirm(evid) {
@@ -86,11 +86,10 @@ function delete_post_confirm(evid) {
 	delete_post(evid, reason)
 }
 
-async function do_send_reply() {
+async function do_send_reply(all=false) {
 	const modal = document.querySelector("#reply-modal");
 	const replying_to = modal.querySelector("#replying-to");
 	const evid = replying_to.dataset.evid;
-	const all = replying_to.dataset.toAll != "";
 	const reply_content_el = document.querySelector("#reply-content");
 	const content = reply_content_el.value;
 	await send_reply(content, evid, all);
@@ -98,29 +97,20 @@ async function do_send_reply() {
 	close_modal(modal);
 }
 
-function reply(evid, all=false) {
+function reply(evid) {
 	const ev = DAMUS.all_events[evid]
 	const modal = document.querySelector("#reply-modal")
 	const replybox = modal.querySelector("#reply-content")
 	const replying_to = modal.querySelector("#replying-to")
 	replying_to.dataset.evid = evid
-	replying_to.dataset.toAll = all ? "all" : "";
 	replying_to.innerHTML = render_event_nointeract(DAMUS, ev, {
 		is_composing: true, 
 		nobar: true
 	});
-	modal.classList.remove("closed")
+	modal.showModal();
 	replybox.focus()
 }
 
-function reply_author(evid) {
-	reply(evid);
-}
-
-function reply_all(evid) {
-	reply(evid, true);
-}
-
 function update_favicon(path) {
 	let link = document.querySelector("link[rel~='icon']");
 	const head = document.getElementsByTagName('head')[0]
@@ -194,18 +184,8 @@ function open_thread(thread_id) {
 	view_timeline_apply_mode(DAMUS, VM_THREAD, { thread_id });
 }
 
-function open_faqs() {
-	find_node("#faqs").classList.remove("closed");
-}
-
 function close_modal(el) {
-	while (el) {
-		if (el.classList.contains("modal")) {
-			el.classList.add("closed");
-			break;
-		}
-		el = el.parentElement;
-	}
+	find_parent(el, "dialog").close();
 }
 
 function on_click_show_event_details(evid) {
@@ -214,7 +194,7 @@ function on_click_show_event_details(evid) {
 	if (!ev)
 		return;
 	const el = find_node("#event-details");
-	el.classList.remove("closed");
+	el.showModal();
 	find_node("code", el).innerText = JSON.stringify(ev, null, "\t");
 }