ttt/transfer
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Preview improvements

Browse Source
This commit is contained in:
Christoph Wiechert
2017-05-08 22:17:12 +02:00
parent f123629ce1
commit 390cca0068
2 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/src/Download.vue
View File

@@ -41,7 +41,7 @@
clipboard.btn.btn-sm.btn-default(:value='host + file.url', @change='copied(file, $event)', title='Copy to clipboard', style='margin: 0 5px') clipboard.btn.btn-sm.btn-default(:value='host + file.url', @change='copied(file, $event)', title='Copy to clipboard', style='margin: 0 5px')
a a
i.fa.fa-fw.fa-copy i.fa.fa-fw.fa-copy
a.btn.btn-sm.btn-default(title="preview", @click.prevent.stop="preview=file", v-if="getPreviewType(file)") a.btn.btn-sm.btn-default(title="Preview", @click.prevent.stop="preview=file", v-if="getPreviewType(file)")
i.fa.fa-fw.fa-eye i.fa.fa-fw.fa-eye
p p
strong {{ file.metadata.name }} strong {{ file.metadata.name }}
@@ -54,7 +54,9 @@
div(v-if="getPreviewType(preview) === 'image'", style="text-align:center") div(v-if="getPreviewType(preview) === 'image'", style="text-align:center")
img(:src="preview.url", style="max-width: 100%; height:auto") img(:src="preview.url", style="max-width: 100%; height:auto")
div(v-if="getPreviewType(preview) === 'text'") div(v-if="getPreviewType(preview) === 'text'")
pre {{ previewText }} a.btn.btn-sm(style="position:absolute; right:5px; top:-30px;", title="toggle line wrap", @click="lineWrap = !lineWrap", :class="{active:lineWrap}")
i.fa.fa-fw.fa-rotate-left.fa-flip-vertical
pre(:style="{'white-space':lineWrap?'pre-wrap':'pre'}") {{ previewText }}
p(v-if="getPreviewType(preview) === false", style="text-align:center") p(v-if="getPreviewType(preview) === false", style="text-align:center")
strong.text-danger No preview available strong.text-danger No preview available
</template> </template>
@@ -85,7 +87,8 @@
host: document.location.protocol + '//' + document.location.host, host: document.location.protocol + '//' + document.location.host,
config: {}, config: {},
preview: false, preview: false,
previewText: '' previewText: '',
lineWrap: false
} }
}, },
@@ -104,12 +107,16 @@
methods: { methods: {
getPreviewType(file) { getPreviewType(file) {
if(!file || !file.metadata.type) return false; if(!file || !file.metadata) return false;
if(file.metadata.retention === 'one-time') return false; if(file.metadata.retention === 'one-time') return false;
// no preview for files size > 2MB // no preview for files size > 2MB
if(file.size > this.config.maxPreviewSize) return false; if(file.size > this.config.maxPreviewSize) return false;
if(file.metadata.type.startsWith('image/')) return 'image'; if(file.metadata.type && file.metadata.type.startsWith('image/')) return 'image';
else if(file.metadata.type.startsWith('text/')) return 'text'; else if(file.metadata.type && file.metadata.type.match(/(text\/|xml|json|javascript|x-sh)/)
|| file.metadata.name && file.metadata.name
.match(/\.(jsx|vue|sh|pug|less|scss|sass|c|h|conf|log|bat|cmd|lua|class|java|py|php|yml)$/)) {
return 'text';
}
return false; return false;
}, },
getPreviewText() { getPreviewText() {

5
app/src/common/Modal.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug"> <template lang="pug">
.modal.fade.in.background-darken(ref='modal', style="display:block", tabindex='-1', role='dialog', @click.self='close()', @keyup.esc='close()') .modal.fade.in.background-darken(ref='modal', style="display:block", tabindex='-1', role='dialog', @click.self='close()', @keyup.esc='close()')
.modal-dialog.modal-lg(role='document') .modal-dialog.modal-fluid(role='document')
.modal-content .modal-content
.modal-header(v-if='hasHeader') .modal-header(v-if='hasHeader')
button.close(type='button', data-dismiss='modal', aria-label='Close', @click='close()') button.close(type='button', data-dismiss='modal', aria-label='Close', @click='close()')
@@ -53,4 +53,7 @@
overflow-x: auto; overflow-x: auto;
overflow-y: scroll; overflow-y: scroll;
} }
.modal-fluid {
width: 90%;
}
</style> </style>