Merge branch 'bookmarkButton' into 'develop'

Add proper Bookmark button to status action buttons

See merge request pleroma/pleroma-fe!1401

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

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

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>

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] })
     }

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"

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,

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"

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": {