Merge pull request #3 from jingchenxu/win

Win
jingchenxu · Sep 21, 2018 · 25acc3a · 25acc3a
2 parents 2a79bb9 + 426b6a7
commit 25acc3a
Show file tree

Hide file tree

Showing 31 changed files with 482 additions and 793 deletions.
diff --git a/output.js b/output.js
diff --git a/package.json b/package.json
@@ -25,7 +25,9 @@
     },
     "win": {
       "icon": "./public/win.ico",
-      "publish": ["github"]
+      "publish": [
+        "github"
+      ]
     },
     "nsis": {
       "oneClick": false,
@@ -43,31 +45,31 @@
     "build-win": "build --win --x64"
   },
   "dependencies": {
-    "mysql": "^2.16.0",
-    "nedb": "^1.8.0",
-    "register-service-worker": "^1.0.0",
-    "vue": "^2.5.17",
-    "vue-class-component": "^6.0.0",
-    "vue-property-decorator": "^7.0.0",
-    "vue-router": "^3.0.1",
-    "vuetify": "^1.0.19",
-    "vuex": "^3.0.1",
-    "bignumber.js": "^4.1.0",
-    "readable-stream": "^2.3.6",
-    "safe-buffer": "^5.1.2",
-    "sqlstring": "^2.3.1",
     "async": "^0.2.10",
+    "bignumber.js": "^4.1.0",
     "binary-search-tree": "^0.2.5",
-    "localforage": "^1.3.0",
-    "mkdirp": "^0.5.1",
-    "underscore": "^1.4.4",
     "core-util-is": "^1.0.2",
     "immediate": "^3.0.6",
     "inherits": "^2.0.3",
     "isarray": "^1.0.0",
     "lie": "^3.1.1",
+    "localforage": "^1.3.0",
+    "mkdirp": "^0.5.1",
+    "mysql": "^2.16.0",
+    "nedb": "^1.8.0",
     "process-nextick-args": "^2.0.0",
-    "util-deprecate": "^1.0.2"
+    "readable-stream": "^2.3.6",
+    "register-service-worker": "^1.0.0",
+    "safe-buffer": "^5.1.2",
+    "sqlstring": "^2.3.1",
+    "underscore": "^1.4.4",
+    "util-deprecate": "^1.0.2",
+    "vue": "^2.5.17",
+    "vue-class-component": "^6.0.0",
+    "vue-property-decorator": "^7.0.0",
+    "vue-router": "^3.0.1",
+    "vuetify": "^1.0.19",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.0.0-beta.49",

diff --git 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
@@ -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
@@ -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,11 +103,16 @@
         <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>
-          <ColorSelector/>
+          更改颜色
         </v-tooltip>
         <v-btn small icon>
           <v-icon small color="grey">image</v-icon>
@@ -74,8 +137,8 @@
 </template>
 
 <script>
-const {ipcRenderer} = window.require('electron')
 import ColorSelector from './ColorSelector'
+const { ipcRenderer } = window.require('electron')
 
 export default {
   name: 'add-card',
@@ -84,19 +147,72 @@ export default {
   },
   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 () {
@@ -105,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'
     }
   }
 }
@@ -140,5 +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/ColorSelector.vue b/src/components/ColorSelector.vue
@@ -20,5 +20,3 @@ export default {
   background-color: grey;
 }
 </style>
-
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,5 +20,3 @@ export default {
		background-color: grey;
		}
		</style>