From 198f3adc3f3651c55b0f10eab95914fbc694f3a5 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Tue, 8 Jan 2019 00:19:21 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B0=D1=87=D0=B0=D1=82=D0=B0=20=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D0=BD=D0=B0=D0=B4=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=BE=D0=BC=20?=
 =?UTF-8?q?Reader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/App.vue           | 12 ++++--
 client/components/Reader/Reader.vue | 57 ++++++++++++++++++++++++++++-
 client/element.js                   | 10 ++++-
 3 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/client/components/App.vue b/client/components/App.vue
index 0d113fdb..8eb93ab2 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -35,7 +35,7 @@
             </el-menu>
         </el-aside>
 
-        <el-main v-if="showMain">
+        <el-main v-if="showMain" :style="{padding: (isReaderActive ? 0 : '5px')}">
             <keep-alive>
                 <router-view></router-view>
             </keep-alive>
@@ -132,8 +132,12 @@ class App extends Vue {
         return (this.mode != 'reader' && this.mode != 'omnireader');
     }
 
+    get isReaderActive() {
+        return this.rootRoute == '/reader';
+    }
+
     get showMain() {
-        return (this.showAsideBar || this.rootRoute == '/reader');
+        return (this.showAsideBar || this.isReaderActive);
     }
 }
 //-----------------------------------------------------------------------------
@@ -161,9 +165,9 @@ class App extends Vue {
     background-color: #ccc;
     color: #000;
 }
-  
+
 .el-main {
-    padding: 5px;
+    padding: 0;
     background-color: #E6EDF4;
     color: #000;
 }
diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index 525e5e23..c956b1f4 100644
--- a/client/components/Reader/Reader.vue
+++ b/client/components/Reader/Reader.vue
@@ -1,6 +1,18 @@
 <template>
     <el-container>
-        Раздел Reader в разработке
+        <el-header height='50px'>
+            <el-button plain class="tool-button" @click="doBack"><i class="el-icon-back"></i></el-button>
+            <div class="space"></div>
+            <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
+            <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
+            <div class="space"></div>
+            <el-button plain class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
+
+
+        </el-header>
+
+        <el-main>
+        </el-main>
     </el-container>
 </template>
 
@@ -15,6 +27,49 @@ class Reader extends Vue {
     created() {
     }
 
+    doBack() {
+    }
 }
 //-----------------------------------------------------------------------------
+//, .tool-button:focus, .tool-button:active, .tool-button:hover
 </script>
+
+<style scoped>
+i {
+    font-size: 240%;
+}
+
+.el-container {
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+
+.el-header {
+    padding-left: 7px;
+    background-color: #1B695F;
+    color: #000;
+}
+  
+.el-main {
+    padding: 0;
+    margin: 0;
+    background-color: #EBE2C9;
+    color: #000;
+}
+
+.tool-button {
+    margin: 0;
+    padding: 0;
+    background-color: #E6EDF4;
+    margin-top: 5px;
+    height: 38px;
+    width: 38px;
+    border: 0;
+}
+
+.space {
+    width: 10px;
+    display: inline-block;
+}
+</style>
\ No newline at end of file
diff --git a/client/element.js b/client/element.js
index 0eae2877..3e0283b9 100644
--- a/client/element.js
+++ b/client/element.js
@@ -23,6 +23,9 @@ import './theme/menu-item.css';
 import ElButton from 'element-ui/lib/button';
 import './theme/button.css';
 
+import ElCheckbox from 'element-ui/lib/checkbox';
+import './theme/checkbox.css';
+
 import ElTabs from 'element-ui/lib/tabs';
 import './theme/tabs.css';
 
@@ -35,6 +38,9 @@ import './theme/container.css';
 import ElAside from 'element-ui/lib/aside';
 import './theme/aside.css';
 
+import ElHeader from 'element-ui/lib/header';
+import './theme/header.css';
+
 import ElMain from 'element-ui/lib/main';
 import './theme/main.css';
 
@@ -42,8 +48,8 @@ const ElNotification = () => import('element-ui/lib/notification');
 import './theme/notification.css';
 
 const components = {
-    ElMenu, ElMenuItem, ElButton, ElTabs, ElTabPane,
-    ElContainer, ElAside, ElMain,
+    ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane,
+    ElContainer, ElAside, ElMain, ElHeader,
     ElNotification
 };