Merge pull request #54 from dderbentsov/UC-21

Добавил иконки ивентов и тиммейтов, кнопки и открытие окна сайдбара

src/assets/sass/variables.sass

@@ -20,6 +20,11 @@
   --btn-red-color: #ff6f6f
   --time-indicator-color: #e93131
   --font-obligatory-color: #ff0000
+  --bg-event-box-color: rgba(37, 40, 80, 0.1)
+  --bg-event-meeting-color: #24D07D
+  --bg-event-planning-color: #E93131
+  --bg-event-interview-color: #E5E931
+  --bg-event-work-color: #3BA3EE
   --light-grey-bg-color: #f8f9fa
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)

src/components/base/buttons/BaseOpenButton.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+  button.cursor-pointer.icon-long-arrow.open-button.text-xs.pt-1
+</template>
+
+<script>
+export default {
+  name: "OpenButton",
+};
+</script>
+
+<style lang="sass" scoped>
+.open-button
+  outline: none
+  border: none
+  width: 24px
+  height: 24px
+  max-height: 24px
+  color: var(--btn-blue-color)
+  background-color: var(--bg-ligth-blue-color)
+  border-radius: 50%
+</style>

src/pages/calendar/TheCalendar.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .calendar-container.flex
-    calendar-sidebar
+  .calendar-container.flex(:style="{ width: `calc(100% - ${currentWidth})` }")
+    calendar-sidebar(@width='changeWidth' :team="team")
     calendar-schedule(
       :current-date="currentDate"
       :time-information="timeInformation"
@@ -15,11 +15,13 @@
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
 import CalendarSidebar from "./components/CalendarSidebar.vue";
+import img from "../../assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
   components: { CalendarSchedule, CalendarSidebar },
   data() {
     return {
+      currentWidth: "152px",
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
@@ -27,6 +29,20 @@ export default {
         dayEndTime: "18:00",
       },
       eventsData: [],
+      columnInformation: {
+        owners: [
+          "Захарова А.О.",
+          "Константинопольская Ю.В.",
+          "Коломойцев И.К.",
+          "Зайцев В.С.",
+        ],
+      },
+      team: [
+        { id: 1, name: "Захарова А.О.", avatar: img },
+        { id: 2, name: "Константинопольская Ю.В.", avatar: img },
+        { id: 3, name: "Коломойцев И.К.", avatar: img },
+        { id: 4, name: "Зайцев В.С.", avatar: img },
+      ],
     };
   },
   methods: {
@@ -47,14 +63,12 @@ export default {
         .then((res) => res.json())
         .then((res) => this.saveEventsData(res));
     },
+    changeWidth(value) {
+      this.currentWidth = value.width;
+    },
   },
   mounted() {
     this.fetchEventsData();
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.calendar-container
-  width: calc(100vw - 80px)
-</style>

src/pages/calendar/components/CalendarSidebar.vue

@@ -1,31 +1,97 @@
 <template lang="pug">
   .sidebar.flex.flex-col.bg-white
-    .sidebar-wrapper.h-full
-      .sidebar-content.items-center
+    .sidebar-wrapper.h-full.my-13px(:style="{ width: windowSidebar }")
+      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus
+        .flex.flex-col.items-center
+          base-button-plus(:class="buttonStyled")
+          .flex.flex-col.gap-y-2.items-center.mt-4
+            .event.flex.items-center.justify-center(v-for="event in events" :key="event.id")
+              .event-type(:style="{ background: event.color }")
+        .flex.flex-col.items-center.gap-y-2.justify-center
+          base-button-plus.mb-2(:class="buttonStyled")
+          .team-card(v-for="teammate in team" :key="teammate.id")
+            img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
+        base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
 </template>
 
 <script>
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
+import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 export default {
   components: {
     BaseButtonPlus,
+    BaseOpenButton,
+  },
+  props: {
+    team: Array,
+  },
+  data() {
+    return {
+      events: [
+        { id: 1, color: "var(--bg-event-meeting-color)" },
+        { id: 2, color: "var(--bg-event-planning-color)" },
+        { id: 3, color: "var(--bg-event-interview-color)" },
+        { id: 4, color: "var(--bg-event-work-color)" },
+      ],
+      widthSidebarOpen: "152px",
+      widthSidebarClose: "312px",
+      isOpen: false,
+      turnButton: "180deg",
+      windowSidebar: "72px",
+    };
+  },
+  computed: {
+    buttonStyled() {
+      return {
+        "button-styled": true,
+      };
+    },
+  },
+  methods: {
+    changeSize() {
+      this.isOpen = !this.isOpen;
+      this.$emit("width", {
+        width: this.isOpen ? this.widthSidebarClose : this.widthSidebarOpen,
+      });
+      this.turnButton = this.isOpen ? "0deg" : "180deg";
+      this.windowSidebar = this.isOpen ? "232px" : "72px";
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.sidebar
-  width: 72px
+
 .sidebar-wrapper
-   border-left: 2px solid var(--btn-blue-color-3)
-   margin: 13px 0
-.sidebar-content
-  padding: 19px 16px
+  border-left: 2px solid var(--btn-blue-color-3)
 .button-plus
   width: 40px
   height: 40px
   max-height: 40px
   background: var(--btn-blue-color)
   color: var(--default-white)
+.event
+  width: 32px
+  height: 32px
+  background: var(--bg-event-box-color)
+  border-radius: 4px
+.event-type
+  width: 16px
+  height: 16px
+  border-radius: 2px
+.avatar-wrapper
+  width: 32px
+  height: 32px
+.open-button
+  width: 40px
+  height: 40px
+  max-height: 40px
+.button-styled
+  width: 24px
+  height: 24px
+  max-height: 24px
+  background: var(--btn-blue-color-1)
+  color: var(--btn-blue-color)
+  font-size: 10px
 </style>

tailwind.config.js

@@ -24,11 +24,14 @@ module.exports = {
         43: "43px",
       },
       spacing: {
+        "3px": "3px",
         "6px": "6px",
         "10px": "10px",
-        "3px": "3px",
-        "74px": "74px",
+        "13px": "13px",
+        "19px": "19px",
         "45px": "45px",
+        "74px": "74px",
+        "148px": "148px",
       },
     },
   },