tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Yet another new collection edition form layout. Modal to image document on Item Page and Item Edition Page.

This commit is contained in:
Mateus Machado Luna 2018-08-29 14:58:31 -03:00
parent e725441495
commit 034cc27fd2
7 changed files with 184 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
src/admin/components/edition/collection-edition-form.vue
View File

@ -7,45 +7,27 @@
v-if="collection != null && collection != undefined"
class="tainacan-form"
label-width="120px">
<!-- Header Page -------------------------------- -->
<b-field :addons="false">
<label class="label">{{ $i18n.get('label_header_image') }}</label>
<div class="header-field">
<figure class="image">
<span
v-if="collection.header_image == undefined || collection.header_image == false"
class="image-placeholder">{{ $i18n.get('label_empty_header_image') }}</span>
<img
:alt="$i18n.get('label_thumbnail')"
:src="(collection.header_image == undefined || collection.header_image == false) ? headerPlaceholderPath : collection.header_image">
</figure>
<div class="header-buttons-row">
<a
class="button is-rounded is-secondary"
id="button-edit-header-image"
:aria-label="$i18n.get('label_button_edit_header_image')"
@click="headerImageMediaFrame.openFrame($event)">
<b-icon
size="is-small"
icon="pencil" />
</a>
<a
class="button is-rounded is-secondary"
id="button-delete-header-image"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteHeaderImage()">
<b-icon
size="is-small"
icon="delete" />
</a>
</div>
</div>
</b-field>
<div class="columns">
<div class="column is-4">
<!-- Name -------------------------------- -->
<b-field
:addons="false"
:label="$i18n.get('label_name')"
:type="editFormErrors['name'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['name'] != undefined ? editFormErrors['name'] : ''">
<span class="required-metadatum-asterisk">*</span>
<help-button
:title="$i18n.getHelperTitle('collections', 'name')"
:message="$i18n.getHelperMessage('collections', 'name')"/>
<b-input
id="tainacan-text-name"
v-model="form.name"
@blur="updateSlug"
@focus="clearErrors('name')"/>
</b-field>
<!-- Thumbnail -------------------------------- -->
<b-field :addons="false">
<label class="label">{{ $i18n.get('label_thumbnail') }}</label>
@ -142,9 +124,7 @@
<a
target="_blank"
:href="coverPage.link">
<b-icon
size="is-small"
icon="eye"/>
<eye-icon :style="{fill: isNewCollection ? '#01295c' : '#298596' }" />
</a>
&nbsp;&nbsp;
<a
@ -244,6 +224,7 @@
</div>
<div class="column is-1" />
<div class="column">
<!-- Status -------------------------------- -->
<b-field
:addons="false"
@ -268,22 +249,40 @@
</b-radio>
</div>
</b-field>
<!-- Name -------------------------------- -->
<b-field
:addons="false"
:label="$i18n.get('label_name')"
:type="editFormErrors['name'] != undefined ? 'is-danger' : ''"
:message="editFormErrors['name'] != undefined ? editFormErrors['name'] : ''">
<span class="required-metadatum-asterisk">*</span>
<help-button
:title="$i18n.getHelperTitle('collections', 'name')"
:message="$i18n.getHelperMessage('collections', 'name')"/>
<b-input
id="tainacan-text-name"
v-model="form.name"
@blur="updateSlug"
@focus="clearErrors('name')"/>
<!-- Header Page -------------------------------- -->
<b-field :addons="false">
<label class="label">{{ $i18n.get('label_header_image') }}</label>
<div class="header-field">
<figure class="image">
<span
v-if="collection.header_image == undefined || collection.header_image == false"
class="image-placeholder">{{ $i18n.get('label_empty_header_image') }}</span>
<img
:alt="$i18n.get('label_thumbnail')"
:src="(collection.header_image == undefined || collection.header_image == false) ? headerPlaceholderPath : collection.header_image">
</figure>
<div class="header-buttons-row">
<a
class="button is-rounded is-secondary"
id="button-edit-header-image"
:aria-label="$i18n.get('label_button_edit_header_image')"
@click="headerImageMediaFrame.openFrame($event)">
<b-icon
size="is-small"
icon="pencil" />
</a>
<a
class="button is-rounded is-secondary"
id="button-delete-header-image"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteHeaderImage()">
<b-icon
size="is-small"
icon="delete" />
</a>
</div>
</div>
</b-field>
<!-- Description -------------------------------- -->
@ -418,6 +417,7 @@
import { mapActions } from 'vuex';
import wpMediaFrames from '../../js/wp-media-frames';
import FileItem from '../other/file-item.vue';
import EyeIcon from '../other/eye-icon.vue';
import { wpAjax } from '../../js/mixins';
export default {
@ -485,7 +485,8 @@ export default {
}
},
components: {
FileItem
FileItem,
EyeIcon
},
methods: {
...mapActions('collection', [
@ -844,7 +845,8 @@ export default {
@import "../../scss/_variables.scss";
.column {
padding: 0;
padding-left: 0;
padding-right: 0;
}
.field {
@ -878,19 +880,20 @@ export default {
}
}
.header-field {
padding-top: 1.5rem;
.image-placeholder {
position: absolute;
left: 30%;
right: 30%;
top: 40%;
left: 10%;
right: 10%;
top: 35%;
font-size: 2.0rem;
font-weight: bold;
z-index: 99;
text-align: center;
color: $gray4;
@media screen and (max-width: 769px) {
@media screen and (max-width: 1024px) {
font-size: 1.2rem;
}
@ -902,7 +905,7 @@ export default {
}
}
.thumbnail-field {
// padding: 26px;
padding: 1.5rem;
// margin-top: 16px;
// margin-bottom: 38px;
@ -932,6 +935,10 @@ export default {
bottom: 20px;
}
}
.switch {
position: relative;
top: -1px;
}
.selected-cover-page {
border: 1px solid $gray2;
padding: 8px;
@ -945,12 +952,19 @@ export default {
.selected-cover-page-buttons {
float: right;
padding: 4px 6px;
.icon { font-size: 20px; }
.icon { font-size: 20px; }
.eye-icon {
position: relative;
top: 2px;
}
&.disabled {
pointer-events: none;
cursor: not-allowed;
.icon { color: $gray2; }
.eye-icon {
fill: $gray2 !important;
}
}
}
.status-radios {

14
src/admin/components/edition/item-edition-form.vue
View File

@ -29,7 +29,9 @@
form.document_type != undefined && form.document_type != null &&
form.document != '' && form.document_type != 'empty'">
<div v-if="form.document_type == 'attachment'">
<div v-html="item.document_as_html" />
<!-- <div v-html="item.document_as_html" /> -->
<document-item :document-html="item.document_as_html"/>
<div class="document-buttons-row">
<a
class="button is-rounded is-secondary"
@ -338,14 +340,16 @@
</div>
<!-- Metadata from Collection-------------------------------- -->
<label class="section-label">{{ $i18n.get('metadata') }}</label>
<span class="section-label">
<label >{{ $i18n.get('metadata') }}</label>
</span>
<br>
<a
class="collapse-all"
@click="toggleCollapseAll()">
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
<b-icon
type="is-gray"
type="is-turoquoise5"
:icon=" collapseAll ? 'menu-down' : 'menu-right'" />
</a>
<tainacan-form-item
@ -437,6 +441,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';
import DocumentItem from '../other/document-item.vue';
import CustomDialog from '../other/custom-dialog.vue';
export default {
@ -500,7 +505,8 @@ export default {
}
},
components: {
FileItem
FileItem,
DocumentItem
},
methods: {
...mapActions('item', [

88
src/admin/components/other/document-item.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div>
<figure
class="document-item"
@click.prevent="isPreviewModalActive = true">
<div
class="image-wrapper"
v-html="documentHtml" />
</figure>
<!-- Preview Modal ----------------- -->
<b-modal
:active.sync="isPreviewModalActive"
scroll="keep">
<!-- <div class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('label_document') }}</h2>
<a
@click="isPreviewModalActive = false"
class="back-link">{{ $i18n.get('exit') }}</a>
<hr>
</div> -->
<div
class="is-flex rendered-content"
v-html="documentHtml" />
<!-- </div> -->
</b-modal>
</div>
</template>
<script>
export default {
name: 'DocumentItem',
props: {
documentHtml: String,
isSelected: false,
isPreviewModalActive: false
}
}
</script>
<style lang="scss">
@import "../../scss/_variables.scss";
.document-item {
&:hover {
cursor: pointer;
.image, .document-placeholder {
transform: scale(1.05);
}
}
.image-wrapper {
.document-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: $gray2;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 8px 15px;
font-size: 9px;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
}
.rendered-content {
justify-content: center !important;
}
</style>

1
src/admin/components/other/help-button.vue
View File

@ -32,6 +32,7 @@ export default {
.help-wrapper {
position: absolute;
margin-top: -2px;
margin-left: 4px;
}
a.help-button .icon {

7
src/admin/pages/singles/item-page.vue
View File

@ -25,7 +25,8 @@
item.document !== '' && item.document_type !== 'empty'">
<div v-if="item.document_type === 'attachment'">
<div v-html="item.document_as_html"/>
<!-- <div v-html="item.document_as_html"/> -->
<document-item :document-html="item.document_as_html"/>
</div>
<div v-else-if="item.document_type === 'text'">
@ -258,6 +259,7 @@
<script>
import {mapActions, mapGetters} from 'vuex'
import FileItem from '../../components/other/file-item.vue';
import DocumentItem from '../../components/other/document-item.vue';
export default {
name: 'ItemPage',
@ -276,7 +278,8 @@
}
},
components: {
FileItem
FileItem,
DocumentItem
},
methods: {
...mapActions('item', [

4
src/admin/scss/_switches.scss
View File

@ -31,11 +31,11 @@
&:focus input[type="checkbox"] + .check,
&:focus input[type="checkbox"]:checked + .check {
box-shadow: none;
box-shadow: none !important;
}
&.is-small {
font-size: 9px;
font-size: 8px;
input[type="checkbox"] + .check {
border: 1.5px solid $gray4;

2
src/admin/scss/_tainacan-form.scss
View File

@ -18,7 +18,7 @@
}
}
.field:not(:last-child) {
margin-bottom: 1.125rem;
margin-bottom: 1.5rem;
}
.field>.field:not(:last-child) {
margin-bottom: 0.5rem;