Add reply to and edited at headers
This commit is contained in:
Sol Fisher Romanoff
parent
037baa6e58
commit
0faf544ebb
GPG key ID:
4D8B07C18F31ACBD
3 changed files with 82 additions and 34 deletions
|
|
@ -161,7 +161,10 @@ defp represent(%Activity{object: %Object{data: data}} = activity, selected) do
|
|||
selected: selected,
|
||||
counts: get_counts(activity),
|
||||
id: activity.id,
|
||||
visibility: Visibility.get_visibility(activity.object)
|
||||
visibility: Visibility.get_visibility(activity.object),
|
||||
reply_to: data["inReplyTo"],
|
||||
reply_to_user: data["inReplyTo"] && CommonAPI.get_user(hd(data["to"])),
|
||||
edited_at: data["updated"]
|
||||
}
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -12,35 +12,57 @@
|
|||
</div>
|
||||
<div class="right-side">
|
||||
<div class="status-heading">
|
||||
<div class="heading-left">
|
||||
<h4 class="username">
|
||||
<%= raw Formatter.emojify(@user.name, @user.emoji) %>
|
||||
</h4>
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
|
||||
<%= @user.nickname %>
|
||||
</a>
|
||||
<div class="heading-name-row">
|
||||
<div class="heading-left">
|
||||
<h4 class="username">
|
||||
<%= raw Formatter.emojify(@user.name, @user.emoji) %>
|
||||
</h4>
|
||||
<a href="<%= (@user.uri || @user.ap_id) %>" class="account-name">
|
||||
<%= @user.nickname %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="heading-right">
|
||||
<a class="timeago" href="<%= @link %>">
|
||||
<time
|
||||
class="dt-published" datetime="<%= @published %>"
|
||||
title="<%= format_date(@published) %>"
|
||||
>
|
||||
<%= time_ago(@published) %>
|
||||
</time>
|
||||
</a>
|
||||
<%= if @visibility == "public" do %>
|
||||
<svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/>
|
||||
</svg>
|
||||
<% else %>
|
||||
<%= if @visibility == "unlisted" do %>
|
||||
<svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path d="M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32V144C576 64.5 511.5 0 432 0S288 64.5 288 144v48H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H352V144z"/>
|
||||
</svg>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="heading-right">
|
||||
<a class="timeago" href="<%= @link %>">
|
||||
<time
|
||||
class="dt-published" datetime="<%= @published %>"
|
||||
title="<%= format_date(@published) %>"
|
||||
>
|
||||
<%= time_ago(@published) %>
|
||||
</time>
|
||||
</a>
|
||||
<%= if @visibility == "public" do %>
|
||||
<svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/>
|
||||
</svg>
|
||||
<% else %>
|
||||
<%= if @visibility == "unlisted" do %>
|
||||
<svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path d="M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32V144C576 64.5 511.5 0 432 0S288 64.5 288 144v48H64c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V256c0-35.3-28.7-64-64-64H352V144z"/>
|
||||
</svg>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= if @reply_to do %>
|
||||
<div class="heading-reply-row">
|
||||
<a class="reply-to-link" href="<%= @reply_to %>">
|
||||
<svg class="fa-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M205 34.8c11.5 5.1 19 16.6 19 29.2v64H336c97.2 0 176 78.8 176 176c0 113.3-81.5 163.9-100.2 174.1c-2.5 1.4-5.3 1.9-8.1 1.9c-10.9 0-19.7-8.9-19.7-19.7c0-7.5 4.3-14.4 9.8-19.5c9.4-8.8 22.2-26.4 22.2-56.7c0-53-43-96-96-96H224v64c0 12.6-7.4 24.1-19 29.2s-25 3-34.4-5.4l-160-144C3.9 225.7 0 217.1 0 208s3.9-17.7 10.6-23.8l160-144c9.4-8.5 22.9-10.6 34.4-5.4z"/>
|
||||
</svg>
|
||||
Reply to
|
||||
</a>
|
||||
<span class="h-card">
|
||||
<a href="<%= (@reply_to_user.uri || @reply_to_user.ap_id) %>" class="u-url mention">
|
||||
@<%= @reply_to_user.nickname %>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= if @edited_at do %>
|
||||
<div class="heading-edited-row">
|
||||
Edited <%= time_ago(@edited_at) %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="status-content">
|
||||
<%= if @title != "" do %>
|
||||
|
|
|
|||
|
|
@ -157,12 +157,21 @@ .right-side {
|
|||
}
|
||||
|
||||
.status-heading {
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
justify-content: space-between;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.heading-name-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.heading-edited-row,
|
||||
.heading-reply-row {
|
||||
font-size: 0.85em;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.status-heading a {
|
||||
display: inline-block;
|
||||
word-break: break-all;
|
||||
|
|
@ -177,7 +186,7 @@ .heading-right {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.status-container .account-name {
|
||||
.heading-name-row .account-name {
|
||||
min-width: 1.6em;
|
||||
margin-right: 0.4em;
|
||||
white-space: nowrap;
|
||||
|
|
@ -186,7 +195,7 @@ .status-container .account-name {
|
|||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.status-container .username {
|
||||
.heading-name-row .username {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 85%;
|
||||
|
|
@ -457,8 +466,7 @@ .attachment:not(:last-child) {
|
|||
|
||||
.fa-icon {
|
||||
height: 0.875em;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.3em;
|
||||
margin: 0 0.3em;
|
||||
fill: var(--icon);
|
||||
}
|
||||
|
||||
|
|
@ -466,6 +474,14 @@ .status-actions .fa-icon {
|
|||
height: 1.1em;
|
||||
}
|
||||
|
||||
.user-summary .fa-icon {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.reply-to-link .fa-icon {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.nsfw-banner {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
|
@ -483,3 +499,10 @@ .nsfw-banner:not(:hover) {
|
|||
.nsfw-banner:hover div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reply-to-link {
|
||||
color: var(--faint);
|
||||
}
|
||||
.reply-to-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue