logo

pleroma-fe

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

mobile_nav.vue (6035B)


  1. <template>
  2. <div
  3. class="MobileNav"
  4. >
  5. <nav
  6. id="nav"
  7. class="mobile-nav"
  8. @click="scrollToTop()"
  9. >
  10. <div class="item">
  11. <button
  12. class="button-unstyled mobile-nav-button"
  13. :title="$t('nav.mobile_sidebar')"
  14. :aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
  15. @click.stop.prevent="toggleMobileSidebar()"
  16. >
  17. <FAIcon
  18. class="fa-scale-110 fa-old-padding"
  19. icon="bars"
  20. />
  21. <div
  22. v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
  23. class="badge -dot -notification"
  24. />
  25. </button>
  26. <NavigationPins class="pins" />
  27. </div> <div class="item right">
  28. <button
  29. v-if="currentUser"
  30. class="button-unstyled mobile-nav-button"
  31. :title="unseenNotificationsCount ? $t('nav.mobile_notifications_unread_active') : $t('nav.mobile_notifications')"
  32. @click.stop.prevent="openMobileNotifications()"
  33. >
  34. <FAIcon
  35. class="fa-scale-110 fa-old-padding"
  36. icon="bell"
  37. />
  38. <div
  39. v-if="unseenNotificationsCount"
  40. class="badge -dot -notification"
  41. />
  42. </button>
  43. </div>
  44. </nav>
  45. <aside
  46. v-if="currentUser"
  47. class="mobile-notifications-drawer mobile-drawer"
  48. :class="{ '-closed': !notificationsOpen }"
  49. @touchstart.stop="notificationsTouchStart"
  50. @touchmove.stop="notificationsTouchMove"
  51. >
  52. <div class="panel-heading mobile-notifications-header">
  53. <span class="title">
  54. {{ $t('notifications.notifications') }}
  55. <span
  56. v-if="unseenCountBadgeText"
  57. class="badge -notification unseen-count"
  58. >{{ unseenCountBadgeText }}</span>
  59. </span>
  60. <span class="spacer" />
  61. <button
  62. v-if="notificationsAtTop"
  63. class="button-unstyled mobile-nav-button"
  64. :title="$t('general.scroll_to_top')"
  65. @click.stop.prevent="scrollMobileNotificationsToTop"
  66. >
  67. <FALayers class="fa-scale-110 fa-old-padding-layer">
  68. <FAIcon icon="arrow-up" />
  69. <FAIcon
  70. icon="minus"
  71. transform="up-7"
  72. />
  73. </FALayers>
  74. </button>
  75. <button
  76. v-if="!closingDrawerMarksAsSeen"
  77. class="button-unstyled mobile-nav-button"
  78. :title="$t('nav.mobile_notifications_mark_as_seen')"
  79. @click.stop.prevent="markNotificationsAsSeen()"
  80. >
  81. <FAIcon
  82. class="fa-scale-110 fa-old-padding"
  83. icon="check-double"
  84. />
  85. </button>
  86. <button
  87. class="button-unstyled mobile-nav-button"
  88. :title="$t('nav.mobile_notifications_close')"
  89. @click.stop.prevent="closeMobileNotifications(true)"
  90. >
  91. <FAIcon
  92. class="fa-scale-110 fa-old-padding"
  93. icon="times"
  94. />
  95. </button>
  96. </div>
  97. <div
  98. id="mobile-notifications"
  99. ref="mobileNotifications"
  100. class="mobile-notifications"
  101. @scroll="onScroll"
  102. />
  103. </aside>
  104. <SideDrawer
  105. ref="sideDrawer"
  106. :logout="logout"
  107. />
  108. <teleport to="#modal">
  109. <confirm-modal
  110. v-if="showingConfirmLogout"
  111. :title="$t('login.logout_confirm_title')"
  112. :confirm-text="$t('login.logout_confirm_accept_button')"
  113. :cancel-text="$t('login.logout_confirm_cancel_button')"
  114. @accepted="doLogout"
  115. @cancelled="hideConfirmLogout"
  116. >
  117. {{ $t('login.logout_confirm') }}
  118. </confirm-modal>
  119. </teleport>
  120. </div>
  121. </template>
  122. <script src="./mobile_nav.js"></script>
  123. <style lang="scss">
  124. .MobileNav {
  125. z-index: var(--ZI_navbar);
  126. .mobile-nav {
  127. display: grid;
  128. line-height: var(--navbar-height);
  129. grid-template-rows: var(--navbar-height);
  130. grid-template-columns: 2fr auto;
  131. width: 100%;
  132. box-sizing: border-box;
  133. a {
  134. color: var(--link);
  135. }
  136. }
  137. .mobile-inner-nav {
  138. width: 100%;
  139. display: flex;
  140. align-items: center;
  141. }
  142. .mobile-nav-button {
  143. display: inline-block;
  144. text-align: center;
  145. padding: 0 1em;
  146. position: relative;
  147. cursor: pointer;
  148. }
  149. .site-name {
  150. padding: 0 0.3em;
  151. display: inline-block;
  152. }
  153. .item {
  154. /* moslty just to get rid of extra whitespaces */
  155. display: flex;
  156. }
  157. .mobile-notifications-drawer {
  158. width: 100%;
  159. height: 100vh;
  160. overflow-x: hidden;
  161. position: fixed;
  162. top: 0;
  163. left: 0;
  164. box-shadow: var(--shadow);
  165. transition-property: transform;
  166. transition-duration: 0.25s;
  167. transform: translateX(0);
  168. z-index: var(--ZI_navbar);
  169. -webkit-overflow-scrolling: touch;
  170. background: var(--background);
  171. &.-closed {
  172. transform: translateX(100%);
  173. box-shadow: none;
  174. }
  175. }
  176. .mobile-notifications-header {
  177. display: flex;
  178. align-items: center;
  179. justify-content: space-between;
  180. z-index: calc(var(--ZI_navbar) + 100);
  181. width: 100%;
  182. height: 3.5em;
  183. line-height: 3.5em;
  184. position: absolute;
  185. box-shadow: var(--shadow);
  186. .spacer {
  187. flex: 1;
  188. }
  189. .title {
  190. font-size: 1.3em;
  191. margin-left: 0.6em;
  192. }
  193. }
  194. .pins {
  195. flex: 1;
  196. .pinned-item {
  197. flex-grow: 1;
  198. }
  199. }
  200. .mobile-notifications {
  201. margin-top: 3.5em;
  202. width: 100vw;
  203. height: calc(100vh - var(--navbar-height));
  204. overflow-x: hidden;
  205. overflow-y: scroll;
  206. .notifications {
  207. padding: 0;
  208. border-radius: 0;
  209. box-shadow: none;
  210. .panel {
  211. border-radius: 0;
  212. margin: 0;
  213. box-shadow: none;
  214. }
  215. .panel::after {
  216. border-radius: 0;
  217. }
  218. .panel .panel-heading {
  219. border-radius: 0;
  220. box-shadow: none;
  221. }
  222. }
  223. }
  224. .confirm-modal.dark-overlay {
  225. &::before {
  226. z-index: 3000;
  227. }
  228. .dialog-modal.panel {
  229. z-index: 3001;
  230. }
  231. }
  232. }
  233. </style>