mirror_html/filegator
1
0
Fork 0
mirror of https://github.com/filegator/filegator.git synced 2025-08-06 12:06:28 +02:00
Code Issues Projects Releases Wiki Activity

improve file preview

Browse Source
This commit is contained in:
Milos Stojanovic
2020-02-21 09:35:54 +01:00
parent bcc66d03bd
commit eb1e6acda1
3 changed files with 100 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/views/partials/Preview.vue
View File

@@ -1,37 +1,47 @@
/* eslint-disable */
<template>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">
{{ item.name }}
</p>
</header>
<section class="modal-card-body preview">
<textarea v-if="isText(item.path)" v-model="content" class="textarea" name="content" rows="20" />
<div v-if="isImage(item.path)" class="image">
<img :src="content">
</div>
</section>
<footer class="modal-card-foot">
<button v-if="isText(item.path) && can(['write'])" class="button" type="button" @click="saveFile()">
{{ lang('Save') }}
</button>
<button class="button" type="button" @click="$parent.close()">
{{ lang('Close') }}
</button>
</footer>
<div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">
{{ item.name }}
</p>
</header>
<section class="modal-card-body preview">
<template v-if="isText(item.path)">
<prism-editor v-model="content" :readonly="!can('write')" :line-numbers="lineNumbers" />
</template>
<div v-if="isImage(item.path)" class="image">
<img :src="content">
</div>
</section>
<footer class="modal-card-foot">
<button v-if="isText(item.path) && can('write')" class="button" type="button" @click="saveFile()">
{{ lang('Save') }}
</button>
<button class="button" type="button" @click="$parent.close()">
{{ lang('Close') }}
</button>
</footer>
</div>
</div>
</template>
<script>
import api from '../../api/api'
import 'prismjs'
import 'prismjs/themes/prism.css'
import 'vue-prism-editor/dist/VuePrismEditor.css'
import PrismEditor from 'vue-prism-editor'
export default {
name: 'Preview',
components: { PrismEditor },
props: [ 'item' ],
data() {
return {
content: '',
lineNumbers: true,
}
},
mounted() {
@@ -67,6 +77,13 @@ export default {
</script>
<style scoped>
@media (min-width: 1100px) {
.modal-card {
width: 100%;
min-width: 640px;
}
}
.preview {
min-height: 450px;
}

72
package-lock.json generated
View File

@@ -4928,7 +4928,6 @@
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
"integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
"dev": true,
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
@@ -5107,6 +5106,16 @@
"integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
"dev": true
},
"component-props": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/component-props/-/component-props-1.1.1.tgz",
"integrity": "sha1-+bffm5kntubZfJvScqqGdnDzSUQ="
},
"component-xor": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/component-xor/-/component-xor-0.0.4.tgz",
"integrity": "sha1-xV2DzMG5TNUImk6T+niRxyY+Wao="
},
"compressible": {
"version": "2.0.17",
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
@@ -6381,8 +6390,7 @@
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
"dev": true
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"delegates": {
"version": "1.0.0",
@@ -6490,6 +6498,15 @@
"integrity": "sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==",
"dev": true
},
"dom-iterator": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dom-iterator/-/dom-iterator-1.0.0.tgz",
"integrity": "sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==",
"requires": {
"component-props": "1.1.1",
"component-xor": "0.0.4"
}
},
"dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6787,8 +6804,7 @@
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
"dev": true
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
},
"escape-string-regexp": {
"version": "1.0.5",
@@ -8712,7 +8728,6 @@
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"dev": true,
"requires": {
"delegate": "^3.1.2"
}
@@ -9515,8 +9530,7 @@
"is-extendable": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
"integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
"dev": true
"integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
},
"is-extglob": {
"version": "2.1.1",
@@ -13370,6 +13384,14 @@
"react-is": "^16.8.4"
}
},
"prismjs": {
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.19.0.tgz",
"integrity": "sha512-IVFtbW9mCWm9eOIaEkNyo2Vl4NnEifis2GQ7/MLRG5TQe6t+4Sj9J5QWI9i3v+SS43uZBlCAOn+zYTVYQcPXJw==",
"requires": {
"clipboard": "^2.0.0"
}
},
"private": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -14357,8 +14379,7 @@
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
"dev": true
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"select-hose": {
"version": "2.0.0",
@@ -15435,8 +15456,7 @@
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
"dev": true
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"tmp": {
"version": "0.0.33",
@@ -15706,6 +15726,24 @@
}
}
},
"unescape": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unescape/-/unescape-1.0.1.tgz",
"integrity": "sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ==",
"requires": {
"extend-shallow": "^2.0.1"
},
"dependencies": {
"extend-shallow": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
"requires": {
"is-extendable": "^0.1.0"
}
}
}
},
"unicode-canonical-property-names-ecmascript": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -16070,6 +16108,16 @@
"vue-style-loader": "^4.1.0"
}
},
"vue-prism-editor": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/vue-prism-editor/-/vue-prism-editor-0.5.1.tgz",
"integrity": "sha512-8RBDhfbjAaVXTmIbSwv215QdhAiXKEK6dyjf6HP0dnLnR/2jrsJCatX/ubHqHrvpfPzacUBU+w6Qms1Gf01YkA==",
"requires": {
"dom-iterator": "^1.0.0",
"escape-html": "^1.0.3",
"unescape": "^1.0.1"
}
},
"vue-router": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",

4
package.json
View File

@@ -12,7 +12,9 @@
},
"dependencies": {
"core-js": "^3.4.4",
"js-base64": "^2.5.1"
"js-base64": "^2.5.1",
"prismjs": "^1.19.0",
"vue-prism-editor": "^0.5.1"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.12.0",