Merge branch '0.4'

TODO.md

@@ -2,11 +2,16 @@
 
 - [ ] add dictionary
 - [ ] add search in home
-- [ ] set up vue-router with animation
-- [ ] fix and improve highlight
-- [ ] reduce build size
-- [ ] add last card in home grid for book add button
-- [ ] create theme
+- [ ] swip transtition
+- [ ] fix app icon
+- [x] fix : highlight not loading 
+- [x] fix : if cover not found replace it with default cover
+- [x] feature : Themes ( dark, tan and light theme added)
+- [x] fix : click lisnter in rendition for navigation (buttons removed)
+- [x] fix : add threshold value for wheel event  
+- [x] fix : bubble goes out of page 
+- [x] fix : bookmark titles
+- [x] feature : sliderbar tooltip now show cuurent toc insted of percentage
 
 # v0.3.0
 

package.json

@@ -104,11 +104,9 @@
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "inject-loader": "^4.0.1",
-    "less": "^3.9.0",
-    "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.5.0",
     "node-loader": "^0.6.0",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
     "prettier": "^1.17.0",
     "purgecss-webpack-plugin": "^1.5.0",
     "sass-loader": "^7.1.0",

src/renderer/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div id="app" ref="app" class="default">
 		<router-view v-loading="!isReady" />
 	</div>
 </template>
@@ -13,6 +13,7 @@ export default {
   data() {
     return {
       isReady: false,
+      theme: 'light'
     };
   },
 
@@ -32,19 +33,80 @@ export default {
     else{
         this.isReady = true;
     }
+    
+    this.$bus.on('theme-change',(theme)=>{
+      this.$refs.app.className = "";
+      this.$refs.app.classList.add(theme);
+
+      this.$store.commit('setTheme', theme);
+    });
   },
 };
 </script>
 
-<style>
+<style lang="scss" scoped>
+@import './assets/style';
+
+#app{
+  width: 100%;
+  height: 100%;
+  border-radius: $border-radius;
+}
+
+</style>
+
+
+<style lang="scss">
 ::-webkit-scrollbar {
   display: none;
 }
 
 html,
 body {
   margin: 0px;
+  width: 100%;
+  height: 100%;  
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
+.el-container {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  left: 0px;
+}
+
+.el-main {
   width: 100%;
   height: 100%;
+  padding: 0px;
+}
+
+.el-button {
+  border: none;
+}
+
+.el-table , .el-table *, .el-radio-button__inner,
+.el-tree, .el-button {
+background: inherit !important;
+color: inherit !important;
+}
+
+.default{
+  background: #fff;
+  color: #555;
+}
+
+.dark{
+  background: #444;
+  color: #eee;
 }
+
+.tan{
+  background: #fdf6e3;
+  color: #002b36;
+}
+
 </style>

src/renderer/assets/style.scss

@@ -0,0 +1,3 @@
+$border-radius: 4px;
+$margin: 4px;
+$padding: 4px;

src/renderer/components/Home/Grid.vue

@@ -3,7 +3,12 @@
 		<div v-for="book in bookList" :key="book.id">
 			<router-link :to="{ name: 'Reader', params: { id:book.id } }">
 				<el-card ref="card" shadow="hover" class="box-card" :body-style="{ padding: '0px' }">
-					<el-image :src="book.coverPath" :fit="'fill'" />
+					<el-image :src="book.coverPath" :fit="'fill'">
+						<div slot="error" class="image-slot">
+							<el-image :src="require('../../assets/default-cover.png')" :fit="'fill'">              
+							</el-image>
+						</div>
+					</el-image>
 					<div class="title" :style="{ background: book.bgColorFromCover }">
 						{{ trunc(book.title,30) }}
 					</div>
@@ -19,6 +24,7 @@
  */
 
 export default {
+
   name: 'Grid',
 
   props: {
@@ -50,6 +56,10 @@ export default {
       type: Array,
       default: () => {},
     },
+    defaultCover: {
+      type: String,
+      default: 'src/renderer/assets/default-cover.jpg'
+    }
   },
 
   data() {
@@ -194,5 +204,7 @@ export default {
   align-content: center;
   text-align: center;
   color: #ffffff;
+  position: relative;
+  top: -3px;
 }
 </style>