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

svg inline fontawesome icons

Browse Source
This commit is contained in:
Christoph Wiechert
2017-07-18 13:55:47 +02:00
parent 7371f56862
commit 9c9dd61735
17 changed files with 110 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/package.json
View File

@@ -15,6 +15,7 @@
"tus-js-client": "^1.4.3",
"uuid": "^3.0.1",
"vue": "^2.3.2",
"vue-awesome": "^2.3.1",
"vuex": "^2.3.1"
},
"devDependencies": {

14
app/src/Admin.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
.download-app
a.btn.btn-sm.btn-info.btn-new-session(@click='login()', title='Refresh', v-if="loggedIn")
i.fa.fa-fw.fa-refresh
icon(name="refresh")
.alert.alert-danger(v-show="error")
strong
i.fa.fa-exclamation-triangle
icon.fa-fw(name="exclamation-triangle")
| {{ error }}
form.well(v-if='!loggedIn', @submit.stop.prevent="login")
h3 Password
@@ -15,7 +15,7 @@
strong Access denied!
|
button.btn.btn-primary(type="submit", :disabled="!password")
i.fa.fa-sign-in
icon.fa-fw(name="sign-in")
| login
div(v-if="loggedIn")
@@ -32,7 +32,7 @@
tr.bucket(@click="expandView(sid)")
td
| {{ sid }}
i.fa.fa-key.pull-right(v-if="sum[sid].password", title="Password protected")
icon.pull-right(name="key", v-if="sum[sid].password", title="Password protected")
td {{ sum[sid].created | date }}
td
template(v-if="sum[sid].lastDownload") {{ sum[sid].lastDownload | date}}
@@ -62,7 +62,11 @@
<script>
"use strict";
import 'vue-awesome/icons/exclamation-triangle';
import 'vue-awesome/icons/refresh';
import 'vue-awesome/icons/sign-in';
import 'vue-awesome/icons/key';
export default {
name: 'app',

22
app/src/Download.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
.download-app
a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
i.fa.fa-fw.fa-cloud-upload
icon.fa-fw(name="cloud-upload")
span.hidden-xs new upload
.alert.alert-danger(v-show="error")
strong
i.fa.fa-exclamation-triangle
icon.fa-fw(name="exclamation-triangle")
| {{ error }}
.well(v-if='needsPassword')
h3 Password
@@ -15,17 +15,17 @@
strong Access denied!
|
button.btn.btn-primary(:disabled='password.length<1', @click='decrypt()')
i.fa.fa-key
icon.fa-fw(name="key")
| decrypt
.panel.panel-primary(v-if='!needsPassword')
.panel-heading
strong Files
div.pull-right.btn-group.btn-download-archive(v-if="downloadsAvailable")
a.btn.btn-sm.btn-default(@click="downloadAll('zip')", title="Archive download is not resumeable!")
i.fa.fa-fw.fa-fw.fa-download
icon.fa-fw(name="download")
| zip
a.btn.btn-sm.btn-default(@click="downloadAll('tar.gz')", title="Archive download is not resumeable!")
i.fa.fa-fw.fa-fw.fa-download
icon.fa-fw(name="download")
| tar.gz
.panel-body
table.table.table-hover.table-striped
@@ -37,9 +37,9 @@
div.pull-right.btn-group
clipboard.btn.btn-sm.btn-default(:value='host + file.url', @change='copied(file, $event)', title='Copy to clipboard')
a
i.fa.fa-fw.fa-copy
icon(name="copy")
a.btn.btn-sm.btn-default(title="Preview", @click.prevent.stop="preview=file", v-if="file.previewType")
i.fa.fa-fw.fa-eye
icon(name="eye")
i.pull-right.fa.fa-check.text-success.downloaded(v-show='file.downloaded')
p
strong {{ file.metadata.name }}
@@ -61,6 +61,14 @@
import Clipboard from './common/Clipboard.vue';
import PreviewModal from './Download/PreviewModal.vue';
import 'vue-awesome/icons/cloud-upload';
import 'vue-awesome/icons/exclamation-triangle';
import 'vue-awesome/icons/copy';
import 'vue-awesome/icons/check';
import 'vue-awesome/icons/download';
import 'vue-awesome/icons/key';
import 'vue-awesome/icons/eye';
function getPreviewType(file, maxSize) {
if(!file || !file.metadata) return false;
if(file.metadata.retention === 'one-time') return false;

9
app/src/Download/PreviewModal.vue
View File

@@ -7,11 +7,11 @@
small {{currentIndex+1}} / {{files.length}}
span.btn-group
a.btn.btn-sm.btn-default(title="previous", @click="prev", v-show="currentIndex > 0")
i.fa.fa-fw.fa-arrow-left
icon(name="arrow-left")
a.btn.btn-sm.btn-default(title="next", @click="next", v-show="currentIndex < files.length-1")
i.fa.fa-fw.fa-arrow-right
icon(name="arrow-right")
a.btn.btn-sm.btn-default(title="toggle line wrap", @click="lineWrap = !lineWrap", :class="{active:lineWrap}", v-show="current.previewType === 'text'")
i.fa.fa-fw.fa-rotate-left.fa-flip-vertical
icon(name="rotate-left", flip="vertical")
div(slot="body")
div(v-if="current.previewType === 'image'", style="text-align:center")
img(:src="current.url", style="max-width: 100%; height:auto")
@@ -24,6 +24,9 @@
<script type="text/babel">
import Modal from '../common/Modal.vue';
import 'vue-awesome/icons/arrow-left';
import 'vue-awesome/icons/arrow-right';
import 'vue-awesome/icons/rotate-left';
export default {
components: { Modal },

27
app/src/Upload.vue
View File

@@ -1,20 +1,20 @@
<template lang="pug">
.upload-app#uploadApp
a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
i.fa.fa-fw.fa-cloud-upload
icon.fa-fw(name="cloud-upload")
span.hidden-xs new upload
.alert.alert-danger(v-show="error")
strong
i.fa.fa-exclamation-triangle
icon.fa-fw(name="exclamation-triangle")
| {{ error }}
.well(v-show="state === 'uploaded'")
.pull-right.btn-group
a.btn.btn-primary(:href="mailLnk")
i.fa.fa-fw.fa-envelope
icon.fa-fw(name="envelope")
| Mail
clipboard.btn.btn-primary(:value='shareUrl')
h3.text-success
i.fa.fa-check
icon.fa-fw(name="check")
| Upload completed
div.share-link
span.title Download Link:
@@ -22,7 +22,7 @@
a(:href='shareUrl') {{ shareUrl }}
.row.overall-process(v-show="state === 'uploading'")
.col-xs-12
i.fa.fa-spinner.fa-spin.fa-2x.fa-fw.pull-left
icon.pull-left(name="spinner", scale="2", spin="")
.progress
.progress-bar.progress-bar-success.progress-bar-striped.active(:style="{width: percentUploaded+'%'}")
span(v-show='percentUploaded>10') {{ percentUploaded }}%
@@ -33,11 +33,11 @@
settings
.text-right(v-show='files.length && !disabled')
button.btn.btn-lg.btn-success(@click="$store.dispatch('upload/upload')")
i.fa.fa-upload
icon.fa-fw(name="upload")
| upload
.text-right(v-show="state === 'uploadError'")
button.btn.btn-lg.btn-success(@click="$store.dispatch('upload/upload')")
i.fa.fa-upload
icon.fa-fw(name="upload")
| retry
</template>
@@ -48,13 +48,20 @@
import Settings from './Upload/Settings.vue';
import Files from './Upload/Files.vue';
import Clipboard from './common/Clipboard.vue'
import 'vue-awesome/icons/cloud-upload';
import 'vue-awesome/icons/upload';
import 'vue-awesome/icons/check';
import 'vue-awesome/icons/spinner';
import 'vue-awesome/icons/envelope';
import 'vue-awesome/icons/exclamation-triangle';
export default {
name: 'App',
components: {
Settings,
Files,
Clipboard
Clipboard,
},
computed: {
@@ -87,3 +94,7 @@
}
</script>
<style>
</style>

12
app/src/Upload/Files.vue
View File

@@ -7,7 +7,7 @@
onclick="document.getElementById('fileInput').click();",
v-show="files.length === 0")
a
i.fa.fa-plus.fa-4x
icon(name="plus", scale="4")
br
| Drop your files here
table.table.table-striped
@@ -22,18 +22,18 @@
p
input.form-control.input-sm(type="text", placeholder="comment...", v-model="file.comment", :disabled="disabled")
.alert.alert-danger(v-if="file.error")
i.fa.fa-fw.fa-exclamation-triangle
icon.fa-fw(name="exclamation-triangle")
| {{ file.error }}
.progress(v-show="!file.error && (state === 'uploading' || state === 'uploaded')")
.progress-bar.progress-bar-success.progress-bar-striped(:style="{width: file.progress.percentage+'%'}",:class="{active:!file.uploaded}")
td.btns
a(style="cursor:pointer", @click="!disabled && $store.commit('upload/REMOVE_FILE', file)", :disabled="disabled")
i.fa.fa-fw.fa-times
icon(name="times")
input#fileInput(type="file", @change="$store.dispatch('upload/addFiles', $event.target.files)", multiple="", :disabled="disabled", style="display: none")
.text-right
a.btn.btn-success.btn-sm(onclick="document.getElementById('fileInput').click();", :disabled="disabled", v-show="files.length>0")
i.fa.fa-plus-circle.fa-fw
icon(name="plus-circle")
</template>
@@ -42,6 +42,10 @@
import {mapState} from 'vuex';
import dragDrop from 'drag-drop';
import FileIcon from '../common/FileIcon.vue';
import 'vue-awesome/icons/plus'
import 'vue-awesome/icons/plus-circle'
import 'vue-awesome/icons/times'
import 'vue-awesome/icons/exclamation-triangle'
export default {
name: 'Files',

3
app/src/Upload/Settings.vue
View File

@@ -17,12 +17,13 @@
@input="$store.commit('upload/PASSWORD', $event.target.value)",
:disabled='disabled', placeholder='optional')
span.input-group-addon(style='cursor: pointer', title='generate password', @click='generatePassword()')
i.fa.fa-key
icon(name="key")
</template>
<script type="text/babel">
"use strict";
import {mapState} from 'vuex';
import 'vue-awesome/icons/key';
const passGen = {
_pattern : /[A-Z0-9_\-\+\!]/,

2
app/src/admin.js
View File

@@ -1,6 +1,7 @@
import 'babel-polyfill';
import Vue from 'vue';
import Admin from './Admin.vue';
import Icon from 'vue-awesome/components/Icon.vue'
function parseDate(str) {
if(!str) return str;
@@ -25,6 +26,7 @@ Vue.filter('date', function(val, format) {
return isDate(val) ? formatDate(val, format) : val;
});
Vue.component('icon', Icon);
new Vue({
el: '#admin',

8
app/src/common/Clipboard.vue
View File

@@ -13,13 +13,17 @@ Copies a string into the clipboard
<template lang="pug">
span(@click.stop='copy()', style='cursor: pointer')
slot(:state='state')
i.fa.fa-fw(:class="{'fa-copy':state=='pristine','fa-check':state=='copied','fa-exclamation-triangle':state=='error'}")
icon.fa-fw(name="copy", v-if="state==='pristine'")
icon.fa-fw(name="check", v-if="state==='copied'")
icon.fa-fw(name="exclamation-triangle", v-if="state==='error'")
slot(name='text') Copy
</template>
<script type="text/babel">
"use strict";
import 'vue-awesome/icons/check';
import 'vue-awesome/icons/copy';
import 'vue-awesome/icons/exclamation-triangle';
export default {
name: "Clipboard",

24
app/src/common/FileIcon.vue
View File

@@ -1,13 +1,17 @@
<template lang="pug">
div.file-icon
i.fa.fa-fw.fa-3x(v-if='!isImageBlob', :class='iconClass')
icon(:name="iconClass", v-if="!isImageBlob", scale="3")
|
img(v-if='isImageBlob', :src='blobUrl')
</template>
<script type="text/babel">
"use strict";
import 'vue-awesome/icons/file-image-o';
import 'vue-awesome/icons/file-text-o';
import 'vue-awesome/icons/file-video-o';
import 'vue-awesome/icons/file-audio-o';
import 'vue-awesome/icons/file-archive-o';
export default {
props: ['file'],
@@ -15,14 +19,14 @@
computed: {
iconClass() {
const type = this.file.type || this.file.metadata && this.file.metadata.type;
if(!type) return 'fa-file-o';
if(type.startsWith('image')) return 'fa-file-image-o';
if(type.startsWith('text')) return 'fa-file-text-o';
if(type.startsWith('video')) return 'fa-file-video-o';
if(type.startsWith('audio')) return 'fa-file-audio-o';
if(type === 'application/pdf') return 'fa-file-pdf-o';
if(type.startsWith('application')) return 'fa-file-archive-o';
return 'fa-file-o';
if(!type) return 'file-o';
if(type.startsWith('image')) return 'file-image-o';
if(type.startsWith('text')) return 'file-text-o';
if(type.startsWith('video')) return 'file-video-o';
if(type.startsWith('audio')) return 'file-audio-o';
if(type === 'application/pdf') return 'file-pdf-o';
if(type.startsWith('application')) return 'file-archive-o';
return 'file-o';
},
isImageBlob() {
if(!URL && !webkitURL) return false;

3
app/src/download.js
View File

@@ -1,6 +1,9 @@
import 'babel-polyfill';
import Vue from 'vue';
import Download from './Download.vue';
import Icon from 'vue-awesome/components/Icon.vue'
Vue.component('icon', Icon);
new Vue({
el: '#download',

5
app/src/upload.js
View File

@@ -1,9 +1,10 @@
"use strict";
import 'babel-polyfill';
import Vue from 'vue';
import Upload from './Upload.vue';
import store from './Upload/store.js';
import Icon from 'vue-awesome/components/Icon.vue'
Vue.component('icon', Icon);
new Vue({
el: '#upload',

10
public/assets/styles.css
View File

@@ -52,6 +52,16 @@ body > .container {
td.file-icon {
width: 60px;
}
h1 .fa-icon {
height: 50px;
vertical-align: middle;
}
.btn .fa-icon.fa-fw {
width: 25px;
}
.btn .fa-icon {
vertical-align: middle;
}
/* FileIcon Component */

5
public/html/admin.html
View File

@@ -7,7 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="/assets/styles.css" rel="stylesheet">
</head>
@@ -15,7 +14,9 @@
<div class="container">
<h1>
<i class="fa fa-fw fa-gears" style="color: #0275D8"></i>
<svg version="1.1" role="presentation" viewBox="0 0 1920 1792" class="fa-icon" style="fill: #0275D8">
<path d="M1280 864q0-14-9-23l-352-352q-9-9-23-9t-23 9l-351 351q-10 12-10 24 0 14 9 23t23 9h224v352q0 13 9.5 22.5t22.5 9.5h192q13 0 22.5-9.5t9.5-22.5v-352h224q13 0 22.5-9.5t9.5-22.5zM1920 1152q0 159-112.5 271.5t-271.5 112.5h-1088q-185 0-316.5-131.5t-131.5-316.5q0-130 70-240t188-165q-2-30-2-43 0-212 150-362t362-150q156 0 285.5 87t188.5 231q71-62 166-62 106 0 181 75t75 181q0 76-41 138 130 31 213.5 135.5t83.5 238.5z"></path>
</svg>
PsiTransfer Admin
</h1>
<hr>

5
public/html/download.html
View File

@@ -7,7 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="/assets/styles.css" rel="stylesheet">
</head>
@@ -15,7 +14,9 @@
<div class="container">
<h1>
<i class="fa fa-fw fa-cloud-download" style="color: #0275D8"></i>
<svg version="1.1" role="presentation" viewBox="0 0 1920 1792" class="fa-icon" style="fill: #0275D8">
<path d="M1280 928q0-14-9-23t-23-9h-224v-352q0-13-9.5-22.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 22.5v352h-224q-13 0-22.5 9.5t-9.5 22.5q0 14 9 23l352 352q9 9 23 9t23-9l351-351q10-12 10-24zM1920 1152q0 159-112.5 271.5t-271.5 112.5h-1088q-185 0-316.5-131.5t-131.5-316.5q0-130 70-240t188-165q-2-30-2-43 0-212 150-362t362-150q156 0 285.5 87t188.5 231q71-62 166-62 106 0 181 75t75 181q0 76-41 138 130 31 213.5 135.5t83.5 238.5z"></path>
</svg>
PsiTransfer
</h1>
<hr>

5
public/html/error.html
View File

@@ -7,7 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
html {
position: relative;
@@ -29,7 +28,9 @@
<body>
<div class="container">
<h1>
<i class="fa fa-fw fa-cloud-upload" style="color: #0275D8"></i>
<svg version="1.1" role="presentation" viewBox="0 0 1920 1792" class="fa-icon" style="fill: #0275D8">
<path d="M1280 864q0-14-9-23l-352-352q-9-9-23-9t-23 9l-351 351q-10 12-10 24 0 14 9 23t23 9h224v352q0 13 9.5 22.5t22.5 9.5h192q13 0 22.5-9.5t9.5-22.5v-352h224q13 0 22.5-9.5t9.5-22.5zM1920 1152q0 159-112.5 271.5t-271.5 112.5h-1088q-185 0-316.5-131.5t-131.5-316.5q0-130 70-240t188-165q-2-30-2-43 0-212 150-362t362-150q156 0 285.5 87t188.5 231q71-62 166-62 106 0 181 75t75 181q0 76-41 138 130 31 213.5 135.5t83.5 238.5z"></path>
</svg>
PsiTransfer
</h1>
<hr>

5
public/html/upload.html
View File

@@ -7,7 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="/assets/styles.css" rel="stylesheet">
</head>
@@ -17,7 +16,9 @@
<div class="container">
<h1>
<i class="fa fa-fw fa-cloud-upload" style="color: #0275D8"></i>
<svg version="1.1" role="presentation" viewBox="0 0 1920 1792" class="fa-icon" style="fill: #0275D8">
<path d="M1280 864q0-14-9-23l-352-352q-9-9-23-9t-23 9l-351 351q-10 12-10 24 0 14 9 23t23 9h224v352q0 13 9.5 22.5t22.5 9.5h192q13 0 22.5-9.5t9.5-22.5v-352h224q13 0 22.5-9.5t9.5-22.5zM1920 1152q0 159-112.5 271.5t-271.5 112.5h-1088q-185 0-316.5-131.5t-131.5-316.5q0-130 70-240t188-165q-2-30-2-43 0-212 150-362t362-150q156 0 285.5 87t188.5 231q71-62 166-62 106 0 181 75t75 181q0 76-41 138 130 31 213.5 135.5t83.5 238.5z"></path>
</svg>
PsiTransfer
</h1>
<hr>