From 426b6a7343a0318e1506d344b33795aae01baa75 Mon Sep 17 00:00:00 2001
From: jcxu <jcxu@jinhetech.com>
Date: Fri, 21 Sep 2018 14:56:14 +0800
Subject: [PATCH] =?UTF-8?q?(feature)=E5=AE=8C=E6=88=90=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rosa                                |   8 +-
 src/App.vue                         |   5 +-
 src/components/AddCard.vue          | 195 ++++++++++++++++++++++++++--
 src/components/NoteCard.vue         |   5 +-
 src/components/NoteCardActions.vue  | 114 +++++++++++++++-
 src/components/SideMenu.vue         |   5 +-
 src/components/modalPage/Search.vue |  82 ++++++++++++
 src/plugins/vuetify.js              |   6 +-
 src/store.ts                        |   3 +-
 9 files changed, 397 insertions(+), 26 deletions(-)
 create mode 100644 src/components/modalPage/Search.vue

diff --git a/rosa b/rosa
index 891a5b1..3d8fa6b 100644
--- a/rosa
+++ b/rosa
@@ -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}}
diff --git a/src/App.vue b/src/App.vue
index 34bed2d..792f3fd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
 
@@ -76,6 +76,9 @@ export default {
   methods: {
     listChange () {
       this.$store.commit('changeListType', this.listType)
+    },
+    handleSearch () {
+      this.$bus.$emit('showSearch')
     }
   }
 }
diff --git a/src/components/AddCard.vue b/src/components/AddCard.vue
index 7593922..a629bf7 100644
--- a/src/components/AddCard.vue
+++ b/src/components/AddCard.vue
@@ -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>
 
@@ -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>
@@ -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>
           更改颜色
@@ -80,16 +143,68 @@ 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: {
@@ -97,7 +212,7 @@ export default {
       this.noteType = 'note'
     },
     close () {
-      this.noteType = 'list'
+      this.noteType = 'none'
       this.saveNote()
     },
     saveNote () {
@@ -106,7 +221,8 @@ 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)
@@ -114,6 +230,36 @@ export default {
         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'
     }
   }
 }
@@ -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>
diff --git a/src/components/NoteCard.vue b/src/components/NoteCard.vue
index 26ea37a..7eefc3e 100644
--- a/src/components/NoteCard.vue
+++ b/src/components/NoteCard.vue
@@ -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>
@@ -83,7 +83,8 @@ export default {
       default: function () {
         return {
           noteTitle: 'note title',
-          noteContent: 'note content'
+          noteContent: 'note content',
+          color: 'white'
         }
       }
     }
diff --git a/src/components/NoteCardActions.vue b/src/components/NoteCardActions.vue
index 8742730..52c8166 100644
--- a/src/components/NoteCardActions.vue
+++ b/src/components/NoteCardActions.vue
@@ -19,9 +19,14 @@
         </v-flex>
         <v-flex xs2>
           <v-tooltip bottom>
-            <v-btn slot="activator" small icon>
-              <v-icon small color="grey">mdi-palette</v-icon>
-            </v-btn>
+          <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>
             <span>更改颜色</span>
           </v-tooltip>
         </v-flex>
@@ -64,8 +69,86 @@ export default {
         { title: '添加标签' },
         { title: '添加绘图' },
         { title: '复制' }
+      ],
+      show: false,
+      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: {
+    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
+        }
+      }
+    }
   }
 }
 </script>
@@ -75,4 +158,29 @@ export default {
   width: 240px;
   height: 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>
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 3482961..ca166d8 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -28,6 +28,7 @@
     <Setting/>
     <AddLabel/>
     <SetShortkey/>
+    <Search/>
   </div>
 </template>
 
@@ -35,13 +36,15 @@
 import Setting from './modalPage/Setting'
 import AddLabel from './modalPage/AddLabel'
 import SetShortkey from './modalPage/SetShortKey'
+import Search from './modalPage/Search'
 
 export default {
   name: 'side-menu',
   components: {
     Setting,
     AddLabel,
-    SetShortkey
+    SetShortkey,
+    Search
   },
   data () {
     return {
diff --git a/src/components/modalPage/Search.vue b/src/components/modalPage/Search.vue
new file mode 100644
index 0000000..4bf8895
--- /dev/null
+++ b/src/components/modalPage/Search.vue
@@ -0,0 +1,82 @@
+<template>
+  <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
+      <v-card>
+        <v-toolbar dark color="primary">
+          <v-btn icon dark @click.native="dialog = false">
+            <v-icon>close</v-icon>
+          </v-btn>
+          <v-toolbar-title>Settings</v-toolbar-title>
+          <v-spacer></v-spacer>
+          <v-toolbar-items>
+            <v-btn dark flat @click.native="dialog = false">Save</v-btn>
+          </v-toolbar-items>
+        </v-toolbar>
+        <v-list three-line subheader>
+          <v-subheader>User Controls</v-subheader>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Content filtering</v-list-tile-title>
+              <v-list-tile-sub-title>Set the content filtering level to restrict apps that can be downloaded</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-content>
+              <v-list-tile-title>Password</v-list-tile-title>
+              <v-list-tile-sub-title>Require password for purchase or use password to restrict purchase</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+        <v-divider></v-divider>
+        <v-list three-line subheader>
+          <v-subheader>General</v-subheader>
+          <v-list-tile avatar>
+            <v-list-tile-action>
+              <v-checkbox v-model="notifications"></v-checkbox>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>Notifications</v-list-tile-title>
+              <v-list-tile-sub-title>Notify me about updates to apps or games that I downloaded</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-action>
+              <v-checkbox v-model="sound"></v-checkbox>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>Sound</v-list-tile-title>
+              <v-list-tile-sub-title>Auto-update apps at any time. Data charges may apply</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+          <v-list-tile avatar>
+            <v-list-tile-action>
+              <v-checkbox v-model="widgets"></v-checkbox>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>Auto-add widgets</v-list-tile-title>
+              <v-list-tile-sub-title>Automatically add home screen widgets</v-list-tile-sub-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </v-card>
+    </v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'search',
+  data () {
+    return {
+      dialog: false,
+      notifications: false,
+      sound: true,
+      widgets: false
+    }
+  },
+  mounted () {
+    let me = this
+    this.$bus.$on('showSearch', function (arg) {
+      me.dialog = true
+    })
+  }
+}
+</script>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 75676eb..e7fa4d9 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -24,7 +24,8 @@ import {
   VTextarea,
   VBadge,
   VMenu,
-  VForm
+  VForm,
+  VCheckbox
 } from 'vuetify'
 import 'vuetify/src/stylus/app.styl'
 
@@ -53,7 +54,8 @@ Vue.use(Vuetify, {
     VTextarea,
     VBadge,
     VMenu,
-    VForm
+    VForm,
+    VCheckbox
   },
   theme: {
     primary: '#ee44aa',
diff --git a/src/store.ts b/src/store.ts
index 577aad2..56535b5 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -8,7 +8,8 @@ export interface Note {
   type?: string,
   noteTitle?: string,
   noteContent?: string,
-  status?: string
+  status?: string,
+  color?: string
 }
 export interface State {
   noteList: Array<Note>,