Merge pull request #429 from kaizumaki/feature/issue-428-calender-ui

カレンダーまわりのUIをFigmaに合わせて修正

Author: NEKOYASAN

src/assets/locales/ja.json

@@ -14,6 +14,11 @@
         "default": "何らかのエラーが発生しました。時間をおいて再度お試しください。"
       }
     },
+    "calender": {
+      "prev_week": "前の週",
+      "next_week": "次の週",
+      "to_today": "今日へ移動"
+    },
     "footer": {
       "about": "おうちで時間割について",
       "contact": "お問い合わせ",

src/components/CalendarBar.vue

@@ -1,5 +1,19 @@
 <template>
   <v-container fill-height class="calendar-bar">
+    <v-row justify="space-between" class="pa-0 ma-0">
+      <v-btn text color="#0071C2" @click="dateListWindow.prevList">
+        <v-icon>mdi-menu-left</v-icon>
+        {{ $t('common.calender.prev_week') }}
+      </v-btn>
+      <v-btn text color="#0071C2" @click="$emit('showCalender')">
+        {{ fmtym(dateListWindow.currentDate) }}
+        <v-icon>mdi-calendar-today</v-icon>
+      </v-btn>
+      <v-btn text color="#0071C2" @click="dateListWindow.nextList">
+        {{ $t('common.calender.next_week') }}
+        <v-icon>mdi-menu-right</v-icon>
+      </v-btn>
+    </v-row>
     <v-row align="center" class="pa-0 ma-0">
       <v-col cols="1" class="pa-0 ma-1">
         <v-card class="calendar-bar-ym" flat>
@@ -262,6 +276,10 @@ export default class CalendarBar extends Vue {
     return format(date, 'yyyy-MM-dd HH:mm:ss EEE')
   }
 
+  fmtym(date: Date): String {
+    return format(date, 'yyyy年M月', { locale: ja })
+  }
+
   fmtISO(date: Date): String {
     return formatISO(date)
   }

src/layouts/classes.vue

@@ -5,8 +5,18 @@
         v-model="date"
         locale="ja"
         first-day-of-week="1"
+        width="100%"
+        class="mb-4"
         @input="openCalenderDialog = false"
       />
+      <base-action-button
+        theme="secondary"
+        :text="$t('common.calender.to_today')"
+        @click="
+          date = new Date()
+          openCalenderDialog = false
+        "
+      />
     </v-dialog>
     <base-dialog
       v-model="openClassIdDialog"
@@ -48,21 +58,11 @@
     <v-overlay :value="loading" color="#0071C2" opacity="1" z-index="9999">
       <div class="loader">Loading</div>
     </v-overlay>
-    <v-app-bar fixed app class="bar" elevation="0">
+    <v-app-bar fixed app class="bar" elevation="0" extension-height="83">
       <HeaderLogo />
       <AppLanguageSelector />
       <v-spacer />
       <div class="classes-buttons">
-        <v-btn
-          fab
-          small
-          outlined
-          rounded
-          color="#0071C2"
-          @click="openCalenderDialog = true"
-        >
-          <v-icon>mdi-calendar-today</v-icon>
-        </v-btn>
         <v-btn
           fab
           small
@@ -76,7 +76,10 @@
       </div>
       <template v-slot:extension>
         <div class="header-calender">
-          <CalendarBar v-model="app.currentDate" />
+          <CalendarBar
+            v-model="app.currentDate"
+            @showCalender="openCalenderDialog = true"
+          />
         </div>
       </template>
     </v-app-bar>
@@ -95,6 +98,7 @@ import AppLanguageSelector from '@/components/AppLanguageSelector.vue'
 import HeaderLogo from '@/assets/svgs/header_logo.svg'
 import CalendarBar from '@/components/CalendarBar.vue'
 import BaseDialog from '@/components/BaseDialog.vue'
+import BaseActionButton from '@/components/BaseActionButton.vue'
 import { vxm } from '@/store'
 
 type LocalData = {
@@ -113,6 +117,7 @@ export default Vue.extend({
     CalendarBar,
     BaseDialog,
     HeaderLogo,
+    BaseActionButton,
   },
   data(): LocalData {
     return {
@@ -174,7 +179,7 @@ export default Vue.extend({
   margin: 0 auto;
   width: 100%;
   max-width: 640px;
-  height: 40px;
+  height: 100%;
 }
 .classes-container {
   height: 100%;

src/layouts/protected.vue

@@ -5,8 +5,18 @@
         v-model="date"
         locale="ja"
         first-day-of-week="1"
+        width="100%"
+        class="mb-4"
         @input="openCalenderDialog = false"
       />
+      <base-action-button
+        theme="secondary"
+        :text="$t('common.calender.to_today')"
+        @click="
+          date = new Date()
+          openCalenderDialog = false
+        "
+      />
     </v-dialog>
     <base-dialog
       v-model="openClassIdDialog"
@@ -41,21 +51,11 @@
     <v-overlay :value="loading" color="#0071C2" opacity="1" z-index="9999">
       <div class="loader">Loading</div>
     </v-overlay>
-    <v-app-bar fixed app class="bar" elevation="0">
+    <v-app-bar fixed app class="bar" elevation="0" extension-height="83">
       <HeaderLogo />
       <AppLanguageSelector />
       <v-spacer />
       <div class="admin-buttons">
-        <v-btn
-          fab
-          x-small
-          outlined
-          rounded
-          color="#0071C2"
-          @click="openCalenderDialog = true"
-        >
-          <v-icon>mdi-calendar-today</v-icon>
-        </v-btn>
         <v-btn
           fab
           x-small
@@ -79,7 +79,10 @@
       </div>
       <template v-slot:extension>
         <div class="header-calender">
-          <CalendarBar v-model="app.currentDate" />
+          <CalendarBar
+            v-model="app.currentDate"
+            @showCalender="openCalenderDialog = true"
+          />
         </div>
       </template>
     </v-app-bar>
@@ -99,6 +102,7 @@ import AppLanguageSelector from '@/components/AppLanguageSelector.vue'
 import HeaderLogo from '@/assets/svgs/header_logo.svg'
 import CalendarBar from '@/components/CalendarBar.vue'
 import BaseDialog from '@/components/BaseDialog.vue'
+import BaseActionButton from '@/components/BaseActionButton.vue'
 
 type LocalData = {
   loading: boolean
@@ -114,6 +118,7 @@ export default Vue.extend({
     CalendarBar,
     BaseDialog,
     HeaderLogo,
+    BaseActionButton,
   },
   data(): LocalData {
     return {
@@ -173,7 +178,7 @@ export default Vue.extend({
   margin: 0 auto;
   width: 100%;
   max-width: 640px;
-  height: 40px;
+  height: 100%;
 }
 .classes-container {
   height: 100%;