From 289171c092f335c78f860a35f3588102052a465e Mon Sep 17 00:00:00 2001
From: Henrique Dias <hacdias@gmail.com>
Date: Thu, 29 Jun 2017 21:46:08 +0100
Subject: [PATCH] start editor

---
 _assets/src/App.vue                       |  12 +-
 _assets/src/components/DownloadButton.vue |   4 +
 _assets/src/components/Editor.vue         |  16 +++
 _assets/src/components/Listing.vue        |  37 +----
 _assets/src/css/base.css                  | 126 ++++++++++++++++
 _assets/src/css/listing.css               |  22 ++-
 _assets/src/css/styles.css                | 166 +++-------------------
 7 files changed, 183 insertions(+), 200 deletions(-)
 create mode 100644 _assets/src/components/Editor.vue
 create mode 100644 _assets/src/css/base.css

diff --git a/_assets/src/App.vue b/_assets/src/App.vue
index 6b560621..84121ede 100644
--- a/_assets/src/App.vue
+++ b/_assets/src/App.vue
@@ -14,9 +14,9 @@
         <upload-button v-show="showUpload()"></upload-button>
         <info-button></info-button>
       </div>
-      <!-- <div id="click-overlay"></div> -->
     </header>
-    <nav id="sidebar">
+
+    <nav>
       <a class="action" :href="baseURL + '/'">
         <i class="material-icons">folder</i>
         <span>My Files</span>
@@ -36,7 +36,9 @@
         <span>Logout</span>
       </button>
     </nav>
+
     <main>
+      <editor v-if="req.kind === 'editor'"></editor>
       <listing v-if="req.kind === 'listing'"></listing> 
       <preview v-if="req.kind === 'preview'"></preview> 
     </main>
@@ -47,8 +49,8 @@
     <delete-prompt v-if="showDelete" :class="{ active: showDelete }"></delete-prompt>
     <info-prompt v-if="showInfo" :class="{ active: showInfo }"></info-prompt>
     <move-prompt v-if="showMove" :class="{ active: showMove }"></move-prompt>
+    
     <help v-show="showHelp" :class="{ active: showHelp }"></help>
-
     <div v-show="showOverlay()" @click="resetPrompts" class="overlay" :class="{ active: showOverlay() }"></div>
 
     <footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
@@ -57,9 +59,10 @@
 
 <script>
 import Search from './components/Search'
-import Preview from './components/Preview'
 import Help from './components/Help'
+import Preview from './components/Preview'
 import Listing from './components/Listing'
+import Editor from './components/Editor'
 import InfoButton from './components/InfoButton'
 import InfoPrompt from './components/InfoPrompt'
 import DeleteButton from './components/DeleteButton'
