logo

pleroma-fe

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

shout_panel.vue (2910B)

    

  1. <template>
  2.   <div
  3.     v-if="!collapsed || !floating"
  4.     class="shout-panel"
  5.   >
  6.     <div class="panel panel-default">
  7.       <div
  8.         class="panel-heading"
  9.         :class="{ 'shout-heading': floating }"
  10.         @click.stop.prevent="togglePanel"
  11.       >
  12.         <div class="title">
  13.           {{ $t('shoutbox.title') }}
  14.           <FAIcon
  15.             v-if="floating"
  16.             icon="times"
  17.             class="close-icon"
  18.           />
  19.         </div>
  20.       </div>
  21.       <div class="panel-body shout-window">
  22.         <div
  23.           v-for="message in messages"
  24.           :key="message.id"
  25.           class="shout-message"
  26.         >
  27.           <span class="shout-avatar">
  28.             <img :src="message.author.avatar">
  29.           </span>
  30.           <div class="shout-content">
  31.             <router-link
  32.               class="shout-name"
  33.               :to="userProfileLink(message.author)"
  34.             >
  35.               {{ message.author.username }}
  36.             </router-link>
  37.             <br>
  38.             <span class="shout-text">
  39.               {{ message.text }}
  40.             </span>
  41.           </div>
  42.         </div>
  43.       </div>
  44.       <div class="panel-body shout-input">
  45.         <textarea
  46.           v-model="currentMessage"
  47.           class="shout-input-textarea input"
  48.           rows="1"
  49.           @keyup.enter="submit(currentMessage)"
  50.         />
  51.       </div>
  52.     </div>
  53.   </div>
  54.   <div
  55.     v-else
  56.     class="shout-panel"
  57.   >
  58.     <div class="panel panel-default">
  59.       <div
  60.         class="panel-heading -stub timeline-heading shout-heading"
  61.         @click.stop.prevent="togglePanel"
  62.       >
  63.         <div class="title">
  64.           <FAIcon
  65.             class="icon"
  66.             icon="bullhorn"
  67.           />
  68.           {{ $t('shoutbox.title') }}
  69.         </div>
  70.       </div>
  71.     </div>
  72.   </div>
  73. </template>
  75. <script src="./shout_panel.js"></script>
  77. <style lang="scss">
  78. .floating-shout {
  79.   position: fixed;
  80.   bottom: 0.5em;
  81.   z-index: var(--ZI_popovers);
  82.   max-width: 25em;
  84.   &.-left {
  85.     left: 0.5em;
  86.   }
  88.   &:not(.-left) {
  89.     right: 0.5em;
  90.   }
  91. }
  93. .shout-panel {
  94.   .shout-heading {
  95.     cursor: pointer;
  97.     .icon {
  98.       color: var(--text);
  99.       margin-right: 0.5em;
  100.     }
  102.     .title {
  103.       display: flex;
  104.       justify-content: space-between;
  105.       align-items: center;
  106.     }
  107.   }
  109.   .shout-window {
  110.     overflow-y: auto;
  111.     overflow-x: hidden;
  112.     max-height: 20em;
  113.   }
  115.   .shout-window-container {
  116.     height: 100%;
  117.   }
  119.   .shout-message {
  120.     display: flex;
  121.     padding: 0.2em 0.5em;
  122.   }
  124.   .shout-avatar {
  125.     img {
  126.       height: 24px;
  127.       width: 24px;
  128.       border-radius: var(--roundness);
  129.       margin-right: 0.5em;
  130.       margin-top: 0.25em;
  131.     }
  132.   }
  134.   .shout-input {
  135.     display: flex;
  137.     textarea {
  138.       flex: 1;
  139.       margin: 0.6em;
  140.       min-height: 3.5em;
  141.       resize: none;
  142.     }
  143.   }
  145.   .shout-panel {
  146.     .title {
  147.       display: flex;
  148.       justify-content: space-between;
  149.     }
  150.   }
  151. }
  152. </style>