Mercurial Hosting > chat

changeset 34:62d04ca486dd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
UI
author Franklin Schmidt <fschmidt@gmail.com>
date Tue, 12 Nov 2024 16:08:24 -0700
parents e2b7f6393dab
children 27c41f22d2a9
files src/account.html.luan src/chat.css src/chat.js src/get_chat.js.luan src/heartbeat.js.luan src/index.html.luan src/lib/Shared.luan src/site.css
diffstat 8 files changed, 58 insertions(+), 30 deletions(-) [+]
line wrap: on
line diff
--- a/src/account.html.luan	Sun Nov 10 19:57:14 2024 -0700
+++ b/src/account.html.luan	Tue Nov 12 16:08:24 2024 -0700
@@ -33,6 +33,16 @@
 				ajax('delete_user.js');
 			}
 		</script>
+		<style>
+			div[content] {
+				margin-left: auto;
+				margin-right: auto;
+				width: fit-content;
+			}
+			h1 {
+				text-align: center;
+			}
+		</style>
 	</head>
 	<body>
 <%		header() %>
@@ -40,8 +50,8 @@
 			<h1>Your Account</h1>
 			<p><a href="about.html">About Web Chat</a></p>
 			<p>Your URL: <%= base_url() %>/?with=<%=user.email%></p>
+			<p><a href="javascript:logout()">Logout</a></p>
 			<p><a href="javascript:deleteUser()">Delete account</a></p>
-			<p><a href="javascript:logout()">Logout</a></p>
 		</div>
 		<dialog delete_user>
 			<h2>Delete Account</h2>
--- a/src/chat.css	Sun Nov 10 19:57:14 2024 -0700
+++ b/src/chat.css	Tue Nov 12 16:08:24 2024 -0700
@@ -28,6 +28,7 @@
 	width: 100%;
 	display: flex;
 	flex-direction: column;
+	justify-content: space-between;
 }
 
 div[posts] > * {
@@ -49,14 +50,29 @@
 	margin-bottom: 16px;
 }
 
+[intro] {
+	text-align: center;
+}
+
+div[who] {
+	display: flex;
+	justify-content: space-between;
+}
+
+span[right] {
+	font-size: 12px;
+	color: grey;
+}
+
 span[pulldown] {
 	position: relative;
+	visibility: hidden;
 }
 
 span[pulldown] > div {
 	display: none;
 	top: 0;
-	left: 100%;
+	right: 100%;
 	z-index: 2;
 	position: absolute;
 	border: 1px solid #cccccc;
@@ -80,7 +96,7 @@
 }
 
 div[text] {
-	white-space-collapse: preserve;
+	white-space: pre-wrap;
 }
 
 div[input] {
@@ -106,10 +122,9 @@
 	display: inline-block;
 	aspect-ratio: 1;
 	background-color: grey;
-	height: 1em;
+	height: 0.6em;
 	border-radius: 50%;
 	margin-left: 4px;
-	margin-bottom: -2px;
 }
 
 
@@ -127,7 +142,7 @@
 
 	div[posts] {
 		padding-left: 8px;
-		border-left: 1px solid;
+		border-left: 1px solid grey;
 	}
 
 	div[top] img {
--- a/src/chat.js	Sun Nov 10 19:57:14 2024 -0700
+++ b/src/chat.js	Tue Nov 12 16:08:24 2024 -0700
@@ -26,6 +26,8 @@
 	div.setAttribute('selected','');
 	ajax(`get_chat.js?chat=${chatId}`);
 	currentChatId = chatId;
+	let email = div.querySelector('[email]').textContent;
+	history.replaceState(null,null,`?with=${email}`);
 
 	if(eventSource)  eventSource.close();
 	eventSource = new EventSource(`${location.origin}/chat/${chatId}`);
@@ -212,14 +214,6 @@
 	ajax(`heartbeat.js?last_update=${lastUpdate}`);
 }, 10000 );
 
