97e7b011d9
* Added login form to home page with focus on load * Tags update after editing tags from title card * Fixed uploading of images/files * Fixed images not appearing when opening images tab * Search hits all categories on search, like archived * Got rid of brand icons to reduce size * Got rid of DiffPatchMatch and Crypto from note input panel to reduce size * Disabled animation on io events so they don't annoy the shit out of people on other computers
124 lines
2.7 KiB
Vue
124 lines
2.7 KiB
Vue
<style type="text/css" scoped>
|
|
|
|
.img-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.img-row {
|
|
height: 30vh;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.img-row:last-child {
|
|
/* There's no science in using "10" here. In all my testing, this delivered the best results. */
|
|
flex-grow: 10;
|
|
}
|
|
|
|
.img-row > img {
|
|
max-height: calc(100% - 10px);
|
|
min-width: calc(100% - 10px);
|
|
max-width: calc(100% - 10px);
|
|
object-fit: cover;
|
|
vertical-align: bottom;
|
|
/*padding: 5px;*/
|
|
box-shadow: 0px 2px 2px 1px rgba(34,36,38,0.3);
|
|
cursor: pointer;
|
|
}
|
|
|
|
</style>
|
|
|
|
<template>
|
|
<div>
|
|
|
|
<div v-if="uploadedToNote.length > 0">
|
|
<h2>Images Uploaded to Note</h2>
|
|
<div class="ui fluid green button" v-on:click="$router.push('/attachments/note/'+noteId)">
|
|
Manage Files on this Note
|
|
<i class="chevron circle right icon"></i>
|
|
</div>
|
|
<p></p>
|
|
<div class="img-container">
|
|
<div v-for="file in uploadedToNote" class="img-row" v-on:click="onFileClick(file)">
|
|
<img :src="`/api/static/thumb_${file.file_location}`">
|
|
</div>
|
|
|
|
<!-- extra row helps it display properly -->
|
|
<div class="img-row"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Add images to note -->
|
|
<div v-if="files.length > 0">
|
|
<h2>All other Images</h2>
|
|
<div class="ui fluid green button" v-on:click="$router.push('/attachments')">
|
|
Manage All Files
|
|
<i class="chevron circle right icon"></i>
|
|
</div>
|
|
<p></p>
|
|
<div class="img-container">
|
|
<div v-for="file in files" class="img-row" v-on:click="onFileClick(file)">
|
|
<img :src="`/api/static/thumb_${file.file_location}`">
|
|
</div>
|
|
|
|
<!-- extra row helps it display properly -->
|
|
<div class="img-row"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'SimpleAttachmentNoteComponent',
|
|
props: [ 'noteId', 'squireEditor' ],
|
|
data () {
|
|
return {
|
|
files: [],
|
|
uploadedToNote: [],
|
|
}
|
|
},
|
|
beforeMount(){
|
|
|
|
},
|
|
mounted(){
|
|
this.loadImages()
|
|
},
|
|
methods: {
|
|
loadImages(){
|
|
axios.post('/api/attachment/search', {'attachmentType':'files', 'setSize':1000})
|
|
.then( ({data}) => {
|
|
|
|
//Sort files into two categories
|
|
data.forEach(file => {
|
|
if(file['note_id'] == this.noteId){
|
|
this.uploadedToNote.push(file)
|
|
} else {
|
|
this.files.push(file)
|
|
}
|
|
})
|
|
})
|
|
.catch(error => { this.$bus.$emit('notification', 'Failed to Load Attachments') })
|
|
},
|
|
onFileClick(file){
|
|
|
|
const imageCode = `<img alt="image" src="/api/static/thumb_${file.file_location}">`
|
|
|
|
this.$bus.$emit('new_file_upload', {noteId: this.noteId, imageCode})
|
|
|
|
if(this.$store.getters.getIsUserOnMobile){
|
|
this.close()
|
|
}
|
|
},
|
|
close() {
|
|
this.$emit('close');
|
|
},
|
|
}
|
|
}
|
|
</script>
|