Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

Remove TinyMce Added Squire

Browse Source
This commit is contained in:
Max G
2020-02-01 22:21:22 +00:00
parent f99d6ed430
commit 2828cc9462
91 changed files with 6538 additions and 10672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
client/src/components/AttachmentDisplayCard.vue
View File

@@ -2,81 +2,125 @@
.attachment-display-card {
width: 100%;
padding: 0 0 20px;
padding: 10px;
display: inline-block;
border: 1px solid;
border-color: var(--border_color);
border-radius: 4px;
margin: 0 0 15px;
max-height: 10000px;
}
.attachment-image {
width: 100%;
max-width: 150px;
float: left;
margin: 0 15px 0 0;
max-width: 100%;
height: auto;
max-height: 300px;
}
.image-placeholder {
width: 150px;
height: 60px;
border: 1px solid #DDD;
float: left;
margin: 0 15px 0 0;
width: 100%;
height: 100%;
max-height: 100px;
}
.image-placeholder:after {
content: 'No Image';
display: block;
width: 20px;
height: 20px;
background:
green;
position: absolute;
top: 0;
left: 0;
}
.text {
width: 100%;
/*height: 100%;*/
background: transparent;
border: none;
border-top: 1px solid;
border-bottom: 1px solid;
font-size: 1.4em;
margin: 0 0 10px;
line-height: 1.4em;
border-color: var(--border_color);
font-size: 1.2em;
line-height: 1.3em;
/*margin: 0 0 10px;*/
padding: 10px 0 10px;
color: var(--text_color);
overflow: hidden;
resize: none;
/*transition: height 0.4s ease; This breaks the resize */
}
.link {
font-size: 1.4em;
margin: 0 0 5px;
margin: 20px 0 20px;
display: inline-block;
white-space:nowrap;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
width: calc(100% - 180px);
width: 100%;
line-height: 1.4em;
}
.flip-out {
animation: flip-out-hor-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
overflow: hidden;
transition: max-height 0.3s ease;
max-height: 0;
}
@keyframes flip-out-hor-top {
0% {
transform: rotateX(0);
opacity: 1;
}
100% {
transform: rotateX(70deg);
opacity: 0;
}
}
</style>
<template>
<div class="attachment-display-card">
<div class="attachment-display-card" :class="{ 'flip-out':!unfolded }" v-if="visible">
<div class="ui stackable grid">
<!-- image and text -->
<div class="six wide center aligned middle aligned column">
<a :href="linkUrl" target="_blank" >
<img v-if="item.file_location" class="attachment-image" :src="`/api/static/thumb_${item.file_location}`">
<span v-else>
<img class="image-placeholder" loading="lazy" src="/api/static/assets/marketing/void.svg">
No Image
</span>
</a>
</div>
<input class="text" v-on:blur="saveIt()" v-model="text"></input>
<div class="ten wide column">
<textarea ref="edit" class="text" v-on:blur="saveIt()" v-on:keyup="checkKeyup" v-model="text"></textarea>
<div v-if="item.attachment_type == 1">
<div class="image-holder" v-if="item.file_location">
<a v-if="item.file_location" :href="item.url" target="_blank">
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
</a>
<!-- link -->
<a class="link" :href="linkUrl" target="_blank">{{linkText}}</a>
<!-- Buttons -->
<div class="ui small compact basic button" v-on:click="openNote">
<i class="file icon"></i>
Open Note
</div>
<div v-else class="image-placeholder"></div>
<a class="link" v-if="item.url" :href="item.url" target="_blank">{{item.url}}</a>
</div>
<div v-if="item.attachment_type == 2">
<div class="image-holder" v-if="item.file_location">
<a v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">
<img class="attachment-image" :src="`/api/static/${item.file_location}`">
</a>
<div class="ui small compact basic button" v-on:click="openEditAttachments"
:class="{ 'disabled':this.searchParams.noteId }">
<i class="folder icon"></i>
Note Attachments
</div>
<div class="ui small compact basic icon button" v-on:click="deleteAttachment">
<i v-if="!working" class="trash alternate outline icon"></i>
<i v-if="working" class="purple spinner loading icon icon"></i>
</div>
<div v-else class="image-placeholder"></div>
<a class="link" v-if="item.file_location && item.type != 1" :href="`/api/static/${item.file_location}`" target="_blank">Download</a>
</div>
<div class="ui small compact basic button" v-on:click="openNote">
Open Note
</div>
</div>
</div>
</template>
<script>
@@ -84,23 +128,74 @@
export default {
props: [ 'item' ],
props: [ 'item', 'searchParams' ],
data: function(){
return {
things: [],
text: '',
type: null,
linkText: 'Link',
linkUrl:null,
unfolded:true,
visible: true,
working: false,
}
},
beforeCreate: function(){
},
mounted: function(){
this.text = this.item.text
this.type = this.item.attachment_type
//1 = URL, 2 = image, >= 3 files
if(this.type == 1 && this.item.url != null){
this.linkText = this.item.url
this.linkUrl = this.item.url
}
if(this.type == 2){
this.linkText = 'Download'
this.linkUrl = `/api/static/${this.item.file_location}`
}
this.$nextTick(() => {
this.checkKeyup()
})
},
methods: {
checkKeyup(){
let elm = this.$refs.edit
if(elm){
elm.style.height = '0'
elm.style.height = elm.scrollHeight +'px'
}
},
openNote(){
const noteId = this.item.note_id
this.$router.push('/notes/open/'+noteId)
},
openEditAttachments(){
const noteId = this.item.note_id
this.$router.push('/attachments/note/'+noteId)
},
deleteAttachment(){
//No double clicks
if(this.working){ return }
this.working = true
axios.post('/api/attachment/delete', {'attachmentId':this.item.id})
.then( ({data}) => {
if(data){
this.unfolded = false
setTimeout( () => {
this.visible = false
}, 600)
}
})
},
saveIt(){
//Don't save text if it didn'th change