update 1.4.0

wkei · Dec 26, 2017 · ebcdc1d · ebcdc1d
1 parent 04f59a9
commit ebcdc1d
Show file tree

Hide file tree

Showing 23 changed files with 91 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -24,17 +24,18 @@ A minimal Chrome / Firefox extension to help you learn Japanese words in each ne
   + Fixed bug in「帳」
   + Made font size bigger in "L"
 - `1.3.3` Fixed font style
-
+- `1.4.0`
+  + Fixed UI style
+  + Added voice feature
 
 ## TODO
 
 - [x] Add voice
 - [x] Night Mode
+- [x] Add voice
+- [ ] Mobile WPA word cards
 - [ ] Look for a new words data
-- [ ] Add voice
 - [ ] Add statistics
-- [ ] Add ON/OFF switch button
-- [ ] Mobile WPA word cards
 
 ## CREDIT
 

diff --git a/data/db.json b/data/db.json
diff --git a/source/index.html b/source/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
   <head>
     <meta charset="utf-8">
     <title>言葉 の Tab</title>

diff --git a/source/package.json b/source/package.json
@@ -1,6 +1,6 @@
 {
   "name": "the-tab-of-words",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "言葉 の Tab. A minimal extension to help you learn Japanese words in each new tab.",
   "author": "keiww <[email protected]>",
   "private": true,

diff --git a/source/src/App.vue b/source/src/App.vue
@@ -40,10 +40,14 @@ export default {
     fontSize (val, prevVal) {
       document.documentElement.classList.remove(prevVal)
       document.documentElement.classList.add(val)
+      document.body.classList.remove(prevVal)
+      document.body.classList.add(val)
     },
     theme (val, prevVal) {
       document.documentElement.classList.remove(prevVal)
       document.documentElement.classList.add(val)
+      document.body.classList.remove(prevVal)
+      document.body.classList.add(val)
     }
   },
   created () {

diff --git a/source/src/components/Book.vue b/source/src/components/Book.vue
@@ -11,8 +11,7 @@
               </h3>
               <span class='level'>N{{ item.level }}</span>
               <p class='spelling'>
-                <!-- <span class='hiragana' @click='playVoice(item.word)'>{{ item.hiragana || item.word }}</span> -->
-                <span class='hiragana'>{{ item.hiragana || item.word }}</span>
+                <a class='hiragana' @click='playVoice(item.word)'>{{ item.hiragana || item.word }}</a>
                 <span class='romaji' :class='{ show: showRomaji }'>{{ item.romaji }}</span>
               </p>
               <p class='meaning'>{{ item.meaning }}</p>
@@ -23,14 +22,14 @@
       </transition>
     </main>
     <Settings />
-    <!-- <Voice :word='wordToPlay' ref='voiceRef'/> -->
+    <Voice :word='wordToPlay' ref='voiceRef'/>
   </div>
 </template>
 
 <script>
 import bus from '@/utils/bus'
 import Settings from '@/components/Settings'
-// import Voice from '@/components/Voice'
+import Voice from '@/components/Voice'
 
 export default {
   data () {
@@ -40,9 +39,8 @@ export default {
     }
   },
   components: {
-    Settings
-    // ,
-    // Voice
+    Settings,
+    Voice
   },
   computed: {
     showRomaji () {
@@ -63,12 +61,11 @@ export default {
     },
     unhide (item) {
       bus.unhide(item)
+    },
+    playVoice (word) {
+      this.wordToPlay = word
+      this.$refs.voiceRef.play()
     }
-    // ,
-    // playVoice (word) {
-    //   this.wordToPlay = word
-    //   this.$refs.voiceRef.play()
-    // }
   }
 }
 </script>
@@ -144,7 +141,7 @@ export default {
     margin: .5em 0 0;
     .hiragana {
       margin-right: .5em;
-      /*cursor: pointer;*/
+      cursor: pointer;
     }
     .romaji {
       opacity: 0;
@@ -164,15 +161,9 @@ export default {
     right: .75em;
     bottom: .7em;
     padding: .7em;
-    color: color(var(--cyan) a(80%));
     line-height: 0;
     user-select: none;
-    .moon & {
-      color: color(var(--silver) a(80%));
-    }
-    .sunset & {
-      color: color(var(--lightGreen) a(80%));
-    }
+    opacity: .8;
   }
   .empty {
     position: fixed;

diff --git a/source/src/components/Card.vue b/source/src/components/Card.vue
@@ -1,34 +1,33 @@
 <template>
   <div class='card'>
     <div class='meta'>
-      <p class='romaji' :class='{ show: showRomaji }'>{{card.romaji || '&nbsp;'}}</p>
-      <!-- <p class='hiragana' @click='playVoice'>{{card.hiragana || card.word}}</p> -->
-      <p class='hiragana'>{{card.hiragana || card.word}}</p>
+      <span class='romaji' :class='{ show: showRomaji }'>{{card.romaji || '&nbsp;'}}</span>
+      <a class='hiragana' @click='playVoice'>{{card.hiragana || card.word}}</a>
+      <!-- <p class='hiragana'>{{card.hiragana || card.word}}</p> -->
     </div>
     <h1 class='word'>
       <a :href='searchUrl' target='_blank'>{{card.word}}</a>
     </h1>
     <p class='meaning'>{{card.meaning}}</p>
     <span class='level'>N{{card.level}}</span>
-    <!-- <Voice :word='card.word' ref='voiceRef' /> -->
+    <Voice :word='card.word' ref='voiceRef' />
   </div>
 </template>
 
 <script>
 import bus from '@/utils/bus'
-// import Voice from '@/components/Voice'
+import Voice from '@/components/Voice'
 
 export default {
   data () {
     return {
-      store: bus.store
-      // ,
-      // voice: ''
+      store: bus.store,
+      voice: ''
     }
   },
-  // components: {
-  //   Voice
-  // },
+  components: {
+    Voice
+  },
   computed: {
     showRomaji () {
       return bus.store.settings.showRomaji
@@ -39,13 +38,12 @@ export default {
     searchUrl () {
       return `http://jisho.org/search/${this.store.card.word}`
     }
+  },
+  methods: {
+    playVoice () {
+      this.$refs.voiceRef.play()
+    }
   }
-  // ,
-  // methods: {
-  //   playVoice () {
-  //     this.$refs.voiceRef.play()
-  //   }
-  // }
 }
 </script>
 
@@ -58,12 +56,17 @@ export default {
   font-size: 2rem;
   text-align: center;
   width: 80%;
+  .meta {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
   .hiragana, .romaji {
     margin: 0;
   }
-/* .hiragana {
+  .hiragana {
     cursor: pointer;
-  } */
+  }
   .romaji {
     opacity: 0;
     font-size: .8em;
@@ -79,14 +82,14 @@ export default {
   .meaning {
     max-width: 80%;
     margin: 1em auto;
-    font-weight: 100;
+    font-weight: 300;
   }
   .level {
     display: inline-block;
     padding: 0 1em;
     border-radius: .15em;
     font-size: .8em;
-    font-weight: 100;
+    font-weight: 300;
     color: var(--white);
     background: var(--inkBlue);
     .moon & {

diff --git a/source/src/components/Settings.vue b/source/src/components/Settings.vue
@@ -54,6 +54,9 @@ export default {
   text-align: right;
   font-weight: 100;
   user-select: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
   a {
     color: color(var(--cyan) a(80%));
     .sunset & {
@@ -68,7 +71,7 @@ export default {
     margin-top: .5em;
   }
   .btn {
-    display: block;
+    display: inline-block;
     margin-bottom: .5em;
     transition: color .3s;
     &.active {

diff --git a/source/src/components/Toolbar.vue b/source/src/components/Toolbar.vue
@@ -71,25 +71,19 @@ export default {
   .btn {
     padding: 0;
     margin-left: .8em;
-    color: var(--cyan);
     font-family: var(--fontSerif);
-    transition: color .3s, opacity .3s;
-    &.show {
-      color: var(--inkBlue);
-    }
     &.hide {
       opacity: 0;
       visibility: hidden;
     }
-    .moon & {
-      color: var(--silver);
-      &.show {
+    &.show {
+      .sunrise & {
+        color: var(--inkBlue);
+      }
+      .moon & {
         color: var(--white);
       }
-    }
-    .sunset & {
-      color: var(--lightGreen);
-      &.show {
+      .sunset & {
         color: var(--green);
       }
     }

diff --git a/source/src/components/Voice.vue b/source/src/components/Voice.vue
@@ -7,7 +7,10 @@
 </template>
 
 <script>
-const videoSourceHost = 'http://www.bing.com/translator/api/language/Speak?locale=ja-JP&gender=female&media=audio/mp3&text='
+// const videoSourceHost = 'http://www.bing.com/translator/api/language/Speak?locale=ja-JP&gender=female&media=audio/mp3&text='
+
+// const videoSourceHost = 'https://dict.youdao.com/dictvoice?le=jap&audio='
+const videoSourceHost = 'https://fanyi.baidu.com/gettts?lan=jp&spd=3&source=web&text='
 
 export default {
   props: ['word'],

diff --git a/source/src/main.js b/source/src/main.js
@@ -8,6 +8,8 @@ Vue.config.productionTip = false
 
 document.documentElement.classList.add(bus.store.settings.fontSize)
 document.documentElement.classList.add(bus.store.settings.theme)
+document.body.classList.add(bus.store.settings.fontSize)
+document.body.classList.add(bus.store.settings.theme)
 
 /* eslint-disable no-new */
 new Vue({

diff --git a/source/src/styles/base.css b/source/src/styles/base.css
@@ -34,7 +34,9 @@ html, body {
 }
 
 a {
+  outline: none;
   text-decoration: none;
+  border-bottom: 1px dotted transparent;
   .sunrise & {
     color: var(--inkBlue);
   }
@@ -44,6 +46,9 @@ a {
   .moon & {
     color: var(--grey);
   }
+  &:hover {
+    border-bottom: 1px dotted;
+  }
 }
 
 .transparent {
@@ -65,14 +70,24 @@ button {
   outline: none;
   cursor: pointer;
   line-height: 1;
+  transition: all .3s;
   .sunrise & {
-    color: var(--inkBlue);
-  }
-  .sunset & {
-    color: var(--green);
+    color: var(--cyan);
+    &:hover {
+      color: var(--inkBlue);
+    }
   }
   .moon & {
-    color: var(--grey);
+    color: var(--silver);
+    &:hover {
+      color: var(--white);
+    }
+  }
+  .sunset & {
+    color: var(--lightGreen);
+    &:hover {
+      color: var(--green);
+    }
   }
 }
 .fade-enter-active, .fade-leave-active {

diff --git a/source/src/styles/variables.js b/source/src/styles/variables.js
@@ -1,5 +1,5 @@
 module.exports = {
-  font: 'Avenir, Helvetica, Ubuntu, "Segoe UI", "Source Han Sans", "Source Han Sans JP", "Hiragino Sans", "WenQuanYi Micro Hei", "Microsoft Yahei", Arial, sans-serif',
+  font: 'Avenir, Ubuntu, "Helvetica Neue", "Source Han Sans", "Source Han Sans JP", sans-serif',
   fontSerif: '"Source Han Serif", "Source Han Serif JP", "MS Mincho", "Microsoft Yahei", "Times New Roman", serif',
   inkBlue: '#2c3e50',
   darkInk: 'rgb(43, 54, 64)',

diff --git a/source/static/data/words.json b/source/static/data/words.json
diff --git a/the-tab-of-words.crx b/the-tab-of-words.crx
diff --git a/the-tab-of-words/dist/index.html b/the-tab-of-words/dist/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset=utf-8><title>言葉 の Tab</title><link href=./static/css/app.27d10d5dc45a0b07324ab5dcf8e17696.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.263af93bcf494aa54437.js></script><script type=text/javascript src=./static/js/vendor.998f82f908877539ae00.js></script><script type=text/javascript src=./static/js/app.f15663e66d92908b05e9.js></script></body></html>
+<!DOCTYPE html><html lang=ja><head><meta charset=utf-8><title>言葉 の Tab</title><link href=./static/css/app.68f48f76fe428b808148c9c6702ea3da.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.60812a13a5b8df95efdd.js></script><script type=text/javascript src=./static/js/vendor.998f82f908877539ae00.js></script><script type=text/javascript src=./static/js/app.780b89c1cded53978871.js></script></body></html>
diff --git a/the-tab-of-words/dist/static/css/app.27d10d5dc45a0b07324ab5dcf8e17696.css b/the-tab-of-words/dist/static/css/app.27d10d5dc45a0b07324ab5dcf8e17696.css
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset=utf-8><title>言葉の Tab</title><link href=./static/css/app.27d10d5dc45a0b07324ab5dcf8e17696.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.263af93bcf494aa54437.js></script><script type=text/javascript src=./static/js/vendor.998f82f908877539ae00.js></script><script type=text/javascript src=./static/js/app.f15663e66d92908b05e9.js></script></body></html>
		<!DOCTYPE html><html lang=ja><head><meta charset=utf-8><title>言葉の Tab</title><link href=./static/css/app.68f48f76fe428b808148c9c6702ea3da.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=./static/js/manifest.60812a13a5b8df95efdd.js></script><script type=text/javascript src=./static/js/vendor.998f82f908877539ae00.js></script><script type=text/javascript src=./static/js/app.780b89c1cded53978871.js></script></body></html>