Работа над LoaderPage

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -1,13 +1,16 @@
 <template>
     <div class="main">
         <div class="part">
-            
+            <span class="greeting bold-font">{{ title }}</span>
+            <span class="greeting">Добро пожаловать!</span>
+            <span class="greeting">Поддерживаются форматы: fb2, fb2.zip, html, txt</span>
         </div>
-        <div class="part">
+        <div class="part center">
-            
+            <el-input ref="input" placeholder="URL книги" v-model="bookUrl">
+                <el-button slot="append" icon="el-icon-search" @click="submitUrl"></el-button>
+            </el-input>
         </div>
         <div class="part bottom">
-            
         </div>
     </div>
 </template>
@@ -20,13 +23,40 @@ import Component from 'vue-class-component';
 export default @Component({
 })
 class LoaderPage extends Vue {
+    bookUrl = null;
+
     created() {
+        this.commit = this.$store.commit;
+        this.dispatch = this.$store.dispatch;
+        this.config = this.$store.state.config;
     }
 
+    mounted() {
+        //недостатки сторонних ui
+        this.$refs.input.$refs.input.addEventListener('keyup', (event) => {
+            if (event.key == 'Enter')
+                this.submitUrl();
+        });
+    }
+
+    activated() {
+        this.$refs.input.focus();
+    }
+
+    get title() {
+        if (this.config.mode == 'omnireader')
+            return 'Omni Reader - браузерная онлайн-читалка.';
+        return 'Универсальная читалка книг и ресурсов интернета.';
+
+    }
+
+    submitUrl() {
+        if (this.bookUrl)
+            //loadUrl()
+        ;
+    }
 }
 //-----------------------------------------------------------------------------
-//    justify-content: space-between;
-
 </script>
 <style scoped>
 .main {
@@ -35,7 +65,6 @@ class LoaderPage extends Vue {
     flex-direction: column;
 }
 
-
 .part {
     flex: 1;
     display: flex;
@@ -44,8 +73,25 @@ class LoaderPage extends Vue {
     align-items: center;
 }
 
+.greeting {
+    font-size: 130%;
+    line-height: 170%;
+}
+
+.bold-font {
+    font-weight: bold;
+}
+
+.center {
+    justify-content: flex-start;
+    padding: 0 5px 0 5px;
+}
+
 .bottom {
     justify-content: flex-end;
 }
 
+.el-input {
+    max-width: 600px;
+}
 </style>

client/components/Reader/Reader.vue

@@ -94,6 +94,9 @@ class Reader extends Vue {
     get componentActive() {
         let result = '';
 
+        if (this.loaderActive)
+            result = 'LoaderPage';
+
         if (!result) {
             this.commit('reader/setLoaderActive', true);
             result = 'LoaderPage';

client/element.js

@@ -47,12 +47,16 @@ import './theme/header.css';
 import ElMain from 'element-ui/lib/main';
 import './theme/main.css';
 
+import ElInput from 'element-ui/lib/input';
+import './theme/input.css';
+
 const ElNotification = () => import('element-ui/lib/notification');
 import './theme/notification.css';
 
 const components = {
     ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
+    ElInput,
     ElNotification
 };