Skip to content

Commit a3fa841

Browse files
kaizumakikaizumaki
committed
編集画面作成
1 parent 8de0b76 commit a3fa841

File tree

5 files changed

+266
-31
lines changed

5 files changed

+266
-31
lines changed

‎src/components/EditingScreen.vue‎

Lines changed: 124 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,138 @@
11
<template>
2-
<div class="EditingScreen">
3-
<header class="EditingScreen-Header">
4-
<span>CREATE TIMETABLE</span>
5-
<h2>時間割作成</h2>
6-
</header>
7-
<div class="EditingScreen-Form">
8-
<slot name="form" />
9-
</div>
10-
<div class="EditingScreen-Footer">
11-
<div class="EditingScreen-Paging">
12-
<v-btn color="white" fab :disabled="isDisabled">
13-
<v-icon color="#0071c2">mdi-chevron-left</v-icon>
14-
</v-btn>
15-
<span>1/4</span>
16-
<v-btn color="white" fab :disabled="isDisabled">
17-
<v-icon color="#0071c2">mdi-chevron-right</v-icon>
18-
</v-btn>
2+
<v-bottom-sheet v-model="screen" persistent scrollable>
3+
<v-card class="EditingScreen">
4+
<v-card-title class="EditingScreen-Header">
5+
<span class="En">CREATE TIMETABLE</span>
6+
<h2 class="Title">時間割作成</h2>
7+
</v-card-title>
8+
<v-card-text class="EditingScreen-Form">
9+
<editing-screen1 v-show="page === 1" />
10+
<editing-screen2 v-show="page === 2" />
11+
<editing-screen3 v-show="page === 3" />
12+
<editing-screen4 v-show="page === 4" />
13+
</v-card-text>
14+
<div class="EditingScreen-Footer">
15+
<div class="EditingScreen-Paging">
16+
<v-btn color="white" fab :disabled="isDisabled" @click="goBack">
17+
<v-icon color="#0071c2" large>mdi-chevron-left</v-icon>
18+
</v-btn>
19+
<span class="PagingNumber">{{ page }}/4</span>
20+
<v-btn color="white" fab :disabled="isDisabled" @click="goForward">
21+
<v-icon color="#0071c2" large>mdi-chevron-right</v-icon>
22+
</v-btn>
23+
</div>
24+
<div class="EditingScreen-ActionButtons">
25+
<action-button class="Button" theme="transparent" text="キャンセル" />
26+
<action-button
27+
class="Button"
28+
theme="primary"
29+
text="保存する"
30+
:is-disabled="isDisabled"
31+
/>
32+
</div>
1933
</div>
20-
<div class="EditingScreen-ActionButtons">
21-
<action-button class="Button" theme="transparent" text="キャンセル" />
22-
<action-button
23-
class="Button"
24-
theme="primary"
25-
text="保存する"
26-
:is-disabled="isDisabled"
27-
/>
28-
</div>
29-
</div>
30-
</div>
34+
</v-card>
35+
</v-bottom-sheet>
3136
</template>
3237

