Merge pull request #27 from dderbentsov/UC-10

Внесла правки, подняла информацию из LayoutSwitch до родителя

src/assets/sass/variables.sass

@@ -1,14 +1,19 @@
 \:root
   --bg-lavender-color: #e9e9f6
-  --bg-white-color: #f8f8ff
   --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)
-  --default-white: #FFFFFF
+  --default-white: #fff
-  --btn-red-color: #FF6F6F
+  --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

@@ -24,6 +24,6 @@ export default {
 <style lang="sass" scoped>
 .sidebar
   max-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(@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(: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,8 +25,6 @@ export default {
 
 <style lang="sass" scoped>
 .container
-  align-items: center
-  cursor: pointer
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
@@ -34,9 +32,8 @@ export default {
   appearance: none
   border: none
   outline: none
-  cursor: pointer
+  color: var(--font-black-color-1)
-  color: rgba(9, 10, 21, 0.5)
+  background-color: var(--font-black-color-0)
-  background-color: rgba(9, 10, 21, 0)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
@@ -49,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

@@ -12,9 +12,8 @@ export default {
 .event-button
   outline: none
   border: none
-  cursor: pointer
   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

@@ -12,11 +12,10 @@ export default {
 .button-plus
   outline: none
   border: none
-  cursor: pointer
   width: 24px
   height: 24px
   max-height: 24px
-  color: #4772F2
+  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/BaseSidebarButton.vue

@@ -23,21 +23,20 @@ export default {
 <style lang="sass" scoped>
 .button
   width: fit-content
-  cursor: pointer
+  background-color: var(--btn-blue-color-0)
-  background-color: rgba(65, 105, 225, 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: #4169E1
+  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: #4169E1
+  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

@@ -2,19 +2,20 @@
   calendar-header(
     :currentDay="currentDate"
     @previous-date="switchPreviousDate"
-    @next-date="switchNextDate")
+    @next-date="switchNextDate"
+    @selectedLayout="changeCalendarLayout")
 </template>
 
 <script>
 import * as moment from "moment/moment";
 import CalendarHeader from "./components/CalendarHeader.vue";
-moment.locale("ru");
 export default {
   name: "TheCalendar",
   components: { CalendarHeader },
   data() {
     return {
       currentDate: moment(),
+      calendarLayout: "",
     };
   },
   methods: {
@@ -24,7 +25,9 @@ export default {
     switchNextDate() {
       this.currentDate = this.currentDate.clone().add(1, "day");
     },
+    changeCalendarLayout(option) {
+      this.calendarLayout = option;
+    },
   },
 };
 </script>
-,

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.text-xs(@click="closeEventForm")
+        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeEventForm")
       base-select(
         id="responsible"
         width="205px"
@@ -14,15 +14,15 @@
         :select-open="openSelectResponsible"
       )
     .flex.flex-col.gap-y-2
-      span.not-italic.text-xs.opacity-40.leading-3 Оновная информация
+      span.not-italic.text-xs.opacity-40.leading-3 Основная информация
       .flex.gap-x-4.items-center
         .icon-time.text-xl.icon
         .flex.gap-x-2.items-center
           .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.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.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.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.flex.gap-x-2.px-4.py-2.items-center
@@ -131,11 +131,10 @@ 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
-  cursor: pointer
   border-radius: 4px
   width: fit-content
   background-color: var(--bg-ligth-blue-color)
@@ -143,18 +142,18 @@ export default {
   appearance: none
   border: none
   outline: none
-  cursor: pointer
+  color: var(--font-black-color)
-  color: rgba(9, 10, 21, 0.5)
+  background-color: var(--font-black-color-0)
-  background-color: rgba(9, 10, 21, 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
-  cursor: pointer
   color: var(--font-dark-blue-color)
   &:hover
     color: var(--btn-blue-color)

src/pages/calendar/components/CalendarHeader.vue

@@ -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" }],