Skip to content

Commit ec41063

Browse files
NEKOYASANNEKOYASAN
authored
Merge pull request #452 from kaizumaki/feature/issue-445-fix-ui-movie-search
動画検索のUIを修正
2 parents 6c874b2 + e4efe67 commit ec41063

File tree

6 files changed

+129
-70
lines changed

6 files changed

+129
-70
lines changed

‎src/assets/locales/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"material_title": "Learning Material Title",
7777
"material_url": "Learning Material URL"
7878
},
79-
"placeholders": {
79+
"placeholder": {
8080
"video_keyword": "EX) Science"
8181
},
8282
"required": "*Items Marked with Are Required",

‎src/assets/locales/ja.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,19 +77,19 @@
7777
"date": "日付設定",
7878
"time": "時間設定",
7979
"subject_label_color": "ラベル色",
80-
"video_keyword": "（オプション機能）動画検索",
80+
"video_keyword": "オプション機能：参考動画検索",
8181
"video_url": "参考動画URL",
8282
"video_thumbnail": "動画サムネイル・キャプション表示",
8383
"textbook_page": "教科書ページ",
8484
"material_title": "副教材タイトル",
8585
"material_url": "副教材URL"
8686
},
87-
"placeholders": {
88-
"video_keyword": "例） 理科"
87+
"placeholder": {
88+
"video_keyword": "キーワード"
8989
},
9090
"required": "*マークのあるものは必須項目です",
9191
"search_videos": {
92-
"search": "検索する",
92+
"search": "検索",
9393
"search_result": "{source}の動画検索結果",
9494
"add_to_video_urls": "参考動画URLに登録する"
9595
}

‎src/assets/locales/zh_TW.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"material_title": "副教材標題",
7777
"material_url": "輔助教材 URL"
7878
},
79-
"placeholders": {
79+
"placeholder": {
8080
"video_keyword": "例）理科"
8181
},
8282
"required": "*符號者為必填項目",

‎src/components/BaseEditorButton.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
22
<v-btn
33
class="editorButton"
4-
width="48px"
4+
min-width="48px"
55
height="48px"
66
@click="$emit('click')"
77
>
88
<v-icon :color="iconColor" :size="iconSize">{{ iconName }}</v-icon>
9+
<span v-if="text">{{ text }}</span>
910
</v-btn>
1011
</template>
1112

@@ -29,13 +30,18 @@ export default Vue.extend({
2930
required: false,
3031
default: '24px',
3132
},
33+
text: {
34+
type: String,
35+
required: false,
36+
default: '',
37+
},
3238
},
3339
})
3440
</script>
3541

3642
<style lang="scss" scoped>
3743
.editorButton {
3844
border-radius: 14px;
39-
min-width: 48px !important;
45+
padding: 0 14px !important;
4046
}
4147
</style>

‎src/components/EditLessonScreenInner3.vue‎

Lines changed: 109 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -7,61 +7,70 @@
77
placeholder="https://"
88
/>
99

