pretty updates :)

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 node_modules/
-dist_dev/*
+_assets/dist_dev/*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

_assets/_old/templates/actions.tmpl

@@ -1,8 +1,5 @@
 {{ define "info-button" }}
-<button title="Info" aria-label="Info" class="action" id="info">
-    <i class="material-icons">info</i>
-    <span>Info</span>
-</button>
+
 {{ end }}
 
 {{ define "delete-button" }}

_assets/build/check-versions.js

@@ -11,7 +11,7 @@ var versionRequirements = [
     name: 'node',
     currentVersion: semver.clean(process.version),
     versionRequirement: packageConfig.engines.node
-  },
+  }
 ]
 
 if (shell.which('npm')) {

_assets/src/App.vue

@@ -1,14 +1,14 @@
 <template>
   <div id="app">
     <header>
-      <div id="top-bar">
-            <img src="./assets/logo.svg" alt="File Manager">
-            <search></search>
-        </div>
-        <div id="bottom-bar">
-    
-        </div>
-        <div id="click-overlay"></div>
+      <div id="first-bar">
+        <img src="./assets/logo.svg" alt="File Manager">
+        <search></search>
+      </div>
+      <div id="second-bar">
+        <info-button></info-button>
+      </div>
+      <!-- <div id="click-overlay"></div> -->
     </header>
     <nav id="sidebar">
       <a class="action" :href="baseURL + '/'">
@@ -50,6 +50,7 @@
 import Search from './components/Search'
 import Preview from './components/Preview'
 import Listing from './components/Listing'
+import InfoButton from './components/InfoButton'
 import css from './css.js'
 
 function updateColumnSizes () {
@@ -61,7 +62,7 @@ function updateColumnSizes () {
 
 export default {
   name: 'app',
-  components: { Search, Preview, Listing },
+  components: { Search, Preview, Listing, InfoButton },
   mounted: function () {
     updateColumnSizes()
     window.addEventListener('resize', updateColumnSizes)

_assets/src/components/InfoButton.vue

@@ -0,0 +1,15 @@
+<template>
+    <button title="Info" aria-label="Info" class="action" id="info">
+        <i class="material-icons">info</i>
+        <span>Info</span>
+    </button>
+</template>
+
+<script>
+export default {
+  name: 'info-button',
+  data: function () {
+    return window.info.page.data
+  }
+}
+</script>

_assets/src/components/Search.vue

@@ -16,6 +16,8 @@
 </template>
 
 <script>
+import page from '../page'
+
 // Remove the last directory of an url
 var removeLastDirectoryPartOf = function (url) {
   var arr = url.split('/')
@@ -109,8 +111,7 @@ export default {
 
         conn.onclose = (event) => {
           this.$el.classList.remove('ongoing')
-          // TODO: if is listing!
-          // listing.reload()
+          page.reload()
         }
 
         return
@@ -132,6 +133,7 @@ export default {
 
       conn.onclose = () => {
         this.$el.classList.remove('ongoing')
+        page.reload()
       }
     }
   }

_assets/src/css/header.css

@@ -8,6 +8,7 @@ header {
     left: 0;
     width: 100%;
     padding: 0;
+    display: flex;
 }
 
 header a,
@@ -35,16 +36,51 @@ header>div div {
  *            TOP BAR          *
  * * * * * * * * * * * * * * * */
 
-#top-bar {
+#first-bar {
     height: 4em;
 }
 
-#top-bar img {
+#first-bar img {
     height: 2.5em;
     margin-right: 1em;
     vertical-align: middle;
 }
 
+/* * * * * * * * * * * * * * * *
+ *          BOTTOM BAR         *
+ * * * * * * * * * * * * * * * */
+
+#second-bar {
+    justify-content: flex-end;
+}
+
+#more {
+    display: none;
+}
+
+#file-only {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.075);
+    padding-right: .3em;
+    margin-right: .3em;
+    transition: .2s ease opacity, visibility;
+    visibility: visible;
+}
+
+#file-only.disabled {
+    opacity: 0;
+    visibility: hidden;
+}
+
+#download ul.active {
+    top: 0;
+    right: 0;
+}
+
+#more ul.active {
+    right: .5em;
+    top: 4.5em;
+}
 
 /* * * * * * * * * * * * * * * *
  *          SEARCH BAR         *
@@ -173,64 +209,4 @@ header>div div {
 
 #search:-ms-input-placeholder {
     color: rgba(255, 255, 255, .5);
-}
-
-
-/* * * * * * * * * * * * * * * *
- *          BOTTOM BAR         *
- * * * * * * * * * * * * * * * */
-
-#bottom-bar {
-    border-top: 1px solid rgba(0, 0, 0, 0.075);
-    height: 3.8em;
-}
-
-#bottom-bar>div:first-child>* {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-#bottom-bar>div:first-child>i {
-    margin-right: .3em;
-}
-
-#bottom-bar>*:first-child {
-    margin-right: auto;
-    max-width: calc(100% - 25em);
-    width: 100%;
-}
-
-#bottom-bar p {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    width: calc(100% - 3em);
-    white-space: nowrap;
-}
-
-#more {
-    display: none;
-}
-
-#file-only {
-    display: inline-block;
-    border-right: 1px solid rgba(0, 0, 0, 0.075);
-    padding-right: .3em;
-    margin-right: .3em;
-    transition: .2s ease opacity, visibility;
-    visibility: visible;
-}
-
-#file-only.disabled {
-    opacity: 0;
-    visibility: hidden;
-}
-
-#download ul.active {
-    top: 0;
-    right: 0;
-}
-
-#more ul.active {
-    right: .5em;
-    top: 4.5em;
 }

_assets/src/css/styles.css

@@ -4,7 +4,7 @@
 
 body {
     font-family: 'Roboto', sans-serif;
-    padding-top: 7.8em;
+    padding-top: 4em;
     background-color: #f8f8f8;
 }