Merge branch 'develop' of https://github.com/tainacan/tainacan into develop
This commit is contained in:
commit
333bca2fe2
|
@ -19,6 +19,7 @@
|
|||
"vue-router": "^3.0.1",
|
||||
"vue-the-mask": "^0.11.1",
|
||||
"vue2-hammer": "^1.0.7",
|
||||
"vue-masonry-css": "^1.0.2",
|
||||
"vuedraggable": "^2.16.0",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
|
|
|
@ -101,6 +101,71 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MASONRY VIEW MODE -->
|
||||
<masonry
|
||||
v-if="viewMode == 'masonry'"
|
||||
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
|
||||
:gutter="30"
|
||||
class="tainacan-masonry-container">
|
||||
<div
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
:class="{ 'selected-masonry-item': selectedItems[index] }"
|
||||
class="tainacan-masonry-item">
|
||||
|
||||
<!-- Checkbox -->
|
||||
<div
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="masonry-item-checkbox">
|
||||
<label
|
||||
tabindex="0"
|
||||
class="b-checkbox checkbox is-small">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="selectedItems[index]">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div
|
||||
@click="goToItemPage(item)"
|
||||
class="metadata-title">
|
||||
<p>{{ item.title != undefined ? item.title : '' }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<img
|
||||
@click="goToItemPage(item)"
|
||||
v-if="item.thumbnail != undefined"
|
||||
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
|
||||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
id="button-edit"
|
||||
:aria-label="$i18n.getFrom('items','edit_item')"
|
||||
@click.prevent.stop="goToItemEditPage(item)">
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
icon="pencil"/>
|
||||
</a>
|
||||
<a
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete')"
|
||||
@click.prevent.stop="deleteOneItem(item.id)">
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
:icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</masonry>
|
||||
|
||||
<!-- CARDS VIEW MODE -->
|
||||
<div
|
||||
class="tainacan-cards-container"
|
||||
|
@ -596,6 +661,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
@import "../../scss/_view-mode-masonry.scss";
|
||||
@import "../../scss/_view-mode-grid.scss";
|
||||
@import "../../scss/_view-mode-cards.scss";
|
||||
@import "../../scss/_view-mode-records.scss";
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
tag="a"
|
||||
:to="$routerHelper.getProcessesPage()"
|
||||
class="is-secondary">
|
||||
{{ $i18n.get('label_see_more') }}
|
||||
{{ $i18n.get('label_view_more') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
|
@ -44,6 +44,7 @@
|
|||
:class="{ 'mdi-menu-down': processesColapses[index], 'mdi-menu-right': !processesColapses[index] }" />
|
||||
</span>
|
||||
<p>{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}</p>
|
||||
<span class="process-title-value">{{ (bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? '(' + bgProcesses[0].progress_value + '%)' : '' }}</span>
|
||||
</div>
|
||||
<!-- <span
|
||||
v-if="bgProcess.done <= 0"
|
||||
|
@ -89,7 +90,7 @@
|
|||
class="icon has-text-blue5"><i class="mdi mdi-18px mdi-autorenew"/></span>
|
||||
<p class="footer-title">
|
||||
{{ hasAnyProcessExecuting ?
|
||||
(bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')):
|
||||
(bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value + '%' : '') : $i18n.get('label_no_details_of_process')):
|
||||
$i18n.get('info_no_process')
|
||||
}}
|
||||
</p>
|
||||
|
@ -279,6 +280,10 @@ export default {
|
|||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
span.process-title-value {
|
||||
font-style: italic;
|
||||
color: $gray3;
|
||||
}
|
||||
|
||||
.mdi-menu-left, .mdi-menu-right {
|
||||
color: $turquoise2;
|
||||
|
|
|
@ -7,6 +7,7 @@ import Vue from 'vue';
|
|||
import Buefy from 'buefy';
|
||||
import VTooltip from 'v-tooltip';
|
||||
import { VueHammer } from 'vue2-hammer';
|
||||
import VueMasonry from 'vue-masonry-css';
|
||||
|
||||
// Custom elements
|
||||
import Text from '../../classes/metadata-types/text/Text.vue';
|
||||
|
@ -49,6 +50,7 @@ import VueTheMask from 'vue-the-mask';
|
|||
Vue.use(Buefy);
|
||||
Vue.use(VTooltip);
|
||||
Vue.use(VueHammer);
|
||||
Vue.use(VueMasonry);
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
Vue.use(RouterHelperPlugin);
|
||||
|
|
|
@ -3,6 +3,7 @@ import Vue from 'vue';
|
|||
import Buefy from 'buefy';
|
||||
import VTooltip from 'v-tooltip';
|
||||
import { VueHammer } from 'vue2-hammer';
|
||||
import VueMasonry from 'vue-masonry-css';
|
||||
|
||||
// Custom elements
|
||||
import Text from '../../classes/metadata-types/text/Text.vue';
|
||||
|
@ -33,6 +34,7 @@ import ItemsPage from '../pages/lists/items-page.vue';
|
|||
import ViewModeTable from '../../theme-helper/view-mode-table.vue';
|
||||
import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
|
||||
import ViewModeRecords from '../../theme-helper/view-mode-records.vue';
|
||||
import ViewModeMasonry from '../../theme-helper/view-mode-masonry.vue';
|
||||
|
||||
// Remaining imports
|
||||
import HelpButton from '../components/other/help-button.vue';
|
||||
|
@ -46,6 +48,7 @@ import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from '
|
|||
Vue.use(Buefy);
|
||||
Vue.use(VTooltip);
|
||||
Vue.use(VueHammer);
|
||||
Vue.use(VueMasonry);
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
Vue.use(RouterHelperPlugin);
|
||||
|
@ -85,6 +88,7 @@ Vue.component('items-page', ItemsPage);
|
|||
Vue.component('view-mode-table', ViewModeTable);
|
||||
Vue.component('view-mode-cards', ViewModeCards);
|
||||
Vue.component('view-mode-records', ViewModeRecords);
|
||||
Vue.component('view-mode-masonry', ViewModeMasonry);
|
||||
|
||||
Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
||||
|
||||
|
|
|
@ -307,7 +307,8 @@
|
|||
:class="{'mdi-view-list' : ( adminViewMode == 'table' || adminViewMode == undefined),
|
||||
'mdi-view-module' : adminViewMode == 'cards',
|
||||
'mdi-apps' : adminViewMode == 'grid',
|
||||
'mdi-view-column' : adminViewMode == 'records'}"
|
||||
'mdi-view-column' : adminViewMode == 'records',
|
||||
'mdi-view-dashboard' : adminViewMode == 'masonry'}"
|
||||
class="mdi"/>
|
||||
</span>
|
||||
</span>
|
||||
|
@ -346,6 +347,14 @@
|
|||
icon="view-column"/>
|
||||
{{ $i18n.get('label_records') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
:class="{ 'is-active': adminViewMode == 'masonry' }"
|
||||
:value="'masonry'">
|
||||
<b-icon
|
||||
class="gray-icon"
|
||||
icon="view-dashboard"/>
|
||||
{{ $i18n.get('label_masonry') }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-field>
|
||||
</div>
|
||||
|
|
|
@ -25,4 +25,4 @@
|
|||
background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
|
||||
border-color: $gray4 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -107,6 +107,7 @@
|
|||
font-size: 0.6875rem !important;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.5rem;
|
||||
max-height: 152px;
|
||||
}
|
||||
|
||||
.metadata-author-creation {
|
||||
|
|
|
@ -0,0 +1,90 @@
|
|||
.tainacan-masonry-container {
|
||||
min-height: 50vh;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.selected-masonry-item {
|
||||
background-color: $turquoise1;
|
||||
}
|
||||
|
||||
.tainacan-masonry-item {
|
||||
animation-name: item-appear;
|
||||
display: block;
|
||||
animation-duration: 0.5s;
|
||||
width: 100%;
|
||||
flex-basis: 0;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray1;
|
||||
}
|
||||
|
||||
.masonry-item-checkbox {
|
||||
position: absolute;
|
||||
margin-top: 8px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.actions-area {
|
||||
position: relative;
|
||||
float: right;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
padding: 8px;
|
||||
transition: visibility 0.2s, opacity 0.2s;
|
||||
margin-top: -43px;
|
||||
background-color: $gray2;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
|
||||
a {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
&:hover .actions-area {
|
||||
visibility: visible;
|
||||
opacity: 1.0;
|
||||
}
|
||||
&.selected-grid-item {
|
||||
.actions-area {
|
||||
background-color: $turquoise1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 2px;
|
||||
margin-bottom: -5px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.metadata-title {
|
||||
flex-shrink: 0;
|
||||
margin: 0px 6px 0px 24px;
|
||||
padding: 10px 1rem;
|
||||
min-height: 41px;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: 0.875rem !important;
|
||||
color: black !important;
|
||||
text-align: left !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -239,6 +239,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'label_table' => __( 'Table', 'tainacan' ),
|
||||
'label_cards' => __( 'Cards', 'tainacan' ),
|
||||
'label_records' => __( 'Records', 'tainacan' ),
|
||||
'label_masonry' => __( 'Masonry', 'tainacan' ),
|
||||
'label_visualization' => __( 'Visualization', 'tainacan' ),
|
||||
'label_available_importers' => __( 'Available Importers', 'tainacan' ),
|
||||
'label_target_collection' => __( 'Target Collection', 'tainacan' ),
|
||||
|
@ -275,6 +276,7 @@ return apply_filters( 'tainacan-admin-i18n', [
|
|||
'label_import_collection' => __( 'Import collection', 'tainacan' ),
|
||||
'label_semantic_uri' => __( 'Semantic Uri', 'tainacan' ),
|
||||
'label_view_collection' => __( 'View collection', 'tainacan' ),
|
||||
'label_view_more' => __( 'View more', 'tainacan' ),
|
||||
|
||||
// Instructions. More complex sentences to guide user and placeholders
|
||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||
|
|
|
@ -56,19 +56,26 @@ class Theme_Helper {
|
|||
'type' => 'component',
|
||||
]);
|
||||
$this->register_view_mode('cards', [
|
||||
'label' => __('Cards view', 'tainacan'),
|
||||
'label' => __('Cards', 'tainacan'),
|
||||
'dynamic_metadata' => false,
|
||||
'description' => 'A cards view, displaying title, description, author name and creation date.',
|
||||
'icon' => '<span class="icon"><i class="mdi mdi-view-module mdi-24px"></i></span>',
|
||||
'type' => 'component'
|
||||
]);
|
||||
$this->register_view_mode('records', [
|
||||
'label' => __('Records view', 'tainacan'),
|
||||
'label' => __('Records', 'tainacan'),
|
||||
'dynamic_metadata' => true,
|
||||
'description' => 'A records view, similiar to cards, but flexible for metadata',
|
||||
'icon' => '<span class="icon"><i class="mdi mdi-view-column mdi-24px"></i></span>',
|
||||
'type' => 'component'
|
||||
]);
|
||||
$this->register_view_mode('masonry', [
|
||||
'label' => __('Masonry', 'tainacan'),
|
||||
'dynamic_metadata' => false,
|
||||
'description' => 'A masonry view, similar to pinterest, which will display images without cropping.',
|
||||
'icon' => '<span class="icon"><i class="mdi mdi-view-dashboard mdi-24px"></i></span>',
|
||||
'type' => 'component'
|
||||
]);
|
||||
}
|
||||
|
||||
public function enqueue_scripts($force = false) {
|
||||
|
|
|
@ -62,19 +62,14 @@ function tainacan_the_metadata($args = array()) {
|
|||
*
|
||||
* Return the item document as a HTML string to be used as output.
|
||||
*
|
||||
* @param int|string|Tainacan\Entities\Metadatum $metadatum Metadatum object, ID or slug to retrieve only one metadatum. empty returns all metadata
|
||||
* @param bool $hide_empty Wether to hide or not metadata the item has no value to
|
||||
* @return string The HTML output
|
||||
*/
|
||||
function tainacan_get_the_document() {
|
||||
$post = get_post();
|
||||
$theme_helper = \Tainacan\Theme_Helper::get_instance();
|
||||
$item = tainacan_get_item();
|
||||
|
||||
if (!$theme_helper->is_post_an_item($post))
|
||||
if (!$item)
|
||||
return;
|
||||
|
||||
$item = new Entities\Item($post);
|
||||
|
||||
return $item->get_document_html();
|
||||
|
||||
}
|
||||
|
@ -83,6 +78,25 @@ function tainacan_the_document() {
|
|||
echo tainacan_get_the_document();
|
||||
}
|
||||
|
||||
/**
|
||||
* To be used inside The Loop
|
||||
*
|
||||
* Check whether the current item has a document or not
|
||||
*
|
||||
* @return bool True if item has document, false if it does not
|
||||
*/
|
||||
function tainacan_has_document() {
|
||||
$item = tainacan_get_item();
|
||||
|
||||
if (!$item)
|
||||
return;
|
||||
|
||||
$document = $item->get_document();
|
||||
|
||||
return ! empty($document);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* When visiting a collection archive or single, returns the current collection id
|
||||
*
|
||||
|
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<!-- RECORDS VIEW MODE -->
|
||||
<masonry
|
||||
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
|
||||
:gutter="30"
|
||||
class="tainacan-masonry-container">
|
||||
<a
|
||||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="tainacan-masonry-item"
|
||||
@click="goToItemPage(item)">
|
||||
|
||||
<!-- Title -->
|
||||
<div class="metadata-title">
|
||||
<p>{{ item.title != undefined ? item.title : '' }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<img
|
||||
v-if="item.thumbnail != undefined"
|
||||
:src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">
|
||||
</a>
|
||||
</masonry>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ViewModeMasonry',
|
||||
props: {
|
||||
collectionId: Number,
|
||||
displayedMetadata: Array,
|
||||
items: Array,
|
||||
isLoading: false,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToItemPage(item) {
|
||||
window.location.href = item.url;
|
||||
},
|
||||
renderMetadata(itemMetadata, column) {
|
||||
|
||||
let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
|
||||
|
||||
if (!metadata) {
|
||||
return '';
|
||||
} else if (metadata.date_i18n) {
|
||||
return metadata.date_i18n;
|
||||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$turquoise1: #e6f6f8;
|
||||
$turquoise2: #d1e6e6;
|
||||
$tainacan-input-color: #1d1d1d;
|
||||
$gray1: #f2f2f2;
|
||||
$gray2: #e5e5e5;
|
||||
$gray4: #898d8f;
|
||||
$gray3: #dcdcdc;
|
||||
|
||||
@import "../../src/admin/scss/_view-mode-masonry.scss";
|
||||
|
||||
.tainacan-masonry-container .tainacan-masonry-item .metadata-title {
|
||||
margin: 0px 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Loading…
Reference in New Issue