Creates FileItem component, to hold attachments imagens and icons and it's basic functions.
This commit is contained in:
mateuswetah
parent
c3070126dd
commit
4274f6c5ae
File diff suppressed because it is too large
Load Diff
|
|
@ -258,17 +258,15 @@
|
|||
type="button"
|
||||
class="button is-secondary"
|
||||
@click.prevent="attachmentMediaFrame.openFrame($event)">
|
||||
Attatchments (tests)
|
||||
{{ $i18n.get("label_add_attachment") }}
|
||||
</button>
|
||||
|
||||
<div class="uploaded-files">
|
||||
<div
|
||||
<file-item
|
||||
v-for="(attachment, index) in attachmentsList"
|
||||
:key="index">
|
||||
<span class="tag is-primary">
|
||||
{{ attachment.title.rendered }}
|
||||
</span>
|
||||
</div>
|
||||
:key="index"
|
||||
:show-name="true"
|
||||
:file="attachment"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -308,6 +306,7 @@
|
|||
import { mapActions, mapGetters } from 'vuex';
|
||||
import { eventBus } from '../../../js/event-bus-web-components.js'
|
||||
import wpMediaFrames from '../../js/wp-media-frames';
|
||||
import FileItem from '../other/file-item.vue';
|
||||
|
||||
export default {
|
||||
name: 'ItemEditionForm',
|
||||
|
|
@ -352,6 +351,9 @@ export default {
|
|||
textLink: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
FileItem
|
||||
},
|
||||
methods: {
|
||||
...mapActions('item', [
|
||||
'sendItem',
|
||||
|
|
@ -570,7 +572,7 @@ export default {
|
|||
frame_button: this.$i18n.get('label_attach_to_item'),
|
||||
},
|
||||
relatedPostId: this.itemId,
|
||||
onSave: (files) => {
|
||||
onSave: () => {
|
||||
// Fetch current existing attachments
|
||||
this.fetchAttachments(this.itemId);
|
||||
}
|
||||
|
|
@ -709,6 +711,11 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.uploaded-files {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.thumbnail-field {
|
||||
max-height: 128px;
|
||||
margin-bottom: 96px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div>
|
||||
<figure
|
||||
class="file-item"
|
||||
@click="isPreviewModalActive = true">
|
||||
<div class="image-wrapper">
|
||||
<div
|
||||
v-if="file.media_type == 'image'"
|
||||
class="image"
|
||||
:style="{ 'background-image': 'url(' + file.guid.rendered + ')' }"/>
|
||||
<div
|
||||
v-else
|
||||
class="file-placeholder">
|
||||
<b-icon
|
||||
:icon="getIconForMimeType(file.mime_type)"
|
||||
size="is-large"
|
||||
type="is-gray"/>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption v-if="showName">{{ file.title.rendered }}</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- Preview Modal ----------------- -->
|
||||
<b-modal
|
||||
:can-cancel="false"
|
||||
:active.sync="isPreviewModalActive"
|
||||
:width="640"
|
||||
scroll="keep">
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('label_attachment') + ': ' + file.title.rendered }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<div
|
||||
class="is-flex"
|
||||
v-html="file.description.rendered" />
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
id="button-cancel-url-link-selection"
|
||||
class="button is-outlined"
|
||||
type="button"
|
||||
@click="isPreviewModalActive = false">
|
||||
{{ $i18n.get('cancel') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FileItem',
|
||||
props: {
|
||||
file: Object,
|
||||
showName: false,
|
||||
isSelected: false,
|
||||
isPreviewModalActive: false
|
||||
},
|
||||
methods: {
|
||||
getIconForMimeType(mimeType) {
|
||||
switch (mimeType) {
|
||||
|
||||
case 'application/pdf':
|
||||
return 'file-pdf';
|
||||
case 'text':
|
||||
return 'format-align-left';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.file-item {
|
||||
|
||||
margin: 12px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
.image, .file-placeholder {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
.image-wrapper {
|
||||
height: 112px;
|
||||
width: 112px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: $tainacan-input-background;
|
||||
|
||||
.image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-transition: all .3s;
|
||||
-moz-transition: all .3s;
|
||||
-o-transition: all .3s;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.file-placeholder {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-transition: all .3s;
|
||||
-moz-transition: all .3s;
|
||||
-o-transition: all .3s;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
background-color: $tainacan-input-background;
|
||||
border-bottom-left-radius: 7px;
|
||||
border-bottom-right-radius: 7px;
|
||||
padding: 5px 15px;
|
||||
font-size: 9px;
|
||||
margin-top: -4px;
|
||||
width: 112px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -106,6 +106,14 @@ a:hover {
|
|||
background-color: white;
|
||||
padding: 52px 80px;
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.attachment {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
padding: 80px 0em 0.4em 0em !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -136,6 +136,7 @@ return [
|
|||
'label_selectbox_init' => __( 'Select', 'tainacan' ),
|
||||
'label_options' => __( 'Insert options', 'tainacan' ),
|
||||
'label_attachments' => __( 'Attachments', 'tainacan' ),
|
||||
'label_attachment' => __( 'Attachment', 'tainacan' ),
|
||||
'label_enabled' => __( 'Enabled', 'tainacan' ),
|
||||
'label_disabled' => __( 'Disabled', 'tainacan' ),
|
||||
'label_creation' => __( 'Creation', 'tainacan' ),
|
||||
|
|
@ -181,6 +182,7 @@ return [
|
|||
'label_edit_selected_items' => __( 'Edit selected items', 'tainacan' ),
|
||||
'label_select_all_collections_page' => __( 'Select all collections on page', 'tainacan' ),
|
||||
'label_select_all_items_page' => __( 'Select all items on page', 'tainacan' ),
|
||||
'label_add_attachment' => __( 'Add attachment', 'tainacan' ),
|
||||
|
||||
// Instructions. More complex sentences to guide user and placeholders
|
||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||
|
|
|
|||
Loading…
Reference in New Issue