Merge branch 'master' into UC-13

src/assets/icons/lock.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8385 5.34315C15.028 5.71146 15.4802 5.85641 15.8486 5.6669C16.2169 5.47738 16.3618 5.02517 16.1723 4.65685L14.8385 5.34315ZM5 21H4.25C4.25 21.4142 4.58579 21.75 5 21.75V21ZM19 21V21.75C19.4142 21.75 19.75 21.4142 19.75 21H19ZM19 11H19.75C19.75 10.5858 19.4142 10.25 19 10.25V11ZM5 11V10.25C4.58579 10.25 4.25 10.5858 4.25 11H5ZM8.75 11V7H7.25V11H8.75ZM8.75 7C8.75 6.45335 8.92016 5.61668 9.40865 4.93823C9.8696 4.29802 10.6444 3.75 12 3.75V2.25C10.1556 2.25 8.9304 3.03532 8.19135 4.06177C7.47984 5.04998 7.25 6.21332 7.25 7H8.75ZM12 3.75C13.5991 3.75 14.4125 4.51517 14.8385 5.34315L16.1723 4.65685C15.5181 3.38547 14.2215 2.25 12 2.25V3.75ZM5 21.75H19V20.25H5V21.75ZM19.75 21V11H18.25V21H19.75ZM4.25 11V21H5.75V11H4.25ZM8 10.25H5V11.75H8V10.25ZM19 10.25H8V11.75H19V10.25Z" fill="#252850"/>
+</svg>

src/assets/sass/variables.sass

@@ -1,13 +1,19 @@
 \:root
   --bg-lavender-color: #e9e9f6
-  --bg-white-color: #FFFFFF
   --bg-ligth-blue-color: #e6eafc
   --font-dark-blue-color: #252850
   --font-black-color: #090a15
+  --font-black-color-0: rgba(9, 10, 21, 0)
+  --font-black-color-1: rgba(9, 10, 21, 0.5)
   --btn-blue-color: #4772f2
-  --btn-light-blue-color: #c6d2f6
+  --btn-blue-color-0: rgba(65, 105, 225, 0)
+  --btn-blue-color-1: rgba(65, 105, 225, 0.3)
+  --btn-blue-color-2: rgba(65, 105, 225, 0.5)
+  --btn-blue-color-3: rgba(65, 105, 225, 0.2)
+  --btn-blue-color-4: rgba(65, 105, 225, 0.8)
   --font-grey-color: #9294a7
   --border-light-grey-color: #d3d4dc
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
-  --btn-red-color: #FF6F6F
+  --default-white: #fff
+  --btn-red-color: #ff6f6f

src/components/HeaderInputs.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
   .header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
     .select-container(@click="changeState")
-      .select-wrapper.flex.items-center.mx-4.my-2
+      .select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
-        img.icon-wrapper.flex.justify-center.items-center.loupe(src="@/assets/icons/search.svg" alt="Search")
+        img.icon-wrapper.flex.justify-center.items-center(src="@/assets/icons/search.svg" alt="Search")
         span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
-        .arrow.icon-down-arrow.flex.justify-center.items-center
+        .arrow.icon-down-arrow.text-xsm.mt-px.flex.justify-center.items-center
       .options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
-        .option-list.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
+        .option-list.cursor-pointer.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
           .icon-wrapper.mr-2.flex.justify-center
-            .icon-ok.flex.justify-center.items-center(v-if="filter === selectedFilter")
+            .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
-          .options-text {{ filter }}
+          .flex.items-center {{ filter }}
     input.custom-input.search-input.inline-block.box-border.align-middle.px-4(class="py-2.5" placeholder="Искать ...")
 </template>
 
