logo

pleroma-fe

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

react_button.vue (2389B)

    

  1. <template>
  2.   <span class="ReactButton">
  3.     <EmojiPicker
  4.       ref="picker"
  5.       :enable-sticker-picker="enableStickerPicker"
  6.       :hide-custom-emoji="hideCustomEmoji"
  7.       class="emoji-picker-panel"
  8.       @emoji="addReaction"
  9.       @show="onShow"
  10.       @close="onClose"
  11.     />
  12.     <span
  13.       class="button-unstyled popover-trigger"
  14.       role="button"
  15.       :tabindex="0"
  16.       :title="$t('tool_tip.add_reaction')"
  17.       @click.stop.prevent="show"
  18.     >
  19.       <FALayers>
  20.         <FAIcon
  21.           class="fa-scale-110 fa-old-padding"
  22.           :icon="['far', 'smile-beam']"
  23.         />
  24.         <FAIcon
  25.           v-show="!expanded"
  26.           class="focus-marker"
  27.           transform="shrink-6 up-9 right-17"
  28.           icon="plus"
  29.         />
  30.         <FAIcon
  31.           v-show="expanded"
  32.           class="focus-marker"
  33.           transform="shrink-6 up-9 right-17"
  34.           icon="times"
  35.         />
  36.       </FALayers>
  37.     </span>
  38.   </span>
  39. </template>
  41. <script src="./react_button.js"></script>
  43. <style lang="scss">
  44. @import "../../mixins";
  46. .ReactButton {
  47.   .reaction-picker-filter {
  48.     padding: 0.5em;
  49.     display: flex;
  51.     input {
  52.       flex: 1;
  53.     }
  54.   }
  56.   .reaction-picker-divider {
  57.     height: 1px;
  58.     width: 100%;
  59.     margin: 0.5em;
  60.     background-color: var(--border);
  61.   }
  63.   .reaction-picker {
  64.     width: 10em;
  65.     height: 9em;
  66.     font-size: 1.5em;
  67.     overflow-y: scroll;
  68.     display: flex;
  69.     flex-wrap: wrap;
  70.     padding: 0.5em;
  71.     text-align: center;
  72.     align-content: flex-start;
  73.     user-select: none;
  74.     mask:
  75.       linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
  76.       linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
  77.       linear-gradient(to top, white, white);
  78.     transition: mask-size 150ms;
  79.     mask-size: 100% 20px, 100% 20px, auto;
  81.     /* Autoprefixed seem to ignore this one, and also syntax is different */
  82.     mask-composite: xor;
  83.     mask-composite: exclude;
  85.     .emoji-button {
  86.       cursor: pointer;
  87.       flex-basis: 20%;
  88.       line-height: 1.5;
  89.       align-content: center;
  91.       &:hover {
  92.         transform: scale(1.25);
  93.       }
  94.     }
  95.   }
  97.   .popover-trigger {
  98.     padding: 10px;
  99.     margin: -10px;
  101.     @include unfocused-style {
  102.       .focus-marker {
  103.         visibility: hidden;
  104.       }
  105.     }
  107.     @include focused-style {
  108.       .focus-marker {
  109.         visibility: visible;
  110.       }
  111.     }
  112.   }
  113. }
  115. </style>