Merge pull request #36 from rule110-io/v0.2.1-beta

V0.2.1 beta
rule110-io · Dec 15, 2020 · 60e7854 · 60e7854
2 parents 9ab74fb + 5363d8d
commit 60e7854
Show file tree

Hide file tree

Showing 56 changed files with 16,454 additions and 729 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    "version": "0.2.1-beta",
+    "configurations": [
+        {
+            "name": "Wails: build debug",
+            "type": "go",
+            "request": "launch",
+            "mode": "exec",
+            "program": "${workspaceFolder}/build/surge",
+            "preLaunchTask": "wails_debug_build",
+            "env": {},
+            "args": []
+        }
+    ]
+}
diff --git a/.vscode/task.json b/.vscode/task.json
@@ -0,0 +1,10 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "wails_debug_build",
+            "type": "shell",
+            "command": "wails build -d"
+        }
+    ]
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -2,7 +2,7 @@
   "name": "surge",
   "author": "Christian Busch<[email protected]>",
   "private": true,
-  "version": "0.2.0-beta",
+  "version": "0.2.1-beta",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -25,6 +25,7 @@
     "vue-chartjs": "^3.5.0",
     "vue-clamp": "^0.3.1",
     "vue-clickaway": "^2.2.2",
+    "vue-clipboard2": "^0.3.1",
     "vue-feather": "^1.0.1",
     "vue-filter-pretty-bytes": "^0.1.5",
     "vue-lodash": "^2.1.2",
@@ -41,9 +42,9 @@
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.2.1",
     "eventsource-polyfill": "^0.9.6",
-    "node-sass": "^4.14.1",
+    "node-sass": "^5.0.0",
     "prerender-spa-plugin": "^3.4.0",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^10.1.0",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.11",
     "webpack-hot-middleware": "^2.25.0"

