Merge pull request #2 from e-e-e/alpha-release

Alpha release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dat-library",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "author": "e-e-e <e-e-e@users.noreply.github.com>",
   "description": "A tool for searching, building and sharing distributed p2p libraries.",
   "license": "ISC",
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "babel-polyfill": "^6.23.0",
-    "dat-cardcat": "^0.2.21",
+    "dat-cardcat": "^0.3.0",
     "electron-updater": "^2.7.1",
     "element-ui": "^1.3.7",
     "lodash": "^4.17.4",

src/renderer/App.vue

@@ -2,41 +2,34 @@
   <div id="dat-library">
     <loader :loading="loading"/>
     <error :error="error"/>
-    <el-row type="flex" class="extra-light-grey-bg" align="middle" justify="space-around">
-      <el-col :span="16">
-        <el-menu :router="true" :default-active="$route.path" mode="horizontal">
-          <el-menu-item index="/search">browse</el-menu-item>
-          <el-menu-item index="/libraries">libraries</el-menu-item>
-          <el-menu-item index="/">info</el-menu-item>
-          <!-- <el-menu-item index="/reading-lists">reading lists</el-menu-item> -->
-        </el-menu>
-      </el-col>
-      <el-col :span="8">
-        <search-nav />
-      </el-col>
-    </el-row>
+    <main-nav/>
     <router-view></router-view>
-    <download-progress class="bottom-bar"/>
+    <transition name="fade">
+      <download-progress v-show="showProgress" :downloadStat="downloadStat" class="bottom-bar"/>
+    </transition>
   </div>
 </template>
 
 <script>
   import { mapState, mapActions } from 'vuex';
   import loader from 'components/loader';
   import error from 'components/error';
-  import searchNav from 'components/searchNav';
+  import mainNav from 'components/mainNav';
   import downloadProgress from 'components/downloadProgress';
 
   export default {
     name: 'App',
     components: {
       error,
       loader,
-      searchNav,
+      mainNav,
       downloadProgress,
     },
     data() {
-      return {};
+      return {
+        downloadTimeout: null,
+        showProgress: false,
+      };
     },
     created() {
       // initialise catalog on app start
@@ -48,8 +41,21 @@
         // .then(() => this.getAvailableReadingLists())
         .then(() => this.getAuthorLetters());
     },
+    beforeDestroy() {
+      if (this.timeout) clearTimeout(this.timeout);
+    },
+    watch: {
+      downloadStat() {
+        if (!this.downloadStat) return;
+        if (this.timeout) clearTimeout(this.timeout);
+        this.showProgress = true;
+        this.timeout = setTimeout(() => {
+          this.showProgress = false;
+        }, 1000);
+      },
+    },
     computed: {
-      ...mapState(['dats', 'loading', 'error', 'route']),
+      ...mapState(['dats', 'loading', 'error', 'route', 'downloadStat']),
     },
     methods: {
       ...mapActions(['loadCatalog', 'getDats', 'getAvailableReadingLists', 'getAuthorLetters']),
@@ -59,38 +65,19 @@
 
 <style src="assets/fonts/fonts.scss"></style>
 <style src="assets/main.scss" lang="scss"></style>
-<style lang="scss">
-  // body {
-  //   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-  //   margin: 0;
-  //   padding: 0;
-  //   width:100%;
-  // }
-
+<style lang="scss" scoped>
   .bottom-bar {
     position: fixed;
     right: 0;
     bottom: 0;
     left: 0;
   }
 
-  .extra-light-grey-bg {
-    background-color: #EFF2F7;
+  .fade-leave-active {
+    transition: opacity .5s;
   }
-  // #dat-library {
-  //   display: flex;
-  //   flex-direction: row;
-  //   align-items: stretch;
-  //   flex-wrap: nowrap;
-  //   justify-content: center;
-  //   min-height: 100%;
-  //   width: 100%;
 
-  //   main {
-  //     flex: 1;
-  //     min-height: 100%;
-  //     margin: 1rem;
-  //     overflow: hidden;
-  //   }
-  // }
+  .fade-leave-to {
+    opacity: 0;
+  }
 </style>

src/renderer/assets/main.scss

@@ -20,3 +20,11 @@ body, html {
   width: 100%;
   height: 100%;
 }
+
+.capitalised {
+  text-transform: capitalize;
+}
+
+.smallprint {
+  font-size: 0.6rem;
+}

src/renderer/components/addFile.vue

@@ -26,7 +26,10 @@
     props: {
       defaultDat: {
         type: String,
-      }
+      },
+      onSubmit: {
+        type: Function,
+      },
     },
     data() {
       return {
@@ -44,12 +47,13 @@
       ...mapActions(['addFileToDat', 'getDatStats']),
       submit(event) {
         if (event) event.preventDefault();
+        if (this.onSubmit) this.onSubmit();
         const { author, title, dat, file, defaultDat } = this;
         this.addFileToDat({
           author,
           title,
           dat: defaultDat || dat,
-          file
+          file,
         })
         .then(() => this.getDatStats())
         .then(() => this.$notify({

src/renderer/components/authorList.vue

@@ -1,18 +1,16 @@
 <template>
   <el-table
+    id="authorList"
     :data="data"
     empty-text="..."
     stripe
     style="width: 100%"
+    @row-click="clickedRow"
   >
     <el-table-column
       prop="author"
       label="Name"
-    >
-      <template scope="scope">
-        <a v-on:click="action(scope.row.author)">{{scope.row.author}}</a>
-      </template>
-    </el-table-column>
+    />
     <el-table-column
       prop="count"
       label="Texts"
@@ -34,5 +32,18 @@
         required: true,
       },
     },
+    methods: {
+      clickedRow(row) {
+        this.action(row.author);
+      },
+    },
 };
 </script>
+<style lang="scss">
+  // total hack to get pointer cursor
+  #authorList .el-table__row {
+    &:hover {
+      cursor: pointer !important;
+    }
+  }
+</style>

src/renderer/components/datBook.vue

@@ -69,8 +69,9 @@
         this.download({ author: this.book.author });
       },
       fileIcon(file) {
+        if (file.downloaded) return 'el-icon-check';
         if (this.downloading) return 'el-icon-loading';
-        return file.downloaded ? 'el-icon-check' : 'el-icon-minus';
+        return 'el-icon-minus';
       },
     },
 };

src/renderer/components/datImportField.vue

@@ -1,5 +1,11 @@
 <template>
   <el-form ref="form">
+    <p>
+    Adding a remote library will, at first, only download that library's basic catalogue for searching. You can then choose to download the entire library or only selected titles or authors within it.
+    </p>
+    <p>
+    By downloading a library you also help contribute to the hosting and distribution of that library.
+    </p>
     <el-form-item label="Library Key">
       <el-input name="key" v-model="key" placeholder="Dat Key"></el-input><br />
     </el-form-item>
@@ -28,6 +34,7 @@
       },
     },
     created() {
+      console.log('created', this.libraryInfo);
       this.key = this.libraryInfo.key;
       this.name = this.libraryInfo.name;
     },
