You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

default.vue 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div
  3. ref="layout"
  4. class="layout"
  5. :class="layoutClass"
  6. @dragenter="onGlobalDragEnter"
  7. @dragover="onGlobalDragOver"
  8. @dragleave="onGlobalDragLeave"
  9. @drop="onGlobalDrop">
  10. <!-- Title bar -->
  11. <Titlebar />
  12. <!-- Navigation -->
  13. <Navbar />
  14. <!-- Menu -->
  15. <Menubar />
  16. <!-- Queue -->
  17. <QueueMenu />
  18. <!-- Content -->
  19. <div id="layout-content" class="layout__content">
  20. <div class="container h-full">
  21. <nuxt />
  22. </div>
  23. </div>
  24. <!-- Dragging -->
  25. <div class="layout__dropzone">
  26. <h2>Drop the dream here!</h2>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import { mapState } from 'vuex'
  32. import { UploadMixin } from '~/mixins'
  33. export default {
  34. middleware: ['wizard'],
  35. mixins: [UploadMixin],
  36. computed: {
  37. layoutClass() {
  38. return {
  39. 'layout--dragging': this.isDragging,
  40. 'layout--left-queue': this.$settings.app.queuePosition === 'left',
  41. ...this.globalLayoutClass,
  42. }
  43. },
  44. ...mapState({
  45. globalLayoutClass: (state) => state.app.layoutClass,
  46. dragDropEnabled: (state) => state.app.dragDropEnabled,
  47. }),
  48. },
  49. mounted() {
  50. this.$router.afterEach(() => {
  51. this.$store.commit('app/clearLayoutClass')
  52. this.$store.commit('app/setDragDropEnabled', true)
  53. })
  54. },
  55. methods: {
  56. onGlobalDragEnter(event) {
  57. if (!this.dragDropEnabled) {
  58. return
  59. }
  60. this.onDragEnter(event)
  61. },
  62. onGlobalDragLeave() {
  63. if (!this.dragDropEnabled) {
  64. return
  65. }
  66. this.onDragLeave()
  67. },
  68. onGlobalDragOver(event) {
  69. if (!this.dragDropEnabled) {
  70. return
  71. }
  72. this.onDragOver(event)
  73. },
  74. onGlobalDrop(event) {
  75. if (!this.dragDropEnabled) {
  76. return
  77. }
  78. this.onDrop(event)
  79. },
  80. },
  81. }
  82. </script>
  83. <style lang="scss" scoped>
  84. .layout {
  85. @apply h-full;
  86. display: grid;
  87. grid-template-areas: 'title title title' 'nav nav nav' 'menu content queue';
  88. grid-template-columns: 300px 1fr 300px;
  89. grid-template-rows: 30px 50px 1fr;
  90. .queue {
  91. grid-area: queue;
  92. @apply border-l border-menus-light;
  93. }
  94. .menu {
  95. grid-area: menu;
  96. @apply border-r border-menus-light;
  97. }
  98. &.layout--left-queue {
  99. .queue {
  100. grid-area: menu;
  101. @apply border-r border-menus-light;
  102. }
  103. .menu {
  104. grid-area: queue;
  105. @apply border-l border-menus-light;
  106. }
  107. }
  108. &.layout--dragging {
  109. .layout__dropzone {
  110. @apply flex opacity-100;
  111. }
  112. }
  113. &.layout--fullscreen {
  114. .layout__content {
  115. @apply p-0;
  116. }
  117. .container {
  118. @apply mx-0;
  119. max-width: initial;
  120. }
  121. }
  122. &.layout--wide {
  123. .layout__content {
  124. @apply px-6;
  125. }
  126. .container {
  127. @apply mx-0;
  128. max-width: initial;
  129. }
  130. }
  131. }
  132. .layout__topbar {
  133. height: 30px;
  134. }
  135. .layout__navbar {
  136. height: 50px;
  137. }
  138. .layout__content {
  139. @apply relative overflow-hidden overflow-y-auto;
  140. @apply py-6 px-9;
  141. grid-area: content;
  142. height: calc(100vh - 80px);
  143. }
  144. .layout__dropzone {
  145. @apply absolute left-0 right-0 top-0 bottom-0 z-50;
  146. @apply bg-menus-dark-90 items-center justify-center;
  147. @apply hidden opacity-0 pointer-events-none;
  148. backdrop-filter: blur(6px);
  149. transition: opacity 0.2s ease-in-out;
  150. will-change: opacity;
  151. h2 {
  152. @apply text-white font-bold text-3xl;
  153. }
  154. }
  155. </style>