pretty updates :)

This commit is contained in:
Henrique Dias 2017-06-28 19:26:07 +01:00
parent 9adada3067
commit 7aa6a549f9
No known key found for this signature in database
GPG Key ID: 936F5EB68D786730
8 changed files with 71 additions and 80 deletions

2
.gitignore vendored
View File

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

View File

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

View File

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

View File

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

View File

@ -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>

View File

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

View File

@ -8,6 +8,7 @@ header {
left: 0; left: 0;
width: 100%; width: 100%;
padding: 0; padding: 0;
display: flex;
} }
header a, header a,
@ -35,16 +36,51 @@ header>div div {
* TOP BAR * * TOP BAR *
* * * * * * * * * * * * * * * */ * * * * * * * * * * * * * * * */
#top-bar { #first-bar {
height: 4em; height: 4em;
} }
#top-bar img { #first-bar img {
height: 2.5em; height: 2.5em;
margin-right: 1em; margin-right: 1em;
vertical-align: middle; 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 * * SEARCH BAR *
@ -173,64 +209,4 @@ header>div div {
#search:-ms-input-placeholder { #search:-ms-input-placeholder {
color: rgba(255, 255, 255, .5); 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;
} }

View File

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