Работа над HistoryPage

client/components/Reader/HistoryPage/HistoryPage.vue

@@ -23,7 +23,7 @@
                         sortable
                         >
                         <template slot="header" slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
-                            Время<br>просм.
+                            <span style="font-size: 90%">Время<br>просм.</span>
                         </template>
                         <template slot-scope="scope"><!-- eslint-disable-line vue/no-unused-vars -->
                             <div class="desc" @click="loadBook(scope.row.url)">
@@ -69,7 +69,8 @@
                             <template slot-scope="scope">
                                 <el-button
                                     size="mini"
-                                    @click="handleDel(scope.row.key)">X
+                                    style="width: 30px; padding: 7px 0 7px 0; margin-left: 4px"
+                                    @click="handleDel(scope.row.key)"><i class="el-icon-close"></i>
                                 </el-button>
                             </template>
                         </el-table-column>
@@ -187,8 +188,8 @@ class HistoryPage extends Vue {
     keyHook(event) {
         if (event.type == 'keydown' && event.code == 'Escape') {
             this.close();
-            return true;
         }
+        return true;
     }
 }
 //-----------------------------------------------------------------------------

client/components/Reader/Reader.vue

@@ -379,8 +379,15 @@ class Reader extends Vue {
             if (this.$refs.page && this.$refs.page.keyHook)
                 handled = this.$refs.page.keyHook(event);
 
-            if (!handled && event.type == 'keydown' && event.code == 'Escape') {
-                this.loaderToggle();
+            if (!handled && event.type == 'keydown') {
+                switch (event.code) {
+                    case 'Escape':
+                        this.loaderToggle();
+                        break;
+                    case 'KeyH':
+                        this.historyToggle();
+                        break;
+                }
             }
         }
     }

client/components/share/Window.vue

@@ -2,6 +2,7 @@
     <div class="window">
         <div class="header">
             <span class="header-text"><slot name="header"></slot></span>
+            <span class="close-button" @click="close"><i class="el-icon-close"></i></span>
         </div>
         <slot></slot>
     </div>
@@ -15,7 +16,8 @@ import Component from 'vue-class-component';
 export default @Component({
 })
 class Window extends Vue {
-    created() {
+    close() {
+        this.$emit('close');
     }
 
 }
@@ -35,12 +37,23 @@ class Window extends Vue {
 
 .header {
     display: flex;
+    justify-content: flex-end;
     align-items: center;
     height: 40px;
 }
 
 .header-text {
+    flex: 1;
     margin-left: 10px;
     margin-right: 10px;
 }
+
+.close-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+}
 </style>