-function resync(updated) {
-	lastUpdate = updated;
-	currentChatId = null;
-	document.querySelector('div[posts]').innerHTML = '';
-	back();
-	ajax('get_chats.js');
-}
-
 let sound = new Audio('/images/notify.mp3');
 function notify() {
 	sound.play();
--- a/src/get_chat.js.luan	Sun Nov 10 19:57:14 2024 -0700
+++ b/src/get_chat.js.luan	Tue Nov 12 16:08:24 2024 -0700
@@ -29,7 +29,7 @@
 			<img back onclick="back()" src="/images/arrow_back.svg">
 			<span><% chat_other_users_html(chat,user) %></span>
 		</h3>
-		<button onclick='deleteChat()'>delete</button>
+		<button onclick='deleteChat()'>Delete</button>
 	</div>
 	<div main>
 <%
--- a/src/heartbeat.js.luan	Sun Nov 10 19:57:14 2024 -0700
+++ b/src/heartbeat.js.luan	Tue Nov 12 16:08:24 2024 -0700
@@ -31,6 +31,6 @@
 	logger.info "update"
 	Io.stdout = Http.response.text_writer()
 %>
-	resync(<%=user_last_update%>);
+	location = '/';
 <%
 end
--- a/src/index.html.luan	Sun Nov 10 19:57:14 2024 -0700
+++ b/src/index.html.luan	Tue Nov 12 16:08:24 2024 -0700
@@ -93,6 +93,10 @@
 <%		head() %>
 		<style>
 			@import "chat.css?s=<%=started%>";
+
+			div[who="<%=user.id%>"] span[pulldown] {
+				visibility: visible;
+			}
 		</style>
 		<style online></style>
 		<script src="chat.js?s=<%=started%>"></script>
@@ -103,7 +107,9 @@
 			<div chats>
 <%				chats_html() %>
 			</div>
-			<div posts></div>
+			<div posts>
+				<h3 intro>Choose a chat on the left</h3>
+			</div>
 		</div>
 		<dialog delete_chat>
 			<h2>Delete Chat</h2>
--- a/src/lib/Shared.luan	Sun Nov 10 19:57:14 2024 -0700
+++ b/src/lib/Shared.luan	Tue Nov 12 16:08:24 2024 -0700
@@ -94,23 +94,22 @@
 function Shared.post_html(post)
 	local author_id = post.author_id
 	local user = current_user() or error()
-	local mine = user.id == author_id
 	local author = get_user_by_id(author_id)
 	local id = post.id
 %>
 		<div post="<%=id%>">
-			<div who>
+			<div who="<%=author.id%>">
 				<span author><%=author.email%></span>
-				<span when fix><%=post.date%></span>
-<%	if mine then %>
-				<span pulldown>
-					<img onclick="clickMenu(this)" src="/images/more_vert.svg">
-					<div>
-						<span onclick="editPost('<%=id%>')">Edit</span>
-						<span onclick="deletePost('<%=id%>')">Delete</span>
-					</div>
-				<span>
-<%	end %>
+				<span right>
+					<span when fix><%=post.date%></span>
+					<span pulldown>
+						<img onclick="clickMenu(this)" src="/images/more_vert.svg">
+						<div>
+							<span onclick="editPost('<%=id%>')">Edit</span>
+							<span onclick="deletePost('<%=id%>')">Delete</span>
+						</div>
+					</span>
+				</span>
 			</div>
 			<div text fix><%= html_encode(post.content) %></div>
 		</div>
@@ -128,7 +127,7 @@
 			else
 				%>, <%
 			end
-			%><%= other_user.email %><span online="<%= other_user.id %>"></span><%
+			%><span email><%= other_user.email %></span><span online="<%= other_user.id %>"></span><%
 		end
 	end
 end
--- a/src/site.css	Sun Nov 10 19:57:14 2024 -0700
+++ b/src/site.css	Tue Nov 12 16:08:24 2024 -0700
@@ -7,6 +7,10 @@
 	margin: 0;
 }
 
+textarea, input {
+	font-size: inherit !important;
+}
+
 a {
 	text-decoration: none;
 }