[WIP] Изменил хедер страницы расписания

src/App.vue

@@ -27,7 +27,7 @@ html
   width: 100%
   line-height: normal
 body
-  background-color: var(--bg-lavender-color)
+  background-color: var(--bg-body-color)
   margin: 0
   padding: 0
 

src/assets/sass/variables.sass

@@ -1,5 +1,6 @@
 \:root
   --bg-lavender-color: #e9e9f6
+  --bg-body-color: #e8e8f3
   --bg-ligth-blue-color: #e6eafc
   --font-dark-blue-color: #252850
   --font-black-color: #090a15
@@ -56,3 +57,5 @@
   --pagination-item-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)
   --pagination-current-item-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%)
   --bg-disable-grey-color: #f0f0f0
+  --bg-grey-color: rgba(37, 40, 80, 0.15)
+  --bg-aqua-blue: #55c5e8

src/pages/schedule/TheSchedule.vue

@@ -6,10 +6,11 @@
             :width="60",
             :height="60"
           )
-      .relative.flex.flex-col.px-6.py-6.h-full.w-full.gap-y-5(v-else)
+      .relative.flex.flex-col.h-full.w-full.gap-y-7px(v-else)
         schedule-header(
           :start-month="startMonth",
           :change-show-time="changeShowTime",
+          :change-show-status="changeShowStatus",
           :show-time="showTime",
           @switch-previous-month="switchPreviousMonth",
           @switch-next-month="switchNextMonth"
@@ -129,7 +130,10 @@ export default {
       this.replacementSheet.schedules = e.schedules;
     },
     changeShowTime() {
-      this.showTime = !this.showTime;
+      this.showTime = true;
+    },
+    changeShowStatus() {
+      this.showTime = false;
     },
     trimOwnerName(lastName, firstName, patronymic) {
       let checkedFirstName = firstName !== null ? firstName[0] + "." : "";
@@ -354,7 +358,6 @@ export default {
   overflow: auto
   border-top-left-radius: 4px
   border-top-right-radius: 4px
-  background-color: var(--default-white)
 
 .schedule-enter-from
   opacity: 0

src/pages/schedule/components/ScheduleHeader.vue

@@ -1,49 +1,73 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-5
-    .flex.justify-center.pl-8.pr-20.font-bold.text-xl Планировщик смен
+  .header.flex
     .flex.items-center.justify-between.py-3.pl-5.pr-6.h-14.w-full
-      .flex
-        q-btn.mr-4(
-          text-color="primary",
-          color="secondary"
+      .flex.gap-x-4.items-center
+        .flex.gap-x-2
+          q-btn.w-8.h-8(
+            @click="previousHandler",
+            style="background: var(--bg-grey-color); color: var(--font-dark-blue-color)",
             round,
             size="14px",
-          dense,
-          @click="previousHandler",
+            dense
           )
             q-icon(name="arrow_back_ios", right)
-        q-btn.mr-6(
+          q-btn.w-8.h-8(
             @click="nextHandler",
-          text-color="primary",
-          color="secondary"
+            style="background: var(--bg-grey-color); color: var(--font-dark-blue-color)",
             icon="arrow_forward_ios",
             round,
             size="14px",
-          dense,
+            dense
           )
-        .text.flex.items-center(:style="{color: 'var(--font-dark-blue-color)'}")
-          .text.font-medium.text-base {{ dateString }}
-          .opacity-50.font-bold.text-xxs.ml-2(v-if="isCurrentMonth") Текущий
-      .flex.gap-x-4.h-10
+        .flex(:style="{width: '180px'}")
+          base-input.relative(
+            :placeholder="dateString"
+            outlined,
+          )
+            .flex.items-center
+              q-icon(
+                size="20px",
+                name="event",
+                class="cursor-pointer",
+                style="color: var(--font-dark-blue-color)"
+              )
+                q-popup-proxy(
+                  cover,
+                  transition-show="scale",
+                  transition-hide="scale"
+                )
+                  q-date(v-model="date", minimal, class="font-input")
+      .toogle.flex
         q-btn(
-          :label="textButton",
-          color="primary",
-          no-caps,
-          padding="8px 24px",
-          style="width: 174px"
-          @click="changeShowTime",
+          label="Время",
+          size="12px",
+          class="button"
+          :text-color="showTime ? 'white' : null",
+          :style="{background: showTime ? 'var(--bg-aqua-blue)' : null}",
+          @click="changeShowTime"
+        )
+        q-btn(
+          label="Статус",
+          size="12px",
+          class="button",
+          :text-color="showTime ? null : 'white'",
+          :style="{background: showTime ? null : 'var(--bg-aqua-blue)'}",
+          @click="changeShowStatus"
         )
 </template>
 
 <script>
 import * as moment from "moment";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "ScheduleHeader",
+  components: { BaseInput },
   props: {
     showTime: Boolean,
     startMonth: Object,
     changeShowTime: Function,
+    changeShowStatus: Function,
   },
   data() {
     return {
@@ -61,9 +85,6 @@ export default {
         })
         .join(" ");
     },
-    textButton() {
-      return this.showTime ? "Скрыть время" : "Показать время";
-    },
   },
   methods: {
     previousHandler() {
@@ -82,3 +103,23 @@ export default {
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.header
+  height: 56px
+  border-radius: 4px
+  background-color: var(--default-white)
+
+.font-input
+  font-feature-settings: 'pnum' on, 'lnum' on
+
+.toogle
+  background-color: #eff1f4
+  border-radius: 4px
+  width: 186px
+  height: 40px
+  padding: 4px
+
+.button
+  width: 89px
+</style>

src/pages/schedule/components/ScheduleTable.vue

@@ -1,5 +1,23 @@
 <template lang="pug">
   .schedule.flex-col(:style="themeCell")
+    .schedule-header.flex.justify-between.py-4.px-6
+      base-input(
+        placeholder="Поиск",
+        outlined
+      )
+        .flex.items-center.cursor-pointer
+          q-icon(name="app:icon-search", size="18px" style="color: var(--font-dark-blue-color)")
+      q-btn(
+        color="primary",
+        padding="8px 25px",
+        no-caps,
+      )
+        q-icon(
+          name="app:icon-plus",
+          size="12px",
+          style="margin-right: 10px",
+        )
+        span Создать смену
     schedule-table-header(:result="result")
     schedule-table-body(
       :serialized="serialized",
@@ -43,6 +61,8 @@ import ScheduleTableHeader from "@/pages/schedule/components/ScheduleTableHeader
 import ScheduleTableBody from "@/pages/schedule/components/ScheduleTableBody.vue";
 import ScheduleTableSelect from "@/pages/schedule/components/ScheduleTableSelect.vue";
 import ScheduleBar from "@/pages/schedule/components/ScheduleBar.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "ScheduleTable",
@@ -51,6 +71,8 @@ export default {
     ScheduleTableBody,
     ScheduleTableSelect,
     ScheduleBar,
+    BaseInput,
+    BaseSelect,
   },
   props: {
     scheduleList: Array,
@@ -224,7 +246,11 @@ export default {
   border-top: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
   min-height: 87px
-  width: calc(100vw - 136px)
+  // width: calc(100vw - 136px)
+  background-color: var(--default-white)
+
+.schedule-header
+  height: 72px
 
 .show-time
   text-align: center

tailwind.config.js

@@ -28,6 +28,7 @@ module.exports = {
       },
       gap: {
         "6px": "6px",
+        "7px": "7px",
         "11px": "11px",
         "30px": "30px",
         43: "43px",