pretty updates :)
This commit is contained in:
Henrique Dias
parent
9adada3067
commit
7aa6a549f9
|
|
@ -1,6 +1,6 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist_dev/*
|
||||
_assets/dist_dev/*
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
|
|||
|
|
@ -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" }}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ var versionRequirements = [
|
|||
name: 'node',
|
||||
currentVersion: semver.clean(process.version),
|
||||
versionRequirement: packageConfig.engines.node
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
if (shell.which('npm')) {
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
padding-top: 7.8em;
|
||||
padding-top: 4em;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue