Merge pull request #139 from dderbentsov/UC-42

WIP Позиционирование descriptionCard сверху-снизу

src/pages/calendar/components/CalendarColumn.vue

@@ -24,6 +24,7 @@
         @selected-event="transmitEventData"
         @reset-change-form="transmitResetChangeForm"
         @delete-event="transmitDeleteEvent"
+        :schedule-body-ref="scheduleBodyRef"
       )
 </template>
 
@@ -45,6 +46,7 @@ export default {
     dayStartTime: Number,
     eventTypes: Array,
     changeFormWasClosed: Boolean,
+    scheduleBodyRef: Node,
   },
   data() {
     return {

src/pages/calendar/components/CalendarEventCard.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
   .wrapper.cursor-pointer.my-1.relative(
     :style="themeColors",
-    :class="cardTheme"
+    :class="cardTheme",
+    ref="eventCard"
   )
     .card.flex.px-2(
       :class="{'py-6px flex-col': longCard}",
@@ -20,14 +21,14 @@
         .col
           ul
             li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
-    calendar-event-description-card.right-0(
+    calendar-event-description-card(
       v-if="isOpenDescriptionCard"
-      :style="descriptionCardPosition"
       :owner-event="ownerEvent"
       :event-types="eventTypes"
       @selected-event="transmitEventData"
       @close-description-card="closeDescriptionCard"
       @delete-event="transmitDeleteEvent"
+      :schedule-body-ref="scheduleBodyRef"
     )
   </template>
 
@@ -45,6 +46,7 @@ export default {
         return [];
       },
     },
+    scheduleBodyRef: Node,
   },
   data() {
     return {
@@ -182,11 +184,6 @@ export default {
       if (!remainingDetails) this.changeDetailsShown();
       return remainingDetails;
     },
-    descriptionCardPosition() {
-      return {
-        top: `calc(${this.cardHeight.height} + 8px)`,
-      };
-    },
   },
   methods: {
     trimTime(time) {
@@ -242,12 +239,10 @@ export default {
 <style lang="sass" scoped>
 .wrapper
   position: absolute
-  z-index: 3
   width: calc(100% - 8px)
-  height: 23px
 
 .default-theme
-  z-index: 0
+  z-index: 2
   .card
     background-color: var(--bg-color)
     border: 2px solid var(--border-color)
@@ -263,6 +258,7 @@ export default {
     background-color: var(--font-color)
 
 .active-theme
+  z-index: 3
   .card
     background-color: var(--bg-active)
     border: 2px solid var(--border-active-color)

src/pages/calendar/components/CalendarEventDescriptionCard.vue

@@ -1,8 +1,9 @@
 <template lang="pug">
   .wrapper.px-4.pt-14px.pb-4.font-medium.cursor-auto(
-    :style="typeColor",
+    :style="{...typeColor, ...position}",
     v-click-outside="close",
     :class="{'shadow': !disabled}"
+    ref="descriptionCard"
   )
     .flex.justify-between.items-center.mb-2
       .flex
@@ -15,7 +16,10 @@
         .icon-cancel.text-xxs.flex.items-center.cursor-pointer(@click="close")
     .body.mr-6
       span.text-base  {{ eventMember }}
-      .flex.text-xxs.mt-4.justify-between(v-if="!disabled")
+      .flex.text-xxs.justify-between(
+        v-if="!disabled",
+        :class="{'mt-4': description.length > 0}"
+        )
         .column
           ul
             li(v-for="elem in description" :key="elem") {{ elem }}
@@ -36,10 +40,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    scheduleBodyRef: Node,
   },
   data() {
     return {
       isCertainType: true,
+      position: {},
     };
   },
   computed: {
@@ -111,11 +117,26 @@ export default {
       return `${object.last_name} ${object.first_name} ${object.patronymic}`;
     },
   },
+  mounted() {
+    if (!this.$refs.descriptionCard || !this.scheduleBodyRef) return;
+    const cardRect = this.$refs.descriptionCard.getBoundingClientRect();
+    const bodyRect = this.scheduleBodyRef.getBoundingClientRect();
+    const bodyHeight = this.scheduleBodyRef.clientHeight + bodyRect.y - 20;
+    if (cardRect.y + cardRect.height > bodyHeight) {
+      this.position = {
+        top: `-${cardRect.height + 8}px`,
+      };
+    } else
+      this.position = {
+        "margin-top": "8px",
+      };
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper
+  width: 426px !important
   height: auto !important
   background-color: var(--default-white)
   color: var(--font-dark-blue-color)

src/pages/calendar/components/CalendarSchedule.vue

@@ -29,6 +29,7 @@
           @selected-event="transmitEventData"
           @reset-change-form="transmitResetChangeForm"
           @delete-event="transmitDeleteEvent"
+          :schedule-body-ref="$refs.scheduleBody"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-12.pt-9

src/pages/calendar/components/CalendarSidebar.vue

@@ -22,14 +22,14 @@
         calendar-sidebar-event(:is-open="isOpen", :event-type="eventTypes")
         calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen")
     //-    .button-wrapper.flex.justify-center.mb-23px
-      //-   base-button(
+          base-button(
-      //-     left-icon="icon-long-arrow",
+            left-icon="icon-long-arrow",
-      //-     rounded, :size="40",
+            rounded, :size="40",
-      //-     :icon-left-size="18",
+            :icon-left-size="18",
-      //-     secondary,
+            secondary,
-      //-     :style="{ transform: `rotate(${turnButton})`}",
+            :style="{ transform: `rotate(${turnButton})`}",
-      //-     @click="changeSize"
+            @click="changeSize"
-      //-   )
+          )
 </template>
 
 <script>

src/pages/clients/components/ClientsWrapper.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .wrapper.flex.w-full.relative.mx-6
+  .wrapper.flex.w-full.relative.mx-2
     clients-table(:open-form="openForm", :current-year="currentYear")
 </template>