Skip to content

Commit 0438c08

Browse files
NEKOYASANNEKOYASAN
authored
Merge branch 'development' into feature/121-create-login-page
2 parents 859279e + 051812a commit 0438c08

19 files changed

+1081
-28
lines changed

‎src/components/ActionButton.vue‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<template>
2-
<button :class="`ActionButton ActionButton-${theme}`" @click="onClick">
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">
@@ -17,6 +22,9 @@ export default class ActionButton extends Vue {
1722
@Prop({ default: '' })
1823
text!: string | undefined
1924
25+
@Prop({ default: false })
26+
isDisabled?: boolean
27+
2028
onClick(): void {
2129
this.$router.push('/')
2230
}
@@ -26,32 +34,34 @@ export default class ActionButton extends Vue {
2634
<style lang="scss" scoped>
2735
.ActionButton {
2836
width: 100%;
29-
border-radius: 3em;
30-
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
31-
0 1px 10px 0 rgba(0, 0, 0, 0.12);
32-
text-align: center;
37+
height: auto !important;
3338
font-size: 20px;
3439
font-weight: bold;
35-
padding: 12px 16px;
40+
padding: 12px 16px !important;
41+
42+
&::before {
43+
background-color: inherit;
44+
}
3645
3746
&-primary {
38-
background-color: $color-yellow;
47+
background-color: $color-yellow !important;
3948
color: $color-gray;
4049
}
4150
4251
&-secondary {
43-
background-color: $color-white;
52+
background-color: $color-white !important;
4453
color: $color-gray;
4554
}
4655
4756
&-border {
48-
background-color: $color-white;
57+
background-color: $color-white !important;
4958
border: 1px solid $color-base-color-01;
5059
color: $color-base-color-01;
5160
box-shadow: none;
5261
}
5362
5463
&-transparent {
64+
background-color: transparent !important;
5565
border: 1px solid $color-white;
5666
color: $color-white;
5767
box-shadow: none;

‎src/components/BaseDialog.vue‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<template>
2+
<v-dialog :value="value" :persistent="modal" @input="$emit('input', $event)">
3+
<v-card class="DialogCard">
4+
<v-card-title class="DialogCardTitle">
5+
<v-icon class="DialogCardTitleIcon" size="48">{{ iconName }}</v-icon>
6+
<slot class="DialogCardTitleText" name="title" />
7+
</v-card-title>
8+
<v-container class="DialogCardContentContainer">
9+
<slot />
10+
</v-container>
11+
<v-card-actions class="DialogCardButtons px-4">
12+
<action-button
13+
v-for="(action, i) in actions"
14+
:key="i"
15+
class="my-3"
16+
:text="action.buttonLabel"
17+
@click="doDialogAction(i)"
18+
/>
19+
<action-button
20+
v-if="!hideDefaultCancelButton"
21+
:text="defaultCancelButtonLabel"
22+
theme="border"
23+
class="my-3"
24+
@click="$emit('input', false)"
25+
/>
26+
</v-card-actions>
27+
</v-card>
28+
</v-dialog>
29+
</template>
30+
31+
<script lang="ts">
32+
import Vue from 'vue'
33+
import ActionButton from '@/components/ActionButton.vue'
34+
35+
export type DialogAction = {
36+
buttonLabel: string
37+
/**
38+
* ボタン押下時に実行する処理。実行後に BaseModalDialog を閉じないようにするには true を返す。
39+
*/
40+
action: () => boolean | void
41+
}
42+
43+
type Props = {
44+
iconName: string
45+
hideDefaultCancelButton: boolean
46+
defaultCancelButtonLabel: string
47+
actions: DialogAction[]
48+
modal: boolean
49+
value: boolean
50+
}
51+
52+
type Methods = {
53+
doDialogAction(buttonIndex: number): void
54+
}
55+
56+
export default Vue.extend<unknown, Methods, unknown, Props>({
57+
name: 'BaseDialog',
58+
components: { ActionButton },
59+
props: {
60+
iconName: {
61+
type: String,
62+
required: true
63+
},
64+
hideDefaultCancelButton: {
65+
type: Boolean,
66+
required: false,
67+
default: false
68+
},
69+
defaultCancelButtonLabel: {
70+
type: String,
71+
required: false,
72+
default: 'キャンセル'
73+
},
74+
actions: {
75+
type: Array as () => DialogAction[],
76+
required: true
77+
},
78+
modal: {
79+
type: Boolean,
80+
required: false,
81+
default: false
82+
},
83+
value: {
84+
type: Boolean,
85+
default: false
86+
}
87+
},
88+
methods: {
89+
doDialogAction(index) {
90+
if (!this.actions[index].action()) {
91+
this.$emit('input', false)
92+
}
93+
}
94+
}
95+
})
96+
</script>
97+
98+
<style lang="scss" scoped>
99+
.v-dialog {
100+
.DialogCard {
101+
border-radius: 14px;
102+
103+
&Title,
104+
&Buttons {
105+
flex-direction: column;
106+
}
107+
108+
&Title,
109+
&TitleIcon {
110+
color: $color-base-color-01;
111+
font-size: 16px;
112+
}
113+
}
114+
}
115+
</style>

‎src/components/BottomSheetLayer.vue‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<template>
2+
<v-bottom-sheet
3+
v-model="layer"
4+
persistent
5+
scrollable
6+
:fullscreen="fullscreen"
7+
>
8+
<v-card class="Layer">
9+
<v-card-title class="Layer-CardElements Layer-CardTitle">
10+
<v-container class="Layer-Container">
11+
<div class="Layer-Header">
12+
<span class="TitleEn">{{ titleEn }}</span>
13+
<h2 class="Title">{{ title }}</h2>
14+
</div>
15+
</v-container>
16+
</v-card-title>
17+
<v-card-text class="Layer-CardText">
18+
<v-container class="Layer-FormContainer">
19+
<slot name="LayerContents" />
20+
</v-container>
21+
</v-card-text>
22+
<v-card-actions class="Layer-CardElements Layer-CardActions">
23+
<v-container class="Layer-Container">
24+
<slot name="LayerFooter" />
25+
</v-container>
26+
</v-card-actions>
27+
</v-card>
28+
</v-bottom-sheet>
29+
</template>
30+
31+
<script lang="ts">
32+
import Vue from 'vue'
33+
34+
type DataType = {
35+
layer: boolean
36+
}
37+
38+
export default Vue.extend({
39+
props: {
40+
expanded: {
41+
type: Boolean,
42+
required: false,
43+
default: true
44+
},
45+
title: {
46+
type: String,
47+
required: true
48+
},
49+
titleEn: {
50+
type: String,
51+
required: true
52+
},
53+
fullscreen: {
54+
type: Boolean,
55+
required: false,
56+
default: false
57+
}
58+
},
59+
data(): DataType {
60+
return {
61+
layer: this.expanded
62+
}
63+
},
64+
watch: {
65+
expanded(newValue) {
66+
this.layer = newValue
67+
}
68+
}
69+
})
70+
</script>
71+
72+
<style lang="scss" scoped>
73+
.Layer {
74+
background-color: $color-base-color-07;
75+
border-radius: 24px 24px 0 0 !important;
76+
padding: 16px !important;
77+
}
78+
.Layer-CardElements {
79+
padding: 0 !important;
80+
}
81+
.Layer-CardTitle {
82+
margin-bottom: 16px;
83+
}
84+
.Layer-CardActions {
85+
margin-top: 24px;
86+
}
87+
.Layer-CardText {
88+
padding: 0 !important;
89+
}
90+
.Layer-FormContainer {
91+
padding: 0 !important;
92+
}
93+
.Layer-Container {
94+
padding: 0;
95+
}
96+
.Layer-Header {
97+
display: flex;
98+
flex-direction: column;
99+
align-items: center;
100+
color: $color-white;
101+
border-bottom: 1px solid $color-base-color-01;
102+
padding: 0 0 4px !important;
103+
104+
.TitleEn {
105+
font-size: 12px;
106+
font-weight: bold;
107+
}
108+
109+
.Title {
110+
font-size: 20px;
111+
}
112+
}
113+
</style>

0 commit comments

Comments
 (0)