diff --git a/frontend/src/assets/scss/_main.scss b/frontend/src/assets/scss/_main.scss
@@ -180,10 +180,35 @@ b {
     font-weight: normal;
     display: table-cell;
     padding: 0 $padding-small $padding-micro $padding-small;
-    vertical-align: middle;
     font-weight: 500;
     font-size: $fz-md;
     font-family: "Roboto";
+    transition: $transition-1;
+
+    &-action {
+      position: absolute;
+      top: 6px;
+      height: 15px;
+      width: 15px;
+      transition: $transition-1;
+      margin-left: $padding-xs;
+
+      &_asc {
+        transform: scaleY(-1);
+      }
+    }
+
+    &_active {
+      color: $primary !important;
+    }
+
+    &_sortable {
+      cursor: pointer;
+
+      &:hover {
+        color: $primary !important;
+      }
+    }
 
     @include dark-theme {
       color: color(dark, text-light);

diff --git a/frontend/src/components/File/FileAvatar/FileAvatar.scss b/frontend/src/components/File/FileAvatar/FileAvatar.scss
@@ -13,6 +13,9 @@
 
     &_small {
       canvas {
+        position: absolute;
+        left: -4px;
+        top: -4px;
         height: 35px;
         width: 35px;
       }

diff --git a/frontend/src/components/File/FileAvatar/FileAvatar.vue b/frontend/src/components/File/FileAvatar/FileAvatar.vue
@@ -25,7 +25,7 @@ export default {
     },
     scale: {
       type: Number,
-      default: 5,
+      default: 15,
     },
     type: {
       type: String,
@@ -44,8 +44,6 @@ export default {
       const avatar = createIcon({
         // All options are optional
         seed: this.seeder, // seed used to generate icon data, default: random
-        bgcolor: "#fff", // choose a different background color, default: white
-        color: "#02d2b3",
         size: this.size, // width/height of the icon in blocks, default: 10
         scale: this.scale, // width/height of each block in pixels, default: 5
       });

diff --git a/frontend/src/components/File/FileChunks/FileChunks.scss b/frontend/src/components/File/FileChunks/FileChunks.scss
@@ -2,18 +2,19 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  width: 156px;
 
   &__title {
     text-align: center;
-    margin-bottom: $padding-micro;
   }
 
   &__progress {
-    width: 156px;
+    width: 100%;
     height: 12px;
     position: relative;
     display: flex;
     align-items: center;
     margin: 0 auto;
+    margin-top: $padding-micro;
   }
 }
diff --git a/frontend/src/components/File/FileChunks/FileChunks.vue b/frontend/src/components/File/FileChunks/FileChunks.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="file-chunks">
     <div class="file-chunks__title text_wrap_none">
+      <template v-if="file.IsMissing">
+        Missing
+      </template>
+      <template v-else-if="file.IsHashing">
+        Hashing
+      </template>
       <template
-        v-if="!file.IsDownloading && !file.IsUploading && !file.IsPaused"
+        v-else-if="!file.IsDownloading && !file.IsUploading && !file.IsPaused"
       >
         Finished
       </template>
@@ -15,6 +21,7 @@
       <template v-else> Downloading: {{ progress.toFixed(2) }}% </template>
     </div>
     <canvas
+      v-if="file.IsDownloading || file.IsPaused"
       class="file-chunks__progress"
       ref="canvas"
       width="156"

diff --git a/frontend/src/components/File/FileHash/FileHash.scss b/frontend/src/components/File/FileHash/FileHash.scss
@@ -1,3 +1,55 @@
 .file-hash {
-  width: 205px;
+  width: 160px;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &:after {
+    position: absolute;
+    top: -2px;
+    left: 0;
+    display: inline-block;
+    color: $primary;
+    white-space: nowrap;
+    text-align: center;
+    transform: translate3d(-50%, 0, 0);
+    -webkit-backface-visibility: hidden;
+    opacity: 0.001;
+    content: attr(data-label);
+    font-size: $fz-sm;
+  }
+
+  &_active {
+    &:after {
+      animation: floatup 0.5s ease-in-out;
+    }
+  }
+
+  &:hover & {
+    &__icon {
+      color: $primary;
+    }
+  }
+
+  &__icon {
+    height: 14px;
+    width: 14px;
+    position: relative;
+    transition: $transition-1;
+    margin-right: $padding-micro;
+  }
+
+  &__text {
+    flex: 1;
+  }
+}
+
+@keyframes floatup {
+  20% {
+    opacity: 0.999;
+  }
+  100% {
+    transform: translate3d(-50%, -17px, 0);
+  }
 }
diff --git a/frontend/src/components/File/FileHash/FileHash.vue b/frontend/src/components/File/FileHash/FileHash.vue
@@ -1,13 +1,18 @@
 <template>
   <div
-    class="file-hash text_wrap_none"
+    class="file-hash"
+    :class="copied ? 'file-hash_active' : null"
+    data-label="Copied"
     v-tooltip="{
-      content: hash,
+      content: 'Click to copy to clipboard',
       placement: 'bottom-start',
       offset: 5,
     }"
+    v-clipboard:copy="hash"
+    v-clipboard:success="onCopy"
   >
-    {{ hash }}
+    <feather class="file-hash__icon" type="copy"></feather>
+    <div class="file-hash__text text_wrap_none">{{ hash }}</div>
   </div>
 </template>
 
@@ -24,5 +29,15 @@ export default {
       default: "",
     },
   },
+  data: () => {
+    return {
+      copied: false,
+    };
+  },
+  methods: {
+    onCopy() {
+      this.copied = !this.copied;
+    },
+  },
 };
 </script>
diff --git a/frontend/src/components/File/FileInfo/FileInfo.scss b/frontend/src/components/File/FileInfo/FileInfo.scss
@@ -38,6 +38,26 @@
       color: $primary !important;
       cursor: default;
     }
