Add ability to close and open new note section

This commit is contained in:
Angelina Filippova 2019-04-01 01:37:27 +07:00
parent 2bed9bf5fa
commit 7ab2e66caa

View file

@ -16,8 +16,11 @@
</el-card> </el-card>
</div> </div>
</el-collapse-item> </el-collapse-item>
<div class="new-note"> <div v-show="showNewNoteInput" class="new-note">
<p>New note</p> <div class="header-container">
<p>New note</p>
<i class="el-icon-close" @click="toggleNoteInput"/>
</div>
<el-input v-model="note" :rows="2" type="textarea" autofocus/> <el-input v-model="note" :rows="2" type="textarea" autofocus/>
</div> </div>
</el-collapse> </el-collapse>
@ -37,11 +40,13 @@ export default {
data() { data() {
return { return {
showNotes: [], showNotes: [],
showNewNoteInput: false,
note: '' note: ''
} }
}, },
methods: { methods: {
toggleNoteInput() { toggleNoteInput() {
this.$data.showNewNoteInput = !this.$data.showNewNoteInput
} }
} }
} }
@ -57,6 +62,13 @@ export default {
.el-collapse-item__content { .el-collapse-item__content {
padding-bottom: 7px; padding-bottom: 7px;
} }
.el-icon-arrow-right {
margin-right: 6px;
}
.el-icon-close {
padding: 10px 5px 10px 10px;
cursor: pointer;
}
h4 { h4 {
margin: 0; margin: 0;
height: 17px; height: 17px;
@ -67,10 +79,11 @@ export default {
align-items: baseline; align-items: baseline;
} }
.new-note { .new-note {
margin: 14px 0 17px; margin-bottom: 17px;
p { p {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
height: 17px;
margin: 13px 0 7px; margin: 13px 0 7px;
} }
} }