AkkomaGang/admin-fe
6
2
Fork 9
Code Issues 5 Pull requests 2 Projects Releases Wiki 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>
<el-timeline-item :timestamp="item.timestamp" placement="top" class="timeline-item-container">
<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>
<el-collapse v-model="showNotes">
<el-collapse-item title="Show notes" name="showNotes">
@ -13,6 +16,10 @@
</el-card>
</div>
</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-card>
</el-timeline-item>
@ -29,7 +36,12 @@ export default {
},
data() {
return {
showNotes: []
showNotes: [],
note: ''
}
},
methods: {
toggleNoteInput() {
}
}
}
@ -40,7 +52,6 @@ export default {
padding: 17px 17px 0;
}
.el-collapse-item__header {
border-bottom: none;
height: 46px;
}
.el-collapse-item__content {
@ -50,6 +61,19 @@ export default {
margin: 0;
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 {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
margin-bottom: 10px;