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

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"
-          round,
-          size="14px",
-          dense,
-          @click="previousHandler",
-        )
-          q-icon(name="arrow_back_ios", right)
-        q-btn.mr-6(
-          @click="nextHandler",
-          text-color="primary",
-          color="secondary"
-          icon="arrow_forward_ios",
-          round,
-          size="14px",
-          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.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
+          )
+            q-icon(name="arrow_back_ios", right)
+          q-btn.w-8.h-8(
+            @click="nextHandler",
+            style="background: var(--bg-grey-color); color: var(--font-dark-blue-color)",
+            icon="arrow_forward_ios",
+            round,
+            size="14px",
+            dense
+          )
+        .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>