Redesign Inbox messages

EmissarySocial · Nov 15, 2023 · d1cfd65 · d1cfd65
1 parent f265ec7
commit d1cfd65
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 48 deletions.
diff --git a/_embed/templates/base-social/activitystream.html b/_embed/templates/base-social/activitystream.html
@@ -1,19 +1,27 @@
 {{- $actor := .AttributedTo.Load -}}
 
+<hr>
 <div class="space-below">
-	<div class="clickable flex-row" role="link" script="on click go to url '{{.ID}}'">
+	<div class="flex-row">
 		<div style="width:32px; height:32px; margin-right:8px;">
 			{{- if $actor.Icon.NotNil -}}
-				<img class="circle-32" src="{{$actor.Icon.URL}}">
+				<a href="{{$actor.ID}}"><img class="circle-32" src="{{$actor.Icon.URL}}"></a>
 			{{- end -}}
 		</div>
 		<div>
 
-			{{- if $actor.NotNil -}}
-				<div>
-					<span class="bold link vertical-space-none">{{$actor.Name}}</span>
-					<span class="text-gray vertical-space-none">&middot; {{ .Published | epochDate | tinyDate}}</span>
-				</div>
+			<div>
+				{{- if $actor.NotNil -}}
+					<a href="{{$actor.ID}}">
+						<span class="bold link">{{$actor.Name}}</span>
+						<span class="text-gray">&middot; {{ .Published | epochDate | tinyDate}}</span>
+					</a> &nbsp;
+				{{- end -}}
+				<a href="{{.ID}}"><span class="text-sm">View Original &rarr;</span></a>
+			</div>
+
+			{{- if ne "" .Name -}}
+				<h1 class="space-above">{{.Name}}</h1>
 			{{- end -}}
 
 			{{- if .Image.NotNil -}}
@@ -24,4 +32,3 @@
 		</div>
 	</div>
 </div>
-<hr>
diff --git a/_embed/templates/stream-outbox-message/edit.html b/_embed/templates/stream-outbox-message/edit.html
@@ -1,14 +1,4 @@
-<script src="/.themes/global/resources/autolinker-4.0.0/autolinker.min.js"></script>
-<script src="/.themes/global/resources/vanillaCaret/vanillaCaret.min.js" id="vanillaCaretScript"></script>
-
 <script type="text/hyperscript">
-	init
-		set $autolinkerOptions to {
-			newWindow: false,
-			sanitizeHtml: true,
-			stripPrefix: false,
-			stripTrailingSlash: false
-		}
 
 	def previewUploads()
 		set #file-preview.innerHTML to ""
@@ -38,20 +28,13 @@ <h1>Edit Post</h1>
 			class="input"
 			contenteditable="true"
 			data-script="
-				init
-					wait for load from #vanilaCaretScript then
-					make a VanillaCaret from me called :caret
-
-				on keydown[key=='Enter']
-					if event.target is not me then exit end
-					halt the event
-					send enterKey to closest #outbox-message
+				on keydown[key=='ArrowLeft']
+					halt the event's bubbling
 
-				on keypress debounced at 500ms 
-					set oldPosition to :caret.getPos() then
-					set my innerHTML to Autolinker.link(my innerText, $autolinkerOptions) then
-					call :caret.setPos(oldPosition)"
-		>{{.ContentHTML}}</div>
+				on keydown[key=='ArrowRight']
+					halt the event's bubbling
+					
+				">{{.ContentHTML}}</div>
 	</div>
 
 	<div id="file-preview"></div>

diff --git a/_embed/templates/stream-outbox-message/view.html b/_embed/templates/stream-outbox-message/view.html
@@ -40,20 +40,12 @@ <h2 class="p-summary">{{.ContentHTML}}</h2>
 				</div>
 			{{- end -}}
 
-			{{- .Responses -}}
-
 			<hr>
 
 			<div hx-get="/{{.StreamID}}/replies-before" hx-trigger="load" hx-target="this" hx-swap="outerHTML" hx-push-url="false">
 				Loading Replies...
 			</div>
 
-			<div hx-get="/{{.StreamID}}/replies-after?published={{now | epochDate}}" hx-trigger="refreshReplies" hx-push-url="false" hx-swap="innerHTML" hx-target="this">
-				{{- if .UserCan "reply" -}}
-					{{.View "reply"}}
-				{{- end -}}
-			</div>
-
 		</div>
 
 	</div>

diff --git a/_embed/templates/theme-global/stylesheet/modal.css b/_embed/templates/theme-global/stylesheet/modal.css
@@ -55,7 +55,7 @@
 	border-radius: 8px;
 	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
 	background-color: var(--white);
-	padding: 20px;
+	padding: 24px;
 	line-height: 150%;
 	transform:scale(0.8);
 }
@@ -69,6 +69,15 @@
 	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 */
 
 #modal.ready {

diff --git a/_embed/templates/user-inbox/sidebar.html b/_embed/templates/user-inbox/sidebar.html
@@ -15,8 +15,8 @@
 					{{.Label}}
 					<span class="folder-handle">
 						<span id="folder-unread-{{.FolderID.Hex}}"
-						class="
-							{{- if ne $selectedID .FolderID}}text-light-gray{{- end -}}
+						class="text-sm
+							{{- if ne $selectedID .FolderID}} text-light-gray{{- end -}}
 							{{- if eq .UnreadCount 0 }} hide{{- end -}}
 						"
 						>&#9679;</span>

diff --git a/_embed/templates/user-message/replies-after.html b/_embed/templates/user-message/replies-after.html
@@ -0,0 +1,12 @@
+{{- $published := .QueryParam "published" -}}
+{{- $replies := .RepliesAfter $published 0 -}}
+
+{{- range $replies -}}
+	{{- template "activitystream" . -}}
+{{- end -}}
+
+{{- if .UserCan "reply" -}}
+	<div id="modal-footer">
+		{{- .View "reply" -}}
+	</div>
+{{- end -}}
diff --git a/_embed/templates/user-message/template.json b/_embed/templates/user-message/template.json
@@ -49,6 +49,7 @@
 				{"step":"trigger-event", "event":"refreshReplies"}
 			]
 		},
+		"replies-after":{"step":"view-html"},
 
 		"delete": {
 			"roles": ["self"],

diff --git a/_embed/templates/user-message/view.html b/_embed/templates/user-message/view.html
@@ -111,15 +111,16 @@ <h1><a href="{{.URL}}" target="_blank" class="text-black">{{.Label}}</a></h1>
 		{{- end -}}
 	</div>
 
-	<hr>
 	<div hx-get="/@me/messages/{{.MessageID}}/replies-before" hx-trigger="load" hx-target="this" hx-swap="outerHTML" hx-push-url="false">
 		Loading Replies...
 	</div>
 
-	<div hx-get="/@me/messages/{{.MessageID}}/replies-after?published={{now | epochDate}}" hx-trigger="refreshReplies" hx-push-url="false" hx-swap="innerHTML" hx-target="this">
-		{{- if .UserCan "reply" -}}
-			{{.View "reply"}}
-		{{- end -}}
-	</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>