sliver/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

Add input for notes

Browse source
This commit is contained in:
Angelina Filippova 2019-03-31 17:08:41 +07:00
parent f885cdbaf1
commit 2bed9bf5fa
1 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/views/reports/components/TimelineItem.vue
View file

@ -1,7 +1,10 @@
<template> <template>
<el-timeline-item :timestamp="item.timestamp" placement="top" class="timeline-item-container"> <el-timeline-item :timestamp="item.timestamp" placement="top" class="timeline-item-container">
<el-card> <el-card>
<h4>{{ item.header }}</h4> <div class="header-container">
<h4>{{ item.header }}</h4>
<el-button plain size="small" @click="toggleNoteInput">Reply</el-button>
</div>
<p>{{ item.content }}</p> <p>{{ item.content }}</p>
<el-collapse v-model="showNotes"> <el-collapse v-model="showNotes">
<el-collapse-item title="Show notes" name="showNotes"> <el-collapse-item title="Show notes" name="showNotes">
@ -13,6 +16,10 @@
</el-card> </el-card>
</div> </div>
</el-collapse-item> </el-collapse-item>
<div class="new-note">
<p>New note</p>
<el-input v-model="note" :rows="2" type="textarea" autofocus/>
</div>
</el-collapse> </el-collapse>
</el-card> </el-card>
</el-timeline-item> </el-timeline-item>
@ -29,7 +36,12 @@ export default {
}, },
data() { data() {
return { return {
showNotes: [] showNotes: [],
note: ''
}
},
methods: {
toggleNoteInput() {
} }
} }
} }
@ -40,7 +52,6 @@ export default {
padding: 17px 17px 0; padding: 17px 17px 0;
} }
.el-collapse-item__header { .el-collapse-item__header {
border-bottom: none;
height: 46px; height: 46px;
} }
.el-collapse-item__content { .el-collapse-item__content {
@ -50,6 +61,19 @@ export default {
margin: 0; margin: 0;
height: 17px; height: 17px;
} }
.header-container {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.new-note {
margin: 14px 0 17px;
p {
font-size: 13px;
font-weight: 500;
margin: 13px 0 7px;
}
}
.note { .note {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
margin-bottom: 10px; margin-bottom: 10px;