3338
<script lang="ts">
3439
import Vue from 'vue'
3540
import ActionButton from '@/components/ActionButton.vue'
41+
import EditingScreen1 from '@/components/EditingScreen1.vue'
42+
import EditingScreen2 from '@/components/EditingScreen2.vue'
43+
import EditingScreen3 from '@/components/EditingScreen3.vue'
44+
import EditingScreen4 from '@/components/EditingScreen4.vue'
45+
46+
type DataType = {
47+
screen: boolean
48+
isDisabled: boolean
49+
page: number
50+
}
3651
3752
export default Vue.extend({
38-
components: { ActionButton },
39-
data() {
53+
components: {
54+
ActionButton,
55+
EditingScreen1,
56+
EditingScreen2,
57+
EditingScreen3,
58+
EditingScreen4
59+
},
60+
props: {
61+
expanded: {
62+
type: Boolean,
63+
required: false,
64+
default: false
65+
}
66+
},
67+
data(): DataType {
4068
return {
41-
isDisabled: false
69+
screen: this.expanded,
70+
isDisabled: false,
71+
page: 1
72+
}
73+
},
74+
watch: {
75+
expanded(newValue) {
76+
this.screen = newValue
77+
}
78+
},
79+
methods: {
80+
goForward(): Number {
81+
return this.page < 4 ? (this.page += 1) : 4
82+
},
83+
goBack(): Number {
84+
return this.page > 1 ? (this.page -= 1) : 1
4285
}
4386
}
4487
})
4588
</script>
89+
90+
<style lang="scss" scoped>
91+
.EditingScreen {
92+
background-color: $color-base-color-07;
93+
border-radius: 24px 24px 0 0 !important;
94+
padding: 16px 0 16px 16px;
95+
}
96+
.EditingScreen-Header {
97+
flex-direction: column;
98+
color: $color-white;
99+
border-bottom: 1px solid $color-base-color-01;
100+
padding: 0 0 4px !important;
101+
margin-right: 16px;
102+
103+
.En {
104+
font-size: 12px;
105+
font-weight: bold;
106+
}
107+
108+
.Title {
109+
font-size: 20px;
110+
}
111+
}
112+
.EditingScreen-Paging {
113+
display: flex;
114+
justify-content: space-between;
115+
align-items: center;
116+
margin: 16px 0;
117+
118+
.PagingNumber {
119+
font-size: 18px;
120+
color: $color-white;
121+
}
122+
}
123+
.EditingScreen-Form {
124+
padding: 16px 8px 0 0 !important;
125+
}
126+
.EditingScreen-Footer {
127+
border-top: 1px solid $color-base-color-01;
128+
margin-right: 16px;
129+
}
130+
.EditingScreen-ActionButtons {
131+
display: flex;
132+
justify-content: space-between;
133+
134+
.Button {
135+
flex: 0 1 48%;
136+
}
137+
}
138+
</style>

‎src/components/EditingScreen1.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div>
3+
<editor-field
4+
title="日付設定"
5+
label="date"
6+
placeholder="XX月XX日"
7+
icon-name="mdi-calendar"
8+
/>
9+
<div class="EditingScreen-Flex EditingScreen-Time">
10+
<editor-field
11+
title="時間設定"
12+
label="start_time"
13+
placeholder="00:00"
14+
icon-name="mdi-clock-outline"
15+
class="TimeField"
16+
/>
17+
<span class="Hyphen">-</span>
18+
<editor-field
19+
label="end_time"
20+
placeholder="00:00"
21+
icon-name="mdi-clock-outline"
22+
class="TimeField"
23+
/>
24+
</div>
25+
<editor-field title="タイトル" label="title" placeholder="例）理科" />
26+
<div class="EditingScreen-Flex">
27+
<editor-field
28+
title="教科名"
29+
label="lesson"
30+
placeholder="例）理科"
31+
class="LessonField"
32+
/>
33+
<editor-field
34+
title="ラベル色"
35+
icon-name="mdi-palette"
36+
class="LabelField"
37+
/>
38+
</div>
39+
</div>
40+
</template>
41+
42+
<script lang="ts">
43+
import Vue from 'vue'
44+
import EditorField from '~/components/EditorField.vue'
45+
46+
export default Vue.extend({
47+
components: { EditorField }
48+
})
49+
</script>
50+
51+
<style lang="scss" scoped>
52+
.EditingScreen-Flex {
53+
display: flex;
54+
justify-content: space-between;
55+
}
56+
.EditingScreen-Time {
57+
align-items: flex-end;
58+
59+
.TimeField {
60+
flex: 0 1 48%;
61+
}
62+
63+
.Hyphen {
64+
flex: 0 1 auto;
65+
align-self: center;
66+
color: $color-white;
67+
font-size: 40px;
68+
padding: 0 8px;
69+
}
70+
}
71+
.LessonField {
72+
flex: 0 1 52%;
73+
}
74+
.LabelField {
75+
flex: 0 1 45%;
76+
}
77+
</style>

‎src/components/EditingScreen2.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<editor-textarea title="学習の目的" />
4+
<editor-textarea title="詳細説明" />
5+
</div>
6+
</template>
7+
8+
<script lang="ts">
9+
import Vue from 'vue'
10+
import EditorTextarea from '@/components/EditorTextarea.vue'
11+
12+
export default Vue.extend({
13+
components: { EditorTextarea }
14+
})
15+
</script>

‎src/components/EditingScreen3.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div>
3+
<editor-field
4+
title="参考動画URL"
5+
label="video"
6+
placeholder="https://"
7+
icon-name="mdi-link"
8+
/>
9+
<editor-textarea title="動画サムネイル・キャプション表示" />
10+
</div>
11+
</template>
12+
13+
<script lang="ts">
14+
import Vue from 'vue'
15+
import EditorField from '@/components/EditorField.vue'
16+
import EditorTextarea from '@/components/EditorTextarea.vue'
17+
18+
export default Vue.extend({
19+
components: { EditorField, EditorTextarea }
20+
})
21+
</script>

‎src/components/EditingScreen4.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div>
3+
<editor-field
4+
title="教科書ページ"
5+
label="textbook_page"
6+
placeholder="例）10〜14ページ"
7+
/>
8+
<editor-field
9+
title="副教材タイトル"
10+
label="sub_text"
11+
placeholder="例）やさしい理科教材"
12+
/>
13+
<editor-field
14+
title="副教材URL"
15+
label="sub_text_url"
16+
placeholder="https://"
17+
icon-name="mdi-link"
18+
/>
19+
</div>
20+
</template>
21+
22+
<script lang="ts">
23+
import Vue from 'vue'
24+
import EditorField from '@/components/EditorField.vue'
25+
26+
export default Vue.extend({
27+
components: { EditorField }
28+
})
29+
</script>

0 commit comments

Comments
 (0)