logo

pleroma-fe

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

emoji_reactions.vue (4505B)

    

  1. <template>
  2.   <div class="EmojiReactions">
  3.     <span
  4.       v-for="(reaction) in emojiReactions"
  5.       :key="reaction.url || reaction.name"
  6.       class="emoji-reaction-container btn-group"
  7.     >
  8.       <component
  9.         :is="loggedIn ? 'button' : 'a'"
  10.         v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
  11.         role="button"
  12.         class="emoji-reaction btn button-default"
  13.         :class="{ '-picked-reaction': reactedWith(reaction.name), toggled: reactedWith(reaction.name) }"
  14.         :title="reaction.url ? reaction.name : undefined"
  15.         :aria-pressed="reactedWith(reaction.name)"
  16.         @click="emojiOnClick(reaction.name, $event)"
  17.       >
  18.         <span
  19.           class="reaction-emoji"
  20.         >
  21.           <StillImage
  22.             v-if="reaction.url"
  23.             :src="reaction.url"
  24.             class="reaction-emoji-content"
  25.           />
  26.           <span
  27.             v-else
  28.             class="reaction-emoji reaction-emoji-content"
  29.           >{{ reaction.name }}</span>
  30.         </span>
  31.         <FALayers>
  32.           <FAIcon
  33.             v-if="reactedWith(reaction.name)"
  34.             class="active-marker"
  35.             transform="shrink-6 up-9"
  36.             icon="check"
  37.           />
  38.           <FAIcon
  39.             v-if="!reactedWith(reaction.name)"
  40.             class="focus-marker"
  41.             transform="shrink-6 up-9"
  42.             icon="plus"
  43.           />
  44.           <FAIcon
  45.             v-else
  46.             class="focus-marker"
  47.             transform="shrink-6 up-9"
  48.             icon="minus"
  49.           />
  50.         </FALayers>
  51.       </component>
  52.       <UserListPopover
  53.         :users="accountsForEmoji[reaction.name]"
  54.         class="emoji-reaction-popover"
  55.         :trigger-attrs="counterTriggerAttrs(reaction)"
  56.         @show="fetchEmojiReactionsByIfMissing()"
  57.       >
  58.         <span class="emoji-reaction-counts">{{ reaction.count }}</span>
  59.       </UserListPopover>
  60.     </span>
  61.     <a
  62.       v-if="tooManyReactions"
  63.       class="emoji-reaction-expand faint"
  64.       href="javascript:void(0)"
  65.       @click="toggleShowAll"
  66.     >
  67.       {{ showAll ? $t('general.show_less') : showMoreString }}
  68.     </a>
  69.   </div>
  70. </template>
  72. <script src="./emoji_reactions.js"></script>
  73. <style lang="scss">
  74. @import "../../mixins";
  76. .EmojiReactions {
  77.   display: flex;
  78.   margin-top: 0.25em;
  79.   flex-wrap: wrap;
  81.   --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
  83.   .emoji-reaction-container {
  84.     display: flex;
  85.     align-items: stretch;
  86.     margin-top: 0.5em;
  87.     margin-right: 0.5em;
  89.     .emoji-reaction-popover {
  90.       padding: 0;
  92.       .emoji-reaction-count-button {
  93.         margin: 0;
  94.         height: 100%;
  95.         border-top-left-radius: 0;
  96.         border-bottom-left-radius: 0;
  97.         box-sizing: border-box;
  98.         min-width: 2em;
  99.         display: inline-flex;
  100.         justify-content: center;
  101.         align-items: center;
  102.       }
  103.     }
  104.   }
  106.   .emoji-reaction {
  107.     padding-left: 0.5em;
  108.     display: flex;
  109.     align-items: center;
  110.     justify-content: center;
  111.     box-sizing: border-box;
  112.     border-top-right-radius: 0;
  113.     border-bottom-right-radius: 0;
  114.     margin: 0;
  116.     .reaction-emoji {
  117.       width: var(--emoji-size);
  118.       height: var(--emoji-size);
  119.       margin-right: 0.25em;
  120.       line-height: var(--emoji-size);
  121.       display: flex;
  122.       justify-content: center;
  123.       align-items: center;
  125.       --_still_image-label-scale: 0.3;
  126.     }
  128.     .reaction-emoji-content {
  129.       max-width: 100%;
  130.       max-height: 100%;
  131.       width: var(--emoji-size);
  132.       height: var(--emoji-size);
  133.       line-height: inherit;
  134.       overflow: hidden;
  135.       font-size: calc(var(--emoji-size) * 0.8);
  136.       margin: 0;
  138.       img {
  139.         object-fit: contain;
  140.       }
  141.     }
  143.     &:focus {
  144.       outline: none;
  145.     }
  147.     .svg-inline--fa {
  148.       color: var(--text);
  149.     }
  151.     &.-picked-reaction {
  152.       .svg-inline--fa {
  153.         color: var(--accent);
  154.       }
  155.     }
  157.     @include unfocused-style {
  158.       .focus-marker {
  159.         visibility: hidden;
  160.       }
  162.       .active-marker {
  163.         visibility: visible;
  164.       }
  165.     }
  167.     @include focused-style {
  168.       .svg-inline--fa {
  169.         color: var(--accent);
  170.       }
  172.       .focus-marker {
  173.         visibility: visible;
  174.       }
  176.       .active-marker {
  177.         visibility: hidden;
  178.       }
  179.     }
  180.   }
  182.   .emoji-reaction-expand {
  183.     padding: 0 0.5em;
  184.     margin-right: 0.5em;
  185.     margin-top: 0.5em;
  186.     display: flex;
  187.     align-items: center;
  188.     justify-content: center;
  190.     &:hover {
  191.       text-decoration: underline;
  192.     }
  193.   }
  194. }
  195. </style>