init

app/src/common/Clipboard.vue

@@ -0,0 +1,62 @@
+<!--
+# Clipboard Component
+Copies a string into the clipboard
+
+## Props
+* value: String
+
+## Slots
+* default: Replaces inner content
+* text:    Replaces the text
+-->
+
+<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'}")
+      slot(name='text')  Copy
+</template>
+
+
+<script type="text/babel">
+  "use strict";
+
+  export default {
+    name: "Clipboard",
+    props: {
+      value: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        state: 'pristine' // copied, error
+      };
+    },
+    methods: {
+      copy() {
+        let el = document.createElement('textarea');
+        Object.assign(el.style, {
+          position: 'absolute',
+          left: '-200%'
+        });
+        el.value = this.value;
+        document.body.appendChild(el);
+
+        let success = false;
+        try {
+          el.select();
+          success = document.execCommand('copy');
+        }
+        catch(e) {
+          alert('Dein alter Browser unterstützt diese Funktion leider nicht.');
+          console.error(e);
+        }
+        document.body.removeChild(el);
+        this.state = success ? 'copied' : 'error';
+        this.$emit('change', this.state);
+      }
+    }
+  };
+</script>

app/src/common/FileIcon.vue

@@ -0,0 +1,37 @@
+<template lang="pug">
+  div
+    i.fa.fa-fw.fa-3x(v-if='!isImageBlob', :class='iconClass')
+    |
+    img(v-if='isImageBlob', :src='blobUrl', style='width:54px; height:auto;')
+</template>
+
+
+<script type="text/babel">
+  "use strict";
+
+  export default {
+    props: ['file'],
+
+    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';
+      },
+      isImageBlob() {
+        if(!URL && !webkitURL) return false;
+        return this.file instanceof File && this.file.type.startsWith('image');
+      },
+      blobUrl() {
+        if(!this.isImageBlob) return;
+        return (URL || webkitURL).createObjectURL(this.file);
+      }
+    }
+  };
+</script>