Merge 85b5bc2098
into 72a07ac40d
This commit is contained in:
commit
65b99b29a5
|
@ -15,6 +15,9 @@
|
|||
{#if checked}
|
||||
<SvgIcon className="icon-button-svg icon-button-check" ref:check href="#fa-check" />
|
||||
{/if}
|
||||
{#if count}
|
||||
<span class="icon-button-count">{count}</span>
|
||||
{/if}
|
||||
</button>
|
||||
<style>
|
||||
.icon-button {
|
||||
|
@ -28,6 +31,11 @@
|
|||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:global(.icon-button-count) {
|
||||
margin-left: 10px;
|
||||
color: var(--action-button-fill-color);
|
||||
}
|
||||
|
||||
:global(.icon-button-svg) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
@ -77,6 +85,10 @@
|
|||
* muted
|
||||
*/
|
||||
|
||||
:global(.icon-button.muted-style .icon-button-count) {
|
||||
color: var(--action-button-deemphasized-fill-color);
|
||||
}
|
||||
|
||||
:global(.icon-button.muted-style .icon-button-svg) {
|
||||
fill: var(--action-button-deemphasized-fill-color);
|
||||
}
|
||||
|
@ -141,7 +153,8 @@
|
|||
sameColorWhenPressed: false,
|
||||
ariaHidden: false,
|
||||
clickListener: true,
|
||||
checked: false
|
||||
checked: false,
|
||||
count: 0
|
||||
}),
|
||||
store: () => store,
|
||||
computed: {
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
href={replyIcon}
|
||||
clickListener={false}
|
||||
elementId={replyKey}
|
||||
count={repliesCount}
|
||||
/>
|
||||
<IconButton
|
||||
label={reblogLabel}
|
||||
|
@ -19,6 +20,7 @@
|
|||
href={reblogIcon}
|
||||
clickListener={false}
|
||||
elementId={reblogKey}
|
||||
count={reblogsCount}
|
||||
ref:reblogIcon
|
||||
/>
|
||||
<IconButton
|
||||
|
@ -30,6 +32,7 @@
|
|||
href="#fa-star"
|
||||
clickListener={false}
|
||||
elementId={favoriteKey}
|
||||
count={favoritesCount}
|
||||
ref:favoriteIcon
|
||||
/>
|
||||
<IconButton
|
||||
|
@ -119,22 +122,28 @@
|
|||
store: () => store,
|
||||
methods: {
|
||||
toggleFavorite (announce) {
|
||||
const { originalStatusId, favorited } = this.get()
|
||||
const { originalStatusId, favorited, originalStatus } = this.get()
|
||||
const newFavoritedValue = !favorited
|
||||
/* no await */ setFavorited(originalStatusId, newFavoritedValue)
|
||||
if (newFavoritedValue) {
|
||||
this.refs.favoriteIcon.animate(FAVORITE_ANIMATION, CHECKMARK_ANIMATION)
|
||||
originalStatus.favourites_count++
|
||||
} else {
|
||||
originalStatus.favourites_count--
|
||||
}
|
||||
if (announce) {
|
||||
announceAriaLivePolite(newFavoritedValue ? 'intl.favorited' : 'intl.unfavorited')
|
||||
}
|
||||
},
|
||||
reblog (announce) {
|
||||
const { originalStatusId, reblogged } = this.get()
|
||||
const { originalStatusId, reblogged, originalStatus } = this.get()
|
||||
const newRebloggedValue = !reblogged
|
||||
/* no await */ setReblogged(originalStatusId, newRebloggedValue)
|
||||
if (newRebloggedValue) {
|
||||
this.refs.reblogIcon.animate(REBLOG_ANIMATION, CHECKMARK_ANIMATION)
|
||||
originalStatus.reblogs_count++
|
||||
} else {
|
||||
originalStatus.reblogs_count--
|
||||
}
|
||||
if (announce) {
|
||||
announceAriaLivePolite(newRebloggedValue ? 'intl.reblogged' : 'intl.unreblogged')
|
||||
|
@ -166,12 +175,14 @@
|
|||
onPostedStatus (realm, inReplyToUuid) {
|
||||
const {
|
||||
originalStatusId,
|
||||
uuid
|
||||
uuid,
|
||||
originalStatus
|
||||
} = this.get()
|
||||
if (realm !== originalStatusId ||
|
||||
inReplyToUuid !== uuid) {
|
||||
return
|
||||
}
|
||||
originalStatus.replies_count++
|
||||
try {
|
||||
// return status to the reply button after posting a reply
|
||||
this.refs.node.querySelector('.status-toolbar-reply-button').focus({ preventScroll: true })
|
||||
|
@ -229,7 +240,10 @@
|
|||
favoriteKey: ({ uuid }) => `fav-${uuid}`,
|
||||
reblogKey: ({ uuid }) => `reblog-${uuid}`,
|
||||
replyKey: ({ uuid }) => `reply-${uuid}`,
|
||||
optionsKey: ({ uuid }) => `options-${uuid}`
|
||||
optionsKey: ({ uuid }) => `options-${uuid}`,
|
||||
repliesCount: ({ originalStatus }) => originalStatus.replies_count,
|
||||
reblogsCount: ({ originalStatus }) => originalStatus.reblogs_count,
|
||||
favoritesCount: ({ originalStatus }) => originalStatus.favourites_count
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue