Skip to content

add tooltips to show who reacted to your post/comment on main feed #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hamnox wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add tooltips to show who reacted to your post/comment on main feed #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc4314a
add tooltips to show who reacted to your post/comment on main feed
hamnox Apr 14, 2021
d442dab
limit reaction tooltip to 4 users, add tooltip to gifts
hamnox Apr 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions static/js/ctzn-tags/post-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ export class PostView extends LitElement {
${this.renderPostTextNonFull()}
${this.renderMedia()}
${this.hasReactionsOrGifts ? html`
<div class="flex items-center my-1.5 mx-0.5 text-gray-500 text-sm truncate">
<div class="flex items-center my-1.5 mx-0.5 text-gray-500 text-sm overflow-ellipsis whitspace-nowrap">
${this.renderGiftedItems()}
${this.renderReactions()}
</div>
Expand Down Expand Up @@ -468,17 +468,20 @@ export class PostView extends LitElement {
return ''
}
return html`
${repeat(this.post.relatedItemTransfers, item => html`
${repeat(this.post.relatedItemTransfers, item => {
let tooltipUser = item.dbmethodCall?.authorId
return html`
<span
class="flex-shrink-0 inline-flex items-center border border-gray-300 px-1 py-0.5 rounded mr-1.5 text-sm font-semibold"
>
class="flex-shrink-0 inline-flex items-center border border-gray-300 px-1 py-0.5 rounded mr-1.5 text-sm font-semibold tooltip-top"
data-tooltip="${tooltipUser}">
<img
class="block w-4 h-4 object-cover mr-1"
src=${ITEM_CLASS_ICON_URL(this.communityUserId, item.itemClassId)}
>
${item.qty}
</span>
`)}
`}
)}
`
}

Expand All @@ -488,12 +491,15 @@ export class PostView extends LitElement {
}
return html`
${repeat(Object.entries(this.post.reactions), ([reaction, userIds]) => {
let tooltipUsersText = (userIds?.slice(0,4) || []).join(", ")
const colors = this.haveIReacted(reaction) ? 'bg-blue-50 hov:hover:bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-500 hov:hover:bg-gray-200'
return html`
<a
class="inline-block mr-2 px-1.5 py-0.5 rounded text-sm flex-shrink-0 ${colors}"
class="inline-block mr-2 px-1.5 py-0.5 rounded text-sm flex-shrink-0 ${colors} tooltip-top"
@click=${e => this.onClickReaction(e, reaction)}
>${unsafeHTML(emojify(makeSafe(reaction)))} <sup class="font-medium">${userIds.length}</sup></a>
data-tooltip="${tooltipUsersText}${userIds?.length > 4 ? '...' : ''}"
>${unsafeHTML(emojify(makeSafe(reaction)))} <sup class="font-medium">${userIds.length}</sup></span>
</a>
`
})}
`
Expand Down
2 changes: 1 addition & 1 deletion static/js/ctzn-tags/posts-feed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export class PostsFeed extends LitElement {

renderResult (post) {
return html`
<div style="content-visibility: auto; contain-intrinsic-size: 640px 120px;">
<div style="contain-intrinsic-size: 640px 120px;">
<ctzn-post-view
.post=${post}
mode="default"
Expand Down