@@ -198,6 +201,7 @@ export default {
     Search,
     Preview,
     Listing,
+    Editor,
     InfoButton,
     InfoPrompt,
     Help,
diff --git a/_assets/src/components/DownloadButton.vue b/_assets/src/components/DownloadButton.vue
index 93bd5394..3a0c1305 100644
--- a/_assets/src/components/DownloadButton.vue
+++ b/_assets/src/components/DownloadButton.vue
@@ -2,6 +2,7 @@
     <button @click="download" aria-label="Download" title="Download" class="action">
         <i class="material-icons">file_download</i>
         <span>Download</span>
+        <span v-if="count() > 0" class="counter">{{ count() }}</span>
     </button>
 </template>
 
@@ -11,6 +12,9 @@ var $ = window.info
 export default {
   name: 'download-button',
   methods: {
+    count: function () {
+      return $.selected.length
+    },
     download: function (event) {
       if ($.req.kind !== 'listing') {
         window.location = window.location.pathname + '?download=true'
diff --git a/_assets/src/components/Editor.vue b/_assets/src/components/Editor.vue
new file mode 100644
index 00000000..a8af7cf3
--- /dev/null
+++ b/_assets/src/components/Editor.vue
@@ -0,0 +1,16 @@
+<template>
+    <form id="editor">
+        <h2 v-if="editor.type == 'complete'">Metadata</h2>
+    </form>
+</template>
+
+<script>
+export default {
+  name: 'editor',
+  data: function () {
+    return window.info.req.data
+  },
+  methods: {
+  }
+}
+</script>
diff --git a/_assets/src/components/Listing.vue b/_assets/src/components/Listing.vue
index db62d16f..1e674379 100644
--- a/_assets/src/components/Listing.vue
+++ b/_assets/src/components/Listing.vue
@@ -58,14 +58,7 @@
         </div>
 
         <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
-
-        <!-- TODO: show on listing and allowedit -->
-        <div class="floating">
-        <div tabindex="0" role="button" class="action" id="new">
-        <i class="material-icons" title="New file or directory">add</i>
-        </div>
-        </div>
-
+        
         <div v-show="multiple" :class="{ active: multiple }" id="multiple-selection">
           <p>Multiple selection enabled</p>
           <div @click="cancelMultiple" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
@@ -95,34 +88,6 @@ export default {
 
     document.addEventListener('drop', this.drop, false)
   },
-  beforeUpdate: function () {
-    /*
-      listing.redefineDownloadURLs()
-
-  let selectedNumber = selectedItems.length,
-    fileAction = document.getElementById('file-only')
-
-  if (selectedNumber) {
-    fileAction.classList.remove('disabled')
-
-    if (selectedNumber > 1) {
-      buttons.rename.classList.add('disabled')
-      buttons.info.classList.add('disabled')
-    }
-
-    if (selectedNumber == 1) {
-      buttons.info.classList.remove('disabled')
-      buttons.rename.classList.remove('disabled')
-    }
-
-    return false
-  }
-
-  buttons.info.classList.remove('disabled')
-  fileAction.classList.add('disabled')
-  */
-    console.log('before upding')
-  },
   methods: {
     base64: function (name) {
       return window.btoa(name)
diff --git a/_assets/src/css/base.css b/_assets/src/css/base.css
new file mode 100644
index 00000000..57a8356a
--- /dev/null
+++ b/_assets/src/css/base.css
@@ -0,0 +1,126 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    padding-top: 4em;
+    background-color: #f8f8f8;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+*,
+*:hover,
+*:active,
+*:focus {
+    outline: 0
+}
+
+a {
+    text-decoration: none;
+}
+
+img {
+    max-width: 100%;
+}
+
+audio,
+video {
+    width: 100%;
+}
+
+pre {
+    padding: 1em;
+    border: 1px solid #e6e6e6;
+    border-radius: 0.5em;
+    background-color: #f5f5f5;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+}
+
+button {
+    border: 0;
+    padding: .5em 1em;
+    margin-left: .5em;
+    border-radius: .1em;
+    cursor: pointer;
+    background: #2196f3;
+    color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+    transition: .1s ease all;
+}
+
+button:hover {
+    background-color: #1E88E5;
+}
+
+.mobile-only {
+    display: none !important;
+}
+
+.container {
+    width: 95%;
+    max-width: 960px;
+    margin: 1em auto 0;
+}
+
+i.spin {
+    animation: 1s spin linear infinite;
+}
+
+#app {
+    transition: .2s ease padding;
+}
+
+#app.multiple {
+    padding-bottom: 4em;
+}
+
+nav {
+    width: 16em;
+    position: fixed;
+    top: 4em;
+    left: 0;
+}
+
+nav .action {
+    width: 100%;
+    display: block;
+    border-radius: 0;
+    font-size: 1.1em;
+    padding: .5em;
+}
+
+nav>div {
+    border-top: 1px solid rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+nav .action>* {
+    vertical-align: middle;
+}
+
+main {
+    min-height: 1em;
+    margin: 0 1em 0 auto;
+    width: calc(100% - 19em);
+}
+
+@media (max-width: 1024px) {
+    nav {
+        height: 100%;
+        background: #fff;
+        z-index: 9999;
+        border-top: 1px solid rgba(0, 0, 0, 0.075);
+        border-right: 1px solid rgba(0, 0, 0, 0.075);
+        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+    }
+    main {
+        width: 100%;
+        margin: 0;
+        padding: 0 1em;
+    }
+}
\ No newline at end of file
diff --git a/_assets/src/css/listing.css b/_assets/src/css/listing.css
index 98f0dbc5..b15c306f 100644
--- a/_assets/src/css/listing.css
+++ b/_assets/src/css/listing.css
@@ -165,9 +165,9 @@
     display: flex !important;
     background: #f8f8f8;
     position: fixed;
-    width: 78%;
+    width: calc(100% - 19em);
     top: 4em;
-    left: 20%;
+    right: 1em;
     z-index: 999;
     padding: .85em;
     border: 0;
@@ -182,16 +182,6 @@
     margin-right: 3em;
 }
 
-#listing.list .header {
-    display: flex;
-    background: #fafafa;
-    position: fixed;
-    width: 100%;
-    top: 7.8em;
-    left: 0;
-    z-index: 999;
-}
-
 #listing.list .header a {
     color: inherit;
 }
@@ -249,3 +239,11 @@
 #listing #multiple-selection i {
     color: #fff;
 }
+
+@media (max-width: 1024px) {
+    #listing.list .item.header {
+        width: calc(100% - 2em);
+        right: 1em;
+        left: 1em;
+    }
+}
\ No newline at end of file
diff --git a/_assets/src/css/styles.css b/_assets/src/css/styles.css
index 9a5b4062..6722a6a2 100644
--- a/_assets/src/css/styles.css
+++ b/_assets/src/css/styles.css
@@ -1,90 +1,10 @@
 @import "./fonts.css";
 @import "./normalize.css";
+@import "./base.css";
 @import "./header.css";
 @import "./prompts.css";
 @import "./listing.css";
 
-body {
-    font-family: 'Roboto', sans-serif;
-    padding-top: 4em;
-    background-color: #f8f8f8;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-*,
-*:hover,
-*:active,
-*:focus {
-    outline: 0
-}
-
-a {
-    text-decoration: none;
-}
-
-img {
-    max-width: 100%;
-}
-
-audio,
-video {
-    width: 100%;
-}
-
-pre {
-    padding: 1em;
-    border: 1px solid #e6e6e6;
-    border-radius: 0.5em;
-    background-color: #f5f5f5;
-    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;
-    white-space: -pre-wrap;
-    white-space: -o-pre-wrap;
-    word-wrap: break-word;
-}
-
-button {
-    border: 0;
-    padding: .5em 1em;
-    margin-left: .5em;
-    border-radius: .1em;
-    cursor: pointer;
-    background: #2196f3;
-    color: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
-    transition: .1s ease all;
-}
-
-button:hover {
-    background-color: #1E88E5;
-}
-
-.mobile-only {
-    display: none !important;
-}
-
-.container {
-    width: 95%;
-    max-width: 960px;
-    margin: 1em auto 0;
-}
-
-i.spin {
-    animation: 1s spin linear infinite;
-}
-
-
-#app {
-    transition: .2s ease padding;
-}
-
-#app.multiple {
-    padding-bottom: 4em;
-}
 
 /* * * * * * * * * * * * * * * *
  *            EDITOR           *
@@ -261,6 +181,7 @@ fieldset h3,
     box-shadow: 0 0 0 0;
     vertical-align: middle;
     text-align: left;
+    position: relative;
 }
 
 .action.disabled {
@@ -301,45 +222,6 @@ fieldset h3,
 }
 
 
-/* * * * * * * * * * * * * * * *
- *         NEW FILE/DIR        *
- * * * * * * * * * * * * * * * */
-
-.floating {
-    position: fixed;
-    bottom: 1em;
-    right: 1em;
-}
-
-.floating .action {
-    background-color: #2196f3 !important;
-    color: #fff;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
-}
-
-#newdir {
-    position: fixed;
-    bottom: 1.3em;
-    right: 5em;
-    transition: .2s ease all;
-    opacity: 0;
-    border: 0;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
-    padding: .5em;
-    width: 22em;
-    border-radius: .2em;
-}
-
-#newdir.enabled {
-    opacity: 1;
-}
-
-
-#logout {
-    border-radius: 0;
-    margin-left: auto;
-    padding: .15em;
-}
 
 #click-overlay {
     display: none;
@@ -355,37 +237,25 @@ fieldset h3,
     display: block;
 }
 
+.action .counter {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background: #2196f3;
+    color: #fff;
+    border-radius: 50%;
+    font-size: .75em;
+    width: 1.5em;
+    height: 1.5em;
+    text-align: center;
+    line-height: 1.25em;
+    border: 2px solid white;
+}
+
 
 /* SIDEBAR */
 
-#sidebar {
-    position: fixed;
-    left: 0;
-    width: 20%;
-}
-
-#sidebar .action {
-    width: 100%;
-    display: block;
-    border-radius: 0;
-    font-size: 1.1em;
-    padding: .5em;
-}
-
-#sidebar > div {
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-#sidebar .action>* {
-    vertical-align: middle;
-}
-
-main {
-    width: 78%;
-    margin-left: 20%;
-    min-height: 1em;
-}
 
 
 /* * * * * * * * * * * * * * * *