grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add exemple routing and store

Browse Source
This commit is contained in:
grimhilt
2023-02-24 15:47:10 +01:00
parent 75dd9afdaf
commit 0692f8caa5
20 changed files with 418 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
front/src/components/room/RoomView.vue
View File

@@ -1,23 +0,0 @@
<template>
<div>
Room
</div>
</template>
<script>
export default {
name: 'RoomView',
components: {
}
}
</script>
<style scoped>
div {
flex-grow: 1;
background-color: #1D1D23;
color: white;
}
</style>

33
front/src/components/sidebar/Sidebar.vue
View File

@@ -1,33 +0,0 @@
<template>
<div>
<Folders />
<Users id="users"/>
</div>
</template>
<script>
import Folders from './folders/Folders';
import Users from './users/Users.vue';
export default {
name: 'Sidebar',
components: {
Folders,
Users,
}
}
</script>
<style scoped>
div {
display: flex;
height: 100%;
}
#users {
max-width: 300px;
}
/* todo setup max size */
</style>

40
front/src/components/sidebar/folders/Folders.vue
View File

@@ -1,40 +0,0 @@
<template>
<div id="main">
<div id="userMenu">
</div>
<span class="divider"></span>
<!-- <h5>Accounts: </h5> -->
<span class="divider"></span>
<!-- <h5>Folders: </h5> -->
</div>
</template>
<script>
export default {
name: 'Folders',
components: {
}
}
</script>
<style scoped>
#main {
display: flex;
flex-direction: column;
padding: 5px;
background-color: #2A2A33;
}
#userMenu {
width: 32px;
height: 32px;
background-color: yellow !important;
}
.divider {
border-top: 1px solid #bbb;
margin: 3px 0;
}
</style>

76
front/src/components/sidebar/users/User.vue
View File

@@ -1,76 +0,0 @@
<template>
<div id="main">
<BaseAvatar url="vue.png"/>
<div id="content">
<div id="sender">{{ sender }}</div>
<div id="object">{{ object }}</div>
</div>
</div>
<ThreadList />
<div>
</div>
</template>
<script>
import BaseAvatar from '../../views/avatars/BaseAvatar.vue'
import ThreadList from './threads/ThreadList.vue'
export default {
name: 'User',
props: {
sender: String,
object: String
},
components: {
BaseAvatar,
ThreadList
}
}
</script>
<style scoped>
#main {
box-sizing: border-box;
contain: content;
display: flex;
margin-bottom: 4px;
margin: 4px;
padding: 4px;
}
#main:hover {
background-color: #41474f;;
border-radius: 8px;
}
#content {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 32px;
justify-content: center;
margin-left: 8px;
min-width: 0;
}
#sender {
font-size: 1.4rem;
line-height: 1.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
color: white;
}
#object {
color: #a9b2bc;
line-height: 1.8rem;
font-size: 1.3rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}
</style>

28
front/src/components/sidebar/users/Users.vue
View File

@@ -1,28 +0,0 @@
<template>
<div>
<User sender="Clemence" object="Proident sunt voluptate enim nisi duis fugiat veniam consequat do irure irure irure id. "/>
</div>
</template>
<script>
import User from './User'
export default {
name: 'Users',
props: {
},
components: {
User
}
}
</script>
<style scoped>
div {
display: flex;
flex-direction: column;
background-color: #24242B;
}
</style>

17
front/src/components/sidebar/users/threads/ThreadList.vue
View File

@@ -1,17 +0,0 @@
<template>
<div>
</div>
</template>
<script>
export default {
name: 'ThreadList',
props: {
},
}
</script>
<style scoped>
</style>

20
front/src/components/views/avatars/BaseAvatar.vue
View File

@@ -1,20 +0,0 @@
<template>
<img :src="require('../../../assets/'+ url)" >
</template>
<script>
export default {
name: 'BaseAvatar',
props: {
url: String
}
}
</script>
<style scoped>
img {
width: 32px;
height: 32px;
}
</style>