start editor
Henrique Dias
parent
59912e1dda
commit
289171c092
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
/* * * * * * * * * * * * * * * *
|
||||
|
|
|
|||
Loading…
Reference in New Issue