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

2023-03-20 18:00:27 +03:00
parent 9a9d95b4e8
commit da5e6cfd02
6 changed files with 113 additions and 39 deletions
--- a/src/App.vue
+++ b/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

--- a/src/assets/sass/variables.sass
+++ b/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
--- a/src/pages/schedule/TheSchedule.vue
+++ b/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
--- a/src/pages/schedule/components/ScheduleHeader.vue
+++ b/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>
--- a/src/pages/schedule/components/ScheduleTable.vue
+++ b/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