76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<template>
|
|
<div class="attaches-block">
|
|
<div
|
|
:data-extension="data.file.extension"
|
|
:style="{ color: color }"
|
|
class="attaches-block-file-icon"
|
|
>
|
|
<svg width="32" height="40">
|
|
<path
|
|
v-if="color"
|
|
d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"
|
|
/>
|
|
<g v-else fill="#A8ACB8" fill-rule="evenodd">
|
|
<path
|
|
fill-rule="nonzero"
|
|
d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"
|
|
/>
|
|
<path d="M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="attaches-block-file-info">
|
|
<p class="attaches-block-title">{{ data.file.name }}</p>
|
|
<p class="attaches-block-size">{{ data.file.size | byteFormatter }}</p>
|
|
</div>
|
|
<a :href="data.file.url" class="attaches-block-file download-button"></a>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import byteFormatter from "../filters/byteFormatter";
|
|
|
|
const extensions = {
|
|
doc: "#3e74da",
|
|
docx: "#3e74da",
|
|
odt: "#3e74da",
|
|
pdf: "#d47373",
|
|
rtf: "#656ecd",
|
|
tex: "#5a5a5b",
|
|
txt: "#5a5a5b",
|
|
pptx: "#e07066",
|
|
ppt: "#e07066",
|
|
mp3: "#eab456",
|
|
mp4: "#f676a6",
|
|
xls: "#3f9e64",
|
|
html: "#2988f0",
|
|
htm: "#2988f0",
|
|
png: "#f676a6",
|
|
jpg: "#f67676",
|
|
jpeg: "#f67676",
|
|
gif: "#f6af76",
|
|
zip: "#4f566f",
|
|
rar: "#4f566f",
|
|
exe: "#e26f6f",
|
|
svg: "#bf5252",
|
|
key: "#e07066",
|
|
sketch: "#df821c",
|
|
ai: "#df821c",
|
|
psd: "#388ae5",
|
|
dmg: "#e26f6f",
|
|
json: "#2988f0",
|
|
csv: "#3f9e64"
|
|
};
|
|
|
|
export default {
|
|
filters: {
|
|
byteFormatter
|
|
},
|
|
props: ["data"],
|
|
computed: {
|
|
color() {
|
|
return extensions[this.data.file.extension];
|
|
}
|
|
}
|
|
};
|
|
</script> |