Skip to content

Commit 74c0098

Browse files
NEKOYASANNEKOYASAN
authored
Merge pull request #131 from kaizumaki/feature/issue-117-editing-screen
授業の編集・追加画面作成
2 parents 05dbbb5 + 37f51b5 commit 74c0098

13 files changed

+652
-17
lines changed

‎src/components/ActionButton.vue‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<template>
2-
<button :class="`ActionButton ActionButton-${theme}`" @click="$emit('click')">
2+
<v-btn
3+
:class="`ActionButton ActionButton-${theme}`"
4+
:disabled="isDisabled"
5+
rounded
6+
@click="onClick"
7+
>
38
<span>{{ text }}</span>
4-
</button>
9+
</v-btn>
510
</template>
611

712
<script lang="ts">
@@ -16,38 +21,47 @@ export default class ActionButton extends Vue {
1621
1722
@Prop({ default: '' })
1823
text!: string | undefined
24+
25+
@Prop({ default: false })
26+
isDisabled?: boolean
27+
28+
onClick(): void {
29+
this.$router.push('/')
30+
}
1931
}
2032
</script>
2133

2234
<style lang="scss" scoped>
2335
.ActionButton {
2436
width: 100%;
25-
border-radius: 3em;
26-
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
27-
0 1px 10px 0 rgba(0, 0, 0, 0.12);
28-
text-align: center;
37+
height: auto !important;
2938
font-size: 20px;
3039
font-weight: bold;
31-
padding: 12px 16px;
40+
padding: 12px 16px !important;
41+
42+
&::before {
43+
background-color: inherit;
44+
}
3245
3346
&-primary {
34-
background-color: $color-yellow;
47+
background-color: $color-yellow !important;
3548
color: $color-gray;
3649
}
3750
3851
&-secondary {
39-
background-color: $color-white;
52+
background-color: $color-white !important;
4053
color: $color-gray;
4154
}
4255
4356
&-border {
44-
background-color: $color-white;
57+
background-color: $color-white !important;
4558
border: 1px solid $color-base-color-01;
4659
color: $color-base-color-01;
4760
box-shadow: none;
4861
}
4962
5063
&-transparent {
64+
background-color: transparent !important;
5165
border: 1px solid $color-white;
5266
color: $color-white;
5367
box-shadow: none;

‎src/components/EditingScreen.vue‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<template>
2+
<v-bottom-sheet v-model="screen" persistent scrollable>
3+
<v-card class="EditingScreen">
4+
<v-card-title class="EditingScreen-CardElements">
5+
<v-container class="EditingScreen-Container">
6+
<div class="EditingScreen-Header">
7+
<span class="En">CREATE TIMETABLE</span>
8+
<h2 class="Title">時間割作成</h2>
9+
</div>
10+
</v-container>
11+
</v-card-title>
12+
<v-card-text class="EditingScreen-CardText">
13+
<v-container class="EditingScreen-FormContainer">
14+
<editing-screen1 v-show="page === 1" />
15+
<editing-screen2 v-show="page === 2" />
16+
<editing-screen3 v-show="page === 3" />
17+
<editing-screen4 v-show="page === 4" />
18+
</v-container>
19+
</v-card-text>
20+
<v-card-actions class="EditingScreen-CardElements">
21+
<v-container class="EditingScreen-Container">
22+
<div class="EditingScreen-Footer">
23+
<div class="EditingScreen-Paging">
24+
<v-btn color="white" fab :disabled="isDisabled" @click="goBack">
25+
<v-icon color="#0071c2" large>mdi-chevron-left</v-icon>
26+
</v-btn>
27+
<span class="PagingNumber">{{ page }}/4</span>
28+
<v-btn
29+
color="white"
30+
fab
31+
:disabled="isDisabled"
32+
@click="goForward"
33+
>
34+
<v-icon color="#0071c2" large>mdi-chevron-right</v-icon>
35+
</v-btn>
36+
</div>
37+
<div class="EditingScreen-ActionButtons">
38+
<action-button
39+
class="Button"
40+
theme="transparent"
41+
text="キャンセル"
42+
/>
43+
<action-button
44+
class="Button"
45+
theme="primary"
46+
text="保存する"
47+
:is-disabled="isDisabled"
48+
/>
49+
</div>
50+
</div>
51+
</v-container>
52+
</v-card-actions>
53+
</v-card>
54+
</v-bottom-sheet>
55+
</template>
56+
57+
<script lang="ts">
58+
import Vue from 'vue'
59+
import ActionButton from '@/components/ActionButton.vue'
60+
import EditingScreen1 from '@/components/EditingScreen1.vue'
61+
import EditingScreen2 from '@/components/EditingScreen2.vue'
62+
import EditingScreen3 from '@/components/EditingScreen3.vue'
63+
import EditingScreen4 from '@/components/EditingScreen4.vue'
64+
65+
type DataType = {
66+
screen: boolean
67+
isDisabled: boolean
68+
page: number
69+
}
70+
71+
export default Vue.extend({
72+
components: {
73+
ActionButton,
74+
EditingScreen1,
75+
EditingScreen2,
76+
EditingScreen3,
77+
EditingScreen4
78+
},
79+
props: {
80+
expanded: {
81+
type: Boolean,
82+
required: false,
83+
default: false
84+
}
85+
},
86+
data(): DataType {
87+
return {
88+
screen: this.expanded,
89+
isDisabled: false,
90+
page: 1
91+
}
92+
},
93+
watch: {
94+
expanded(newValue) {
95+
this.screen = newValue
96+
}
97+
},
98+
methods: {
99+
goForward(): Number {
100+
return this.page < 4 ? (this.page += 1) : 4
101+
},
102+
goBack(): Number {
103+
return this.page > 1 ? (this.page -= 1) : 1
104+
}
105+
}
106+
})
107+
</script>
108+
109+
<style lang="scss" scoped>
110+
.EditingScreen {
111+
background-color: $color-base-color-07;
112+
border-radius: 24px 24px 0 0 !important;
113+
padding: 16px;
114+
margin-top: -40px;
115+
}
116+
.EditingScreen-CardElements {
117+
padding: 0 !important;
118+
}
119+
.EditingScreen-CardText {
120+
padding: 16px 8px 0 0 !important;
121+
}
122+
.EditingScreen-FormContainer {
123+
padding: 0 !important;
124+
}
125+
.EditingScreen-Container {
126+
padding: 0;
127+
}
128+
.EditingScreen-Header {
129+
display: flex;
130+
flex-direction: column;
131+
align-items: center;
132+
color: $color-white;
133+
border-bottom: 1px solid $color-base-color-01;
134+
padding: 0 0 4px !important;
135+
136+
.En {
137+
font-size: 12px;
138+
font-weight: bold;
139+
}
140+
141+
.Title {
142+
font-size: 20px;
143+
}
144+
}
145+
.EditingScreen-Paging {
146+
display: flex;
147+
justify-content: space-between;
148+
align-items: center;
149+
margin: 16px 0;
150+
151+
.PagingNumber {
152+
font-size: 18px;
153+
color: $color-white;
154+
}
155+
}
156+
.EditingScreen-Form {
157+
padding: 16px 16px 0 0 !important;
158+
}
159+
.EditingScreen-Footer {
160+
border-top: 1px solid $color-base-color-01;
161+
}
162+
.EditingScreen-ActionButtons {
163+
display: flex;
164+
justify-content: space-between;
165+
166+
.Button {
167+
flex: 0 1 48%;
168+
}
169+
}
170+
</style>

‎src/components/EditingScreen1.vue‎

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