@@ -41,10 +41,8 @@ export default {
   .arrow
     transform: rotate(180deg)
 
-.wrapper
+.header-inputs-wrapper
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
-  display: flex
-  align-items: center
 
 .select-container
   border-radius: 4px 0 0 4px
@@ -55,9 +53,6 @@ export default {
   width: 24px
   height: 24px
 
-.loupe
-  font-size: 21px
-
 .custom-input
   border: none
   outline: none
@@ -68,14 +63,13 @@ export default {
 .select-wrapper
   position: relative
   z-index: 2
-  cursor: pointer
 
 .select-input
   width: 100px
 
 .options-wrapper
   width: 172px
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   color: var(--font-dark-blue-color)
   border-radius: 4px
   position: absolute
@@ -88,23 +82,14 @@ export default {
     color: var(--font-grey-color)
 
 .option-list
-  cursor: pointer
   &:last-child
     margin: 0
   &:hover
     color: var(--btn-blue-color)
 
-.options-text
-  display: flex
-  align-items: center
-
 .arrow
-  font-size: 8px
   color: var(--btn-blue-color)
 
-.icon-ok
-  font-size: 13px
-
 .icon-down-arrow
   width: 16px
   height: 16px

src/components/TheHeader.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
   .header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
-    .left-side.flex.items-center.box-border
+    .flex.items-center.box-border.cursor-pointer
       img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
     .flex.flex-row
       header-inputs.mr-10
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
-        .icon-bell
+        .icon-bell.text-xxl
       .flex.flex-row.justify-centflexer.items-center
         img.avatar-img.mr-2(:src="avatarSrc")
         button.header-buttons
-          .icon-down-arrow.flex.justify-center.items-center.p-0
+          .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
 </template>
 
 <script>
@@ -31,18 +31,14 @@ export default {
   outline: none
   border: none
   background-color: transparent
-  cursor: pointer
   color: var(--font-dark-blue-color)
 
 .header-wrapper
   width: 100%
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   position: relative
   z-index: 2
 
-.left-side
-  cursor: pointer
-
 .logo-img
   height: 32px
   width: 70px
@@ -50,12 +46,10 @@ export default {
 .icon-down-arrow
   width: 24px
   height: 24px
-  font-size: 12px
 
 .icon-bell
   width: 24px
   height: 24px
-  font-size: 24px
   color: var(--font-dark-blue-color)
 
 .avatar-img

src/components/TheSidebar.vue

@@ -25,6 +25,6 @@ export default {
 .sidebar
   max-width: 80px
   min-width: 80px
-  background-color: #FFFFFF
+  background-color: var(--default-white)
   border-top-right-radius: 4px
 </style>

src/components/base/BaseSelect.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  .flex.gap-2.py-2.px-4.w-full.container.cursor-pointer(@click="selectOpen")
+  .flex.gap-2.py-2.px-4.w-full.container.items-center.cursor-pointer(@click="selectOpen")
     .relative.flex.flex-col
       .not-italic.text-base.select.cursor-pointer(:style="{ minWidth : width}") {{optionData}}
         .absolute.options(v-if="isOpen" :id="id" @click="(event)=>chooseOption(event)")
           .not-italic.text-base.option(v-for="(responsible, index) in listData" :key="index" :id="index") {{responsible}}
-    .select-form-separator
+    .select-form-separator.cursor-pointer
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon(:class="{ open: isOpen}")
+    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(:class="{ open: isOpen}")
 </template>
 
 <script>
@@ -25,7 +25,6 @@ export default {
 
 <style lang="sass" scoped>
 .container
-  align-items: center
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
@@ -33,8 +32,8 @@ export default {
   appearance: none
   border: none
   outline: none
-  color: rgba(9, 10, 21, 0.5)
+  color: var(--font-black-color-1)
-  background-color: rgba(9, 10, 21, 0)
+  background-color: var(--font-black-color-0)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
@@ -47,12 +46,11 @@ export default {
   &:hover
     background-color: var(--btn-blue-color)
 .select-form-separator
-  background-color: rgba(65, 105, 225, 0.2)
+  background-color: var(--btn-blue-color-3)
   height: 24px
   width: 1px
   border-radius: 1px
 .icon
-  text-align: center
   color: var(--font-dark-blue-color)
   &:hover
     color: var(--btn-blue-color)

src/components/base/buttons/BaseAddEvent.vue

@@ -13,7 +13,7 @@ export default {
   outline: none
   border: none
   width: fit-content
-  color: var(--bg-white-color)
+  color: var(--default-white)
   background-color: var(--btn-blue-color)
   border-radius: 4px
 </style>

src/components/base/buttons/BaseArrowButton.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.arrow-button.flex.items-center.icon-down-arrow.px-2.pt-px
+  button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-1
 </template>
 
 <script>
@@ -15,10 +15,9 @@ export default {
 .arrow-button
   width: 32px
   height: 32px
-  background: var(--btn-light-blue-color)
+  background-color: var(--btn-blue-color-1)
   color: var(--btn-blue-color)
   border-radius: 50%
-  font-size: 16px
   &:hover
-    background: #a0b4f0
+    background-color: var(--btn-blue-color-2)
 </style>

src/components/base/buttons/BaseButtonPlus.vue

@@ -16,6 +16,6 @@ export default {
   height: 24px
   max-height: 24px
   color: var(--btn-blue-color)
-  background-color: rgba(65, 105, 225, 0.25)
+  background-color: var(--bg-ligth-blue-color)
   border-radius: 50%
 </style>

src/components/base/buttons/BaseDocOkButton.vue

@@ -0,0 +1,37 @@
+<template lang="pug">
+  button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
+    span(v-if="numberIsVisible") 3
+    .icon-doc-ok.text-xxl
+</template>
+
+<script>
+export default {
+  name: "DocOkButton",
+  data() {
+    return {
+      numberIsVisible: false,
+      isDisable: true,
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.disable
+  opacity: 0.5
+
+.icon-wrap
+  height: 32px
+  background-color: var(--btn-blue-color-1)
+  color: var(--btn-blue-color)
+  border-radius: 4px
+  &:hover
+    background-color: var(--btn-blue-color-2)
+  &:active
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+
+.icon-doc-ok
+  width: 24px
+  height: 24px
+</style>

src/components/base/buttons/BaseSidebarButton.vue

@@ -23,20 +23,20 @@ export default {
 <style lang="sass" scoped>
 .button
   width: fit-content
-  background-color: rgba(65, 105, 225, 0)
+  background-color: var(--btn-blue-color-0)
   border-radius: 0 4px 4px 0
-  border-left-color: rgba(65, 105, 225, 0)
+  border-left-color: var(--btn-blue-color-0)
   border-left-width: 4px
   border-right: none
   border-top: none
   border-bottom: none
   border-left-style: solid
 .button:focus
-  background-color: rgba(65, 105, 225, 0.3)
+  background-color: var(--btn-blue-color-1)
-  border-left-color: rgba(65, 105, 225, 1)
+  border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)
 .button:hover
-  background-color: rgba(65, 105, 225, 0.3)
+  background-color: var(--btn-blue-color-1)
-  border-left-color: rgba(65, 105, 225, 1)
+  border-left-color: var(--btn-blue-color)
   color: var(--btn-blue-color)
 </style>

src/main.js

@@ -7,4 +7,6 @@ import "./assets/sass/tailwind.sass";
 import "./assets/sass/variables.sass";
 import "./assets/css/iconfonts.css";
 
+moment.locale("ru");
+
 createApp(App).use(router, moment).mount("#app");

src/pages/calendar/TheCalendar.vue

@@ -1,20 +1,29 @@
 <template lang="pug">
-  calendar-header(
+  .calendar-container.ml-2
-    :currentDay="currentDate"
+    calendar-header(
-    @previous-date="switchPreviousDate"
+      :currentDay="currentDate"
-    @next-date="switchNextDate")
+      @previous-date="switchPreviousDate"
+      @next-date="switchNextDate"
+      @selectedLayout="changeCalendarLayout")
+    calendar-column(:info="columnInfo") 
 </template>
 
 <script>
 import * as moment from "moment/moment";
 import CalendarHeader from "./components/CalendarHeader.vue";
-moment.locale("ru");
+import CalendarColumn from "./components/CalendarColumn.vue";
+import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
-  components: { CalendarHeader },
+  components: { CalendarHeader, CalendarColumn },
   data() {
     return {
       currentDate: moment(),
+      calendarLayout: "",
+      columnInfo: {
+        name: "Захарова А.О.",
+        avatar: teamMemberAvatar,
+      },
     };
   },
   methods: {
@@ -24,7 +33,14 @@ export default {
     switchNextDate() {
       this.currentDate = this.currentDate.clone().add(1, "day");
     },
+    changeCalendarLayout(option) {
+      this.calendarLayout = option;
+    },
   },
 };
 </script>
-,
+
+<style lang="sass" scoped>
+.calendar-container
+  width: 100%
+</style>

src/pages/calendar/components/CalendarColumn.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  .calendar-column-wrapper.flex.flex-col
+    .header.flex.items-center.justify-between.py-2.px-6
+      .flex.items-center
+        img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
+        span.member-name.font-medium.text-base.mr-6 {{ info.name }}
+        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
+      base-doc-ok-button
+    .body.flex.flex-col
+      .line.flex.items-center(v-for="hour in 10" :key="hour")
+        .middle-line
+</template>
+
+<script>
+import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
+export default {
+  name: "CalendarColumn",
+  components: { BaseDocOkButton },
+  props: {
+    info: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-column-wrapper
+  width: 100%
+  background-color: var(--default-white)
+
+.header
+  height: 48px
+  border-bottom: 1px solid var(--border-light-grey-color)
+
+.avatar-wrapper
+  width: 32px
+  height: 32px
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+
+.member-name
+  color: var(--font-dark-blue-color)
+
+.line
+  border-bottom: 1px solid var(--border-light-grey-color)
+  height: 62px
+
+.middle-line
+  border-top: 1px dashed var(--border-light-grey-color)
+  width: 100%
+</style>

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -3,7 +3,7 @@
     .flex.flex-col.gap-y-2
       .flex.justify-between.pt-2
         span.not-italic.text-xs.opacity-40.leading-3 Ответственный
-        .icon-cancel.close-icon.cursor-pointer.text-xs(@click="closeEventForm")
+        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
       base-select(
         id="responsible"
         width="205px"
@@ -18,11 +18,11 @@
       .flex.gap-x-4.items-center
         .icon-time.text-xl.icon
         .flex.gap-x-2.items-center
-          .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+            input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
           span —
-          .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
+          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+            input.item-input.no-italic.text-base.cursor-pointer(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
       .flex.gap-x-4.items-center
         .icon-person.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
@@ -131,26 +131,32 @@ export default {
 .event-form
   height: fit-content
   min-width: 448px
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
   border-radius: 4px
+
 .form-item
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
+
 .item-input
   appearance: none
   border: none
   outline: none
-  color: rgba(9, 10, 21, 0.5)
+  color: var(--font-black-color)
-  background-color: rgba(9, 10, 21, 0)
+  background-color: var(--font-black-color-0)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
+  &::placeholder
+    color: var(--font-black-color-1)
+
 .icon
   width: 24px
   height: 24px
   color: var(--font-dark-blue-color)
+
 .close-icon
   color: var(--font-dark-blue-color)
   &:hover

src/pages/calendar/components/CalendarHeader.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+  .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
     .flex
       base-arrow-button.left-arrow.mr-4(@click="previousHandler")
       base-arrow-button.right-arrow.mr-6(@click="nextHandler")
@@ -22,7 +22,6 @@ export default {
   data() {
     return {
       isToday: true,
-      selectedLayout: "",
     };
   },
   computed: {
@@ -39,7 +38,7 @@ export default {
   },
   methods: {
     changeSelectedLayout(option) {
-      this.selectedLayout = option;
+      this.$emit("selectedLayout", option);
     },
     previousHandler() {
       this.$emit("previous-date");
@@ -60,7 +59,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-header-wrapper
   width: 100%
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   height: 56px
   border-radius: 4px
 

src/pages/calendar/components/CalendarLayoutSwitch.vue

@@ -36,8 +36,8 @@ export default {
 
 <style lang="sass" scoped>
 .active
-  background-color: #6787e7
+  background-color: var(--btn-blue-color-4)
-  color: var(--bg-white-color)
+  color: var(--default-white)
   border-radius: 4px
 
 .layout-switch-wrapper

tailwind.config.js

@@ -14,6 +14,7 @@ module.exports = {
         m: ["16px", { lineHeight: "21.6px" }],
         lg: ["18px", { lineHeight: "21px" }],
         xl: ["20px", { lineHeight: "23px" }],
+        xxl: ["24px", { lineHeight: "26px" }],
         "2xl": ["28px", { lineHeight: "33px" }],
         "3xl": ["60px", { lineHeight: "70px" }],
         "4xl": ["44px", { lineHeight: "48px" }],