Add attaches block

This commit is contained in:
KingOfDog 2020-08-21 21:59:36 +02:00
parent 2fa432b6b8
commit 0d81b8da79
5 changed files with 122 additions and 0 deletions

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
<path 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"/>
</svg>

After

Width:  |  Height:  |  Size: 240 B

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40">
<g 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>

After

Width:  |  Height:  |  Size: 364 B

View File

@ -0,0 +1,81 @@
<template>
<div class="attaches-block">
<div
:data-extension="data.file.extension"
:style="{ color: color }"
class="attaches-block-file-icon"
>
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
v-bind:xlink:href="color ? customIcon : standardIcon"
/>
</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"],
data() {
return {
standardIcon: require("@/assets/svg/standard.svg"),
customIcon: require("@/assets/svg/custom.svg")
};
},
computed: {
color() {
return extensions[this.data.file.extension];
}
}
};
</script>
<style scoped>
.attaches-block-file-icon::before {
content: attr(data-extension);
}
</style>

View File

@ -10,6 +10,7 @@
</template>
<script>
import AttachesBlock from "./AttachesBlock";
import EmbedBlock from "./EmbedBlock";
import HeaderBlock from "./HeaderBlock";
import ImageBlock from "./ImageBlock";
@ -20,6 +21,7 @@ import QuoteBlock from "./QuoteBlock";
import WarningBlock from "./WarningBlock";
const componentTypes = {
attaches: AttachesBlock,
embed: EmbedBlock,
header: HeaderBlock,
image: ImageBlock,

View File

@ -0,0 +1,30 @@
module.exports = function(size) {
var result;
switch (true) {
case size === null || size === "" || isNaN(size):
result = "-";
break;
case size >= 0 && size < 1024:
result = size + " B";
break;
case size >= 1024 && size < Math.pow(1024, 2):
result = Math.round((size / 1024) * 100) / 100 + " KiB";
break;
case size >= Math.pow(1024, 2) && size < Math.pow(1024, 3):
result = Math.round((size / Math.pow(1024, 2)) * 100) / 100 + " MiB";
break;
case size >= Math.pow(1024, 3) && size < Math.pow(1024, 4):
result = Math.round((size / Math.pow(1024, 3)) * 100) / 100 + " GiB";
break;
default:
result = Math.round((size / Math.pow(1024, 4)) * 100) / 100 + " TiB";
}
return result;
};