Skip to content

Commit

Permalink
(feature)完成卡片颜色选择开发
Browse files Browse the repository at this point in the history
  • Loading branch information
@jingchenxu
jingchenxu committed Sep 21, 2018
1 parent b964331 commit 426b6a7
Show file tree
Hide file tree
Showing 9 changed files with 397 additions and 26 deletions.
8 changes: 4 additions & 4 deletions rosa
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{"height":400,"id":1537257592854,"noteContent":"14","noteTitle":"14","width":300,"_id":"Uq3bGApRtXiNKhSw","createdAt":{"$$date":1537257593027},"updatedAt":{"$$date":1537257593027}}
{"height":400,"id":1537259088397,"noteContent":"15","noteTitle":"15","width":300,"_id":"dq6TWS3kIPVsilwO","createdAt":{"$$date":1537259088594},"updatedAt":{"$$date":1537259088594}}
{"height":400,"id":1537257475223,"noteContent":"13","noteTitle":"13","width":300,"_id":"hcNIYxIQecbiji7a","createdAt":{"$$date":1537257475400},"updatedAt":{"$$date":1537257475400}}
{"height":400,"id":1537257588239,"noteContent":"11","noteTitle":"11","width":300,"_id":"llq22mSNgAZMouVG","createdAt":{"$$date":1537257588393},"updatedAt":{"$$date":1537257588393}}
{"color":"indigo accent-2","height":400,"id":1537511399039,"noteContent":"13","noteTitle":"13","width":300,"_id":"AABziUjd7EcPMs5B","createdAt":{"$$date":1537511399195},"updatedAt":{"$$date":1537511399195}}
{"color":"light-blue accent-1","height":400,"id":1537511409632,"noteContent":"14","noteTitle":"14","width":300,"_id":"bEwmpvUjugmnA5AM","createdAt":{"$$date":1537511409696},"updatedAt":{"$$date":1537511409696}}
{"color":"deep-purple accent-2","height":400,"id":1537511423928,"noteContent":"18989","noteTitle":"1817","width":300,"_id":"rI5zpWsnSEHGid85","createdAt":{"$$date":1537511424115},"updatedAt":{"$$date":1537511424115}}
{"color":"white","height":400,"id":1537511392511,"noteContent":"12","noteTitle":"12","width":300,"_id":"sgPWCdMUaIq2qKF2","createdAt":{"$$date":1537511392636},"updatedAt":{"$$date":1537511392636}}
5 changes: 4 additions & 1 deletion src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<span class="title ml-3 mr-5">GoogleKeep</span>
<v-spacer></v-spacer>

<v-btn icon>
<v-btn @click="handleSearch" icon>
<v-icon>search</v-icon>
</v-btn>

Expand Down Expand Up @@ -76,6 +76,9 @@ export default {
methods: {
listChange () {
this.$store.commit('changeListType', this.listType)
},
handleSearch () {
this.$bus.$emit('showSearch')
}
}
}
Expand Down
195 changes: 183 additions & 12 deletions src/components/AddCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div class="add-card">
<v-text-field v-if="noteType === 'list'" @focus="addNote" label="添加记事..." single-line solo>
<v-text-field v-if="noteType === 'none'" @focus="addNote" label="添加记事..." single-line solo>
<div slot="append">
<v-spacer></v-spacer>

<v-btn icon>
<v-btn @click="addList" icon>
<v-icon>mdi-format-list-checkbox</v-icon>
</v-btn>

<v-btn icon>
<v-btn @click="addImage" icon>
<v-icon>image</v-icon>
</v-btn>

Expand All @@ -17,7 +17,65 @@
</v-btn>
</div>
</v-text-field>
<v-card v-if="noteType === 'note'">
<v-card :color="bgcolor" v-if="noteType === 'note'">
<v-card-title primary-title>
<v-layout align-start row wrap>
<v-flex xs12>
<v-text-field autofocus flat full-width v-model="note.noteTitle" label="标题" single-line solo>
<div slot="append">
<v-spacer></v-spacer>

<v-btn small icon>
<v-icon small color="grey">mdi-pin</v-icon>
</v-btn>
</div>
</v-text-field>
</v-flex>
<v-flex xs12>
<v-textarea full-width auto-grow flat solo name="input-7-4" placeholder="添加记事..." label="Solo textarea" v-model="note.noteContent"></v-textarea>
</v-flex>
</v-layout>

</v-card-title>

