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

Merge branch 'develop' of https://github.com/tainacan/tainacan into develop

This commit is contained in:
weryques 2018-08-03 16:57:39 -03:00
parent d8a5e4be33 7b3a414976
commit 333bca2fe2
13 changed files with 295 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"
},

66
src/admin/components/lists/items-list.vue
View File

@ -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";

9
src/admin/components/other/processes-popup.vue
View File

@ -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;

2
src/admin/js/main.js
View File

@ -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);

4
src/admin/js/theme-main.js
View File

@ -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});

11
src/admin/pages/lists/items-page.vue
View File

@ -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>

2
src/admin/scss/_checkboxes.scss
View File

@ -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;
}
}
}

1
src/admin/scss/_view-mode-cards.scss
View File

@ -107,6 +107,7 @@
font-size: 0.6875rem !important;
overflow: hidden;
margin-bottom: 1.5rem;
max-height: 152px;
}
.metadata-author-creation {

90
src/admin/scss/_view-mode-masonry.scss Normal file
View File

@ -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;
}
}
}
}

2
src/admin/tainacan-admin-i18n.php
View File

@ -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' ),

11
src/theme-helper/class-tainacan-theme-helper.php
View File

@ -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) {

28
src/theme-helper/template-tags.php
View File

@ -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
*

81
src/theme-helper/view-mode-masonry.vue Normal file
View File

@ -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>