+
+    &_error {
+      color: $error !important;
+      cursor: default;
+    }
+
+    &_alert {
+      color: white !important;
+      cursor: default;
+      animation: spinner 2.5s linear infinite;
+
+      @keyframes spinner {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    }
   }
 
   &__icon {

diff --git a/frontend/src/components/File/FileInfo/FileInfo.vue b/frontend/src/components/File/FileInfo/FileInfo.vue
@@ -2,22 +2,44 @@
   <div class="file-info">
     <template v-if="icon">
       <feather
-        v-if="!file.IsPaused && file.IsDownloading"
-        class="file-info__control"
-        type="pause-circle"
-        @click.native="pause(file.FileHash)"
+        v-if="file.IsMissing"
+        class="file-info__control file-info__control_error"
+        type="alert-circle"
+        v-tooltip="{
+          content: 'Not found on disk!',
+          placement: 'bottom-start',
+          offset: 5,
+        }"
       ></feather>
       <feather
-        v-if="file.IsPaused"
-        class="file-info__control"
-        type="play-circle"
-        @click.native="continueDownload(file.FileHash)"
-      ></feather>
-      <feather
-        v-if="!file.IsPaused && !file.IsDownloading"
-        class="file-info__control file-info__control_active"
-        type="check-circle"
+        v-else-if="file.IsHashing"
+        class="file-info__control file-info__control_alert"
+        type="loader"
+        v-tooltip="{
+          content: 'Getting ready for sharing, please wait!',
+          placement: 'bottom-start',
+          offset: 5,
+        }"
       ></feather>
+      <template v-else>
+        <feather
+          v-if="!file.IsPaused && file.IsDownloading"
+          class="file-info__control"
+          type="pause-circle"
+          @click.native="pause(file.FileHash)"
+        ></feather>
+        <feather
+          v-if="file.IsPaused"
+          class="file-info__control"
+          type="play-circle"
+          @click.native="continueDownload(file.FileHash)"
+        ></feather>
+        <feather
+          v-if="!file.IsPaused && !file.IsDownloading"
+          class="file-info__control file-info__control_active"
+          type="check-circle"
+        ></feather>
+      </template>
     </template>
     <div class="file-info__size text_wrap_none">
       {{ file.FileSize | prettyBytes(1) }}

diff --git a/frontend/src/components/File/FileSeeders/FileSeeders.vue b/frontend/src/components/File/FileSeeders/FileSeeders.vue
@@ -10,7 +10,7 @@
         offset: 0,
       }"
     >
-      <FileAvatar :seeder="seeder" />
+      <FileAvatar :seeder="seeder" type="small" />
     </div>
     <div
       v-if="seedsLeft > 0"

diff --git a/frontend/src/components/Modals/RemoveFileModal/RemoveFileModal.vue b/frontend/src/components/Modals/RemoveFileModal/RemoveFileModal.vue
@@ -32,6 +32,8 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 import Button from "@/components/Button/Button";
 import Checkbox from "@/components/Controls/Checkbox/Checkbox.vue";
 
@@ -53,6 +55,7 @@ export default {
     };
   },
   computed: {
+    ...mapState("files", ["localFilesConfig"]),
     isOpen() {
       return this.open;
     },
@@ -66,6 +69,10 @@ export default {
     },
     removeFile() {
       window.backend.removeFile(this.file.FileHash, this.fromDisk).then(() => {
+        let newConfig = Object.assign({}, this.localFilesConfig);
+        newConfig.skip = 0;
+        this.$store.commit("files/setLocalFilesConfig", newConfig);
+
         this.$store.dispatch("files/fetchLocalFiles");
         this.closeModal();
       });

diff --git a/frontend/src/components/NetworkStats/NetworkStats.vue b/frontend/src/components/NetworkStats/NetworkStats.vue
@@ -48,6 +48,7 @@ export default {
       window.backend.seedFile().then(() => {
         this.$store.dispatch("files/fetchLocalFiles");
         this.$store.dispatch("files/fetchRemoteFiles");
+        this.$router.replace("/download");
       });
     },
   },