Merge branch 'release/0.2.0'

GaelGirodon · Oct 28, 2018 · d764222 · d764222
2 parents ff4969d + 5506561
commit d764222
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ where your disk space has gone to help you to clean it up.
 1. Download the [latest release](https://github.com/GaelGirodon/dir-stat/releases)
 2. Start **DirStat**
 3. Set the path of the directory to scan
-4. Click on the 🔍 **Scan** button
+4. Click on the <kbd>**Scan**</kbd> button (or press <kbd>Enter</kbd>)
 5. Navigate in the treemap to show where your disk space has gone
 
 ### CLI usage
@@ -30,8 +30,11 @@ dirstat --port 8000
 Install global dependencies:
 
 - Node.js >= 8
+- NPM >= 5
 - Go >= 1.11
+- [Dep](https://github.com/golang/dep) >= 0.5.0
 - [Packr](https://github.com/gobuffalo/packr) >= 1.15
+- PowerShell
 
 Then, install project dependencies:
 
@@ -48,7 +51,7 @@ npm run build
 ### Package
 
 ```shell
-./scripts/package.ps1
+npm run package
 ```
 
 ### Release

diff --git a/assets/js/dirstat.js b/assets/js/dirstat.js
@@ -47,8 +47,12 @@ var app = new Vue({
             this.$http.get('stat?path=' + this.dir).then(function (data) {
                 var entry = data.body;
                 this.path = [entry];
+                document.getElementById('treemap-container').innerHTML = '';
                 this.graph = new d3plus.Treemap()
-                    .select('#treemap')
+                    .select('#treemap-container')
+                    .detectResize(true)
+                    .detectResizeDelay(250)
+                    .height(640)
                     .data(this.entries)
                     .groupBy('name').sum(this.mode)
                     .tooltipConfig({
@@ -61,13 +65,15 @@ var app = new Vue({
                 this.processing = false;
             }).catch(function (err) {
                 this.processing = false;
-                this.error = 'Unable to analyse the given directory: ' + err.body.message;
+                this.error = 'Unable to scan the given directory'
+                    + (err.body.message ? ': ' + err.body.message : '') + '.';
             });
         },
         // Map entry stats to a string
         mapStats: function (d) {
-            return Math.round(d.size / (1024 * 1024)) + ' MB'
-                + ' / ' + d.count + ' entries / depth ' + d.depth
+            return '<strong>Size:</strong> ' + Math.round(d.size / (1024 * 1024)) + ' MB<br>'
+                + '<strong>Count:</strong> ' + d.count + ' entries<br>'
+                + '<strong>Depth:</strong> ' + d.depth
         },
         // Render the tree map
         renderTreemap: function () {

diff --git a/assets/sass/dirstat.scss b/assets/sass/dirstat.scss
@@ -5,4 +5,15 @@
 
 [v-cloak] {
   display: none;
-}
+}
+
+body {
+  background: #f5f5f5;
+}
+
+.breadcrumb {
+  background: #ffffff;
+  border: solid 1px #ced4da;
+  padding-top: 0.4rem !important;
+  padding-bottom: 0.4rem !important;
+}
diff --git a/dirstat.go b/dirstat.go
@@ -81,6 +81,7 @@ func statHandler(res http.ResponseWriter, req *http.Request) {
 
 // Send a success response with a body content
 func sendSuccess(res http.ResponseWriter, body []byte) {
+	log.Println("OK")
 	res.Header().Set("Content-Type", "application/json")
 	res.WriteHeader(http.StatusOK)
 	res.Write(body)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "dir-stat",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Simple directory statistics",
   "scripts": {
     "build:assets": "gulp",
     "build": "npm run build:assets && packr build -i -o dirstat.exe .",
     "ensure": "npm install && dep ensure",
-    "start": "dirstat"
+    "start": "dirstat",
+    "package": "powershell.exe ./scripts/package.ps1"
   },
   "repository": {
     "type": "git",

diff --git a/web/index.html b/web/index.html
@@ -12,38 +12,37 @@
 <div id="app" class="container">
     <!-- Header -->
     <header class="d-flex justify-content-between my-4">
-        <h1 class="display-4">&#x1F5C3; DirStat</h1>
-        <p class="align-self-end text-muted small text-right ml-4">
-            DirStat is a simple graphical web application to show<br>
+        <h1 class="display-5 m-0">&#x1F5C3; DirStat</h1>
+        <div class="align-self-center small text-muted text-right d-none d-sm-none d-md-block">
+            <strong>DirStat</strong> is a simple graphical web application to show<br>
             where your disk space has gone to help you to clean it up.
-        </p>
+        </div>
     </header>
     <!-- Directory selection -->
-    <div>
+    <section>
         <!-- Directory path input -->
-        <div class="input-group">
-            <input type="text" class="form-control" id="dir" placeholder="C:\path\to\dir\"
-                   v-model="dir" :disabled="processing" :class="{'is-invalid': error}">
-            <div class="input-group-append">
-                <button type="button" class="btn btn-block btn-primary"
-                        @click="scan" :disabled="processing">
-                    &#x1F50D; Scan
-                </button>
-            </div>
+        <div class="d-flex">
+            <input class="form-control flex-grow-1" id="dir" :class="{'is-invalid': error}"
+                   placeholder="Type here the path to the folder to analyse and click on the 'Scan' button or press Enter"
+                   v-model="dir" :disabled="processing" @keyup.enter="scan">
+            <button type="button" class="btn btn-primary ml-2 px-3"
+                    @click="scan" :disabled="processing">
+                &#x1F50D; Scan
+            </button>
         </div>
         <!-- Error message -->
-        <div class="text-danger" v-if="error">{{ error }}</div>
+        <div class="text-danger" v-cloak v-if="error">{{ error }}</div>
         <!-- Progress bar -->
         <div class="progress mt-3" v-cloak v-if="processing">
             <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                  aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
         </div>
-    </div>
+    </section>
     <!-- Navigation controls -->
-    <form class="form-inline my-3" v-cloak v-show="graph">
+    <section class="form-inline my-3" v-cloak v-show="graph">
         <!-- Back to the previous level -->
         <div class="form-group">
-            <button type="button" class="btn btn-dark" @click="back" :disabled="path.length <= 1">🡨</button>
+            <button type="button" class="btn btn-secondary" @click="back" :disabled="path.length <= 1">🡨</button>
         </div>
         <!-- Path -->
         <div class="form-group ml-2">
@@ -64,11 +63,9 @@ <h1 class="display-4">&#x1F5C3; DirStat</h1>
                 </select>
             </div>
         </div>
-    </form>
+    </section>
     <!-- Tree map -->
-    <div v-cloak>
-        <svg id="treemap" width="100%" height="600px"></svg>
-    </div>
+    <section v-cloak id="treemap-container"></section>
 </div>
 <!-- Scripts -->
 <script src="dirstat.min.js"></script>