logo

pleroma-fe

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

timeline_menu.vue (2056B)

    

  1. <template>
  2.   <Popover
  3.     trigger="click"
  4.     class="TimelineMenu"
  5.     :class="{ 'open': isOpen }"
  6.     :bound-to="{ x: 'container' }"
  7.     bound-to-selector=".Timeline"
  8.     popover-class="timeline-menu-popover popover-default"
  9.     @show="openMenu"
  10.     @close="() => isOpen = false"
  11.   >
  12.     <template #content>
  13.       <ListsMenuContent
  14.         v-if="useListsMenu"
  15.         :show-pin="false"
  16.         class="timelines"
  17.       />
  18.       <ul v-else>
  19.         <NavigationEntry
  20.           v-for="item in timelinesList"
  21.           :key="item.name"
  22.           :show-pin="false"
  23.           :item="item"
  24.         />
  25.       </ul>
  26.     </template>
  27.     <template #trigger>
  28.       <span class="button-unstyled title timeline-menu-title">
  29.         <span class="timeline-title">{{ timelineName() }}</span>
  30.         <span>
  31.           <FAIcon
  32.             size="sm"
  33.             icon="chevron-down"
  34.           />
  35.         </span>
  36.         <span
  37.           class="click-blocker"
  38.           @click="blockOpen"
  39.         />
  40.       </span>
  41.     </template>
  42.   </Popover>
  43. </template>
  45. <script src="./timeline_menu.js"></script>
  47. <style lang="scss">
  48. .timeline-menu-popover {
  49.   min-width: 24rem;
  50.   max-width: 100vw;
  51.   margin-top: 0.6rem;
  52.   font-size: 1rem;
  53.   border-top-right-radius: 0;
  54.   border-top-left-radius: 0;
  56.   ul {
  57.     list-style: none;
  58.     margin: 0;
  59.     padding: 0;
  60.   }
  61. }
  63. .TimelineMenu {
  64.   margin-right: auto;
  65.   min-width: 0;
  67.   .popover-trigger-button {
  68.     vertical-align: bottom;
  69.   }
  71.   .panel::after {
  72.     border-top-right-radius: 0;
  73.     border-top-left-radius: 0;
  74.   }
  76.   .timeline-menu-title {
  77.     margin: 0;
  78.     cursor: pointer;
  79.     user-select: none;
  80.     width: 100%;
  81.     display: flex;
  83.     .timeline-menu-name {
  84.       overflow: hidden;
  85.       text-overflow: ellipsis;
  86.       white-space: nowrap;
  87.     }
  89.     svg {
  90.       margin-left: 0.6em;
  91.       transition: transform 100ms;
  92.     }
  94.     .click-blocker {
  95.       cursor: default;
  96.       flex-grow: 1;
  97.     }
  98.   }
  100.   &.open .timeline-menu-title svg {
  101.     transform: rotate(180deg);
  102.   }
  104.   .panel {
  105.     box-shadow: var(--popoverShadow);
  106.   }
  107. }
  108. </style>