Skip to content

Commit 9c9dd61

Browse files
psi-4wardpsi-4ward
committed
svg inline fontawesome icons
1 parent 7371f56 commit 9c9dd61

17 files changed

+110
-50
lines changed

‎app/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"tus-js-client": "^1.4.3",
1616
"uuid": "^3.0.1",
1717
"vue": "^2.3.2",
18+
"vue-awesome": "^2.3.1",
1819
"vuex": "^2.3.1"
1920
},
2021
"devDependencies": {

‎app/src/Admin.vue

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template lang="pug">
22
.download-app
33
a.btn.btn-sm.btn-info.btn-new-session(@click='login()', title='Refresh', v-if="loggedIn")
4-
i.fa.fa-fw.fa-refresh
4+
icon(name="refresh")
55

66
.alert.alert-danger(v-show="error")
77
strong
8-
i.fa.fa-exclamation-triangle
8+
icon.fa-fw(name="exclamation-triangle")
99
| {{ error }}
1010
form.well(v-if='!loggedIn', @submit.stop.prevent="login")
1111
h3 Password
@@ -15,7 +15,7 @@
1515
strong Access denied!
1616
|
1717
button.btn.btn-primary(type="submit", :disabled="!password")
18-
i.fa.fa-sign-in
18+
icon.fa-fw(name="sign-in")
1919
| login
2020

2121
div(v-if="loggedIn")
@@ -32,7 +32,7 @@
3232
tr.bucket(@click="expandView(sid)")
3333
td
3434
| {{ sid }}
35-
i.fa.fa-key.pull-right(v-if="sum[sid].password", title="Password protected")
35+
icon.pull-right(name="key", v-if="sum[sid].password", title="Password protected")
3636
td {{ sum[sid].created | date }}
3737
td
3838
template(v-if="sum[sid].lastDownload") {{ sum[sid].lastDownload | date}}
@@ -62,7 +62,11 @@
6262

6363

6464
<script>
65-
"use strict";
65+
import 'vue-awesome/icons/exclamation-triangle';
66+
import 'vue-awesome/icons/refresh';
67+
import 'vue-awesome/icons/sign-in';
68+
import 'vue-awesome/icons/key';
69+
6670
6771
export default {
6872
name: 'app',

‎app/src/Download.vue

+15-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template lang="pug">
22
.download-app
33
a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
4-
i.fa.fa-fw.fa-cloud-upload
4+
icon.fa-fw(name="cloud-upload")
55
span.hidden-xs new upload
66
.alert.alert-danger(v-show="error")
77
strong
8-
i.fa.fa-exclamation-triangle
8+
icon.fa-fw(name="exclamation-triangle")
99
| {{ error }}
1010
.well(v-if='needsPassword')
1111
h3 Password
@@ -15,17 +15,17 @@
1515
strong Access denied!
1616
|
1717
button.btn.btn-primary(:disabled='password.length<1', @click='decrypt()')
18-
i.fa.fa-key
18+
icon.fa-fw(name="key")
1919
| decrypt
2020
.panel.panel-primary(v-if='!needsPassword')
2121
.panel-heading
2222
strong Files
2323
div.pull-right.btn-group.btn-download-archive(v-if="downloadsAvailable")
2424
a.btn.btn-sm.btn-default(@click="downloadAll('zip')", title="Archive download is not resumeable!")
25-
i.fa.fa-fw.fa-fw.fa-download
25+
icon.fa-fw(name="download")
2626
| zip
2727
a.btn.btn-sm.btn-default(@click="downloadAll('tar.gz')", title="Archive download is not resumeable!")
28-
i.fa.fa-fw.fa-fw.fa-download
28+
icon.fa-fw(name="download")
2929
| tar.gz
3030
.panel-body
3131
table.table.table-hover.table-striped
@@ -37,9 +37,9 @@
3737
div.pull-right.btn-group
3838
clipboard.btn.btn-sm.btn-default(:value='host + file.url', @change='copied(file, $event)', title='Copy to clipboard')
3939
a
40-
i.fa.fa-fw.fa-copy
40+
icon(name="copy")
4141
a.btn.btn-sm.btn-default(title="Preview", @click.prevent.stop="preview=file", v-if="file.previewType")
42-
i.fa.fa-fw.fa-eye
42+
icon(name="eye")
4343
i.pull-right.fa.fa-check.text-success.downloaded(v-show='file.downloaded')
4444
p
4545
strong {{ file.metadata.name }}
@@ -61,6 +61,14 @@
6161
import Clipboard from './common/Clipboard.vue';
6262
import PreviewModal from './Download/PreviewModal.vue';
6363
64+
import 'vue-awesome/icons/cloud-upload';
65+
import 'vue-awesome/icons/exclamation-triangle';
66+
import 'vue-awesome/icons/copy';
67+
import 'vue-awesome/icons/check';
68+
import 'vue-awesome/icons/download';
69+
import 'vue-awesome/icons/key';
70+
import 'vue-awesome/icons/eye';
71+
6472
function getPreviewType(file, maxSize) {
6573
if(!file || !file.metadata) return false;
6674
if(file.metadata.retention === 'one-time') return false;

‎app/src/Download/PreviewModal.vue

+6-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
small {{currentIndex+1}} / {{files.length}}
88
span.btn-group
99
a.btn.btn-sm.btn-default(title="previous", @click="prev", v-show="currentIndex > 0")
10-
i.fa.fa-fw.fa-arrow-left
10+
icon(name="arrow-left")
1111
a.btn.btn-sm.btn-default(title="next", @click="next", v-show="currentIndex < files.length-1")
12-
i.fa.fa-fw.fa-arrow-right
12+
icon(name="arrow-right")
1313
a.btn.btn-sm.btn-default(title="toggle line wrap", @click="lineWrap = !lineWrap", :class="{active:lineWrap}", v-show="current.previewType === 'text'")
14-
i.fa.fa-fw.fa-rotate-left.fa-flip-vertical
14+
icon(name="rotate-left", flip="vertical")
1515
div(slot="body")
1616
div(v-if="current.previewType === 'image'", style="text-align:center")
1717
img(:src="current.url", style="max-width: 100%; height:auto")
@@ -24,6 +24,9 @@
2424

2525
<script type="text/babel">
2626
import Modal from '../common/Modal.vue';
27+
import 'vue-awesome/icons/arrow-left';
28+
import 'vue-awesome/icons/arrow-right';
29+
import 'vue-awesome/icons/rotate-left';
2730
2831
export default {
2932
components: { Modal },

‎app/src/Upload.vue

+19-8
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
<template lang="pug">
22
.upload-app#uploadApp
33
a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
4-
i.fa.fa-fw.fa-cloud-upload
4+
icon.fa-fw(name="cloud-upload")
55
span.hidden-xs new upload
66
.alert.alert-danger(v-show="error")
77
strong
8-
i.fa.fa-exclamation-triangle
8+
icon.fa-fw(name="exclamation-triangle")
99
| {{ error }}
1010
.well(v-show="state === 'uploaded'")
1111
.pull-right.btn-group
1212
a.btn.btn-primary(:href="mailLnk")
13-
i.fa.fa-fw.fa-envelope
13+
icon.fa-fw(name="envelope")
1414
| Mail
1515
clipboard.btn.btn-primary(:value='shareUrl')
1616
h3.text-success
17-
i.fa.fa-check
17+
icon.fa-fw(name="check")
1818
| Upload completed
1919
div.share-link
2020
span.title Download Link:
2121
|
2222
a(:href='shareUrl') {{ shareUrl }}
2323
.row.overall-process(v-show="state === 'uploading'")
2424
.col-xs-12
25-
i.fa.fa-spinner.fa-spin.fa-2x.fa-fw.pull-left
25+
icon.pull-left(name="spinner", scale="2", spin="")
2626
.progress
2727
.progress-bar.progress-bar-success.progress-bar-striped.active(:style="{width: percentUploaded+'%'}")
2828
span(v-show='percentUploaded>10') {{ percentUploaded }}%
@@ -33,11 +33,11 @@
3333
settings
3434
.text-right(v-show='files.length && !disabled')
3535
button.btn.btn-lg.btn-success(@click="$store.dispatch('upload/upload')")
36-
i.fa.fa-upload
36+
icon.fa-fw(name="upload")
3737
| upload
3838
.text-right(v-show="state === 'uploadError'")
3939
button.btn.btn-lg.btn-success(@click="$store.dispatch('upload/upload')")
40-
i.fa.fa-upload
40+
icon.fa-fw(name="upload")
4141
| retry
4242
</template>
4343

@@ -48,13 +48,20 @@
4848
import Settings from './Upload/Settings.vue';
4949
import Files from './Upload/Files.vue';
5050
import Clipboard from './common/Clipboard.vue'
51+
import 'vue-awesome/icons/cloud-upload';
52+
import 'vue-awesome/icons/upload';
53+
import 'vue-awesome/icons/check';
54+
import 'vue-awesome/icons/spinner';
55+
import 'vue-awesome/icons/envelope';
56+
import 'vue-awesome/icons/exclamation-triangle';
57+
5158
5259
export default {
5360
name: 'App',
5461
components: {
5562
Settings,
5663
Files,
57-
Clipboard
64+
Clipboard,
5865
},
5966
6067
computed: {
@@ -87,3 +94,7 @@
8794
8895
}
8996
</script>
97+
98+
<style>
99+
100+
</style>

‎app/src/Upload/Files.vue

+8-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
onclick="document.getElementById('fileInput').click();",
88
v-show="files.length === 0")
99
a
10-
i.fa.fa-plus.fa-4x
10+
icon(name="plus", scale="4")
1111
br
1212
| Drop your files here
1313
table.table.table-striped
@@ -22,18 +22,18 @@
2222
p
2323
input.form-control.input-sm(type="text", placeholder="comment...", v-model="file.comment", :disabled="disabled")
2424
.alert.alert-danger(v-if="file.error")
25-
i.fa.fa-fw.fa-exclamation-triangle
25+
icon.fa-fw(name="exclamation-triangle")
2626
| {{ file.error }}
2727
.progress(v-show="!file.error && (state === 'uploading' || state === 'uploaded')")
2828
.progress-bar.progress-bar-success.progress-bar-striped(:style="{width: file.progress.percentage+'%'}",:class="{active:!file.uploaded}")
2929
td.btns
3030
a(style="cursor:pointer", @click="!disabled && $store.commit('upload/REMOVE_FILE', file)", :disabled="disabled")
31-
i.fa.fa-fw.fa-times
31+
icon(name="times")
3232

3333
input#fileInput(type="file", @change="$store.dispatch('upload/addFiles', $event.target.files)", multiple="", :disabled="disabled", style="display: none")
3434
.text-right
3535
a.btn.btn-success.btn-sm(onclick="document.getElementById('fileInput').click();", :disabled="disabled", v-show="files.length>0")
36-
i.fa.fa-plus-circle.fa-fw
36+
icon(name="plus-circle")
3737
</template>
3838

3939

@@ -42,6 +42,10 @@
4242
import {mapState} from 'vuex';
4343
import dragDrop from 'drag-drop';
4444
import FileIcon from '../common/FileIcon.vue';
45+
import 'vue-awesome/icons/plus'
46+
import 'vue-awesome/icons/plus-circle'
47+
import 'vue-awesome/icons/times'
48+
import 'vue-awesome/icons/exclamation-triangle'
4549
4650
export default {
4751
name: 'Files',

‎app/src/Upload/Settings.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,13 @@
1717
@input="$store.commit('upload/PASSWORD', $event.target.value)",
1818
:disabled='disabled', placeholder='optional')
1919
span.input-group-addon(style='cursor: pointer', title='generate password', @click='generatePassword()')
20-
i.fa.fa-key
20+
icon(name="key")
2121
</template>
2222

2323
<script type="text/babel">
2424
"use strict";
2525
import {mapState} from 'vuex';
26+
import 'vue-awesome/icons/key';
2627
2728
const passGen = {
2829
_pattern : /[A-Z0-9_\-\+\!]/,

‎app/src/admin.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'babel-polyfill';
22
import Vue from 'vue';
33
import Admin from './Admin.vue';
4+
import Icon from 'vue-awesome/components/Icon.vue'
45

56
function parseDate(str) {
67
if(!str) return str;
@@ -25,6 +26,7 @@ Vue.filter('date', function(val, format) {
2526
return isDate(val) ? formatDate(val, format) : val;
2627
});
2728

29+
Vue.component('icon', Icon);
2830

2931
new Vue({
3032
el: '#admin',

‎app/src/common/Clipboard.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,17 @@ Copies a string into the clipboard
1313
<template lang="pug">
1414
span(@click.stop='copy()', style='cursor: pointer')
1515
slot(:state='state')
16-
i.fa.fa-fw(:class="{'fa-copy':state=='pristine','fa-check':state=='copied','fa-exclamation-triangle':state=='error'}")
16+
icon.fa-fw(name="copy", v-if="state==='pristine'")
17+
icon.fa-fw(name="check", v-if="state==='copied'")
18+
icon.fa-fw(name="exclamation-triangle", v-if="state==='error'")
1719
slot(name='text') Copy
1820
</template>
1921

2022

2123
<script type="text/babel">
22-
"use strict";
24+
import 'vue-awesome/icons/check';
25+
import 'vue-awesome/icons/copy';
26+
import 'vue-awesome/icons/exclamation-triangle';
2327

2428
export default {
2529
name: "Clipboard",

‎app/src/common/FileIcon.vue

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
11
<template lang="pug">
22
div.file-icon
3-
i.fa.fa-fw.fa-3x(v-if='!isImageBlob', :class='iconClass')
3+
icon(:name="iconClass", v-if="!isImageBlob", scale="3")
44
|
55
img(v-if='isImageBlob', :src='blobUrl')
66
</template>
77

88

99
<script type="text/babel">
10-
"use strict";
10+
import 'vue-awesome/icons/file-image-o';
11+
import 'vue-awesome/icons/file-text-o';
12+
import 'vue-awesome/icons/file-video-o';
13+
import 'vue-awesome/icons/file-audio-o';
14+
import 'vue-awesome/icons/file-archive-o';
1115
1216
export default {
1317
props: ['file'],
1418
1519
computed: {
1620
iconClass() {
1721
const type = this.file.type || this.file.metadata && this.file.metadata.type;
18-
if(!type) return 'fa-file-o';
19-
if(type.startsWith('image')) return 'fa-file-image-o';
20-
if(type.startsWith('text')) return 'fa-file-text-o';
21-
if(type.startsWith('video')) return 'fa-file-video-o';
22-
if(type.startsWith('audio')) return 'fa-file-audio-o';
23-
if(type === 'application/pdf') return 'fa-file-pdf-o';
24-
if(type.startsWith('application')) return 'fa-file-archive-o';
25-
return 'fa-file-o';
22+
if(!type) return 'file-o';
23+
if(type.startsWith('image')) return 'file-image-o';
24+
if(type.startsWith('text')) return 'file-text-o';
25+
if(type.startsWith('video')) return 'file-video-o';
26+
if(type.startsWith('audio')) return 'file-audio-o';
27+
if(type === 'application/pdf') return 'file-pdf-o';
28+
if(type.startsWith('application')) return 'file-archive-o';
29+
return 'file-o';
2630
},
2731
isImageBlob() {
2832
if(!URL && !webkitURL) return false;

‎app/src/download.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import 'babel-polyfill';
22
import Vue from 'vue';
33
import Download from './Download.vue';
4+
import Icon from 'vue-awesome/components/Icon.vue'
5+
6+
Vue.component('icon', Icon);
47

58
new Vue({
69
el: '#download',

‎app/src/upload.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
"use strict";
2-
31
import 'babel-polyfill';
42
import Vue from 'vue';
53
import Upload from './Upload.vue';
64
import store from './Upload/store.js';
5+
import Icon from 'vue-awesome/components/Icon.vue'
6+
7+
Vue.component('icon', Icon);
78

89
new Vue({
910
el: '#upload',

‎public/assets/styles.css

+10
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,16 @@ body > .container {
5252
td.file-icon {
5353
width: 60px;
5454
}
55+
h1 .fa-icon {
56+
height: 50px;
57+
vertical-align: middle;
58+
}
59+
.btn .fa-icon.fa-fw {
60+
width: 25px;
61+
}
62+
.btn .fa-icon {
63+
vertical-align: middle;
64+
}
5565

5666

5767
/* FileIcon Component */

0 commit comments

Comments
 (0)