@@ -55,6 +62,6 @@
 
 <style lang="scss" scoped>
   form {
-    margin: 1rem;
+    margin: 0;
   }
 </style>

src/renderer/components/datNav.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-  import { mapState, mapActions } from 'vuex';
+  import { mapState } from 'vuex';
 
   // TODO: make this fixed, independent of main areas scroll.
 
@@ -26,7 +26,8 @@
         },
         set() {
           this.$store.commit('selectDats', []);
-          this.$store.dispatch('getAuthorLetters');
+          this.$store.dispatch('getAuthorLetters')
+            .then(() => this.$store.dispatch('refreshLastSearch'));
         },
       },
       selected: {
@@ -35,7 +36,8 @@
         },
         set(value) {
           this.$store.commit('selectDats', value);
-          this.$store.dispatch('getAuthorLetters');
+          this.$store.dispatch('getAuthorLetters')
+            .then(() => this.$store.dispatch('refreshLastSearch'));
         },
       },
     },
@@ -47,5 +49,6 @@
 <style lang="scss" scoped>
 .el-checkbox-group label.el-checkbox {
   margin-left: 0px;
+  display: block;
 }
 </style>

src/renderer/components/downloadProgress.vue

@@ -1,36 +1,57 @@
 <template>
-  <el-row v-show="currFile">
-    <el-col :span="8">
+  <div v-show="currFile" class='status-bar'>
+    <div class="smallprint">
       {{ currFile }}
-    </el-col>
-    <el-col :span="16">
+    </div>
+    <div class="progress">
       <el-progress :text-inside="true" :stroke-width="18" :percentage="Math.round(currPercentage)" status="success"></el-progress>
-    </el-col>
-  </el-row>
+    </div>
+  </div>
 </template>
 
 <script>
-  import { mapState } from 'vuex';
+  import { isFinite } from 'lodash';
 
   export default {
     name: 'downloadProgress',
     components: {},
+    props: {
+      downloadStat: {
+        type: Object,
+      },
+    },
     data() {
       return {};
     },
     computed: {
-      ...mapState(['loading', 'error', 'route', 'downloadStat']),
       currFile() {
-        return (this.downloadStat && this.downloadStat.file) ? this.downloadStat.file : undefined;
+        return this.downloadStat && this.downloadStat.file;
       },
       currPercentage() {
         return (this.downloadStat
           && this.downloadStat.progress
-          && !isNaN(this.downloadStat.progress)
+          && isFinite(this.downloadStat.progress)
           && this.downloadStat.progress <= 100)
         ? this.downloadStat.progress
         : 0;
       },
     },
 };
 </script>
+
+<style lang="scss" scoped>
+  .status-bar {
+    background-color: white;
+    display: flex;
+    height: 2rem;
+    flex-direction: column;
+    padding: 0.5rem;
+    border: none;
+    border-top: black solid 0.1rem;
+    div.smallprint {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>

src/renderer/components/libraryList.vue

@@ -21,7 +21,7 @@
         <el-button @click="confirmDeleteVisible = false">Not now</el-button>
       </el-dialog>
       <el-dialog title="Add a file?" :visible.sync="addFileDialogIsVisible">
-        <add-file :defaultDat="selectedDat"></add-file>
+        <add-file :defaultDat="selectedDat" :onSubmit="() => addFileDialogIsVisible = false"></add-file>
       </el-dialog>
       <library-stats :dat="dat"/>
     </el-collapse-item>