Skip to content

Commit 1306dc1

Browse files
AchoArnoldAchoArnold
committed
Add basic layout
1 parent 9177807 commit 1306dc1

9 files changed

Lines changed: 139 additions & 261 deletions

File tree

‎web/assets/img/person-texting.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎web/components/MessageThread.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<v-list two-line class="px-0 py-0" subheader>
3+
<v-list-item-group v-model="selected">
4+
<template v-for="thread in threads">
5+
<v-list-item :key="thread.id" class="py-1">
6+
<v-list-item-avatar :color="thread.color">
7+
<v-icon dark> mdi-account </v-icon>
8+
</v-list-item-avatar>
9+
<v-list-item-content>
10+
<v-list-item-title>
11+
{{ thread.phoneNumber }}
12+
</v-list-item-title>
13+
<v-list-item-subtitle>
14+
{{ thread.message }}
15+
</v-list-item-subtitle>
16+
</v-list-item-content>
17+
<v-list-item-action>
18+
<v-list-item-action-text>
19+
{{ thread.date }}
20+
</v-list-item-action-text>
21+
</v-list-item-action>
22+
</v-list-item>
23+
</template>
24+
</v-list-item-group>
25+
</v-list>
26+
</template>
27+
28+
<script lang="ts">
29+
import { Vue, Component } from 'vue-property-decorator'
30+
31+
type ThreadItem = {
32+
id: string
33+
phoneNumber: string
34+
message: string
35+
date: string
36+
color: string
37+
}
38+
39+
@Component
40+
export default class MessageThread extends Vue {
41+
selected: string = '1'
42+
get threads(): Array<ThreadItem> {
43+
return [
44+
{
45+
id: '1',
46+
phoneNumber: '+1 800 5550 100',
47+
message:
48+
'I was calling about the apartment? Is it still available and can I see it today?',
49+
date: 'Fri',
50+
color: 'indigo',
51+
},
52+
{
53+
id: '2',
54+
phoneNumber: '+1 800 5550 500',
55+
message:
56+
'I was calling about the apartment? Is it still available and can I see it today?',
57+
date: '20 May',
58+
color: 'teal',
59+
},
60+
]
61+
}
62+
}
63+
</script>

‎web/components/MessageThreadHeader.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<v-sheet
3+
class="pa-4 d-flex"
4+
:elevation="$vuetify.breakpoint.lgAndUp ? 0 : 2"
5+
:color="$vuetify.breakpoint.lgAndUp ? 'grey darken-4' : 'primary'"
6+
>
7+
<div>
8+
<v-toolbar-title>+1 800 555-0199</v-toolbar-title>
9+
<p class="text--secondary mb-n1">Estonia</p>
10+
</div>
11+
<v-spacer></v-spacer>
12+
<v-tooltip bottom>
13+
<template #activator="{ on, attrs }">
14+
<v-btn icon text v-bind="attrs" v-on="on">
15+
<v-icon>mdi-dots-vertical</v-icon>
16+
</v-btn>
17+
</template>
18+
<span>More Options</span>
19+
</v-tooltip>
20+
</v-sheet>
21+
</template>
22+
23+
<script lang="ts">
24+
import { Vue, Component } from 'vue-property-decorator'
25+
26+
@Component
27+
export default class MessageThreadHeader extends Vue {}
28+
</script>

‎web/components/Tutorial.vue‎

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎web/components/VuetifyLogo.vue‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)