logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

favorite_button.vue (2389B)

    

  1. <template>
  2.   <div class="FavoriteButton">
  3.     <button
  4.       v-if="loggedIn"
  5.       class="button-unstyled interactive"
  6.       :class="status.favorited && '-favorited'"
  7.       :title="$t('tool_tip.favorite')"
  8.       @click.prevent="favorite()"
  9.     >
  10.       <FALayers class="fa-scale-110 fa-old-padding-layer">
  11.         <FAIcon
  12.           class="fa-scale-110"
  13.           :icon="[status.favorited ? 'fas' : 'far', 'star']"
  14.           :spin="animated"
  15.         />
  16.         <FAIcon
  17.           v-if="status.favorited"
  18.           class="active-marker"
  19.           transform="shrink-6 up-9 right-12"
  20.           icon="check"
  21.         />
  22.         <FAIcon
  23.           v-if="!status.favorited"
  24.           class="focus-marker"
  25.           transform="shrink-6 up-9 right-12"
  26.           icon="plus"
  27.         />
  28.         <FAIcon
  29.           v-else
  30.           class="focus-marker"
  31.           transform="shrink-6 up-9 right-12"
  32.           icon="minus"
  33.         />
  34.       </FALayers>
  35.     </button>
  36.     <a
  37.       v-else
  38.       class="button-unstyled interactive"
  39.       target="_blank"
  40.       role="button"
  41.       :title="$t('tool_tip.favorite')"
  42.       :href="remoteInteractionLink"
  43.     >
  44.       <FALayers class="fa-scale-110 fa-old-padding-layer">
  45.         <FAIcon
  46.           class="fa-scale-110"
  47.           :icon="['far', 'star']"
  48.         />
  49.         <FAIcon
  50.           class="focus-marker"
  51.           transform="shrink-6 up-9 right-12"
  52.           icon="plus"
  53.         />
  54.       </FALayers>
  55.     </a>
  56.     <span
  57.       v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
  58.       class="action-counter"
  59.     >
  60.       {{ status.fave_num }}
  61.     </span>
  62.   </div>
  63. </template>
  65. <script src="./favorite_button.js"></script>
  67. <style lang="scss">
  68. @import "../../mixins";
  70. .FavoriteButton {
  71.   display: flex;
  73.   > :first-child {
  74.     padding: 10px;
  75.     margin: -10px -8px -10px -10px;
  76.   }
  78.   .action-counter {
  79.     pointer-events: none;
  80.     user-select: none;
  81.   }
  83.   .interactive {
  84.     .svg-inline--fa {
  85.       animation-duration: 0.6s;
  86.     }
  88.     &:hover .svg-inline--fa,
  89.     &.-favorited .svg-inline--fa {
  90.       color: var(--cOrange);
  91.     }
  93.     @include unfocused-style {
  94.       .focus-marker {
  95.         visibility: hidden;
  96.       }
  98.       .active-marker {
  99.         visibility: visible;
  100.       }
  101.     }
  103.     @include focused-style {
  104.       .focus-marker {
  105.         visibility: visible;
  106.       }
  108.       .active-marker {
  109.         visibility: hidden;
  110.       }
  111.     }
  112.   }
  113. }
  114. </style>