diff --git a/_assets/.editorconfig b/.editorconfig
similarity index 100%
rename from _assets/.editorconfig
rename to .editorconfig
diff --git a/_assets/_old/js/common_old.js b/_assets/_old/js/common_old.js
index 4fc09a5e..6ab995cb 100644
--- a/_assets/_old/js/common_old.js
+++ b/_assets/_old/js/common_old.js
@@ -1,7 +1,5 @@
'use strict'
-var data = (window.data || window.alert('Something is wrong, please refresh!'))
-
var tempID = '_fm_internal_temporary_id'
var templates = {}
@@ -9,8 +7,6 @@ var selectedItems = []
var overlay
var clickOverlay
-
-
// Sends a costum event to itself
Document.prototype.sendCostumEvent = function (text) {
this.dispatchEvent(new window.CustomEvent(text))
diff --git a/_assets/_old/js/listing.js b/_assets/_old/js/listing.js
index 097b3f65..e6610a2b 100644
--- a/_assets/_old/js/listing.js
+++ b/_assets/_old/js/listing.js
@@ -350,9 +350,6 @@ document.addEventListener('DOMContentLoaded', event => {
let items = document.getElementsByClassName('item')
if (user.AllowNew) {
- buttons.upload.addEventListener('click', (event) => {
- document.getElementById('upload-input').click()
- })
buttons.new.addEventListener('click', listing.newFileButton)
}
diff --git a/_assets/_old/templates/actions.tmpl b/_assets/_old/templates/actions.tmpl
index 0d50c9e1..41b3e6be 100644
--- a/_assets/_old/templates/actions.tmpl
+++ b/_assets/_old/templates/actions.tmpl
@@ -1,91 +1,33 @@
-{{ define "right-side-actions" }}
- {{ template "info-button" }}
-{{ end }}
-
{{ define "right" }}
{{- if not .IsEditor }}
-
- {{- if eq .Display "mosaic" }}view_list{{ else }}view_module{{ end }}
- Switch view
-
-
- {{- end }}
+
+{{- end }}
- {{- if and (.User.AllowNew) (not .IsEditor) }}
-
- {{- end }}
-
-
-
-
-
{{ end }}
-
-{{ define "left-side-actions" }}
-
-{{ end }}
-
{{ define "left" }}
- {{- if and (not .IsDir) (.User.AllowEdit) }}
- {{- if .Editor}}
+{{- if and (not .IsDir) (.User.AllowEdit) }}
+{{- if .Editor}}
- {{- if eq .Data.Mode "markdown" }}
-
- {{- end }}
+{{- if eq .Data.Mode "markdown" }}
+
+{{- end }}
- {{- if eq .Data.Visual true }}
-
- {{- end }}
+{{- if eq .Data.Visual true }}
+
+{{- end }}
- {{/* end if editor */}}
+{{/* end if editor */}}
-
- {{- end }}
-
- {{/* end if not dir and AllowEdit */}}
- {{- end }}
-
- {{- if and .IsDir .User.AllowEdit }}
-
-
-
-
-
- {{- end }}
- {{ end }}
\ No newline at end of file
+
+{{- end }}
diff --git a/_assets/build/webpack.prod.conf.js b/_assets/build/webpack.prod.conf.js
index e084e9cb..8cba2668 100644
--- a/_assets/build/webpack.prod.conf.js
+++ b/_assets/build/webpack.prod.conf.js
@@ -2,7 +2,7 @@ var fs = require('fs')
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
-var config = require('../config')
+var config = require('./config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -52,7 +52,7 @@ var webpackConfig = merge(baseWebpackConfig, {
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
- filename: config.prod.index,
+ filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
diff --git a/_assets/index.html b/_assets/index.html
index fe6e4260..420eddf7 100644
--- a/_assets/index.html
+++ b/_assets/index.html
@@ -42,6 +42,7 @@
showHelp: false,
showDelete: false,
showRename: false,
+ showMove: false,
listing: {
selected: [],
multiple: false
diff --git a/_assets/src/App.vue b/_assets/src/App.vue
index 08191c7f..67caad42 100644
--- a/_assets/src/App.vue
+++ b/_assets/src/App.vue
@@ -6,7 +6,12 @@
+
+
+
+
+
@@ -22,10 +27,10 @@
-
+
-
+
@@ -59,6 +64,11 @@ import Listing from './components/Listing'
import InfoButton from './components/InfoButton'
import InfoPrompt from './components/InfoPrompt'
import DeleteButton from './components/DeleteButton'
+import RenameButton from './components/RenameButton'
+import UploadButton from './components/UploadButton'
+import DownloadButton from './components/DownloadButton'
+import SwitchButton from './components/SwitchViewButton'
+import MoveButton from './components/MoveButton'
import css from './css.js'
function updateColumnSizes () {
@@ -75,6 +85,7 @@ window.addEventListener('keydown', (event) => {
window.info.showInfo = false
window.info.showDelete = false
window.info.showRename = false
+ window.info.showMove = false
// Unselect all files and folders.
if (window.info.req.kind === 'listing') {
@@ -123,18 +134,38 @@ window.addEventListener('keydown', (event) => {
export default {
name: 'app',
- components: { Search, Preview, Listing, InfoButton, InfoPrompt, Help, DeleteButton },
+ components: {
+ Search,
+ Preview,
+ Listing,
+ InfoButton,
+ InfoPrompt,
+ Help,
+ DeleteButton,
+ RenameButton,
+ DownloadButton,
+ UploadButton,
+ SwitchButton,
+ MoveButton
+ },
mounted: function () {
updateColumnSizes()
window.addEventListener('resize', updateColumnSizes)
- window.history.replaceState({ url: window.location.pathname, name: document.title }, document.title, window.location.pathname)
+ window.history.replaceState({
+ url: window.location.pathname,
+ name: document.title
+ }, document.title, window.location.pathname)
},
data: function () {
return window.info
},
methods: {
showOverlay: function () {
- return this.showInfo || this.showHelp
+ return this.showInfo || this.showHelp || this.showDelete || this.showRename || this.showMove
+ },
+ showUpload: function () {
+ if (this.req.kind === 'editor') return false
+ return this.user.allowNew
}
}
}
diff --git a/_assets/src/components/DeleteButton.vue b/_assets/src/components/DeleteButton.vue
index 0e553bc7..559b6fb4 100644
--- a/_assets/src/components/DeleteButton.vue
+++ b/_assets/src/components/DeleteButton.vue
@@ -1,5 +1,5 @@
-
-
+
@@ -155,6 +153,9 @@ export default {
})
}
},
+ uploadInput: function (event) {
+ this.handleFiles(event.currentTarget.files, '')
+ },
handleFiles: function (files, base) {
// buttons.setLoading('upload')
let promises = []
diff --git a/_assets/src/components/MoveButton.vue b/_assets/src/components/MoveButton.vue
new file mode 100644
index 00000000..d15ef264
--- /dev/null
+++ b/_assets/src/components/MoveButton.vue
@@ -0,0 +1,17 @@
+
+
+ forward
+ Move file
+
+
+
+
diff --git a/_assets/src/components/Preview.vue b/_assets/src/components/Preview.vue
index aedfbf17..063169aa 100644
--- a/_assets/src/components/Preview.vue
+++ b/_assets/src/components/Preview.vue
@@ -4,7 +4,11 @@
close
-
+
+
+
+
+
@@ -24,9 +28,19 @@
diff --git a/_assets/src/components/SwitchViewButton.vue b/_assets/src/components/SwitchViewButton.vue
new file mode 100644
index 00000000..d2a1890a
--- /dev/null
+++ b/_assets/src/components/SwitchViewButton.vue
@@ -0,0 +1,33 @@
+
+
+ {{ icon() }}
+ Switch view
+
+
+
+
diff --git a/_assets/src/components/UploadButton.vue b/_assets/src/components/UploadButton.vue
new file mode 100644
index 00000000..551fd072
--- /dev/null
+++ b/_assets/src/components/UploadButton.vue
@@ -0,0 +1,17 @@
+
+
+ file_upload
+ Upload
+
+
+
+
diff --git a/_assets/src/css/listing.css b/_assets/src/css/listing.css
new file mode 100644
index 00000000..e2bcb119
--- /dev/null
+++ b/_assets/src/css/listing.css
@@ -0,0 +1,243 @@
+
+
+/* * * * * * * * * * * * * * * *
+ * LISTING *
+ * * * * * * * * * * * * * * * */
+
+#listing {
+ max-width: calc(100% - 1.2em);
+ width: 100%;
+}
+
+#listing h2 {
+ margin: 0 0 0 0.5em;
+ font-size: .9em;
+ color: rgba(0, 0, 0, 0.38);
+ font-weight: 500;
+}
+
+#listing .item div:last-of-type * {
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+#listing>div {
+ display: flex;
+ padding: 0;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ position: relative;
+}
+
+#listing .item {
+ background-color: #fff;
+ position: relative;
+ display: flex;
+ flex-wrap: nowrap;
+ color: #6f6f6f;
+ transition: .1s ease all;
+ align-items: center;
+ cursor: pointer;
+}
+
+#listing .item div:last-of-type {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+#listing .item p {
+ margin: 0;
+}
+
+#listing .item .size,
+#listing .item .modified {
+ font-size: 0.9em;
+}
+
+#listing .item .name {
+ font-weight: bold;
+}
+
+#listing .item i {
+ font-size: 4em;
+ margin-right: 0.1em;
+ vertical-align: bottom;
+}
+
+#listing h2.message,
+.message {
+ text-align: center;
+ font-size: 3em;
+ margin: 1em auto;
+ display: block !important;
+ width: 95%;
+ color: rgba(0, 0, 0, 0.3);
+ font-weight: 500;
+}
+
+.message i {
+ font-size: inherit;
+ vertical-align: middle;
+}
+
+
+/* * * * * * * * * * * * * * * *
+ * LISTING - MOSAIC *
+ * * * * * * * * * * * * * * * */
+
+#listing.mosaic {
+ padding-top: 1em;
+}
+
+#listing.mosaic .item {
+ width: calc(33% - 1em);
+ margin: .5em;
+ padding: 0.5em;
+ border-radius: 0.2em;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+}
+
+#listing.mosaic .item:hover {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
+}
+
+#listing.mosaic .header {
+ display: none;
+}
+
+#listing.mosaic .item div:first-of-type {
+ width: 5em;
+}
+
+#listing.mosaic .item div:last-of-type {
+ width: calc(100% - 5vw);
+}
+
+
+/* * * * * * * * * * * * * * * *
+ * LISTING - DETAIL *
+ * * * * * * * * * * * * * * * */
+
+#listing.list {
+ flex-direction: column;
+ padding-top: 3.25em;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+}
+
+#listing.list .item {
+ width: 100%;
+ margin: 0;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ padding: 1em;
+ border-top: 0;
+}
+
+#listing.list h2 {
+ display: none;
+}
+
+#listing .item[aria-selected=true] {
+ background: #2196f3 !important;
+ color: #fff !important;
+}
+
+#listing.list .item div:first-of-type {
+ width: 3em;
+}
+
+#listing.list .item div:first-of-type i {
+ font-size: 2em;
+}
+
+#listing.list .item div:last-of-type {
+ width: calc(100% - 3em);
+ display: flex;
+ align-items: center;
+}
+
+#listing.list .item .name {
+ width: 50%;
+}
+
+#listing.list .item .size {
+ width: 25%;
+}
+
+#listing .item.header {
+ display: none !important;
+ background-color: #ccc;
+}
+
+#listing.list .header i {
+ font-size: 1.5em;
+ vertical-align: middle;
+ margin-left: .2em;
+}
+
+#listing.list .item.header {
+ display: flex !important;
+ background: #f8f8f8;
+ position: fixed;
+ width: 78%;
+ top: 4em;
+ left: 20%;
+ z-index: 999;
+ padding: .85em;
+ border: 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#listing.list .item.header>div:first-child {
+ width: 0;
+}
+
+#listing.list .item.header .name {
+ 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;
+}
+
+#listing.list .item.header>div:first-child {
+ width: 0;
+}
+
+#listing.list .name {
+ font-weight: normal;
+}
+
+#listing.list .item.header .name {
+ margin-right: 3em;
+}
+
+#listing.list .header span {
+ vertical-align: middle;
+}
+
+#listing.list .header i {
+ opacity: 0;
+ transition: .1s ease all;
+}
+
+#listing.list .header p:hover i,
+#listing.list .header .active i {
+ opacity: 1;
+}
+
+#listing.list .item.header .active {
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/_assets/src/css/prompts.css b/_assets/src/css/prompts.css
index e4ac6c32..a28adf3a 100644
--- a/_assets/src/css/prompts.css
+++ b/_assets/src/css/prompts.css
@@ -26,7 +26,7 @@
.overlay.active,
.prompt.active,
.help.active {
- animation: .2s show forwards;
+ animation: .1s show forwards;
}
.prompt h3 {
diff --git a/_assets/src/css/styles.css b/_assets/src/css/styles.css
index 1c9c1598..b977bbb8 100644
--- a/_assets/src/css/styles.css
+++ b/_assets/src/css/styles.css
@@ -2,6 +2,7 @@
@import "./normalize.css";
@import "./header.css";
@import "./prompts.css";
+@import "./listing.css";
body {
font-family: 'Roboto', sans-serif;
@@ -432,248 +433,6 @@ main {
}
-/* * * * * * * * * * * * * * * *
- * LISTING *
- * * * * * * * * * * * * * * * */
-
-#listing {
- max-width: calc(100% - 1.2em);
- width: 100%;
-}
-
-#listing h2 {
- margin: 0 0 0 0.5em;
- font-size: .9em;
- color: rgba(0, 0, 0, 0.38);
- font-weight: 500;
-}
-
-#listing .item div:last-of-type * {
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-#listing>div {
- display: flex;
- padding: 0;
- flex-wrap: wrap;
- justify-content: flex-start;
- position: relative;
-}
-
-#listing .item {
- background-color: #fff;
- position: relative;
- display: flex;
- flex-wrap: nowrap;
- color: #6f6f6f;
- transition: .1s ease all;
- align-items: center;
- cursor: pointer;
-}
-
-#listing .item div:last-of-type {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-
-#listing .item p {
- margin: 0;
-}
-
-#listing .item .size,
-#listing .item .modified {
- font-size: 0.9em;
-}
-
-#listing .item .name {
- font-weight: bold;
-}
-
-#listing .item i {
- font-size: 4em;
- margin-right: 0.1em;
- vertical-align: bottom;
-}
-
-#listing h2.message,
-.message {
- text-align: center;
- font-size: 3em;
- margin: 1em auto;
- display: block !important;
- width: 95%;
- color: rgba(0, 0, 0, 0.3);
- font-weight: 500;
-}
-
-.message i {
- font-size: inherit;
- vertical-align: middle;
-}
-
-
-/* * * * * * * * * * * * * * * *
- * LISTING - MOSAIC *
- * * * * * * * * * * * * * * * */
-
-#listing.mosaic {
- padding-top: 1em;
-}
-
-#listing.mosaic .item {
- width: calc(33% - 1em);
- margin: .5em;
- padding: 0.5em;
- border-radius: 0.2em;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
-}
-
-#listing.mosaic .item:hover {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
-}
-
-#listing.mosaic .header {
- display: none;
-}
-
-#listing.mosaic .item div:first-of-type {
- width: 5em;
-}
-
-#listing.mosaic .item div:last-of-type {
- width: calc(100% - 5vw);
-}
-
-
-/* * * * * * * * * * * * * * * *
- * LISTING - DETAIL *
- * * * * * * * * * * * * * * * */
-
-#listing.list {
- flex-direction: column;
- padding-top: 3.25em;
- width: 100%;
- max-width: 100%;
- margin: 0;
-}
-
-#listing.list .item {
- width: 100%;
- margin: 0;
- border: 1px solid rgba(0, 0, 0, 0.1);
- padding: 1em;
- border-top: 0;
-}
-
-#listing.list h2 {
- display: none;
-}
-
-#listing .item[aria-selected=true] {
- background: #2196f3 !important;
- color: #fff !important;
-}
-
-#listing.list .item div:first-of-type {
- width: 3em;
-}
-
-#listing.list .item div:first-of-type i {
- font-size: 2em;
-}
-
-#listing.list .item div:last-of-type {
- width: calc(100% - 3em);
- display: flex;
- align-items: center;
-}
-
-#listing.list .item .name {
- width: 50%;
-}
-
-#listing.list .item .size {
- width: 25%;
-}
-
-#listing .item.header {
- display: none !important;
- background-color: #ccc;
-}
-
-#listing.list .header i {
- font-size: 1.5em;
- vertical-align: middle;
- margin-left: .2em;
-}
-
-#listing.list .item.header {
- display: flex !important;
- background: #f8f8f8;
- position: fixed;
- width: 78%;
- top: 7.8em;
- left: 20%;
- z-index: 999;
- padding: .85em;
- border: 0;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-#listing.list .item.header>div:first-child {
- width: 0;
-}
-
-#listing.list .item.header .name {
- 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;
-}
-
-#listing.list .item.header>div:first-child {
- width: 0;
-}
-
-#listing.list .name {
- font-weight: normal;
-}
-
-#listing.list .item.header .name {
- margin-right: 3em;
-}
-
-#listing.list .header span {
- vertical-align: middle;
-}
-
-#listing.list .header i {
- opacity: 0;
- transition: .1s ease all;
-}
-
-#listing.list .header p:hover i,
-#listing.list .header .active i {
- opacity: 1;
-}
-
-#listing.list .item.header .active {
- font-weight: bold;
-}
-
/* PREVIEWER */