<v-card-actions>
<v-btn small icon>
<v-icon small color="grey">mdi-reminder</v-icon>
</v-btn>
<v-btn small icon>
<v-icon small color="grey">mdi-account-plus</v-icon>
</v-btn>
<v-tooltip bottom>
<v-btn @mouseenter="enter" @mouseleave="leave" slot="activator" small icon>
<div v-if="show" class="color-selector white">
<div @click="colorCheck(item)" :key="index" v-for="(item, index) of colorList" :class="['selector-item', item.color]">
<v-icon v-if="item.isCheck">mdi-check</v-icon>
</div>
</div>
<v-icon small color="grey">mdi-palette</v-icon>
</v-btn>
更改颜色
</v-tooltip>
<v-btn small icon>
<v-icon small color="grey">image</v-icon>
</v-btn>
<v-btn small icon>
<v-icon small color="grey">mdi-package-down</v-icon>
</v-btn>
<v-btn small icon>
<v-icon small color="grey">mdi-dots-vertical</v-icon>
</v-btn>
<v-btn small icon>
<v-icon small color="grey">mdi-undo</v-icon>
</v-btn>
<v-btn small icon>
<v-icon small color="grey">mdi-redo</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn @click="close" small flat color="grey">关闭</v-btn>
</v-card-actions>
</v-card>
<v-card :color="bgcolor" v-if="noteType === 'list'">
<v-card-title primary-title>
<v-layout align-start row wrap>
<v-flex xs12>
Expand Down Expand Up @@ -45,8 +103,13 @@
<v-btn small icon>
<v-icon small color="grey">mdi-account-plus</v-icon>
</v-btn>
<v-tooltip top>
<v-btn slot="activator" small icon>
<v-tooltip bottom>
<v-btn @mouseenter="enter" @mouseleave="leave" slot="activator" small icon>
<div v-if="show" class="color-selector white">
<div @click="colorCheck(item)" :key="index" v-for="(item, index) of colorList" :class="['selector-item', item.color]">
<v-icon v-if="item.isCheck">mdi-check</v-icon>
</div>
</div>
<v-icon small color="grey">mdi-palette</v-icon>
</v-btn>
更改颜色
Expand Down Expand Up @@ -80,24 +143,76 @@ const { ipcRenderer } = window.require('electron')
export default {
name: 'add-card',
components: {
ColorSelector,
Tooltip
ColorSelector
},
data () {
return {
noteType: 'list', // list | note | image | pen
noteType: 'none', // none | list | note | image | pen
note: {
noteTitle: '',
noteContent: ''
}
},
show: false,
bgcolor: 'white',
colorList: [
{
id: 1,
isCheck: true,
color: 'white'
}, {
id: 2,
isCheck: false,
color: 'red accent-1'
}, {
id: 3,
isCheck: false,
color: 'orange accent-1'
}, {
id: 4,
isCheck: false,
color: 'yellow accent-1'
}, {
id: 5,
isCheck: false,
color: 'green accent-1'
}, {
id: 6,
isCheck: false,
color: 'light-blue accent-1'
}, {
id: 7,
isCheck: false,
color: 'blue lighten-1'
}, {
id: 8,
isCheck: false,
color: 'indigo accent-2'
}, {
id: 9,
isCheck: false,
color: 'deep-purple accent-2'
}, {
id: 10,
isCheck: false,
color: 'pink lighten-2'
}, {
id: 11,
isCheck: false,
color: 'grey lighten-1'
}, {
id: 11,
isCheck: false,
color: 'blue-grey lighten-4'
}
]
}
},
methods: {
addNote (val) {
this.noteType = 'note'
},
close () {
this.noteType = 'list'
this.noteType = 'none'
this.saveNote()
},
saveNote () {
Expand All @@ -106,14 +221,45 @@ export default {
noteContent: this.note.noteContent,
width: 300,
height: 400,
id: Number(new Date())
id: Number(new Date()),
color: this.bgcolor
}
if (this.note.noteTitle || this.note.noteContent) {
ipcRenderer.send('addNote', note)
this.$store.commit('addNote', note)
this.note.noteTitle = ''
this.note.noteContent = ''
}
},
enter () {
console.log('鼠标移入了')
let me = this
setTimeout(function () {
me.show = true
}, 200)
},
leave () {
console.log('鼠标移出了')
let me = this
setTimeout(function () {
me.show = false
}, 200)
},
colorCheck (item) {
for (let i=0; i<this.colorList.length; i++) {
if (this.colorList[i].color === item.color) {
this.colorList[i].isCheck = true
this.bgcolor = item.color
} else {
this.colorList[i].isCheck = false
}
}
},
addList () {
this.noteType = 'list'
},
addImage () {
this.noteType = 'image'
}
}
}
Expand Down Expand Up @@ -141,4 +287,29 @@ export default {
margin: 32px auto 16px auto;
}
}
.color-selector {
width: 160px;
height: 120px;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
position: absolute;
bottom: 25px;
padding: 8px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
transition: visibility 0s ease 0ms,opacity .218s linear;
}
.selector-item {
width: 30px;
height: 30px;
border-radius: 15px;
text-align: center;
line-height: 30px;
border: 2px solid transparent;
}
.selector-item:hover {
border: 2px solid grey!important;
}
</style>
5 changes: 3 additions & 2 deletions src/components/NoteCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-card color="red" :id="noteDetail.id" ref="notecard" hover active-class="noteDisabled noteActive">
<v-card :color="noteDetail.color" :id="noteDetail.id" ref="notecard" hover active-class="noteDisabled noteActive">
<v-card-title @click="noteClick">
<v-badge color="white" left>
<v-btn outline @click="deleteNote" slot="badge" small icon>
Expand Down Expand Up @@ -83,7 +83,8 @@ export default {
default: function () {
return {
noteTitle: 'note title',
noteContent: 'note content'
noteContent: 'note content',
color: 'white'
}
}
}
Expand Down
Loading

0 comments on commit 426b6a7

Please sign in to comment.