logo

pleroma-fe

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

timeline.vue (4235B)

    

  1. <template>
  2.   <div :class="['Timeline', classes.root]">
  3.     <div :class="classes.header">
  4.       <TimelineMenu
  5.         v-if="!embedded"
  6.         :timeline-name="timelineName"
  7.       />
  8.       <div
  9.         v-if="showScrollTop && !embedded"
  10.         class="rightside-button"
  11.       >
  12.         <button
  13.           class="button-unstyled scroll-to-top-button"
  14.           type="button"
  15.           :title="$t('general.scroll_to_top')"
  16.           @click="scrollToTop"
  17.         >
  18.           <FALayers class="fa-scale-110 fa-old-padding-layer">
  19.             <FAIcon icon="arrow-up" />
  20.             <FAIcon
  21.               icon="minus"
  22.               transform="up-7"
  23.             />
  24.           </FALayers>
  25.         </button>
  26.       </div>
  27.       <template v-if="mobileLayout && !embedded">
  28.         <div
  29.           v-if="showLoadButton"
  30.           class="rightside-button"
  31.         >
  32.           <button
  33.             class="button-unstyled loadmore-button"
  34.             :title="loadButtonString"
  35.             @click.prevent="showNewStatuses"
  36.           >
  37.             <FAIcon
  38.               fixed-width
  39.               icon="circle-plus"
  40.             />
  41.             <div class="badge -counter">
  42.               {{ mobileLoadButtonString }}
  43.             </div>
  44.           </button>
  45.         </div>
  46.         <div
  47.           v-else-if="!embedded"
  48.           class="loadmore-text faint veryfaint rightside-icon"
  49.           :title="$t('timeline.up_to_date')"
  50.           :aria-disabled="true"
  51.           @click.prevent
  52.         >
  53.           <FAIcon
  54.             fixed-width
  55.             icon="check"
  56.           />
  57.         </div>
  58.       </template>
  59.       <template v-else>
  60.         <button
  61.           v-if="showLoadButton"
  62.           class="button-default loadmore-button"
  63.           @click.prevent="showNewStatuses"
  64.         >
  65.           {{ loadButtonString }}
  66.         </button>
  67.         <div
  68.           v-else-if="!embedded"
  69.           class="loadmore-text faint"
  70.           @click.prevent
  71.         >
  72.           {{ $t('timeline.up_to_date') }}
  73.         </div>
  74.       </template>
  75.       <QuickFilterSettings
  76.         v-if="!embedded"
  77.         class="rightside-button"
  78.       />
  79.       <QuickViewSettings
  80.         v-if="!embedded"
  81.         class="rightside-button"
  82.       />
  83.     </div>
  84.     <div :class="classes.body">
  85.       <div
  86.         ref="timeline"
  87.         class="timeline"
  88.         role="feed"
  89.       >
  90.         <conversation
  91.           v-for="statusId in filteredPinnedStatusIds"
  92.           :key="statusId + '-pinned'"
  93.           role="listitem"
  94.           class="status-fadein"
  95.           :status-id="statusId"
  96.           :collapsable="true"
  97.           :pinned-status-ids-object="pinnedStatusIdsObject"
  98.           :in-profile="inProfile"
  99.           :profile-user-id="userId"
  100.         />
  101.         <conversation
  102.           v-for="status in filteredVisibleStatuses"
  103.           :key="status.id"
  104.           role="listitem"
  105.           class="status-fadein"
  106.           :status-id="status.id"
  107.           :collapsable="true"
  108.           :in-profile="inProfile"
  109.           :profile-user-id="userId"
  110.           :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
  111.         />
  112.       </div>
  113.     </div>
  114.     <div :class="classes.footer">
  115.       <teleport
  116.         :to="footerSlipgate"
  117.         :disabled="!embedded || !footerSlipgate"
  118.       >
  119.         <div
  120.           v-if="count===0"
  121.           class="new-status-notification text-center faint"
  122.         >
  123.           {{ $t('timeline.no_statuses') }}
  124.         </div>
  125.         <div
  126.           v-else-if="bottomedOut"
  127.           class="new-status-notification text-center faint"
  128.         >
  129.           {{ $t('timeline.no_more_statuses') }}
  130.         </div>
  131.         <button
  132.           v-else-if="!timeline.loading"
  133.           class="button-unstyled -link"
  134.           @click.prevent="fetchOlderStatuses()"
  135.         >
  136.           <div class="new-status-notification text-center">
  137.             {{ $t('timeline.load_older') }}
  138.           </div>
  139.         </button>
  140.         <div
  141.           v-else
  142.           class="new-status-notification text-center"
  143.         >
  144.           <FAIcon
  145.             icon="circle-notch"
  146.             spin
  147.             size="lg"
  148.           />
  149.         </div>
  150.       </teleport>
  151.     </div>
  152.   </div>
  153. </template>
  155. <script src="./timeline.js"></script>
  157. <style src="./timeline.scss" lang="scss"> </style>