diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7cc6994..1a6e5e89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -61,6 +61,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Implemented user option to change sidebar position to the right side
- Implemented user option to hide floating shout panel
- Implemented "edit profile" button if viewing own profile which opens profile settings
+- Added bookmark button to the status buttons (next to react, favorite, repeat buttons)
### Fixed
- Fixed follow request count showing in the wrong location in mobile view
diff --git a/src/components/bookmark_button/bookmark_button.js b/src/components/bookmark_button/bookmark_button.js
new file mode 100644
index 00000000..dbd31ccb
--- /dev/null
+++ b/src/components/bookmark_button/bookmark_button.js
@@ -0,0 +1,36 @@
+import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faBookmark } from '@fortawesome/free-solid-svg-icons'
+
+import {
+ faBookmark as faBookmarkReg
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(faBookmark, faBookmarkReg)
+
+const BookmarkButton = {
+ props: ['status', 'loggedIn'],
+ data () {
+ return {
+ animated: false
+ }
+ },
+ methods: {
+ bookmarkStatus () {
+ if (!this.status.bookmarked) {
+ this.$store.dispatch('bookmark', { id: this.status.id })
+ } else {
+ this.$store.dispatch('unbookmark', { id: this.status.id })
+ }
+ this.animated = true
+ setTimeout(() => {
+ this.animated = false
+ }, 500)
+ }
+ },
+ computed: {
+ ...mapGetters(['mergedConfig'])
+ }
+}
+
+export default BookmarkButton
diff --git a/src/components/bookmark_button/bookmark_button.vue b/src/components/bookmark_button/bookmark_button.vue
new file mode 100644
index 00000000..918fb412
--- /dev/null
+++ b/src/components/bookmark_button/bookmark_button.vue
@@ -0,0 +1,57 @@
+<template>
+ <div class="BookmarkButton">
+ <button
+ class="button-unstyled interactive"
+ :class="status.bookmarked && '-bookmarked'"
+ :title="[status.bookmarked ? $t('tool_tip.unbookmark') : $t('tool_tip.bookmark')]"
+ @click.prevent="bookmarkStatus()"
+ >
+ <FAIcon
+ class="fa-scale-110 fa-old-padding"
+ fixed-width
+ :icon="[status.bookmarked ? 'fas' : 'far', 'bookmark']"
+ :spin="animated"
+ />
+ </button>
+ </div>
+</template>
+
+<script src="./bookmark_button.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.BookmarkButton {
+ display: flex;
+
+ > :first-child {
+ padding: 10px;
+ margin: -10px -8px -10px -10px;
+ }
+
+ .action-counter {
+ pointer-events: none;
+ user-select: none;
+ }
+
+ .interactive {
+ .svg-inline--fa {
+ animation-duration: 0.6s;
+ }
+
+ &:hover .svg-inline--fa,
+ &.-bookmarked .svg-inline--fa {
+ color: $fallback--cGreen;
+ color: var(--cGreen, $fallback--cGreen);
+ }
+ }
+}
+
+.notifications {
+ .BookmarkButton {
+ > :first-child {
+ margin: -10px -8px -10px -14px;
+ }
+ }
+}
+</style>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index dd45b6b9..93dd8d0c 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -2,21 +2,17 @@ import Popover from '../popover/popover.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEllipsisH,
- faBookmark,
faEyeSlash,
faThumbtack,
faShareAlt,
faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons'
import {
- faBookmark as faBookmarkReg,
faFlag
} from '@fortawesome/free-regular-svg-icons'
library.add(
faEllipsisH,
- faBookmark,
- faBookmarkReg,
faEyeSlash,
faThumbtack,
faShareAlt,
@@ -59,16 +55,6 @@ const ExtraButtons = {
.then(() => this.$emit('onSuccess'))
.catch(err => this.$emit('onError', err.error.error))
},
- bookmarkStatus () {
- this.$store.dispatch('bookmark', { id: this.status.id })
- .then(() => this.$emit('onSuccess'))
- .catch(err => this.$emit('onError', err.error.error))
- },
- unbookmarkStatus () {
- this.$store.dispatch('unbookmark', { id: this.status.id })
- .then(() => this.$emit('onSuccess'))
- .catch(err => this.$emit('onError', err.error.error))
- },
reportStatus () {
this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
}
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a3c3c767..9828f6aa 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -51,28 +51,6 @@
icon="thumbtack"
/><span>{{ $t("status.unpin") }}</span>
</button>
- <button
- v-if="!status.bookmarked"
- class="button-default dropdown-item dropdown-item-icon"
- @click.prevent="bookmarkStatus"
- @click="close"
- >
- <FAIcon
- fixed-width
- :icon="['far', 'bookmark']"
- /><span>{{ $t("status.bookmark") }}</span>
- </button>
- <button
- v-if="status.bookmarked"
- class="button-default dropdown-item dropdown-item-icon"
- @click.prevent="unbookmarkStatus"
- @click="close"
- >
- <FAIcon
- fixed-width
- icon="bookmark"
- /><span>{{ $t("status.unbookmark") }}</span>
- </button>
<button
v-if="canDelete"
class="button-default dropdown-item dropdown-item-icon"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index e54be241..9219e6f3 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -2,6 +2,7 @@ import ReplyButton from '../reply_button/reply_button.vue'
import FavoriteButton from '../favorite_button/favorite_button.vue'
import ReactButton from '../react_button/react_button.vue'
import RetweetButton from '../retweet_button/retweet_button.vue'
+import BookmarkButton from '../bookmark_button/bookmark_button.vue'
import ExtraButtons from '../extra_buttons/extra_buttons.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCard from '../user_card/user_card.vue'
@@ -103,6 +104,7 @@ const Status = {
FavoriteButton,
ReactButton,
RetweetButton,
+ BookmarkButton,
ExtraButtons,
PostStatusForm,
UserCard,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3de4c471..e26266ae 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -440,6 +440,10 @@
v-if="loggedIn"
:status="status"
/>
+ <BookmarkButton
+ v-if="loggedIn"
+ :status="status"
+ />
<extra-buttons
:status="status"
@onError="showError"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 76a871fb..ad397cfa 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -869,7 +869,8 @@
"user_settings": "User Settings",
"accept_follow_request": "Accept follow request",
"reject_follow_request": "Reject follow request",
- "bookmark": "Bookmark"
+ "bookmark": "Bookmark",
+ "unbookmark": "Unbookmark"
},
"upload": {
"error": {