10-
<editor-input-field-pickable
11-
v-model="videoSearchWord"
12-
:title="$t('components.editing_screen.labels.video_keyword')"
13-
:placeholders="$t('components.editing_screen.placeholder.video_keyword')"
14-
/>
15-
16-
<button class="Button" @click="handleVideoSearchWord">
17-
{{ $t('components.editing_screen.search_videos.search') }}
18-
</button>
19-
20-
<div v-if="videoSearchResult.length > 0" class="SearchResult">
21-
<h3>
22-
{{
23-
$t('components.editing_screen.search_videos.search_result', {
24-
source: 'NHK For School',
25-
})
26-
}}
27-
</h3>
28-
<ul>
29-
<li v-for="(v, i) in displayLists" :key="i" class="SearchResultItem">
30-
<component
31-
:is="v.videoUrl ? 'a' : 'span'"
32-
:href="v.videoUrl"
33-
:target="v.videoUrl ? '_blank' : null"
34-
class="SearchResultLink"
35-
>
36-
{{ v.videoTitle }}&emsp;{{ v.videoSubTitle }}
37-
</component>
38-
<p class="SearchResultDescription">{{ v.videoDescription }}</p>
39-
<span>{{ v.videoPlayTime }}</span>
40-
<br v-if="v.videoThumbnailUrl" />
41-
<img
42-
v-if="v.videoThumbnailUrl"
43-
:src="v.videoThumbnailUrl"
44-
:alt="v.videoTitle"
45-
width="240"
46-
/>
47-
<br v-if="v.videoUrl" />
48-
<button
49-
v-if="v.videoUrl"
50-
class="Button"
51-
@click="registerVideoUrl(v.videoUrl)"
52-
>
53-
{{
54-
$t('components.editing_screen.search_videos.add_to_video_urls')
55-
}}
56-
</button>
57-
</li>
58-
</ul>
59-
<v-pagination
60-
v-model="page"
61-
:length="length"
62-
:total-visible="5"
63-
@input="pageChange"
10+
<div class="VideoSearch">
11+
<editor-input-field-pickable
12+
v-model="videoSearchWord"
13+
:title="$t('components.editing_screen.labels.video_keyword')"
14+
:placeholder="$t('components.editing_screen.placeholder.video_keyword')"
15+
icon-name="mdi-magnify"
16+
:button-text="$t('components.editing_screen.search_videos.search')"
17+
@clickButton="handleVideoSearchWord"
6418
/>
19+
20+
<div v-if="videoSearchResult.length > 0" class="SearchResult">
21+
<h3 class="SearchResultTitle">
22+
{{
23+
$t('components.editing_screen.search_videos.search_result', {
24+
source: 'NHK For School',
25+
})
26+
}}
27+
</h3>
28+
<ul class="SearchResultList">
29+
<li v-for="(v, i) in displayLists" :key="i" class="SearchResultItem">
30+
<div class="SearchResultLinkOuter">
31+
<component
32+
:is="v.videoUrl ? 'a' : 'span'"
33+
:href="v.videoUrl"
34+
:target="v.videoUrl ? '_blank' : null"
35+
>
36+
{{ v.videoTitle }}&emsp;{{ v.videoSubTitle }}
37+
</component>
38+
<div>
39+
<span class="SearchResultPlayTime">{{ v.videoPlayTime }}</span>
40+
</div>
41+
</div>
42+
<p>{{ v.videoDescription }}</p>
43+
<div class="SearchResultImgOuter">
44+
<img
45+
v-if="v.videoThumbnailUrl"
46+
:src="v.videoThumbnailUrl"
47+
:alt="v.videoTitle"
48+
width="240"
49+
/>
50+
<v-btn
51+
v-if="v.videoUrl"
52+
class="SearchResultButton"
53+
color="#338dce"
54+
@click="registerVideoUrl(v.videoUrl)"
55+
>
56+
<v-icon color="white"> mdi-link </v-icon>
57+
{{
58+
$t(
59+
'components.editing_screen.search_videos.add_to_video_urls'
60+
)
61+
}}
62+
</v-btn>
63+
</div>
64+
</li>
65+
</ul>
66+
<v-pagination
67+
v-model="page"
68+
:length="length"
69+
:total-visible="5"
70+
color="#0071c2"
71+
@input="pageChange"
72+
/>
73+
</div>
6574
</div>
6675
</div>
6776
</template>
@@ -126,6 +135,15 @@ export default class EditLessonScreenInner3 extends Vue {
126135
this.input(this.tempFormData)
127136
}
128137
138+
@Watch('value', { deep: true })
139+
onChangeValueFormData() {
140+
if (this.value.videoUrl === '') {
141+
this.videoSearchWord = ''
142+
this.videoSearchResult = []
143+
}
144+
this.tempFormData = this.value
145+
}
146+
129147
private handleVideoSearchWord() {
130148
if (this.videoSearchWord) {
131149
this.page = 1
@@ -213,21 +231,50 @@ export default class EditLessonScreenInner3 extends Vue {
213231
</script>
214232

215233
<style lang="scss" scoped>
216-
.Button {
217-
color: $color-white;
218-
margin-bottom: 20px;
234+
.VideoSearch {
235+
background-color: $color-base-color-02;
236+
border-radius: 8px;
237+
padding: 16px;
238+
margin-bottom: 16px;
219239
}
220240
.SearchResult {
241+
border-top: 1px solid $color-base-color-03;
242+
}
243+
.SearchResultTitle {
221244
color: $color-white;
222-
margin-bottom: 20px;
245+
text-align: center;
246+
margin: 16px 0;
247+
}
248+
.SearchResultList {
249+
padding: 0;
250+
list-style: none;
223251
}
224252
.SearchResultItem {
253+
background-color: $color-white;
254+
padding: 18px;
225255
margin-bottom: 12px;
226256
}
227-
.SearchResultLink {
228-
color: $color-white;
257+
.SearchResultLinkOuter {
258+
display: flex;
259+
justify-content: space-between;
260+
margin-bottom: 12px;
229261
}
230-
.SearchResultDescription {
231-
margin: 0;
262+
.SearchResultPlayTime {
263+
display: inline-block;
264+
font-size: 12px;
265+
border: 2px solid $color-gray;
266+
border-radius: 3em;
267+
padding: 2px 10px;
268+
}
269+
.SearchResultImgOuter {
270+
position: relative;
271+
margin-bottom: 16px;
272+
}
273+
.SearchResultButton {
274+
position: absolute;
275+
right: -6px;
276+
bottom: -12px;
277+
color: $color-white;
278+
border-radius: 8px;
232279
}
233280
</style>

‎src/components/EditorInputFieldPickable.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
v-if="iconName"
1515
class="Button"
1616
:icon-name="iconName"
17+
:text="buttonText"
1718
@click="$emit('clickButton')"
1819
/>
1920
</div>
@@ -63,6 +64,11 @@ export default Vue.extend({
6364
required: false,
6465
default: '',
6566
},
67+
buttonText: {
68+
type: String,
69+
required: false,
70+
default: '',
71+
},
6672
},
6773
})
6874
</script>

0 commit comments

Comments
 (0)