logo

pleroma-fe

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

timeline_menu.vue (2164B)

    

  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.       <BookmarkFoldersMenuContent
  19.         v-else-if="useBookmarkFoldersMenu"
  20.         class="timelines"
  21.       />
  22.       <ul v-else>
  23.         <NavigationEntry
  24.           v-for="item in timelinesList"
  25.           :key="item.name"
  26.           :show-pin="false"
  27.           :item="item"
  28.         />
  29.       </ul>
  30.     </template>
  31.     <template #trigger>
  32.       <span class="button-unstyled timeline-menu-title">
  33.         <h1 class="title timeline-title">{{ timelineName() }}</h1>
  34.         <span>
  35.           <FAIcon
  36.             size="sm"
  37.             icon="chevron-down"
  38.           />
  39.         </span>
  40.         <span
  41.           class="click-blocker"
  42.           @click="blockOpen"
  43.         />
  44.       </span>
  45.     </template>
  46.   </Popover>
  47. </template>
  49. <script src="./timeline_menu.js"></script>
  51. <style lang="scss">
  52. .timeline-menu-popover {
  53.   min-width: 24rem;
  54.   max-width: 100vw;
  55.   margin-top: 0.6rem;
  56.   font-size: 1rem;
  57.   border-top-right-radius: 0;
  58.   border-top-left-radius: 0;
  60.   ul {
  61.     list-style: none;
  62.     margin: 0;
  63.     padding: 0;
  64.   }
  65. }
  67. .TimelineMenu {
  68.   margin-right: auto;
  69.   min-width: 0;
  71.   .popover-trigger-button {
  72.     vertical-align: bottom;
  73.   }
  75.   .panel::after {
  76.     border-top-right-radius: 0;
  77.     border-top-left-radius: 0;
  78.   }
  80.   .timeline-menu-title {
  81.     margin: 0;
  82.     cursor: pointer;
  83.     user-select: none;
  84.     width: 100%;
  85.     display: flex;
  87.     .timeline-menu-name {
  88.       overflow: hidden;
  89.       text-overflow: ellipsis;
  90.       white-space: nowrap;
  91.     }
  93.     svg {
  94.       margin-left: 0.6em;
  95.       transition: transform 100ms;
  96.     }
  98.     .click-blocker {
  99.       cursor: default;
  100.       flex-grow: 1;
  101.     }
  102.   }
  104.   &.open .timeline-menu-title svg {
  105.     transform: rotate(180deg);
  106.   }
  108.   .panel {
  109.     box-shadow: var(--popoverShadow);
  110.   }
  111. }
  112. </style>