Updating default message templates

EmissarySocial · Nov 22, 2023 · fe115e8 · fe115e8
1 parent d1cfd65
commit fe115e8
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 36 deletions.
diff --git a/_embed/templates/stream-outbox-message/edit.html b/_embed/templates/stream-outbox-message/edit.html
@@ -11,11 +11,11 @@
 
 {{- $targetURL := .QueryParam "postTo" | addQueryParams "templateId=outbox-message" -}}
 
-<form id="outbox-message" hx-post="{{$targetURL}}" hx-trigger="submit, enterKey" hx-encoding="multipart/form-data" hx-push-url="false"
+<form id="outbox-message" hx-post="{{$targetURL}}" hx-encoding="multipart/form-data" hx-push-url="false"
 	data-script="
 		on htmx:configRequest(parameters)
 			set contentHtml to the first <.input/> in me
-			set parameters['content'] to Autolinker.link(contentHtml.innerText, $autolinkerOptions)
+			set parameters['content'] to contentHtml.innerText
 		">
 
 	{{if not .IsNew}}

diff --git a/_embed/templates/theme-global/hyperscript/modal._hs b/_embed/templates/theme-global/hyperscript/modal._hs
@@ -78,4 +78,10 @@ behavior Modal
 			set event.detail.serverResponse to event.detail.serverResponse.replace(firstDiv, "<div class='ready' ")
 		end
 	end
+
+	on scroll from window
+		if #modal-footer is not empty
+			log #modal-footer
+		end
+	end
 end
diff --git a/_embed/templates/theme-global/stylesheet/modal.css b/_embed/templates/theme-global/stylesheet/modal.css
@@ -8,17 +8,15 @@
 	position: fixed;
 	top: 0px;
 	left: 0px;
-	height: 100%;
-	width:100%;
+	right:0px;
+	bottom:0px;
 	z-index: 1000;
 
 	/* Flexbox centers the .modal-content vertically and horizontally */
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: safe center;
-	overflow-y: clip;
-	overflow-x: clip;
 
 	/* Opacity updated by animations */
 	opacity: 0;
@@ -42,14 +40,14 @@
 #modal-window {
 	/* Sizing for visible dialog */
 	width: 600px;
-	max-width: 96%;
-	max-height:96%;
+	max-width: 96vh;
+	max-height:96vh;
 
 	/* Scrolling behavior */
 	display:flow-root;
 	overflow-y:auto;
 
-	/* Display properties for visible dialog*/
+	/* Display properties for visible dialog */
 	position:relative;
 	border: solid 1px var(--gray40);
 	border-radius: 8px;
@@ -60,6 +58,35 @@
 	transform:scale(0.8);
 }
 
+/* Enhanced Modals with Fixed Header/Footer */
+
+#modal-window:has(#modal-body) {
+	display:flex;
+	flex-direction:column;
+	overflow:clip;
+	padding: 0px;
+}
+
+#modal-header {
+	padding:24px;
+}
+
+#modal-body {
+	overflow-y:scroll;
+	flex-grow:1;
+	padding:12px 24px;
+}
+
+#modal-footer {
+	padding: 24px;
+	padding-bottom:12px;
+	margin:0px;
+	border-top:solid 1px var(--gray20);
+	background-color: var(--gray05);
+}
+
+/* Additional Sizes */
+
 #modal-window.large {
 	width: 800px;
 }
@@ -69,14 +96,6 @@
 	height:96%;
 }
 
-#modal-footer {
-	position:sticky;
-	bottom:0;
-	padding: 12px 24px;
-	margin:24px -24px -24px -24px;
-	border-top:solid 1px var(--gray20);
-	background-color: var(--gray05);
-}
 
 /* Animations */
 

diff --git a/_embed/templates/user-message/replies-after.html b/_embed/templates/user-message/replies-after.html
@@ -1,12 +1,13 @@
 {{- $published := .QueryParam "published" -}}
-{{- $replies := .RepliesAfter $published 0 -}}
 
-{{- range $replies -}}
-	{{- template "activitystream" . -}}
+{{- if ne "" $published -}}
+	{{- $replies := .RepliesAfter $published 0 -}}
+
+	{{- range $replies -}}
+		{{- template "activitystream" . -}}
+	{{- end -}}
 {{- end -}}
 
-{{- if .UserCan "reply" -}}
-	<div id="modal-footer">
-		{{- .View "reply" -}}
-	</div>
-{{- end -}}
+<div id="modal-footer" hx-swap-oob="true" hx-get="/@me/messages/{{.MessageID}}/replies-after?published={{now | epochDate}}" hx-trigger="refreshReplies" hx-push-url="false" hx-swap="outerHTML" hx-target="this">
+	{{.View "reply"}}
+</div>
diff --git a/_embed/templates/user-message/view.html b/_embed/templates/user-message/view.html
@@ -1,4 +1,4 @@
-<div script="install message(messageId:'{{.MessageID}}')">
+<div id="modal-body" script="install message(messageId:'{{.MessageID}}')">
 
 	<div class="space-below">
 		<div class="flex-row text-xs">
@@ -111,16 +111,15 @@ <h1><a href="{{.URL}}" target="_blank" class="text-black">{{.Label}}</a></h1>
 		{{- end -}}
 	</div>
 
-	<div hx-get="/@me/messages/{{.MessageID}}/replies-before" hx-trigger="load" hx-target="this" hx-swap="outerHTML" hx-push-url="false">
-		Loading Replies...
+	<div id="replies" class="space-below">
+		<hr>
+		<button hx-get="/@me/messages/{{.MessageID}}/replies-before" hx-target="this" hx-swap="outerHTML" hx-push-url="false" class="text-xs">
+			Show Replies
+		</button>
 	</div>
 
-	{{- if .UserCan "reply" -}}
-		<div hx-get="/@me/messages/{{.MessageID}}/replies-after?published={{now | epochDate}}" hx-trigger="refreshReplies" hx-push-url="false" hx-swap="innerHTML" hx-target="this">
-			<div id="modal-footer">
-				{{.View "reply"}}
-			</div>
-		</div>
-	{{- end -}}
-
 </div>
+
+<div id="modal-footer" hx-get="/@me/messages/{{.MessageID}}/replies-after?published={{now | epochDate}}" hx-trigger="refreshReplies" hx-push-url="false" hx-swap="outerHTML" hx-target="this">
+	{{.View "reply"}}
+</div>