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

V0.2.1 beta

Author: WizardOfCodez

.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": []
+        }
+    ]
+}

.vscode/task.json

@@ -0,0 +1,10 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "wails_debug_build",
+            "type": "shell",
+            "command": "wails build -d"
+        }
+    ]
+}

frontend/package-lock.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"

frontend/package.json

@@ -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);

frontend/src/assets/scss/_main.scss

@@ -13,6 +13,9 @@
 
     &_small {
       canvas {
+        position: absolute;
+        left: -4px;
+        top: -4px;
         height: 35px;
         width: 35px;
       }

frontend/src/components/File/FileAvatar/FileAvatar.scss

@@ -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
       });

frontend/src/components/File/FileAvatar/FileAvatar.vue

@@ -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;
   }
 }

frontend/src/components/File/FileChunks/FileChunks.scss

@@ -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"

frontend/src/components/File/FileChunks/FileChunks.vue

@@ -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);
+  }
 }