Skip to content

Commit 7447072

Browse files
totocalciototocalcio
committed
Merge remote-tracking branch 'origin/main' into feat/namecard
2 parents 0caf8c8 + c154a09 commit 7447072

33 files changed

+1088
-164
lines changed

‎apps/web/app/components/admin/SponsorItem.vue

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const newSponsor = ref({
2020
name: props.sponsor?.name ?? '',
2121
detail_page_id: props.sponsor?.detail_page_id ?? '',
2222
image_url: props.sponsor?.image_url ?? '',
23+
share_image_url: props.sponsor?.share_image_url ?? '',
2324
description_ja: props.sponsor?.description_ja ?? '',
2425
description_en: props.sponsor?.description_en ?? '',
2526
link_url: props.sponsor?.link_url ?? '',
@@ -48,6 +49,18 @@ const checkFiles = async (files: File[]) => {
4849
4950
newSponsor.value.image_url = getFullAvatarUrl(filePath)
5051
}
52+
const checkShareFiles = async (files: File[]) => {
53+
if (files.length === 0) return
54+
55+
const file = files[0]
56+
// const filename = file.name
57+
const fileExt = file.name.split('.').pop()
58+
const filePath = `/${Math.random()}.${fileExt}`
59+
60+
uploadAvatar(filePath, file)
61+
62+
newSponsor.value.share_image_url = getFullAvatarUrl(filePath)
63+
}
5164
const updateDescriptionJa = (e: any) => {
5265
newSponsor.value.description_ja = e.target.value
5366
}
@@ -99,9 +112,23 @@ const onSubmit = () => {
99112
height="60"
100113
decoding="async"
101114
/>
102-
<p>Drag & drop a file</p>
115+
<p>Drag & drop an image file</p>
116+
<p>または</p>
117+
<p>Select an image file</p>
118+
</div>
119+
</VFDragDropArea>
120+
<VFDragDropArea file-name="profiledata" file-accept="image/*" @check-files="checkShareFiles">
121+
<div class="upload">
122+
<img
123+
v-if="newSponsor.share_image_url"
124+
alt=""
125+
:src="newSponsor.share_image_url"
126+
height="60"
127+
decoding="async"
128+
/>
129+
<p>Drag & drop a share image file</p>
103130
<p>または</p>
104-
<p>Select a file</p>
131+
<p>Select a share image file</p>
105132
</div>
106133
</VFDragDropArea>
107134
<VFTextAreaField

‎apps/web/app/components/admin/SponsorList.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const handleDialog = (id?: string) => {
2525
<th>name</th>
2626
<th>detail_page_id</th>
2727
<th>image_url</th>
28+
<th>share_image_url</th>
2829
<th>description</th>
2930
<th>link_url</th>
3031
<th>speaker_id</th>
@@ -47,6 +48,19 @@ const handleDialog = (id?: string) => {
4748
No image
4849
</p>
4950
</td>
51+
<td>
52+
<img
53+
v-if="sponsor.share_image_url"
54+
alt=""
55+
:src="sponsor.share_image_url"
56+
width="60"
57+
height="60"
58+
decoding="async"
59+
/>
60+
<p v-if="!sponsor.share_image_url">
61+
No share image
62+
</p>
63+
</td>
5064
<td>
5165
<p>{{ sponsor.description_ja }}</p>
5266
<p>{{ sponsor.description_en }}</p>

‎apps/web/app/components/namecard/CreationProcess.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const { color } = useColor()
1818
}"
1919
class="title"
2020
>
21-
{{ t('namecard.creation-process.title') }}
21+
{{ t('namecard.creation_process.title') }}
2222
</h2>
2323
<ol
2424
:style="{

‎apps/web/app/components/namecard/CreationStatus.vue

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ const { color } = useColor()
99
export type Status = 'not_created' | 'inquiry_in_progress' | 'inquiry_failed' | 'inquiry_completed'
1010
type Props = {
1111
statusKey: Status
12+
size?: 'small' | 'medium'
1213
}
13-
const props = defineProps<Props>()
14+
const props = withDefaults(defineProps<Props>(), {
15+
size: 'medium',
16+
})
1417
1518
const backgroundColor = computed(() => {
1619
switch (props.statusKey) {
@@ -24,29 +27,46 @@ const backgroundColor = computed(() => {
2427
return color('gray/100')
2528
}
2629
})
30+
31+
const style = computed(() => {
32+
const baseStyle = {
33+
color: color('white'),
34+
backgroundColor: backgroundColor.value,
35+
}
36+
switch (props.size) {
37+
case 'small':
38+
return {
39+
...baseStyle,
40+
height: '24px',
41+
borderRadius: '24px',
42+
padding: '0 20px',
43+
fontWeight: fontWeight('heading/700'),
44+
fontSize: fontSize('body/100'),
45+
}
46+
default:
47+
return {
48+
...baseStyle,
49+
height: '38px',
50+
borderRadius: '38px',
51+
padding: '0 38px',
52+
fontWeight: fontWeight('heading/700'),
53+
fontSize: fontSize('heading/200'),
54+
}
55+
}
56+
})
2757
</script>
2858

2959
<template>
30-
<div
31-
class="creation-status-root"
32-
:style="{
33-
fontWeight: fontWeight('heading/700'),
34-
fontSize: fontSize('heading/200'),
35-
color: color('white'),
36-
backgroundColor: backgroundColor,
37-
}"
38-
>
60+
<div class="creation-status-root" :style="style">
3961
{{ t(`namecard.creation_status.${statusKey}`) }}
4062
</div>
4163
</template>
4264

4365
<style scoped>
4466
.creation-status-root {
45-
display: flex;
67+
display: inline-flex;
4668
justify-content: center;
4769
align-items: center;
48-
width: 166px;
49-
height: 38px;
50-
border-radius: 38px;
70+
line-height: 1;
5171
}
5272
</style>

‎apps/web/app/components/namecard/ImageUploader.vue

Lines changed: 202 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,216 @@
11
<script setup lang="ts">
2-
import { useTypography } from '@vuejs-jp/composable'
2+
import { useI18n } from '#i18n'
3+
import { onMounted, ref } from 'vue'
4+
import { useColor, useTypography } from '@vuejs-jp/composable'
35
4-
type Props = {
5-
label: string
6+
interface DragDropProps {
7+
fileAccept: string
68
}
7-
defineProps<Props>()
89
10+
defineProps<DragDropProps>()
11+
const isDragEnter = ref(false)
12+
13+
const emit = defineEmits<{
14+
'check-files': [e: Event, value: File[]]
15+
}>()
16+
17+
const fileName = ref<string | null>()
18+
19+
const { t } = useI18n()
20+
const onDropFile = (e: DragEvent) => {
21+
e.preventDefault()
22+
if (e.dataTransfer?.files) {
23+
fileName.value = e.dataTransfer.files[0].name
24+
emit('check-files', e, Array.from(e.dataTransfer.files))
25+
}
26+
}
27+
28+
function handleCloseButton(e: Event) {
29+
fileName.value = null
30+
emit('check-files', e, [])
31+
}
32+
33+
const onFileInputChange = (event: Event) => {
34+
event.preventDefault()
35+
const { target } = event
36+
if (!(target instanceof HTMLInputElement)) return
37+
38+
if (target.files) {
39+
fileName.value = target.files[0].name
40+
emit('check-files', event, Array.from(target.files))
41+
}
42+
}
43+
44+
const { color: updateColor } = useColor()
945
const { fontWeight, fontSize } = useTypography()
46+
47+
onMounted(() => {
48+
window.ondrop = (e) => {
49+
e.preventDefault()
50+
}
51+
window.ondragover = (e) => {
52+
e.preventDefault()
53+
}
54+
})
1055
</script>
1156

1257
<template>
13-
<!-- TODO 画像アップローダーのブラッシュアップ -->
14-
<VFDragDropArea
58+
<label
59+
for="fileupload"
60+
class="drag-drop-area-root"
1561
:style="{
62+
fontSize: fontSize('body/300'),
1663
fontWeight: fontWeight('heading/100'),
17-
fontSize: fontSize('heading/100'),
64+
color: updateColor('vue-green/200'),
1865
}"
1966
>
20-
{{ label }}
21-
<VFCssResetButton class="select-button" />
22-
</VFDragDropArea>
67+
{{ t('namecard.form.label_avatar') }}
68+
<div v-if="fileName" class="file-name-area">
69+
<p class="file-name">{{ fileName }}</p>
70+
<VFIconButton
71+
class="icon-close"
72+
color="vue-blue"
73+
name="close"
74+
can-hover
75+
@click="handleCloseButton"
76+
/>
77+
</div>
78+
<button
79+
v-else
80+
draggable="true"
81+
class="drag-drop-area"
82+
:class="{ '-isDragEnter': isDragEnter }"
83+
@dragenter="() => (isDragEnter = true)"
84+
@dragleave="() => (isDragEnter = false)"
85+
@dragover.prevent
86+
@drop.prevent="onDropFile"
87+
>
88+
<div class="message-area">
89+
<p
90+
class="label"
91+
:style="{
92+
fontSize: fontSize('body/400'),
93+
fontWeight: fontWeight('heading/200'),
94+
color: updateColor('vue-blue'),
95+
}"
96+
>
97+
{{ t('namecard.form.drag_and_drop') }}
98+
</p>
99+
<p
100+
class="label or"
101+
:style="{
102+
fontSize: fontSize('body/200'),
103+
fontWeight: fontWeight('body/300'),
104+
color: updateColor('vue-blue'),
105+
}"
106+
>
107+
{{ t('namecard.form.or') }}
108+
</p>
109+
</div>
110+
<input
111+
id="fileUpload"
112+
class="select-button"
113+
type="file"
114+
name="avatar"
115+
:accept="fileAccept"
116+
@change="onFileInputChange"
117+
/>
118+
</button>
119+
<p
120+
class="annotation"
121+
:style="{
122+
fontSize: fontSize('body/300'),
123+
fontWeight: fontWeight('body/300'),
124+
color: updateColor('vue-blue'),
125+
}"
126+
>
127+
{{ t('namecard.form.annotation_avatar') }}
128+
</p>
129+
<!-- TODO エラー制御
130+
<Typography v-if="errorMessage" variant="body/200" color="sangosyo/200">{{
131+
errorMessage
132+
}}</Typography> -->
133+
</label>
23134
</template>
24135

25-
<style scoped></style>
136+
<style scoped>
137+
@import url('~/assets/media.css');
138+
139+
.drag-drop-area-root {
140+
display: inline-block;
141+
}
142+
.drag-drop-area {
143+
width: 100%;
144+
margin: calc(var(--unit) * 1.5) auto;
145+
border: 1px solid #e1e1e1;
146+
border-radius: 6px;
147+
background-color: #fff;
148+
color: var(--color-vue-blue);
149+
}
150+
.drag-drop-area:hover {
151+
transition: 0.2s;
152+
box-shadow: 0 2px 10px rgba(53, 73, 94, 14%);
153+
}
154+
.file-name-area {
155+
width: 100%;
156+
margin: calc(var(--unit) * 1.5) auto;
157+
border: 1px solid #e1e1e1;
158+
border-radius: 6px;
159+
background: #c6cacf40;
160+
color: var(--color-vue-blue);
161+
padding: calc(var(--unit) * 3);
162+
display: flex;
163+
justify-content: space-between;
164+
align-items: center;
165+
}
166+
.file-name {
167+
flex-grow: 1;
168+
text-align: center;
169+
}
170+
.icon-close {
171+
display: inline-block;
172+
text-align: right;
173+
height: 22px;
174+
}
175+
.message-area {
176+
display: inline-flex;
177+
flex-direction: column;
178+
justify-content: center;
179+
align-items: center;
180+
height: var(--height-input-area);
181+
width: 100%;
182+
padding: calc(var(--unit) * 3) calc(var(--unit) * 3) 0;
183+
text-align: center;
184+
}
185+
.label {
186+
margin-bottom: calc(var(--unit) * 1.5);
187+
}
188+
#fileUpload {
189+
font-size: 0;
190+
}
191+
::file-selector-button {
192+
--height-button: 50px;
193+
194+
display: inline-flex;
195+
justify-content: center;
196+
align-items: center;
197+
198+
font-size: var(--font-size-body400);
199+
font-weight: 700;
200+
color: var(--color-vue-blue);
201+
background-color: var(--color-white);
202+
203+
height: var(--height-button);
204+
padding: 0 43px;
205+
margin: 0 auto calc(var(--unit) * 3);
206+
border: 2px solid var(--color-vue-blue);
207+
border-radius: var(--height-button);
208+
cursor: pointer;
209+
}
210+
::file-selector-button:hover {
211+
transition: 0.2s;
212+
color: var(--color-white);
213+
background-color: var(--color-vue-blue);
214+
box-shadow: 0 2px 10px rgba(53, 73, 94, 14%);
215+
}
216+
</style>

0 commit comments

Comments
 (0)