Merge branch 'develop' into feature/items-page-in-repository
This commit is contained in:
weryques
commit
38ed0c0a5a
|
|
@ -24,4 +24,6 @@ cypress/screenshots
|
|||
.vscode
|
||||
src/pdf-viewer/pdfjs-dist
|
||||
report.txt
|
||||
.tmp
|
||||
.tmp
|
||||
src/assets/css/tainacan-embeds.css
|
||||
src/assets/css/tainacan-embeds.css.map
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ command -v sass >/dev/null 2>&1 || {
|
|||
echo "Compilando Sass..."
|
||||
cd src/scss
|
||||
|
||||
sass -E 'UTF-8' --cache-location ../../.tmp/sass-cache-1 style.scss:../style.css
|
||||
sass -E 'UTF-8' --cache-location ../../.tmp/sass-cache-1 tainacan-embeds.scss:../assets/css/tainacan-embeds.css
|
||||
|
||||
cd ../admin/scss
|
||||
sass -E 'UTF-8' --cache-location ../../../.tmp/sass-cache-2 tainacan-admin.scss:../../assets/css/tainacan-admin.css
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -15,6 +15,7 @@
|
|||
"moment": "^2.22.1",
|
||||
"qs": "^6.5.2",
|
||||
"v-mask": "^1.3.2",
|
||||
"v-tooltip": "^2.0.0-rc.32",
|
||||
"vue": "^2.5.16",
|
||||
"vue-router": "^3.0.1",
|
||||
"vuedraggable": "^2.16.0",
|
||||
|
|
|
|||
|
|
@ -579,7 +579,7 @@ export default {
|
|||
if (this.$route.fullPath.split("/").pop() == "new") {
|
||||
this.createNewCollection();
|
||||
this.isNewCollection = true;
|
||||
} else if (this.$route.fullPath.split("/").pop() == "edit") {
|
||||
} else if (this.$route.fullPath.split("/").pop() == "settings") {
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div class="cards-container">
|
||||
<div
|
||||
class="tainacan-card"
|
||||
v-for="(item, index) of items"
|
||||
:key="index"
|
||||
@click="goToItemPage(item)">
|
||||
|
||||
<img
|
||||
class="card-image"
|
||||
:src="item.thumbnail.medium_large">
|
||||
<div class="card-metadata">
|
||||
<span
|
||||
:key="index"
|
||||
v-for="(field, index) of tableFields">
|
||||
<p
|
||||
v-if="field.display && field.id"
|
||||
:class="{ 'field-main-content': field.field_type_object != undefined ? (field.field_type_object.related_mapped_prop == 'title') : false }"
|
||||
v-html="(field.field == 'row_author' || field.field == 'row_creation') ? item[field.slug] : renderMetadata(item.metadata[field.slug])"/>
|
||||
<p
|
||||
v-if="field.field == 'row_author'">
|
||||
{{ $i18n.get('label_created_by') + ": " + item[field.slug] }}
|
||||
</p>
|
||||
<p
|
||||
v-if="field.field == 'row_creation'">
|
||||
{{ $i18n.get('label_creation_date') + ": " + item[field.slug] }}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TainacanCardsList',
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tableFields: Array,
|
||||
items: Array,
|
||||
isLoading: false,
|
||||
},
|
||||
methods: {
|
||||
renderMetadata(metadata) {
|
||||
|
||||
if (!metadata) {
|
||||
return '';
|
||||
} else if (metadata.date_i18n) {
|
||||
return metadata.date_i18n;
|
||||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
},
|
||||
goToItemPage(item) {
|
||||
window.location.href = item.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.cards-container {
|
||||
padding: 20px calc(8.333333% - 12px);
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: wrap;
|
||||
|
||||
.tainacan-card {
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
width: 50%; //258px;
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1216px) { width: 33.33333%; }
|
||||
|
||||
@media screen and (min-width: 1217px) { width: 25%; }
|
||||
|
||||
img.card-image {
|
||||
width: 100%;
|
||||
}
|
||||
.card-metadata {
|
||||
padding: 8px 0px;
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
color: $gray-light;
|
||||
|
||||
p.field-main-content {
|
||||
font-size: 14px;
|
||||
color: $tainacan-input-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="list-container">
|
||||
<div
|
||||
class="tainacan-list"
|
||||
v-for="(item, index) of items"
|
||||
:key="index"
|
||||
@click="goToItemPage(item)">
|
||||
|
||||
<p class="field-main-content">{{ getTitle(item) }}</p>
|
||||
<div>
|
||||
<div class="list-image">
|
||||
<img :src="item.thumbnail.medium">
|
||||
</div>
|
||||
<div class="list-metadata">
|
||||
<span
|
||||
v-for="(field, index) of tableFields"
|
||||
:key="index">
|
||||
<p
|
||||
v-if="field.display && field.id && (field.field_type_object != undefined && field.field_type_object.related_mapped_prop != 'title')"
|
||||
v-html="renderMetadata(item.metadata[field.slug])"/>
|
||||
<p
|
||||
v-if="field.field == 'row_author'">
|
||||
{{ $i18n.get('label_created_by') + ": " + item[field.slug] }}
|
||||
</p>
|
||||
<p
|
||||
v-if="field.field == 'row_creation'">
|
||||
{{ $i18n.get('label_creation_date') + ": " + item[field.slug] }}
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TainacanListList',
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
tableFields: Array,
|
||||
items: Array,
|
||||
isLoading: false,
|
||||
},
|
||||
methods: {
|
||||
getTitle(item) {
|
||||
for (let field of this.tableFields) {
|
||||
if (field.field_type_object != undefined && field.field_type_object.related_mapped_prop == 'title')
|
||||
return this.renderMetadata(item.metadata[field.slug]);
|
||||
}
|
||||
},
|
||||
renderMetadata(metadata) {
|
||||
|
||||
if (!metadata) {
|
||||
return '';
|
||||
} else if (metadata.date_i18n) {
|
||||
return metadata.date_i18n;
|
||||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
},
|
||||
goToItemPage(item) {
|
||||
window.location.href = item.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.list-container {
|
||||
padding: 20px calc(8.333333% - 12px);
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: wrap;
|
||||
|
||||
.tainacan-list {
|
||||
cursor: pointer;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
text-align: left;
|
||||
padding: 16px 12px;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1216px) { width: 50%; }
|
||||
|
||||
@media screen and (min-width: 1217px) { width: 33.333333%; }
|
||||
|
||||
p.field-main-content {
|
||||
font-size: 14px;
|
||||
color: $tainacan-input-color;
|
||||
}
|
||||
&>div {
|
||||
display: flex;
|
||||
|
||||
.list-image {
|
||||
width: 25%;
|
||||
|
||||
img { width: 100%; }
|
||||
}
|
||||
.list-metadata {
|
||||
width: 75%;
|
||||
padding: 0px 16px;
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -1,102 +1,132 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<b-field
|
||||
grouped
|
||||
group-multiline>
|
||||
<button
|
||||
v-if="selectedCategories.length > 0"
|
||||
class="button field is-danger"
|
||||
@click="deleteSelectedCategories()">
|
||||
<span>{{ $i18n.get('instruction_delete_selected_categories') }} </span>
|
||||
<b-icon icon="delete"/>
|
||||
</button>
|
||||
</b-field>
|
||||
<div
|
||||
v-if="totalCategories > 0 && !isLoading"
|
||||
class="table-container">
|
||||
|
||||
<b-table
|
||||
v-if="totalCategories > 0"
|
||||
ref="categoryTable"
|
||||
:data="categories"
|
||||
:checked-rows.sync="selectedCategories"
|
||||
checkable
|
||||
:loading="isLoading"
|
||||
hoverable
|
||||
striped
|
||||
selectable
|
||||
backend-sorting>
|
||||
<div class="selection-control">
|
||||
<div class="field select-all is-pulled-left">
|
||||
<span>
|
||||
<b-checkbox
|
||||
@click.native="selectAllCategoriesOnPage()"
|
||||
:value="allCategoriesOnPageSelected">{{ $i18n.get('label_select_all_categories_page') }}</b-checkbox>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field is-pulled-right">
|
||||
<b-dropdown
|
||||
position="is-bottom-left"
|
||||
v-if="categories[0].current_user_can_edit"
|
||||
:disabled="!isSelectingCategories"
|
||||
id="bulk-actions-dropdown">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.get('label_bulk_actions') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
|
||||
<template slot-scope="props">
|
||||
<b-table-column
|
||||
tabindex="0"
|
||||
:label="$i18n.get('label_name')"
|
||||
:aria-label="$i18n.get('label_name')"
|
||||
field="props.row.name">
|
||||
<router-link
|
||||
class="clickable-row"
|
||||
tag="span"
|
||||
:to="{path: $routerHelper.getCategoryEditPath(props.row.id)}">
|
||||
{{ props.row.name }}
|
||||
</router-link>
|
||||
</b-table-column>
|
||||
<b-dropdown-item
|
||||
id="item-delete-selected-items"
|
||||
@click="deleteSelectedCategories()">
|
||||
{{ $i18n.get('label_delete_selected_categories') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>{{ $i18n.get('label_edit_selected_categories') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-table-column
|
||||
tabindex="0"
|
||||
:aria-label="$i18n.get('label_description')"
|
||||
:label="$i18n.get('label_description')"
|
||||
property="description"
|
||||
show-overflow-tooltip
|
||||
field="props.row.description">
|
||||
<router-link
|
||||
class="clickable-row"
|
||||
tag="span"
|
||||
:to="{path: $routerHelper.getCategoryEditPath(props.row.id)}">
|
||||
{{ props.row.description }}
|
||||
</router-link>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column
|
||||
tabindex="0"
|
||||
:label="$i18n.get('label_actions')"
|
||||
width="78"
|
||||
:aria-label="$i18n.get('label_actions')">
|
||||
<!-- <a id="button-view" :aria-label="$i18n.get('label_button_view')" @click.prevent.stop="goToCollectionPage(props.row.id)"><b-icon icon="eye"></a> -->
|
||||
<a
|
||||
id="button-edit"
|
||||
:aria-label="$i18n.getFrom('categories','edit_item')"
|
||||
@click.prevent.stop="goToCategoryEditPage(props.row.id)">
|
||||
<b-icon
|
||||
type="is-gray"
|
||||
icon="pencil" />
|
||||
</a>
|
||||
<a
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete')"
|
||||
@click.prevent.stop="deleteOneCategory(props.row.id)">
|
||||
<b-icon
|
||||
type="is-gray"
|
||||
icon="delete" />
|
||||
</a>
|
||||
</b-table-column>
|
||||
</template>
|
||||
|
||||
</b-table>
|
||||
|
||||
<div v-if="(!totalCategories || totalCategories <= 0) && !isLoading">
|
||||
<section class="section">
|
||||
<div class="content has-text-grey has-text-centered">
|
||||
<p>
|
||||
<b-icon
|
||||
icon="inbox"
|
||||
size="is-large"/>
|
||||
</p>
|
||||
<p>{{ $i18n.get('info_no_category_created') }}</p>
|
||||
<router-link
|
||||
tag="button"
|
||||
class="button is-secondary"
|
||||
:to="{ path: $routerHelper.getNewCategoryPath() }">
|
||||
{{ $i18n.getFrom('taxonomies', 'new_item') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
<div class="table-wrapper">
|
||||
<table class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Checking list -->
|
||||
<th>
|
||||
|
||||
<!-- nothing to show on header -->
|
||||
</th>
|
||||
<!-- Name -->
|
||||
<th>
|
||||
<div class="th-wrap">{{ $i18n.get('label_name') }}</div>
|
||||
</th>
|
||||
<!-- Description -->
|
||||
<th>
|
||||
<div class="th-wrap">{{ $i18n.get('label_description') }}</div>
|
||||
</th>
|
||||
<!-- Actions -->
|
||||
<th class="actions-header">
|
||||
|
||||
<!-- nothing to show on header for actions cell-->
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
:class="{ 'selected-row': selectedCategories[index] }"
|
||||
:key="index"
|
||||
v-for="(category, index) of categories">
|
||||
<!-- Checking list -->
|
||||
<td
|
||||
:class="{ 'is-selecting': isSelectingCategories }"
|
||||
class="checkbox-cell">
|
||||
<b-checkbox
|
||||
size="is-small"
|
||||
v-model="selectedCategories[index]"/>
|
||||
</td>
|
||||
<!-- Name -->
|
||||
<td
|
||||
class="column-default-width column-main-content"
|
||||
@click="goToCategoryEditPage(category.id)"
|
||||
:label="$i18n.get('label_name')"
|
||||
:aria-label="$i18n.get('label_name') + ': ' + category.name">
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: category.name,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
{{ category.name }}</p>
|
||||
</td>
|
||||
<!-- Description -->
|
||||
<td
|
||||
class="column-large-width"
|
||||
@click="goToCategoryEditPage(category.id)"
|
||||
:label="$i18n.get('label_description')"
|
||||
:aria-label="$i18n.get('label_description') + ': ' + category.description">
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: category.description,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
{{ category.description }}</p>
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
<td
|
||||
@click="goToCategoryEditPage(category.id)"
|
||||
class="actions-cell column-default-width"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<div class="actions-container">
|
||||
<a
|
||||
id="button-edit"
|
||||
:aria-label="$i18n.getFrom('categories','edit_item')"
|
||||
@click="goToCategoryEditPage(category.id)">
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
icon="pencil"/>
|
||||
</a>
|
||||
<a
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete')"
|
||||
@click.prevent.stop="deleteOneCategory(category.id)">
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
icon="delete"/>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -106,6 +136,13 @@
|
|||
|
||||
export default {
|
||||
name: 'CategoriesList',
|
||||
data() {
|
||||
return {
|
||||
selectedCategories: [],
|
||||
allCategoriesOnPageSelected: false,
|
||||
isSelectingCategories: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
isLoading: false,
|
||||
totalCategories: 0,
|
||||
|
|
@ -113,72 +150,93 @@
|
|||
categoriesPerPage: 12,
|
||||
categories: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedCategories: []
|
||||
watch: {
|
||||
categories() {
|
||||
this.selectedCategories = [];
|
||||
for (let i = 0; i < this.categories.length; i++)
|
||||
this.selectedCategories.push(false);
|
||||
},
|
||||
selectedCategories() {
|
||||
let allSelected = true;
|
||||
let isSelecting = false;
|
||||
for (let i = 0; i < this.selectedCategories.length; i++) {
|
||||
if (this.selectedCategories[i] == false) {
|
||||
allSelected = false;
|
||||
} else {
|
||||
isSelecting = true;
|
||||
}
|
||||
}
|
||||
this.allCategoriesOnPageSelected = allSelected;
|
||||
this.isSelectingCategories = isSelecting;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('category', [
|
||||
'deleteCategory'
|
||||
]),
|
||||
selectAllCategoriesOnPage() {
|
||||
for (let i = 0; i < this.selectedCategories.length; i++)
|
||||
this.selectedCategories.splice(i, 1, !this.allCategoriesOnPageSelected);
|
||||
},
|
||||
deleteOneCategory(categoryId) {
|
||||
this.$dialog.confirm({
|
||||
message: this.$i18n.get('info_warning_category_delete'),
|
||||
onConfirm: () => {
|
||||
this.deleteCategory(categoryId)
|
||||
.then(() => {
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_category_deleted'),
|
||||
position: 'is-bottom',
|
||||
type: 'is-secondary',
|
||||
queue: true
|
||||
});
|
||||
// this.$toast.open({
|
||||
// duration: 3000,
|
||||
// message: this.$i18n.get('info_category_deleted'),
|
||||
// position: 'is-bottom',
|
||||
// type: 'is-secondary',
|
||||
// queue: true
|
||||
// });
|
||||
for (let i = 0; i < this.selectedCategories.length; i++) {
|
||||
if (this.selectedCategories[i].id === this.categoryId)
|
||||
this.selectedCategories.splice(i, 1);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_error_deleting_category'),
|
||||
position: 'is-bottom',
|
||||
type: 'is-danger',
|
||||
queue: true
|
||||
});
|
||||
// this.$toast.open({
|
||||
// duration: 3000,
|
||||
// message: this.$i18n.get('info_error_deleting_category'),
|
||||
// position: 'is-bottom',
|
||||
// type: 'is-danger',
|
||||
// queue: true
|
||||
// });
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteSelectedCategories() {
|
||||
this.$dialog.confirm({
|
||||
message: this.$i18n.get('info_selected_categories_delete'),
|
||||
message: this.$i18n.get('info_warning_selected_categories_delete'),
|
||||
onConfirm: () => {
|
||||
|
||||
for (let category of this.selectedCategories) {
|
||||
this.deleteCategory(category.id)
|
||||
.then(() => {
|
||||
this.loadCategories();
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_category_deleted'),
|
||||
position: 'is-bottom',
|
||||
type: 'is-secondary',
|
||||
queue: false
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_error_deleting_category'),
|
||||
position: 'is-bottom',
|
||||
type: 'is-danger',
|
||||
queue: false
|
||||
for (let i = 0; i < this.categories.length; i++) {
|
||||
if (this.selectedCategories[i]) {
|
||||
this.deleteCategory(this.categories[i].id)
|
||||
.then(() => {
|
||||
// this.loadCategories();
|
||||
// this.$toast.open({
|
||||
// duration: 3000,
|
||||
// message: this.$i18n.get('info_category_deleted'),
|
||||
// position: 'is-bottom',
|
||||
// type: 'is-secondary',
|
||||
// queue: false
|
||||
// })
|
||||
}).catch(() => {
|
||||
// this.$toast.open({
|
||||
// duration: 3000,
|
||||
// message: this.$i18n.get('info_error_deleting_category'),
|
||||
// position: 'is-bottom',
|
||||
// type: 'is-danger',
|
||||
// queue: false
|
||||
// });
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
this.selectedCategories = [];
|
||||
this.allCategoriesOnPageSelected = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -196,19 +254,21 @@
|
|||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.table-thumb {
|
||||
max-height: 38px !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
.selection-control {
|
||||
|
||||
padding: 6px 0px 0px 13px;
|
||||
background: white;
|
||||
height: 40px;
|
||||
|
||||
.row-creation span {
|
||||
color: $gray-light;
|
||||
font-size: 0.75em;
|
||||
line-height: 1.5
|
||||
.select-all {
|
||||
color: $gray-light;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clickable-row{ cursor: pointer !important; }
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="table-wrapper">
|
||||
<table class="table">
|
||||
<table class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Checking list -->
|
||||
|
|
@ -54,9 +54,13 @@
|
|||
<th>
|
||||
<div class="th-wrap">{{ $i18n.get('label_description') }}</div>
|
||||
</th>
|
||||
<!-- Creation -->
|
||||
<!-- Creation Date -->
|
||||
<th>
|
||||
<div class="th-wrap">{{ $i18n.get('label_creation') }}</div>
|
||||
<div class="th-wrap">{{ $i18n.get('label_creation_date') }}</div>
|
||||
</th>
|
||||
<!-- Created By -->
|
||||
<th>
|
||||
<div class="th-wrap">{{ $i18n.get('label_created_by') }}</div>
|
||||
</th>
|
||||
<th class="actions-header">
|
||||
|
||||
|
|
@ -91,27 +95,59 @@
|
|||
</td>
|
||||
<!-- Name -->
|
||||
<td
|
||||
class="column-default-width"
|
||||
class="column-default-width column-main-content"
|
||||
@click="goToCollectionPage(collection.id)"
|
||||
:label="$i18n.get('label_name')"
|
||||
:aria-label="$i18n.get('label_name') + ': ' + collection.name">
|
||||
<p>{{ collection.name }}</p>
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: collection.name,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
{{ collection.name }}</p>
|
||||
</td>
|
||||
<!-- Description -->
|
||||
<td
|
||||
class="column-default-width"
|
||||
class="column-large-width"
|
||||
@click="goToCollectionPage(collection.id)"
|
||||
:label="$i18n.get('label_description')"
|
||||
:aria-label="$i18n.get('label_description') + ': ' + collection.description">
|
||||
<p>{{ collection.description }}</p>
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: collection.description,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
{{ collection.description }}</p>
|
||||
</td>
|
||||
<!-- Creation -->
|
||||
<!-- Creation Date -->
|
||||
<td
|
||||
@click="goToCollectionPage(collection.id)"
|
||||
class="table-creation column-default-width"
|
||||
:label="$i18n.get('label_creation')"
|
||||
:aria-label="$i18n.get('label_creation') + ': ' + collection.creation">
|
||||
<p v-html="collection.creation" />
|
||||
:label="$i18n.get('label_creation_date')"
|
||||
:aria-label="$i18n.get('label_creation_date') + ': ' + collection.creation_date">
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: collection.creation_date,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-html="collection.creation_date" />
|
||||
</td>
|
||||
<!-- Created by -->
|
||||
<td
|
||||
@click="goToCollectionPage(collection.id)"
|
||||
class="table-creation column-default-width"
|
||||
:label="$i18n.get('label_created_by')"
|
||||
:aria-label="$i18n.get('label_created_by') + ': ' + collection.author_name">
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: collection.author_name,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-html="collection.author_name" />
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
<td
|
||||
|
|
@ -322,176 +358,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid $tainacan-input-background;
|
||||
top: 0px;
|
||||
z-index: 9;
|
||||
padding: 10px;
|
||||
vertical-align: bottom;
|
||||
|
||||
&.actions-header {
|
||||
min-width: 8.333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-cell {
|
||||
min-width: 40px;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
left: 0;
|
||||
top: auto;
|
||||
display: table-cell;
|
||||
|
||||
&::before {
|
||||
box-shadow: inset 50px 0 10px -12px #222;
|
||||
content: " ";
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
border-radius: 0px;
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
visibility: hidden;
|
||||
}
|
||||
label span.control-label {
|
||||
display: none;
|
||||
}
|
||||
&.is-selecting {
|
||||
.checkbox { visibility: visible; }
|
||||
&::before { visibility: visible !important; }
|
||||
}
|
||||
}
|
||||
// Only to be used in case we can implement Column resizing
|
||||
// th:not(:last-child) {
|
||||
// border-right: 1px solid $tainacan-input-background !important;
|
||||
// }
|
||||
|
||||
.thumbnail-cell {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&.selected-row {
|
||||
background-color: $primary-lighter;
|
||||
.checkbox-cell .checkbox, .actions-cell .actions-container {
|
||||
background-color: $primary-lighter;
|
||||
}
|
||||
}
|
||||
td {
|
||||
height: 60px;
|
||||
max-height: 60px;
|
||||
padding: 10px;
|
||||
vertical-align: middle;
|
||||
line-height: 12px;
|
||||
border: none;
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
td.column-default-width{
|
||||
max-width: 300px;
|
||||
p {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
img.table-thumb {
|
||||
max-height: 37px !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
td.table-creation p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
td.actions-cell {
|
||||
padding: 0px;
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
right: 0px;
|
||||
top: auto;
|
||||
width: 80px;
|
||||
|
||||
.actions-container {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
z-index: 9;
|
||||
background-color: transparent;
|
||||
float: right;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: auto;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tainacan-input-background !important;
|
||||
cursor: pointer;
|
||||
|
||||
.checkbox-cell {
|
||||
&::before { visibility: visible; }
|
||||
.checkbox {
|
||||
visibility: visible;
|
||||
background-color: $tainacan-input-background !important;
|
||||
}
|
||||
}
|
||||
.actions-cell {
|
||||
.actions-container {
|
||||
visibility: visible;
|
||||
background: $tainacan-input-background !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: inset -97px 0 17px -21px #222;
|
||||
content: " ";
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="table">
|
||||
<table class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Title -->
|
||||
<th>
|
||||
<div class="th-wrap">{{ $i18n.get('label_event_title') }}</div>
|
||||
</th>
|
||||
<!-- Who and When -->
|
||||
<!-- Created by -->
|
||||
<th>
|
||||
<div class="th-wrap">{{ $i18n.get('label_who_when') }}</div>
|
||||
<div class="th-wrap">{{ $i18n.get('label_created_by') }}</div>
|
||||
</th>
|
||||
<!-- Event date -->
|
||||
<th>
|
||||
<div class="th-wrap">{{ $i18n.get('label_event_date') }}</div>
|
||||
</th>
|
||||
<!-- Status -->
|
||||
<!--<th>-->
|
||||
|
|
@ -24,19 +28,44 @@
|
|||
v-for="(event, index) of events">
|
||||
<!-- Name -->
|
||||
<td
|
||||
class="column-default-width"
|
||||
class="column-default-width column-main-content"
|
||||
@click="goToEventPage(event.id)"
|
||||
:label="$i18n.get('label_event_title')"
|
||||
:aria-label="$i18n.get('label_event_title') + ': ' + event.title">
|
||||
<p>{{ event.title }}</p>
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: event.title,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}">{{ event.title }}</p>
|
||||
</td>
|
||||
<!-- Who and When -->
|
||||
<!-- User -->
|
||||
<td
|
||||
class="table-creation column-default-width"
|
||||
class="table-creation column-small-width"
|
||||
@click="goToEventPage(event.id)"
|
||||
:label="$i18n.get('label_who_when')"
|
||||
:aria-label="$i18n.get('label_who_when') + ': ' + event.by">
|
||||
<p v-html="event.by" />
|
||||
:label="$i18n.get('label_created_by')"
|
||||
:aria-label="$i18n.get('label_created_by') + ': ' + event.user_name">
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: event.user_name,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-html="event.user_name" />
|
||||
</td>
|
||||
<!-- Event Date -->
|
||||
<td
|
||||
class="table-creation column-small-width"
|
||||
@click="goToEventPage(event.id)"
|
||||
:label="$i18n.get('label_event_date')"
|
||||
:aria-label="$i18n.get('label_event_date') + ': ' + event.log_date">
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: event.log_date,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-html="event.log_date" />
|
||||
</td>
|
||||
<!-- Status -->
|
||||
<!--<td-->
|
||||
|
|
@ -68,91 +97,20 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!--
|
||||
<b-table
|
||||
v-if="totalEvents > 0"
|
||||
ref="eventsTable"
|
||||
:data="events"
|
||||
:checked-rows.sync="selectedEvents"
|
||||
:loading="isLoading"
|
||||
hoverable
|
||||
striped
|
||||
backend-sorting>
|
||||
<template slot-scope="props">
|
||||
|
||||
<b-table-column
|
||||
tabindex="0"
|
||||
:label="$i18n.get('label_event_title')"
|
||||
:aria-label="$i18n.get('label_event_title')"
|
||||
field="props.row.title">
|
||||
<router-link
|
||||
class="clickable-row"
|
||||
tag="span"
|
||||
router-link-active
|
||||
:active="props.row.log_diffs.length > 0"
|
||||
:to="{path: $routerHelper.getEventPath(props.row.id)}">
|
||||
{{ props.row.title }}
|
||||
</router-link>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column
|
||||
class="row-creation"
|
||||
tabindex="0"
|
||||
:aria-label="$i18n.get('label_who_when') + ': ' + props.row.creation"
|
||||
:label="$i18n.get('label_who_when')"
|
||||
property="by"
|
||||
show-overflow-tooltip
|
||||
field="props.row.by">
|
||||
<router-link
|
||||
class="clickable-row"
|
||||
v-html="props.row.by"
|
||||
tag="span"
|
||||
:active="props.row.log_diffs.length > 0"
|
||||
:to="{path: $routerHelper.getEventPath(props.row.id)}"/>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column
|
||||
tabindex="0"
|
||||
:label="$i18n.get('label_actions')"
|
||||
width="78"
|
||||
:aria-label="$i18n.get('label_actions')">
|
||||
|
||||
<a
|
||||
v-if="props.row.status === 'pending'"
|
||||
id="button-approve"
|
||||
:aria-label="$i18n.get('approve_item')"
|
||||
@click.prevent.stop="approveEvent(props.row.id)">
|
||||
<!-- Empty state image -->
|
||||
<div v-if="(totalEvents <= 0 || !totalEvents) && !isLoading">
|
||||
<section class="section">
|
||||
<div class="content has-text-grey has-text-centered">
|
||||
<p>
|
||||
<b-icon
|
||||
icon="check" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="props.row.status === 'pending'"
|
||||
id="button-not-approve"
|
||||
class="delete"
|
||||
:aria-label="$i18n.get('not_approve_item')"
|
||||
@click.prevent.stop="notApproveEvent(props.row.id)" />
|
||||
|
||||
<small v-if="props.row.status !== 'pending'"> Approved </small>
|
||||
|
||||
</b-table-column>
|
||||
</template>
|
||||
|
||||
</b-table>
|
||||
-->
|
||||
<section
|
||||
v-if="totalEvents <= 0 || !totalEvents"
|
||||
class="hero is-bold is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
<b-icon icon="notifications-none" />
|
||||
{{ this.$i18n.get('info_no_events') }}
|
||||
</h1>
|
||||
icon="inbox"
|
||||
size="is-large"/>
|
||||
</p>
|
||||
<p>{{ $i18n.get('info_no_events') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -191,145 +149,6 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style>
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
|
||||
.status-cell {
|
||||
width: 78px;
|
||||
}
|
||||
|
||||
.checkbox-cell {
|
||||
width: 44px;
|
||||
height: 58px;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
left: 82px;
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
z-index: 9;
|
||||
|
||||
&::before {
|
||||
box-shadow: inset 53px 0 10px -12px #222;
|
||||
content: " ";
|
||||
width: 64px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
border-radius: 0px;
|
||||
background-color: white;
|
||||
padding: 10px 10px 10px 14px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.is-selecting {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
// Only to be used in case we can implement Column resizing
|
||||
// th:not(:last-child) {
|
||||
// border-right: 1px solid $tainacan-input-background !important;
|
||||
// }
|
||||
|
||||
.thumbnail-cell {
|
||||
width: 58px;
|
||||
padding-left: 54px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&.selected-row {
|
||||
background-color: $primary-lighter !important;
|
||||
.checkbox-cell .checkbox, .actions-cell .actions-container {
|
||||
background-color: $primary-lighter !important;
|
||||
}
|
||||
}
|
||||
td {
|
||||
height: 58px;
|
||||
max-height: 58px;
|
||||
padding: 10px;
|
||||
vertical-align: middle;
|
||||
line-height: 12px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
td.column-default-width{
|
||||
max-width: 350px;
|
||||
p, {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
img.table-thumb {
|
||||
max-height: 38px !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
td.table-creation p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
td.actions-cell {
|
||||
padding: 0px;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
right: 82px;
|
||||
display: none;
|
||||
|
||||
.actions-container {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
background-color: $tainacan-input-background;
|
||||
}
|
||||
|
||||
a .icon {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
box-shadow: inset -113px 0 17px -17px #222;
|
||||
content: " ";
|
||||
width: 125px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tainacan-input-background;
|
||||
cursor: pointer;
|
||||
|
||||
.checkbox-cell {
|
||||
visibility: visible;
|
||||
.checkbox { background-color: $tainacan-input-background; }
|
||||
}
|
||||
.actions-cell {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
</div>
|
||||
<div class="field is-pulled-right">
|
||||
<b-dropdown
|
||||
:mobile-modal="false"
|
||||
position="is-bottom-left"
|
||||
v-if="items.length > 0 && items[0].current_user_can_edit"
|
||||
:disabled="!isSelectingItems"
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
<div class="table-wrapper">
|
||||
<table
|
||||
:class="{'selectable-table': !isOnTheme }"
|
||||
class="table">
|
||||
class="tainacan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- Checking list -->
|
||||
|
|
@ -50,11 +51,10 @@
|
|||
<th
|
||||
v-for="(column, index) in tableFields"
|
||||
:key="index"
|
||||
v-if="column.field != 'row_actions' && column.display"
|
||||
v-if="column.display"
|
||||
class="column-default-width"
|
||||
:class="{
|
||||
'thumbnail-cell': column.field == 'row_thumbnail',
|
||||
'column-needed-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Numeric') : false,
|
||||
'column-small-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Date' || column.field_type_object.className == 'Tainacan\\Field_Types\\Numeric') : false,
|
||||
'column-medium-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Selectbox' || column.field_type_object.className == 'Tainacan\\Field_Types\\Category' || column.field_type_object.className == 'Tainacan\\Field_Types\\Compound') : false,
|
||||
'column-large-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Textarea') : false,
|
||||
|
|
@ -91,13 +91,11 @@
|
|||
v-for="(column, index) in tableFields"
|
||||
v-if="column.display"
|
||||
:label="column.name"
|
||||
:aria-label="column.field != 'row_thumbnail' &&
|
||||
column.field != 'row_actions' &&
|
||||
column.field != 'row_creation' ? column.name + '' + item.metadata[column.slug].value_as_string : ''"
|
||||
:aria-label="(column.field != 'row_thumbnail' && column.field != 'row_creation' && column.field != 'row_author')
|
||||
? column.name + '' + (item.metadata ? item.metadata[column.slug].value_as_string : '') : ''"
|
||||
class="column-default-width"
|
||||
:class="{
|
||||
'thumbnail-cell': column.field == 'row_thumbnail',
|
||||
'table-creation': column.field == 'row_creation',
|
||||
'thumbnail-cell': column.field == 'row_thumbnail',
|
||||
'column-main-content' : column.field_type_object != undefined ? (column.field_type_object.related_mapped_prop == 'title') : false,
|
||||
'column-needed-width column-align-right' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Numeric') : false,
|
||||
'column-small-width' : column.field_type_object != undefined ? (column.field_type_object.className == 'Tainacan\\Field_Types\\Date' || column.field_type_object.className == 'Tainacan\\Field_Types\\Numeric') : false,
|
||||
|
|
@ -112,9 +110,17 @@
|
|||
column.field !== 'row_creation'"
|
||||
:data="renderMetadata( item.metadata[column.slug] )"/> -->
|
||||
<p
|
||||
v-if="column.field !== 'row_thumbnail' &&
|
||||
column.field !== 'row_actions' &&
|
||||
column.field !== 'row_creation'"
|
||||
v-tooltip="{
|
||||
content: renderMetadata( item.metadata[column.slug] ),
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-if="item.metadata != undefined &&
|
||||
column.field !== 'row_thumbnail' &&
|
||||
column.field !== 'row_actions' &&
|
||||
column.field !== 'row_creation' &&
|
||||
column.field !== 'row_author'"
|
||||
v-html="renderMetadata( item.metadata[column.slug] )"/>
|
||||
|
||||
<span v-if="column.field == 'row_thumbnail'">
|
||||
|
|
@ -123,13 +129,21 @@
|
|||
:src="item[column.slug].thumb">
|
||||
</span>
|
||||
<p
|
||||
v-if="column.field == 'row_creation'"
|
||||
v-html="getCreationHtml(item)" />
|
||||
v-tooltip="{
|
||||
content: item[column.slug],
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start'
|
||||
}"
|
||||
v-if="column.field == 'row_author' || column.field == 'row_creation'">
|
||||
{{ item[column.slug] }}
|
||||
</p>
|
||||
|
||||
</td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td
|
||||
v-if="item.current_user_can_edit && !isOnTheme"
|
||||
v-if="!isOnTheme && item.current_user_can_edit"
|
||||
class="actions-cell"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<div class="actions-container">
|
||||
|
|
@ -151,8 +165,6 @@
|
|||
</a>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -162,7 +174,6 @@
|
|||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import DataAndTooltip from '../other/data-and-tooltip.vue'
|
||||
|
||||
export default {
|
||||
name: 'ItemsList',
|
||||
|
|
@ -180,9 +191,6 @@ export default {
|
|||
isLoading: false,
|
||||
isOnTheme: false
|
||||
},
|
||||
components: {
|
||||
DataAndTooltip
|
||||
},
|
||||
mounted() {
|
||||
this.selectedItems = [];
|
||||
for (let i = 0; i < this.items.length; i++)
|
||||
|
|
@ -295,12 +303,6 @@ export default {
|
|||
} else {
|
||||
return metadata.value_as_html;
|
||||
}
|
||||
},
|
||||
getCreationHtml(item) {
|
||||
return this.$i18n.get('info_created_by') + item['author_name'] + '<br>' + this.$i18n.get('info_date') + item['creation_date'];
|
||||
},
|
||||
getDecodedURI(url) {
|
||||
return decodeURIComponent(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -325,222 +327,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid $tainacan-input-background;
|
||||
top: 0px;
|
||||
z-index: 9;
|
||||
padding: 10px;
|
||||
vertical-align: bottom;
|
||||
|
||||
&.actions-header {
|
||||
min-width: 8.333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-cell {
|
||||
min-width: 40px;
|
||||
width: 40px;
|
||||
padding: 0;
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
left: 0;
|
||||
top: auto;
|
||||
display: table-cell;
|
||||
|
||||
&::before {
|
||||
box-shadow: inset 50px 0 10px -12px #222;
|
||||
content: " ";
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
border-radius: 0px;
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
visibility: hidden;
|
||||
}
|
||||
label.control-label {
|
||||
display: none;
|
||||
}
|
||||
&.is-selecting {
|
||||
.checkbox { visibility: visible; }
|
||||
&::before { visibility: visible !important; }
|
||||
}
|
||||
}
|
||||
// Only to be used in case we can implement Column resizing
|
||||
// th:not(:last-child) {
|
||||
// border-right: 1px solid $tainacan-input-background !important;
|
||||
// }
|
||||
|
||||
.thumbnail-cell {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column-small-width {
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-default-width {
|
||||
min-width: 80px;
|
||||
max-width: 160px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-medium-width {
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-large-width {
|
||||
min-width: 120px;
|
||||
max-width: 240px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-main-content {
|
||||
min-width: 120px !important;
|
||||
max-width: 240px !important;
|
||||
p {
|
||||
font-size: 14px !important;
|
||||
color: $tainacan-input-color !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
}
|
||||
.column-needed-width {
|
||||
max-width: unset !important;
|
||||
}
|
||||
.column-align-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&.selected-row {
|
||||
background-color: $primary-lighter;
|
||||
.checkbox-cell .checkbox, .actions-cell .actions-container {
|
||||
background-color: $primary-lighter;
|
||||
}
|
||||
}
|
||||
td {
|
||||
height: 60px;
|
||||
max-height: 60px;
|
||||
padding: 10px;
|
||||
vertical-align: middle;
|
||||
line-height: 12px;
|
||||
border: none;
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
img.table-thumb {
|
||||
max-height: 40px !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
td.table-creation p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
td.actions-cell {
|
||||
padding: 0px;
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
right: 0px;
|
||||
top: auto;
|
||||
width: 80px;
|
||||
|
||||
.actions-container {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
z-index: 9;
|
||||
background-color: transparent;
|
||||
float: right;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: auto;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tainacan-input-background !important;
|
||||
cursor: pointer;
|
||||
|
||||
.checkbox-cell {
|
||||
&::before { visibility: visible; }
|
||||
.checkbox {
|
||||
visibility: visible;
|
||||
background-color: $tainacan-input-background !important;
|
||||
}
|
||||
}
|
||||
.actions-cell {
|
||||
.actions-container {
|
||||
visibility: visible;
|
||||
background: $tainacan-input-background !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: inset -97px 0 17px -21px #222;
|
||||
content: " ";
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="tainacan-page-title"
|
||||
id="title-row">
|
||||
class="tainacan-page-title">
|
||||
<h1>{{ pageTitle }} <span class="is-italic">{{ isRepositoryLevel ? '' : entityName }}</span></h1>
|
||||
<a
|
||||
@click="$router.go(-1)"
|
||||
|
|
@ -133,20 +132,34 @@ export default {
|
|||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
// Tainacan Header
|
||||
#title-row {
|
||||
.tainacan-page-title {
|
||||
margin-bottom: 40px;
|
||||
|
||||
h1, h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $tertiary;
|
||||
display: inline-block;
|
||||
}
|
||||
a.back-link{
|
||||
font-weight: 500;
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
}
|
||||
hr{
|
||||
margin: 3px 0px 4px 0px;
|
||||
height: 1px;
|
||||
background-color: $secondary;
|
||||
}
|
||||
.breadcrumbs {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.level-left {
|
||||
.level-item {
|
||||
display: inline-block;
|
||||
margin-left: 268px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
.level-left {
|
||||
margin-left: 0px !important;
|
||||
|
|
@ -161,7 +174,6 @@ export default {
|
|||
top: 206px;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,89 +0,0 @@
|
|||
<template>
|
||||
<span class="data-wrapper">
|
||||
<p
|
||||
class="data-area"
|
||||
v-html="data" />
|
||||
<div class="data-tooltip">
|
||||
<div class="data-tooltip-body">
|
||||
<p v-html="data" />
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DataAndTooltip',
|
||||
props: {
|
||||
data: '',
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import "../../scss/_variables.scss";
|
||||
|
||||
.data-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-area {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.data-wrapper:hover .data-tooltip {
|
||||
margin-bottom: -8px;
|
||||
margin-left: -8px;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.data-tooltip {
|
||||
z-index: 99999999999999999999;
|
||||
color: $tertiary;
|
||||
background-color: $primary-light;
|
||||
border: none;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
max-width: 280px;
|
||||
min-width: 100px;
|
||||
height: auto;
|
||||
transition: margin-bottom 0.2s ease, opacity 0.3s ease;
|
||||
position: absolute;
|
||||
bottom: calc(100% - 6px);
|
||||
left: 0;
|
||||
margin-bottom: -27px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
.data-tooltip-body {
|
||||
padding: 20px;
|
||||
p {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
&:before {
|
||||
border-color: $primary-light transparent transparent transparent;
|
||||
border-right-width: 6px;
|
||||
border-top-width: 7px;
|
||||
border-left-width: 6px;
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -1,81 +1,143 @@
|
|||
<template>
|
||||
<span>
|
||||
<div class="sub-header">
|
||||
<div
|
||||
class="header-item"
|
||||
v-if="!isOnTheme">
|
||||
<b-dropdown
|
||||
:mobile-modal="false"
|
||||
id="item-creation-options-dropdown">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.getFrom('items','add_new') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
|
||||
<b-dropdown-item>
|
||||
<router-link
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
{{ $i18n.get('add_one_item') }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_bulk') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_external_source') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<b-dropdown
|
||||
ref="displayedFieldsDropdown"
|
||||
:mobile-modal="false"
|
||||
:disabled="!hasResults"
|
||||
class="show">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.get('label_table_fields') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
<div class="metadata-options-container">
|
||||
<b-dropdown-item
|
||||
v-for="(column, index) in localTableFields"
|
||||
:key="index"
|
||||
class="control"
|
||||
custom>
|
||||
<b-checkbox
|
||||
v-model="column.display"
|
||||
:native-value="column.display">
|
||||
{{ column.name }}
|
||||
</b-checkbox>
|
||||
</b-dropdown-item>
|
||||
</div>
|
||||
<div class="dropdown-item-apply">
|
||||
<button
|
||||
@click="onChangeDisplayedFields()"
|
||||
class="button is-success">
|
||||
{{ $i18n.get('label_apply_changes') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div
|
||||
v-if="isOnTheme"
|
||||
class="header-item">
|
||||
<b-field>
|
||||
<b-dropdown
|
||||
@change="$emit('onChangeViewMode', $event)"
|
||||
:value="viewMode">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
<span>View (tests)</span>
|
||||
<b-icon icon="menu-down" />
|
||||
</button>
|
||||
<b-dropdown-item :value="'table'">
|
||||
<b-icon icon="table"/>
|
||||
Table
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item :value="'cards'">
|
||||
<b-icon icon="view-grid"/>
|
||||
Cards
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item :value="'list'">
|
||||
<b-icon icon="view-list"/>
|
||||
List
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<b-field>
|
||||
<b-select
|
||||
:disabled="!hasResults"
|
||||
@input="onChangeOrderBy($event)"
|
||||
:placeholder="$i18n.get('label_sorting')">
|
||||
<option
|
||||
v-for="field in tableFields"
|
||||
v-if="
|
||||
field.id === 'creation_date' ||
|
||||
field.id === 'author_name' || (
|
||||
field.id !== undefined &&
|
||||
field.field_type_object.related_mapped_prop !== 'description' &&
|
||||
field.field_type_object.primitive_type !== 'term' &&
|
||||
field.field_type_object.primitive_type !== 'item' &&
|
||||
field.field_type_object.primitive_type !== 'compound'
|
||||
)"
|
||||
:value="field"
|
||||
:key="field.id">
|
||||
{{ field.name }}
|
||||
</option>
|
||||
</b-select>
|
||||
<button
|
||||
:disabled="!hasResults"
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder()">
|
||||
<b-icon :icon="order === 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
|
||||
</button>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="header-item"
|
||||
v-if="!isOnTheme">
|
||||
<b-dropdown id="item-creation-options-dropdown">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.getFrom('items','add_new') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
|
||||
<b-dropdown-item>
|
||||
<router-link
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
{{ $i18n.get('add_one_item') }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_bulk') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
{{ $i18n.get('add_items_external_source') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<b-dropdown class="show">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
<span>{{ $i18n.get('label_table_fields') }}</span>
|
||||
<b-icon icon="menu-down"/>
|
||||
</button>
|
||||
<b-dropdown-item
|
||||
v-for="(column, index) in tableFields"
|
||||
:key="index"
|
||||
class="control"
|
||||
custom>
|
||||
<b-checkbox
|
||||
|
||||
v-model="column.display"
|
||||
:native-value="column.field">
|
||||
{{ column.name }}
|
||||
</b-checkbox>
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<b-field>
|
||||
<b-select
|
||||
@input="onChangeOrderBy($event)"
|
||||
:placeholder="$i18n.get('label_sorting')">
|
||||
<option
|
||||
v-for="field in tableFields"
|
||||
v-if="
|
||||
field.id === 'date' || (
|
||||
field.id !== undefined &&
|
||||
field.field_type_object.related_mapped_prop !== 'description' &&
|
||||
field.field_type_object.primitive_type !== 'term' &&
|
||||
field.field_type_object.primitive_type !== 'item' &&
|
||||
field.field_type_object.primitive_type !== 'compound'
|
||||
)"
|
||||
:value="field"
|
||||
:key="field.id">
|
||||
{{ field.name }}
|
||||
</option>
|
||||
</b-select>
|
||||
<button
|
||||
class="button is-white is-small"
|
||||
@click="onChangeOrder()">
|
||||
<b-icon :icon="order === 'ASC' ? 'sort-ascending' : 'sort-descending'"/>
|
||||
</button>
|
||||
</b-field>
|
||||
v-if="!isOnTheme"
|
||||
class="tabs">
|
||||
<ul>
|
||||
<li
|
||||
@click="onChangeTab('')"
|
||||
:class="{ 'is-active': status == undefined || status == ''}"><a>{{ $i18n.get('label_all_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('draft')"
|
||||
:class="{ 'is-active': status == 'draft'}"><a>{{ $i18n.get('label_draft_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('trash')"
|
||||
:class="{ 'is-active': status == 'trash'}"><a>{{ $i18n.get('label_trash_items') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -87,14 +149,22 @@
|
|||
name: 'SearchControl',
|
||||
data() {
|
||||
return {
|
||||
prefTableFields: []
|
||||
prefTableFields: [],
|
||||
localTableFields: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
collectionId: Number,
|
||||
isRepositoryLevel: false,
|
||||
tableFields: Array,
|
||||
isOnTheme: false
|
||||
isOnTheme: false,
|
||||
status: '',
|
||||
hasResults: false ,
|
||||
viewMode: 'table'
|
||||
},
|
||||
watch: {
|
||||
tableFields() {
|
||||
this.localTableFields = JSON.parse(JSON.stringify(this.tableFields));
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
orderBy() {
|
||||
|
|
@ -104,11 +174,14 @@
|
|||
return this.getOrder();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.localTableFields = JSON.parse(JSON.stringify(this.tableFields));
|
||||
},
|
||||
methods: {
|
||||
...mapGetters('search', [
|
||||
'getOrderBy',
|
||||
'getOrder',
|
||||
//'getFetchOnlyMeta'
|
||||
'getStatus'
|
||||
]),
|
||||
onChangeOrderBy(field) {
|
||||
this.$eventBusSearch.setOrderBy(field);
|
||||
|
|
@ -116,30 +189,98 @@
|
|||
onChangeOrder() {
|
||||
this.order == 'DESC' ? this.$eventBusSearch.setOrder('ASC') : this.$eventBusSearch.setOrder('DESC');
|
||||
},
|
||||
// onChangeDisplayedField(event, fieldId) {
|
||||
// column.display = event;
|
||||
// if (event)
|
||||
// this.$eventBusSearch.addFetchOnlyMeta(field.id);
|
||||
// else
|
||||
// this.$eventBusSearch.removeFetchOnlyMeta(field.id);
|
||||
// }
|
||||
onChangeTab(status) {
|
||||
this.$eventBusSearch.setStatus(status);
|
||||
},
|
||||
onChangeDisplayedFields() {
|
||||
let fetchOnlyFieldIds = [];
|
||||
|
||||
for (let i = 0; i < this.localTableFields.length; i++) {
|
||||
|
||||
this.tableFields[i].display = this.localTableFields[i].display;
|
||||
if (this.tableFields[i].id != undefined) {
|
||||
if (this.tableFields[i].display) {
|
||||
fetchOnlyFieldIds.push(this.tableFields[i].id);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$eventBusSearch.addFetchOnly({
|
||||
'0': 'thumbnail',
|
||||
'meta': fetchOnlyFieldIds,
|
||||
'1': 'creation_date',
|
||||
'2': 'author_name'
|
||||
});
|
||||
this.$refs.displayedFieldsDropdown.toggle();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
|
||||
@import '../../scss/_variables.scss';
|
||||
|
||||
.sub-header {
|
||||
min-height: $subheader-height;
|
||||
height: $subheader-height;
|
||||
padding-top: $page-small-top-padding;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
border-bottom: 0.5px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
height: 60px;
|
||||
margin-top: 0;
|
||||
|
||||
.header-item {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-item {
|
||||
display: inline-block;
|
||||
|
||||
.field {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#item-creation-options-dropdown {
|
||||
margin-right: 80px;
|
||||
}
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
|
||||
div.dropdown-content {
|
||||
padding: 0;
|
||||
|
||||
.metadata-options-container {
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dropdown-item-apply {
|
||||
width: 100%;
|
||||
border-top: 1px solid #efefef;
|
||||
padding: 8px 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.dropdown-item-apply .button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-item .field {
|
||||
align-items: center;
|
||||
}
|
||||
#item-creation-options-dropdown {
|
||||
margin-right: 80px;
|
||||
}
|
||||
.header-item .dropdown-menu {
|
||||
display: block;
|
||||
|
||||
.tabs {
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ window.underscore = _.noConflict();
|
|||
// Main imports
|
||||
import Vue from 'vue';
|
||||
import Buefy from 'buefy';
|
||||
import VTooltip from 'v-tooltip'
|
||||
|
||||
// Custom elements
|
||||
import Text from '../../classes/field-types/text/Text.vue';
|
||||
|
|
@ -45,6 +46,7 @@ import VueMask from 'v-mask';
|
|||
|
||||
// Configure and Register Plugins
|
||||
Vue.use(Buefy);
|
||||
Vue.use(VTooltip)
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
Vue.use(RouterHelperPlugin);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const routes = [
|
|||
{ path: 'items/:itemId/edit', name: 'ItemEditionForm', component: ItemEditionForm, meta: {title: i18nGet('title_edit_item'), icon: 'folder-multiple'} },
|
||||
{ path: 'items/new', name: 'CollectionItemCreatePage', component: ItemEditionForm, meta: {title: i18nGet('title_create_item_collection'), icon: 'folder-multiple'} },
|
||||
{ path: 'items/:itemId', name: 'ItemPage', component: ItemPage, meta: {title: i18nGet('title_item_page'), icon: 'folder-multiple'} },
|
||||
{ path: 'edit', component: CollectionEditionForm, name: 'CollectionEditionForm', meta: {title: i18nGet('title_edit_collection'), icon: 'folder-multiple'} },
|
||||
{ path: 'settings', component: CollectionEditionForm, name: 'CollectionEditionForm', meta: {title: i18nGet('title_collection_settings'), icon: 'folder-multiple'} },
|
||||
{ path: 'fields', component: FieldsList, name: 'FieldsList', meta: {title: i18nGet('title_collection_fields_edition'), icon: 'folder-multiple'} },
|
||||
{ path: 'filters', component: FiltersList, name: 'FiltersList', meta: {title: i18nGet('title_collection_filters_edition'), icon: 'folder-multiple'} },
|
||||
{ path: 'events', component: EventsPage, name: 'CollectionEventsPage', meta: {title: i18nGet('title_collection_events'), icon: 'flash'} }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// Main imports
|
||||
import Vue from 'vue';
|
||||
import Buefy from 'buefy';
|
||||
import VTooltip from 'v-tooltip'
|
||||
|
||||
// Custom elements
|
||||
import Text from '../../classes/field-types/text/Text.vue';
|
||||
|
|
@ -39,6 +40,7 @@ import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from '
|
|||
|
||||
// Configure and Register Plugins
|
||||
Vue.use(Buefy);
|
||||
Vue.use(VTooltip)
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
Vue.use(RouterHelperPlugin);
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
|
|||
return '/taxonomies/?' + qs.stringify(query);
|
||||
},
|
||||
getCategoryTermsPath(categoryId, query) {
|
||||
return '/categoryId/' + categoryId + 'terms/?' + qs.stringify(query);
|
||||
return '/categoryId/' + categoryId + '/terms/?' + qs.stringify(query);
|
||||
},
|
||||
getFiltersPath(query) {
|
||||
return '/filters/?' + qs.stringify(query);
|
||||
|
|
@ -230,7 +230,7 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
|
|||
getNewCategoryPath() {
|
||||
return '/taxonomies/new';
|
||||
},
|
||||
getNewTermPath() {
|
||||
getNewTermPath(categoryId) {
|
||||
return '/taxonomies/' + categoryId + '/terms/new';
|
||||
},
|
||||
getNewEventPath() {
|
||||
|
|
@ -238,7 +238,7 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
|
|||
},
|
||||
// Edit
|
||||
getCollectionEditPath(id) {
|
||||
return '/collections/' + id + '/edit';
|
||||
return '/collections/' + id + '/settings';
|
||||
},
|
||||
getItemEditPath(collectionId, itemId) {
|
||||
return '/collections/' + collectionId + '/items/' + itemId + '/edit';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<tainacan-title />
|
||||
<div
|
||||
class="sub-header"
|
||||
v-if="totalCategories > 0">
|
||||
v-if="checkIfUserCanEdit()">
|
||||
<div class="header-item">
|
||||
<router-link
|
||||
id="button-create-category"
|
||||
|
|
@ -17,53 +17,90 @@
|
|||
</div>
|
||||
|
||||
<div class="above-subheader">
|
||||
|
||||
<categories-list
|
||||
:is-loading="isLoading"
|
||||
:total-categories="totalCategories"
|
||||
:page="page"
|
||||
:categories-per-page="categoriesPerPage"
|
||||
:categories="categories"/>
|
||||
|
||||
<!-- Footer -->
|
||||
<div
|
||||
class="pagination-area"
|
||||
v-if="totalCategories > 0">
|
||||
<div class="shown-items">
|
||||
{{
|
||||
$i18n.get('info_showing_categories') +
|
||||
(categoriesPerPage * (page - 1) + 1) +
|
||||
$i18n.get('info_to') +
|
||||
getLastCategoryNumber() +
|
||||
$i18n.get('info_of') + totalCategories + '.'
|
||||
}}
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li
|
||||
@click="onChangeTab('')"
|
||||
:class="{ 'is-active': status == undefined || status == ''}"><a>{{ $i18n.get('label_all_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('draft')"
|
||||
:class="{ 'is-active': status == 'draft'}"><a>{{ $i18n.get('label_draft_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('trash')"
|
||||
:class="{ 'is-active': status == 'trash'}"><a>{{ $i18n.get('label_trash_items') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<categories-list
|
||||
:is-loading="isLoading"
|
||||
:total-categories="totalCategories"
|
||||
:page="page"
|
||||
:categories-per-page="categoriesPerPage"
|
||||
:categories="categories"/>
|
||||
|
||||
<!-- Empty state image -->
|
||||
<div v-if="totalCategories <= 0 && !isLoading">
|
||||
<section class="section">
|
||||
<div class="content has-text-grey has-text-centered">
|
||||
<p>
|
||||
<b-icon
|
||||
icon="inbox"
|
||||
size="is-large"/>
|
||||
</p>
|
||||
<p v-if="status == undefined || status == ''">{{ $i18n.get('info_no_category_created') }}</p>
|
||||
<p v-if="status == 'draft'">{{ $i18n.get('info_no_category_draft') }}</p>
|
||||
<p v-if="status == 'trash'">{{ $i18n.get('info_no_category_trash') }}</p>
|
||||
<router-link
|
||||
v-if="status == undefined || status == ''"
|
||||
id="button-create-category"
|
||||
tag="button"
|
||||
class="button is-primary"
|
||||
:to="{ path: $routerHelper.getNewCategoryPath() }">
|
||||
{{ $i18n.getFrom('categories', 'new_item') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="items-per-page">
|
||||
<b-field
|
||||
horizontal
|
||||
:label="$i18n.get('label_categories_per_page')">
|
||||
<b-select
|
||||
:value="categoriesPerPage"
|
||||
@input="onChangeCategoriesPerPage"
|
||||
:disabled="categories.length <= 0">
|
||||
<option value="12">12</option>
|
||||
<option value="24">24</option>
|
||||
<option value="48">48</option>
|
||||
<option value="96">96</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<b-pagination
|
||||
@change="onPageChange"
|
||||
:total="totalCategories"
|
||||
:current.sync="page"
|
||||
order="is-centered"
|
||||
size="is-small"
|
||||
:per-page="categoriesPerPage"/>
|
||||
<!-- Footer -->
|
||||
<div
|
||||
class="pagination-area"
|
||||
v-if="totalCategories > 0">
|
||||
<div class="shown-items">
|
||||
{{
|
||||
$i18n.get('info_showing_categories') +
|
||||
(categoriesPerPage * (page - 1) + 1) +
|
||||
$i18n.get('info_to') +
|
||||
getLastCategoryNumber() +
|
||||
$i18n.get('info_of') + totalCategories + '.'
|
||||
}}
|
||||
</div>
|
||||
<div class="items-per-page">
|
||||
<b-field
|
||||
horizontal
|
||||
:label="$i18n.get('label_categories_per_page')">
|
||||
<b-select
|
||||
:value="categoriesPerPage"
|
||||
@input="onChangeCategoriesPerPage"
|
||||
:disabled="categories.length <= 0">
|
||||
<option value="12">12</option>
|
||||
<option value="24">24</option>
|
||||
<option value="48">48</option>
|
||||
<option value="96">96</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<b-pagination
|
||||
@change="onPageChange"
|
||||
:total="totalCategories"
|
||||
:current.sync="page"
|
||||
order="is-centered"
|
||||
size="is-small"
|
||||
:per-page="categoriesPerPage"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -80,7 +117,8 @@
|
|||
isLoading: false,
|
||||
totalCategories: 0,
|
||||
page: 1,
|
||||
categoriesPerPage: 12
|
||||
categoriesPerPage: 12,
|
||||
status: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -93,6 +131,17 @@
|
|||
...mapGetters('category', [
|
||||
'getCategories'
|
||||
]),
|
||||
onChangeTab(status) {
|
||||
this.status = status;
|
||||
this.loadCategories();
|
||||
},
|
||||
checkIfUserCanEdit() {
|
||||
for (let capability of tainacan_plugin.user_caps) {
|
||||
if (capability == 'edit_tainacan-taxonomies')
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
onChangeCategoriesPerPage(value) {
|
||||
let prevValue = this.categoriesPerPage;
|
||||
this.categoriesPerPage = value;
|
||||
|
|
@ -106,7 +155,7 @@
|
|||
loadCategories() {
|
||||
this.isLoading = true;
|
||||
|
||||
this.fetchCategories({ 'page': this.page, 'categoriesPerPage': this.categoriesPerPage })
|
||||
this.fetchCategories({ 'page': this.page, 'categoriesPerPage': this.categoriesPerPage, 'status': this.status })
|
||||
.then((res) => {
|
||||
this.isLoading = false;
|
||||
this.totalCategories = res.total;
|
||||
|
|
@ -173,11 +222,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
}
|
||||
.above-subheader {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="above-subheader">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
|
|
@ -51,7 +52,7 @@
|
|||
:collections-per-page="collectionsPerPage"
|
||||
:collections="collections"/>
|
||||
|
||||
<!-- Empty state image -->
|
||||
<!-- Empty state image -->
|
||||
<div v-if="totalCollections <= 0 && !isLoading">
|
||||
<section class="section">
|
||||
<div class="content has-text-grey has-text-centered">
|
||||
|
|
@ -73,7 +74,8 @@
|
|||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div
|
||||
class="pagination-area"
|
||||
|
|
@ -181,12 +183,8 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
collections(){
|
||||
let collectionsList = this.getCollections();
|
||||
for (let collection of collectionsList)
|
||||
collection['creation'] = this.$i18n.get('info_created_by') + collection['author_name'] + '<br>' + this.$i18n.get('info_date') + collection['creation_date'];
|
||||
|
||||
return collectionsList;
|
||||
collections() {
|
||||
return this.getCollections();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -97,33 +97,18 @@
|
|||
class="items-list-area"
|
||||
:class="{ 'spaced-to-right': !isFiltersMenuCompressed }">
|
||||
<!-- SEARCH CONTROL ------------------------- -->
|
||||
<div class="sub-header">
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFields"/>
|
||||
<search-control
|
||||
v-if="fields.length > 0 && (items.length > 0 || isLoadingItems)"
|
||||
:is-repository-level="isRepositoryLevel"
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:pref-table-fields="prefTableFields"
|
||||
:is-on-theme="isOnTheme"/>
|
||||
</div>
|
||||
<div
|
||||
v-if="!isOnTheme"
|
||||
class="tabs">
|
||||
<ul>
|
||||
<li
|
||||
@click="onChangeTab('')"
|
||||
:class="{ 'is-active': status == undefined || status == ''}"><a>{{ $i18n.get('label_all_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('draft')"
|
||||
:class="{ 'is-active': status == 'draft'}"><a>{{ $i18n.get('label_draft_items') }}</a></li>
|
||||
<li
|
||||
@click="onChangeTab('trash')"
|
||||
:class="{ 'is-active': status == 'trash'}"><a>{{ $i18n.get('label_trash_items') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<b-loading
|
||||
:is-full-page="false"
|
||||
:active.sync="isLoadingFields"/>
|
||||
<search-control
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:pref-table-fields="prefTableFields"
|
||||
:is-on-theme="isOnTheme"
|
||||
:status="status"
|
||||
:has-results="items.length > 0"
|
||||
:view-mode="viewMode"
|
||||
@onChangeViewMode="viewMode = $event"/>
|
||||
|
||||
<!-- <div
|
||||
:items="items"
|
||||
|
|
@ -134,12 +119,25 @@
|
|||
:is-full-page="false"
|
||||
:active.sync="isLoadingItems"/>
|
||||
<items-list
|
||||
v-if="!isLoadingItems && items.length > 0"
|
||||
v-if="viewMode == 'table' && !isLoadingItems && items.length > 0"
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
:is-loading="isLoading"
|
||||
:is-on-theme="isOnTheme"/>
|
||||
|
||||
<tainacan-cards-list
|
||||
v-if="viewMode == 'cards' && !isLoadingItems && items.length > 0"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
:is-loading="isLoading"/>
|
||||
|
||||
<tainacan-list-list
|
||||
v-if="viewMode == 'list' && !isLoadingItems && items.length > 0"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
:is-loading="isLoading"/>
|
||||
|
||||
<section
|
||||
v-if="!isLoadingItems && items.length <= 0"
|
||||
class="section">
|
||||
|
|
@ -178,6 +176,9 @@
|
|||
import Pagination from '../../components/search/pagination.vue'
|
||||
import {mapActions, mapGetters} from 'vuex';
|
||||
|
||||
import TainacanCardsList from '../../components/item-view-modes/tainacan-cards-list.vue';
|
||||
import TainacanListList from '../../components/item-view-modes/tainacan-list-list.vue';
|
||||
|
||||
export default {
|
||||
name: 'ItemsPage',
|
||||
data() {
|
||||
|
|
@ -190,10 +191,11 @@
|
|||
isLoadingFields: false,
|
||||
hasFiltered: false,
|
||||
isFiltersMenuCompressed: false,
|
||||
collapseAll: false,
|
||||
collapseAll: true,
|
||||
isOnTheme: false,
|
||||
futureSearchQuery: '',
|
||||
isHeaderShrinked: false
|
||||
isHeaderShrinked: false,
|
||||
viewMode: 'table'
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -203,7 +205,9 @@
|
|||
SearchControl,
|
||||
ItemsList,
|
||||
FiltersItemsList,
|
||||
Pagination
|
||||
Pagination,
|
||||
TainacanCardsList,
|
||||
TainacanListList
|
||||
},
|
||||
methods: {
|
||||
...mapGetters('collection', [
|
||||
|
|
@ -228,8 +232,102 @@
|
|||
updateSearch() {
|
||||
this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
|
||||
},
|
||||
onChangeTab(status) {
|
||||
this.$eventBusSearch.setStatus(status);
|
||||
prepareFieldsAndFilters() {
|
||||
|
||||
this.isLoadingFilters = true;
|
||||
|
||||
this.fetchFilters({
|
||||
collectionId: this.collectionId,
|
||||
isRepositoryLevel: this.isRepositoryLevel,
|
||||
isContextEdit: true,
|
||||
includeDisabled: 'no',
|
||||
})
|
||||
.then(() => this.isLoadingFilters = false)
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
|
||||
this.isLoadingFields = true;
|
||||
this.tableFields = [];
|
||||
|
||||
this.fetchFields({
|
||||
collectionId: this.collectionId,
|
||||
isRepositoryLevel: this.isRepositoryLevel,
|
||||
isContextEdit: false
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
this.tableFields.push({
|
||||
name: this.$i18n.get('label_thumbnail'),
|
||||
field: 'row_thumbnail',
|
||||
field_type: undefined,
|
||||
slug: 'thumbnail',
|
||||
id: undefined,
|
||||
display: true
|
||||
})
|
||||
;
|
||||
let fetchOnlyFieldIds = [];
|
||||
|
||||
for (let field of this.fields) {
|
||||
if (field.display !== 'never') {
|
||||
// Will be pushed on array
|
||||
|
||||
let display = true;
|
||||
|
||||
if (field.display === 'no') {
|
||||
display = false;
|
||||
}
|
||||
|
||||
this.tableFields.push(
|
||||
{
|
||||
name: field.name,
|
||||
field: field.description,
|
||||
slug: field.slug,
|
||||
field_type: field.field_type,
|
||||
field_type_object: field.field_type_object,
|
||||
id: field.id,
|
||||
display: display
|
||||
}
|
||||
);
|
||||
fetchOnlyFieldIds.push(field.id);
|
||||
}
|
||||
}
|
||||
|
||||
this.tableFields.push({
|
||||
name: this.$i18n.get('label_creation_date'),
|
||||
field: 'row_creation',
|
||||
field_type: undefined,
|
||||
slug: 'creation_date',
|
||||
id: undefined,
|
||||
display: true
|
||||
});
|
||||
this.tableFields.push({
|
||||
name: this.$i18n.get('label_created_by'),
|
||||
field: 'row_author',
|
||||
field_type: undefined,
|
||||
slug: 'author_name',
|
||||
id: undefined,
|
||||
display: true
|
||||
});
|
||||
|
||||
// this.prefTableFields = this.tableFields;
|
||||
// this.$userPrefs.get('table_columns_' + this.collectionId)
|
||||
// .then((value) => {
|
||||
// this.prefTableFields = value;
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// this.$userPrefs.set('table_columns_' + this.collectionId, this.prefTableFields, null);
|
||||
// });
|
||||
this.$eventBusSearch.addFetchOnly({
|
||||
'0': 'thumbnail',
|
||||
'meta': fetchOnlyFieldIds,
|
||||
'1': 'creation_date',
|
||||
'2': 'author_name'
|
||||
});
|
||||
this.isLoadingFields = false;
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoadingFields = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -265,6 +363,8 @@
|
|||
|
||||
this.isRepositoryLevel = this.collectionId === undefined;
|
||||
|
||||
this.$eventBusSearch.setCollectionId(this.collectionId);
|
||||
|
||||
this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
|
||||
this.isLoadingItems = isLoadingItems;
|
||||
});
|
||||
|
|
@ -273,89 +373,16 @@
|
|||
this.hasFiltered = hasFiltered;
|
||||
});
|
||||
|
||||
this.isLoadingFilters = true;
|
||||
this.fetchFilters({
|
||||
collectionId: this.collectionId,
|
||||
isRepositoryLevel: this.isRepositoryLevel,
|
||||
isContextEdit: true,
|
||||
includeDisabled: 'no',
|
||||
})
|
||||
.then(() => this.isLoadingFilters = false)
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
this.$eventBusSearch.$on('hasToPrepareFieldsAndFilters', () => {
|
||||
this.prepareFieldsAndFilters();
|
||||
});
|
||||
|
||||
this.isLoadingFields = true;
|
||||
|
||||
this.fetchFields({
|
||||
collectionId: this.collectionId,
|
||||
isRepositoryLevel: this.isRepositoryLevel,
|
||||
isContextEdit: false
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
this.tableFields.push({
|
||||
name: this.$i18n.get('label_thumbnail'),
|
||||
field: 'row_thumbnail',
|
||||
field_type: undefined,
|
||||
slug: 'thumbnail',
|
||||
id: undefined,
|
||||
display: true
|
||||
});
|
||||
|
||||
for (let field of this.fields) {
|
||||
if (field.display !== 'never') {
|
||||
// Will be pushed on array
|
||||
|
||||
let display = true;
|
||||
|
||||
if (field.display === 'no') {
|
||||
display = false;
|
||||
}
|
||||
|
||||
this.tableFields.push(
|
||||
{
|
||||
name: field.name,
|
||||
field: field.description,
|
||||
slug: field.slug,
|
||||
field_type: field.field_type,
|
||||
field_type_object: field.field_type_object,
|
||||
id: field.id,
|
||||
display: display
|
||||
}
|
||||
);
|
||||
//this.$eventBusSearch.addFetchOnlyMeta(field.id);
|
||||
}
|
||||
}
|
||||
this.$eventBusSearch.loadItems();
|
||||
|
||||
this.tableFields.push({
|
||||
name: this.$i18n.get('label_creation'),
|
||||
field: 'row_creation',
|
||||
field_type: undefined,
|
||||
slug: 'creation',
|
||||
id: 'date',
|
||||
display: true
|
||||
});
|
||||
|
||||
// this.prefTableFields = this.tableFields;
|
||||
// this.$userPrefs.get('table_columns_' + this.collectionId)
|
||||
// .then((value) => {
|
||||
// this.prefTableFields = value;
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// this.$userPrefs.set('table_columns_' + this.collectionId, this.prefTableFields, null);
|
||||
// });
|
||||
|
||||
this.isLoadingFields = false;
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
this.isLoadingFields = false;
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBusSearch.setCollectionId(this.collectionId);
|
||||
this.$eventBusSearch.updateStoreFromURL();
|
||||
this.$eventBusSearch.loadItems();
|
||||
//this.$eventBusSearch.updateStoreFromURL();
|
||||
//this.$eventBusSearch.loadItems();
|
||||
|
||||
this.prepareFieldsAndFilters();
|
||||
|
||||
if (!this.isRepositoryLevel && !this.isOnTheme) {
|
||||
document.getElementById('items-list-area').addEventListener('scroll', ($event) => {
|
||||
|
|
@ -376,35 +403,9 @@
|
|||
}
|
||||
|
||||
.page-container {
|
||||
padding: 0px;
|
||||
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
min-height: $subheader-height;
|
||||
height: $subheader-height;
|
||||
padding-top: $page-small-top-padding;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
border-bottom: 0.5px solid #ddd;
|
||||
position: relative;
|
||||
|
||||
@media screen and (max-width: 769px) {
|
||||
height: 60px;
|
||||
margin-top: 0;
|
||||
|
||||
.header-item {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
}
|
||||
.above-subheader {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
.button {
|
||||
border-radius: 6px !important;
|
||||
font-weight: normal;
|
||||
padding: 2px 15px !important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
height: inherit !important;
|
||||
box-shadow: none !important;
|
||||
display: inline-flex !important;
|
||||
|
||||
&.is-secondary:hover, &.is-secondary:focus {
|
||||
background: $secondary !important;
|
||||
}
|
||||
&.is-primary:hover, &.is-primary:focus {
|
||||
background: $primary !important;
|
||||
}
|
||||
&.is-success:hover, &.is-success:focus {
|
||||
background: $success !important;
|
||||
}
|
||||
&.is-white:hover, &.is-white:focus, &.is-outlined:hover, &.is-outlined:focus {
|
||||
background: $white !important;
|
||||
}
|
||||
&:active {
|
||||
-webkit-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
&.is-outlined {
|
||||
color: #150e38 !important;
|
||||
background-color: white;
|
||||
border-color: $gray-light !important;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0px;
|
||||
}
|
||||
&[disabled] {
|
||||
border: none;
|
||||
}
|
||||
&.is-white[disabled] {
|
||||
background-color: white !important;
|
||||
}
|
||||
}
|
||||
.button.is-small {
|
||||
height: 26px !important;
|
||||
line-height: 12px;
|
||||
}
|
||||
.button:not(.is-small):not(.is-medium):not(.is-large) {
|
||||
height: 30px !important;
|
||||
line-height: 20px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.b-checkbox.checkbox {
|
||||
|
||||
input[type="checkbox"] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + .check {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
border: 1px solid $gray-light;
|
||||
transition: background 150ms ease-out;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:focus input[type="checkbox"] + .check,
|
||||
&:active input[type="checkbox"] + .check,
|
||||
&:hover input[type="checkbox"] + .check {
|
||||
box-shadow: none !important;
|
||||
border-color: $gray-light !important;
|
||||
}
|
||||
input[type="checkbox"]:checked + .check {
|
||||
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: $gray-light !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
.dropdown, .autocomplete {
|
||||
.dropdown-trigger{
|
||||
.button {
|
||||
border: none;
|
||||
.icon {
|
||||
color: $secondary;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
.button.is-primary, .button.is-secondary, .button.is-success {
|
||||
.icon {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
.dropdown-content {
|
||||
border-radius: 0px !important;
|
||||
.dropdown-item {
|
||||
.b-checkbox { width: 100% };
|
||||
&:hover {
|
||||
background-color: $primary-lighter;
|
||||
}
|
||||
.is-small {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.taginput-container {
|
||||
padding: 0 !important;
|
||||
background-color: white !important;
|
||||
|
||||
&:focus, &:active {
|
||||
border: none !important;
|
||||
}
|
||||
.input { margin-bottom: 0px !important; }
|
||||
.input.has-selected, .input:focus, .input:active {
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background !important;
|
||||
}
|
||||
.tag {
|
||||
background: white;
|
||||
padding-right: 0;
|
||||
padding-left: 0.5em;
|
||||
|
||||
&.is-delete {
|
||||
color: $gray-light;
|
||||
&::after {
|
||||
height: 30% !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
&::before {
|
||||
width: 30% !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.selected-list-box {
|
||||
padding: 4px 0px;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
|
||||
.tags {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tag {
|
||||
background: white;
|
||||
padding-right: 0;
|
||||
padding-left: 0.5em;
|
||||
|
||||
&.is-delete {
|
||||
color: $gray-light;
|
||||
&::after {
|
||||
height: 30% !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
&::before {
|
||||
width: 30% !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.input, .textarea {
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 1px !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:focus, &:active {
|
||||
box-shadow: none !important;
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
|
||||
// Tainacan modals
|
||||
.tainacan-modal-title {
|
||||
h1, h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $tertiary;
|
||||
display: inline-block;
|
||||
}
|
||||
a.back-link{
|
||||
font-weight: 500;
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
}
|
||||
hr{
|
||||
margin: 3px 0px 4px 0px;
|
||||
height: 1px;
|
||||
background-color: $secondary;
|
||||
}
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.tainacan-modal-content {
|
||||
background-color: white;
|
||||
padding: 52px 80px;
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.attachment {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
padding: 80px 0em 0.4em 0em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
}
|
||||
|
||||
// WordPress Media Modal customization
|
||||
.wp-core-ui {
|
||||
a:focus{ box-shadow: none; }
|
||||
}
|
||||
.media-modal-backdrop {
|
||||
z-index: 9999999 !important;
|
||||
}
|
||||
.media-modal {
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
bottom: 100px;
|
||||
right: 100px;
|
||||
background-color: white;
|
||||
z-index: 99999999999 !important;
|
||||
}
|
||||
// .media-modal {
|
||||
// left: 100px;
|
||||
// top: 100px;
|
||||
// bottom: 100px;
|
||||
// right: 100px;
|
||||
// background-color: white;
|
||||
// z-index: 99999999999 !important;
|
||||
|
||||
// .media-modal-content {
|
||||
// background-color: white;
|
||||
// margin: 42px 60px;
|
||||
// box-shadow: none;
|
||||
// }
|
||||
|
||||
// .media-frame-title {
|
||||
// border-bottom: 1px solid #298596 !important;
|
||||
// margin-bottom: 60px !important;
|
||||
// box-shadow: none !important;
|
||||
|
||||
// h1, h2 {
|
||||
// font-size: 20px;
|
||||
// font-weight: 500;
|
||||
// color: $tertiary;
|
||||
// display: inline-block;
|
||||
// margin-bottom: 3px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .media-frame-router {
|
||||
// margin-top: 28px;
|
||||
// a.media-menu-item.active {
|
||||
// border-top: none;
|
||||
// border-left: none;
|
||||
// border-right: none;
|
||||
// border-bottom: 3px solid $primary;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .media-frame-content {
|
||||
// margin-top: 30px;
|
||||
|
||||
// .attachments-browser .attachments, .media-toolbar {
|
||||
// padding: 12px;
|
||||
// right: 270px;
|
||||
|
||||
// .media-toolbar-primary {
|
||||
// max-width: 30%;
|
||||
// }
|
||||
// .media-toolbar-secondary {
|
||||
// max-width: 70%;
|
||||
// }
|
||||
// .attachment {
|
||||
// padding: 12px;
|
||||
// }
|
||||
// .attachment.details {
|
||||
// box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 14px $primary-light;
|
||||
// }
|
||||
// .attachment.details .check, .wp-core-ui .attachment.selected .check:focus, .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
|
||||
// background-color: $primary-light;
|
||||
// box-shadow: 0 0 0 1px #fff,0 0 0 2px $primary-light;
|
||||
// }
|
||||
// }
|
||||
// .media-sidebar {
|
||||
// background-color: white;
|
||||
// width: 238px;
|
||||
// }
|
||||
|
||||
// .crop-content{
|
||||
// .imgareaselect-outer {
|
||||
// background-color: white;
|
||||
// opacity: 0.6;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .media-frame-toolbar .media-toolbar {
|
||||
// bottom: initial;
|
||||
// margin-top: -1px;
|
||||
// padding: 28px 0px;
|
||||
// }
|
||||
|
||||
// .media-button.button-primary {
|
||||
// background-color: $success;
|
||||
// border: none;
|
||||
// box-shadow: none;
|
||||
// color: #fff;
|
||||
// text-decoration: none;
|
||||
// text-shadow: none;
|
||||
// }
|
||||
// .media-button.button-primary[disabled] {
|
||||
// color: #66c6e4 !important;
|
||||
// background: $success !important;
|
||||
// border-color: none!important;
|
||||
// box-shadow: none !important;
|
||||
// text-shadow: none !important;
|
||||
// cursor: default;
|
||||
// }
|
||||
// .media-button.button-secondary {
|
||||
// color: $tertiary;
|
||||
// border-color: #999;
|
||||
// background: white;
|
||||
// box-shadow: none;
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// .button-hero {
|
||||
// background-color: $secondary;
|
||||
// border: none;
|
||||
// box-shadow: none;
|
||||
// color: #fff;
|
||||
// text-decoration: none;
|
||||
// text-shadow: none;
|
||||
// font-size: 14px;
|
||||
// height: 46px;
|
||||
// line-height: 20px !important;
|
||||
// padding: 0 36px;
|
||||
|
||||
// &:hover{
|
||||
// background-color: #339daf;
|
||||
// color: white;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
.pagination-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.85em !important;
|
||||
font-weight: normal !important;
|
||||
border-top: 1px solid $gray;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
color: $gray-light;
|
||||
|
||||
.shown-items {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.items-per-page {
|
||||
flex-grow: 5;
|
||||
margin-top: 0.35em;
|
||||
.field-label {
|
||||
flex-grow: 5;
|
||||
margin-right: 0.5em;
|
||||
.label {
|
||||
font-size: 1em !important;
|
||||
font-weight: normal !important;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
select {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
flex-grow: 1;
|
||||
|
||||
a[disabled="disabled"] {
|
||||
color: $gray-light;
|
||||
}
|
||||
.pagination-link, .pagination-previous, .pagination-next {
|
||||
background-color: transparent;
|
||||
color: $secondary;
|
||||
border: none;
|
||||
}
|
||||
.pagination-link.is-current {
|
||||
color: $gray-light;
|
||||
}
|
||||
.pagination-link::after:not(:last-child) {
|
||||
content: ',';
|
||||
color: $gray-light;
|
||||
}
|
||||
.mdi-chevron-left::before {
|
||||
content: "\F40A";
|
||||
font-size: 17px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.mdi-chevron-right::before {
|
||||
content: "\F40A";
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
.b-radio.radio {
|
||||
|
||||
input[type="radio"] + .check {
|
||||
width: 13px !important;
|
||||
height: 13px !important;
|
||||
border: 1px solid $gray-light !important;
|
||||
}
|
||||
input[type="radio"] + .check::before {
|
||||
background: black !important;
|
||||
width: 7px !important;
|
||||
height: 7px !important;
|
||||
}
|
||||
&:focus input[type="radio"] + .check,
|
||||
&:active input[type="radio"] + .check,
|
||||
&:hover input[type="radio"] + .check {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
input[type="radio"]:checked + .check {
|
||||
border-color: $gray-light !important;
|
||||
}
|
||||
&:focus input[type="radio"]:checked + .check {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
.select {
|
||||
padding-top: 0px !important;
|
||||
select {
|
||||
border: none;
|
||||
border-radius: 1px !important;
|
||||
font-weight: normal;
|
||||
font-size: 14px !important;
|
||||
height: 30px !important;
|
||||
padding: 2px 25px 2px 15px!important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
color: $tainacan-input-color;
|
||||
option:checked, option:hover {
|
||||
background-color: $primary-lighter !important;
|
||||
}
|
||||
&:focus, &:active {
|
||||
box-shadow: none !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
&[disabled] {
|
||||
background-color: white !important;
|
||||
}
|
||||
}
|
||||
&:not(.is-multiple)::after {
|
||||
content: "\F35D" !important;
|
||||
font: normal normal normal 24px/1 "Material Design Icons" !important;
|
||||
border: none !important;
|
||||
transform: none !important;
|
||||
margin-top: -15px !important;
|
||||
right: 10px !important;
|
||||
color: $primary;
|
||||
display: flex !important;
|
||||
align-items: initial;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
.switch {
|
||||
input[type="checkbox"] + .check {
|
||||
background-color: $gray-light;
|
||||
border: 2px solid $gray-light;
|
||||
width: 2.7em;
|
||||
height: 1.7em;
|
||||
|
||||
&::before {
|
||||
background-color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:hover input[type="checkbox"]:checked + .check {
|
||||
background-color: $primary-light;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .check {
|
||||
border: 2px solid $secondary;
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary;
|
||||
transform: translate3d(78%, 0, 0);
|
||||
}
|
||||
}
|
||||
&:hover input[type="checkbox"] + .check {
|
||||
background-color: $gray-light;
|
||||
}
|
||||
|
||||
&:focus input[type="checkbox"] + .check,
|
||||
&:focus input[type="checkbox"]:checked + .check {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
font-size: 9px;
|
||||
|
||||
input[type="checkbox"] + .check {
|
||||
border: 1.5px solid $gray-light;
|
||||
width: 2.55em;
|
||||
height: 1.7em;
|
||||
|
||||
&::before {
|
||||
width: 1.0em;
|
||||
height: 1.0em;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + .check {
|
||||
border: 1.5px solid $secondary;
|
||||
|
||||
&::before {
|
||||
transform: translate3d(84%, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
|
||||
// Tables
|
||||
.table-container {
|
||||
padding: 0 $table-side-padding;
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
border-collapse: separate;
|
||||
overflow: auto;
|
||||
margin-bottom: 0px !important;
|
||||
|
||||
table.tainacan-table {
|
||||
width: 100%;
|
||||
|
||||
.checkbox-cell {
|
||||
min-width: 38px;
|
||||
width: 38px;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
top: auto;
|
||||
display: table-cell;
|
||||
|
||||
&::before {
|
||||
box-shadow: inset 50px 0 10px -12px #222;
|
||||
content: " ";
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
border-radius: 0px;
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.b-checkbox.checkbox .control-label {
|
||||
display: none;
|
||||
}
|
||||
&.is-selecting {
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
&::before { visibility: visible !important; }
|
||||
}
|
||||
}
|
||||
// Only to be used in case we can implement Column resizing
|
||||
// th:not(:last-child) {
|
||||
// border-right: 1px solid $tainacan-input-background !important;
|
||||
// }
|
||||
|
||||
.thumbnail-cell {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column-small-width {
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-default-width {
|
||||
min-width: 80px;
|
||||
max-width: 160px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-medium-width {
|
||||
min-width: 120px;
|
||||
max-width: 200px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-large-width {
|
||||
min-width: 120px;
|
||||
max-width: 240px;
|
||||
p {
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.column-main-content {
|
||||
min-width: 120px !important;
|
||||
max-width: 240px !important;
|
||||
p {
|
||||
font-size: 14px !important;
|
||||
color: $tainacan-input-color !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
}
|
||||
.column-needed-width {
|
||||
max-width: unset !important;
|
||||
}
|
||||
.column-align-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
background-color: white;
|
||||
border-bottom: 1px solid $tainacan-input-background;
|
||||
top: 0px;
|
||||
z-index: 9;
|
||||
padding: 10px;
|
||||
vertical-align: bottom;
|
||||
|
||||
.th-wrap {
|
||||
font-size: 12px !important;
|
||||
color: $gray-light;
|
||||
font-weight: normal !important;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&.selected-row {
|
||||
background-color: $primary-lighter;
|
||||
.checkbox-cell .checkbox, .actions-cell .actions-container {
|
||||
background-color: $primary-lighter;
|
||||
}
|
||||
}
|
||||
td {
|
||||
height: 60px;
|
||||
max-height: 60px;
|
||||
padding: 10px;
|
||||
vertical-align: middle;
|
||||
line-height: 12px;
|
||||
border: none !important;
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
img.table-thumb {
|
||||
max-height: 38px !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
td.actions-cell {
|
||||
padding: 0px;
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
right: 0px;
|
||||
top: auto;
|
||||
width: 80px;
|
||||
|
||||
.actions-container {
|
||||
visibility: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 80px;
|
||||
z-index: 9;
|
||||
background-color: transparent;
|
||||
float: right;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: auto;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tainacan-input-background !important;
|
||||
cursor: pointer;
|
||||
|
||||
.checkbox-cell {
|
||||
position: sticky !important;
|
||||
position: -webkit-sticky !important;
|
||||
|
||||
&::before { visibility: visible; }
|
||||
|
||||
.checkbox {
|
||||
background-color: $tainacan-input-background !important;
|
||||
}
|
||||
}
|
||||
.actions-cell {
|
||||
.actions-container {
|
||||
visibility: visible;
|
||||
background: $tainacan-input-background !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
box-shadow: inset -97px 0 17px -21px #222;
|
||||
content: " ";
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// Tabs
|
||||
.tabs {
|
||||
a {
|
||||
font-size: 13px;
|
||||
margin-bottom: -3px;
|
||||
&:hover{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
li.is-active a {
|
||||
border-bottom: 5px solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
// Input components used in forms are gray in Tainacan
|
||||
.tainacan-form {
|
||||
color: $tainacan-input-color;
|
||||
|
||||
.form-submit {
|
||||
justify-content: start !important;
|
||||
padding: 1em 1.2em 0.4em 1.2em;
|
||||
margin-bottom: 0px;
|
||||
.button {
|
||||
border-width: 1px;
|
||||
padding: 2px 30px !important;
|
||||
}
|
||||
&.has-only-save {
|
||||
justify-content: end !important;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
.required-field-asterisk {
|
||||
color: $gray;
|
||||
&.is-danger {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
.input, .textarea {
|
||||
|
||||
background-color: $tainacan-input-background;
|
||||
color: $tainacan-input-color;
|
||||
transition: background-color 0.1s;
|
||||
|
||||
&.is-danger {
|
||||
background-color: #e7dede;
|
||||
}
|
||||
|
||||
}
|
||||
.control{
|
||||
&.has-content {
|
||||
.input, .textarea {
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
}
|
||||
}
|
||||
&.has-icons-right {
|
||||
.icon {
|
||||
height: 2.0em;
|
||||
.mdi-alert-circle::before {
|
||||
content: "\F156" !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio, .checkbox {
|
||||
margin-bottom: 0.2em;
|
||||
&.is-danger {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
.control-label { // The value part in checkbox, radio and switches
|
||||
color: $tainacan-input-color;
|
||||
padding-left: 0.8em;
|
||||
font-size: 12px;
|
||||
}
|
||||
.select {
|
||||
|
||||
select {
|
||||
font-size: 14px;
|
||||
color: $tainacan-input-color;
|
||||
background-color: white !important;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
&:focus>option:checked, &:focus>option:hover {
|
||||
background-color: $primary-lighter !important;
|
||||
}
|
||||
}
|
||||
&.is-empty select{
|
||||
background-color: $tainacan-input-background !important;
|
||||
}
|
||||
&:not(.is-multiple)::after {
|
||||
margin-top: -0.6em;
|
||||
right: 0.95em;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
// These tooltips are customized versions of V-Tooltip
|
||||
// Tooltips:
|
||||
.tooltip {
|
||||
z-index: 999999999;
|
||||
display: block !important;
|
||||
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
background: $primary-lighter;
|
||||
color: $gray-light;
|
||||
font-size: 11px;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
max-width: 280px;
|
||||
max-height: 200px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: $primary-lighter;
|
||||
z-index: 1;
|
||||
}
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 8px 0 8px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 0 8px 5px 8px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 8px 5px 8px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
.tooltip-arrow {
|
||||
border-width: 8px 0 8px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
&[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
}
|
||||
|
|
@ -90,6 +90,8 @@ $table-foot-cell-color: $gray-light;
|
|||
$table-foot-cell-border-width: 1px 0 0 !important;
|
||||
$table-cell-padding: 1.0em 0.75em;
|
||||
|
||||
// Roboto font
|
||||
$family-sans-serif: 'Roboto', sans-serif;
|
||||
|
||||
// Bulma's modal (needs to be greather than taincan-admin-app)
|
||||
$modal-z: 9999999;
|
||||
|
|
@ -6,8 +6,20 @@
|
|||
@import "../../../node_modules/bulma/bulma.sass";
|
||||
@import "../../../node_modules/buefy/src/scss/buefy.scss";
|
||||
|
||||
// Roboto font
|
||||
$family-sans-serif: 'Roboto', sans-serif;
|
||||
// Import Tainacan custom styles
|
||||
@import "../scss/_tainacan-form.scss";
|
||||
@import "../scss/_buttons.scss";
|
||||
@import "../scss/_selects.scss";
|
||||
@import "../scss/_inputs.scss";
|
||||
@import "../scss/_checkboxes.scss";
|
||||
@import "../scss/_radios.scss";
|
||||
@import "../scss/_switches.scss";
|
||||
@import "../scss/_dropdown-and-autocomplete.scss";
|
||||
@import "../scss/_tabs.scss";
|
||||
@import "../scss/_tables.scss";
|
||||
@import "../scss/_tooltips.scss";
|
||||
@import "../scss/_pagination.scss";
|
||||
@import "../scss/_modals.scss";
|
||||
|
||||
// Clears wordpress content
|
||||
body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap {
|
||||
|
|
@ -36,20 +48,7 @@ a:hover {
|
|||
color: $secondary;
|
||||
}
|
||||
|
||||
/* Rules for sizing the icon. */
|
||||
.material-icons.md-18 { font-size: 18px; }
|
||||
.material-icons.md-24 { font-size: 24px; }
|
||||
.material-icons.md-36 { font-size: 36px; }
|
||||
.material-icons.md-48 { font-size: 48px; }
|
||||
|
||||
/* Rules for using icons as black on a light background. */
|
||||
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
|
||||
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
|
||||
|
||||
/* Rules for using icons as white on a dark background. */
|
||||
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
|
||||
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
|
||||
|
||||
// Page settings
|
||||
.primary-page {
|
||||
margin-top: $header-height;
|
||||
height: $page-height !important;
|
||||
|
|
@ -58,6 +57,7 @@ a:hover {
|
|||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
// Generic page container
|
||||
.page-container {
|
||||
padding: $page-top-padding $page-side-padding;
|
||||
height: 100%;
|
||||
|
|
@ -68,14 +68,17 @@ a:hover {
|
|||
padding: $page-mobile-top-padding $page-mobile-side-padding;
|
||||
}
|
||||
}
|
||||
// Used for pages with collection subheader
|
||||
.page-container-small {
|
||||
height: calc(100% - 82px);
|
||||
overflow-y: auto;
|
||||
transition: height 0.6s;
|
||||
}
|
||||
// Used for pages with shrinked collection subheader
|
||||
.page-container-shrinked {
|
||||
height: calc(100% - 53px) !important;
|
||||
}
|
||||
// Used for pages with subheader in mobile
|
||||
.page-container-narrow{
|
||||
padding: $page-small-top-padding $page-small-side-padding;
|
||||
|
||||
|
|
@ -84,702 +87,7 @@ a:hover {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// Modal
|
||||
.tainacan-page-title, .tainacan-modal-title {
|
||||
h1, h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $tertiary;
|
||||
display: inline-block;
|
||||
}
|
||||
a.back-link{
|
||||
font-weight: 500;
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
}
|
||||
hr{
|
||||
margin: 3px 0px 4px 0px;
|
||||
height: 1px;
|
||||
background-color: $secondary;
|
||||
}
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tainacan-modal-content {
|
||||
background-color: white;
|
||||
padding: 52px 80px;
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.attachment {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
padding: 80px 0em 0.4em 0em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
}
|
||||
|
||||
|
||||
// Custom ScrollBar (will work only in Chrome, Opera, Safari, webkit browsers)
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
// Buefy notices (toast, snackbar...)
|
||||
.notices {
|
||||
z-index: 99999999999999 !important;
|
||||
}
|
||||
|
||||
// Input components used in forms are gray in Tainacan
|
||||
.tainacan-form {
|
||||
color: $tainacan-input-color;
|
||||
.form-submit {
|
||||
justify-content: space-between !important;
|
||||
padding: 1em 1.2em 0.4em 1.2em;
|
||||
margin-bottom: 0px;
|
||||
.button {
|
||||
border-width: 1px;
|
||||
padding: 2px 30px !important;
|
||||
}
|
||||
&.has-only-save {
|
||||
justify-content: end !important;
|
||||
}
|
||||
}
|
||||
.label {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
.required-field-asterisk {
|
||||
color: $gray;
|
||||
&.is-danger {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
.input, .textarea {
|
||||
|
||||
background-color: $tainacan-input-background;
|
||||
color: $tainacan-input-color;
|
||||
transition: background-color 0.1s;
|
||||
|
||||
&.is-danger {
|
||||
background-color: #e7dede;
|
||||
}
|
||||
|
||||
}
|
||||
.control{
|
||||
&.has-content {
|
||||
.input, .textarea {
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
}
|
||||
}
|
||||
&.has-icons-right {
|
||||
.icon {
|
||||
height: 2.0em;
|
||||
.mdi-alert-circle::before {
|
||||
content: "\F156" !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio, .checkbox {
|
||||
margin-bottom: 0.2em;
|
||||
&.is-danger {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
.control-label { // The value part in checkbox, radio and switches
|
||||
color: $tainacan-input-color;
|
||||
padding-left: 0.8em;
|
||||
font-size: 12px;
|
||||
}
|
||||
.select {
|
||||
|
||||
select {
|
||||
font-size: 14px;
|
||||
color: $tainacan-input-color;
|
||||
background-color: white !important;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
&:focus>option:checked, &:focus>option:hover {
|
||||
background-color: $primary-lighter !important;
|
||||
}
|
||||
}
|
||||
&.is-empty select{
|
||||
background-color: $tainacan-input-background !important;
|
||||
}
|
||||
&:not(.is-multiple)::after {
|
||||
margin-top: -0.6em;
|
||||
right: 0.95em;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Some components have a different style in listing pages
|
||||
.button {
|
||||
border-radius: 6px !important;
|
||||
font-weight: normal;
|
||||
padding: 2px 15px !important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
height: inherit !important;
|
||||
box-shadow: none !important;
|
||||
display: inline-flex !important;
|
||||
|
||||
&.is-secondary:hover, &.is-secondary:focus {
|
||||
background: $secondary !important;
|
||||
}
|
||||
&.is-primary:hover, &.is-primary:focus {
|
||||
background: $primary !important;
|
||||
}
|
||||
&.is-success:hover, &.is-success:focus {
|
||||
background: $success !important;
|
||||
}
|
||||
&.is-white:hover, &.is-white:focus, &.is-outlined:hover, &.is-outlined:focus {
|
||||
background: $white !important;
|
||||
}
|
||||
&:active {
|
||||
-webkit-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
&.is-outlined {
|
||||
color: #150e38 !important;
|
||||
background-color: white;
|
||||
border-color: $gray-light !important;
|
||||
}
|
||||
&:focus {
|
||||
outline: 0px;
|
||||
}
|
||||
}
|
||||
.button.is-small {
|
||||
height: 26px !important;
|
||||
line-height: 12px;
|
||||
}
|
||||
.button:not(.is-small):not(.is-medium):not(.is-large) {
|
||||
height: 30px !important;
|
||||
line-height: 20px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.input, .textarea {
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 1px !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:focus, &:active {
|
||||
box-shadow: none !important;
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
padding-top: 0px !important;
|
||||
select {
|
||||
border: none;
|
||||
border-radius: 1px !important;
|
||||
font-weight: normal;
|
||||
font-size: 14px !important;
|
||||
height: 30px !important;
|
||||
padding: 2px 25px 2px 15px!important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
color: $tainacan-input-color;
|
||||
option:checked, option:hover {
|
||||
background-color: $primary-lighter !important;
|
||||
}
|
||||
&:focus, &:active {
|
||||
box-shadow: none !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
&:not(.is-multiple)::after {
|
||||
content: "\F35D" !important;
|
||||
font: normal normal normal 24px/1 "Material Design Icons" !important;
|
||||
border: none !important;
|
||||
transform: none !important;
|
||||
margin-top: -15px !important;
|
||||
right: 10px !important;
|
||||
color: $primary;
|
||||
display: flex !important;
|
||||
align-items: initial;
|
||||
}
|
||||
}
|
||||
.dropdown, .autocomplete {
|
||||
.dropdown-trigger{
|
||||
.button {
|
||||
border: none;
|
||||
.icon {
|
||||
color: $secondary;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
.button.is-primary, .button.is-secondary, .button.is-success {
|
||||
.icon {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
.dropdown-content {
|
||||
border-radius: 0px !important;
|
||||
.dropdown-item {
|
||||
.b-checkbox { width: 100% };
|
||||
&:hover {
|
||||
background-color: $primary-lighter;
|
||||
}
|
||||
.is-small {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.taginput-container {
|
||||
padding: 0 !important;
|
||||
background-color: white !important;
|
||||
|
||||
&:focus, &:active {
|
||||
border: none !important;
|
||||
}
|
||||
.input { margin-bottom: 0px !important; }
|
||||
.input.has-selected, .input:focus, .input:active {
|
||||
background-color: white;
|
||||
border: 1px solid $tainacan-input-background !important;
|
||||
}
|
||||
.tag {
|
||||
background: white;
|
||||
padding-right: 0;
|
||||
padding-left: 0.5em;
|
||||
|
||||
&.is-delete {
|
||||
color: $gray-light;
|
||||
&::after {
|
||||
height: 30% !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
&::before {
|
||||
width: 30% !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.selected-list-box {
|
||||
padding: 4px 0px;
|
||||
border: 1px solid $tainacan-input-background;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
|
||||
.tags {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tag {
|
||||
background: white;
|
||||
padding-right: 0;
|
||||
padding-left: 0.5em;
|
||||
|
||||
&.is-delete {
|
||||
color: $gray-light;
|
||||
&::after {
|
||||
height: 30% !important;
|
||||
width: 1px !important;
|
||||
}
|
||||
&::before {
|
||||
width: 30% !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.switch {
|
||||
input[type="checkbox"] + .check {
|
||||
background-color: $gray-light;
|
||||
border: 2px solid $gray-light;
|
||||
width: 2.7em;
|
||||
height: 1.7em;
|
||||
|
||||
&::before {
|
||||
background-color: white;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:hover input[type="checkbox"]:checked + .check {
|
||||
background-color: $primary-light;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .check {
|
||||
border: 2px solid $secondary;
|
||||
background-color: transparent;
|
||||
|
||||
&::before {
|
||||
background-color: $secondary;
|
||||
transform: translate3d(78%, 0, 0);
|
||||
}
|
||||
}
|
||||
&:hover input[type="checkbox"] + .check {
|
||||
background-color: $gray-light;
|
||||
}
|
||||
|
||||
&:focus input[type="checkbox"] + .check,
|
||||
&:focus input[type="checkbox"]:checked + .check {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
font-size: 9px;
|
||||
|
||||
input[type="checkbox"] + .check {
|
||||
border: 1.5px solid $gray-light;
|
||||
width: 2.55em;
|
||||
height: 1.7em;
|
||||
|
||||
&::before {
|
||||
width: 1.0em;
|
||||
height: 1.0em;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + .check {
|
||||
border: 1.5px solid $secondary;
|
||||
|
||||
&::before {
|
||||
transform: translate3d(84%, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.b-checkbox.checkbox {
|
||||
|
||||
input[type="checkbox"] {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + .check {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0;
|
||||
display: inline-block;
|
||||
border: 1px solid $gray-light;
|
||||
transition: background 150ms ease-out;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:focus input[type="checkbox"] + .check,
|
||||
&:active input[type="checkbox"] + .check,
|
||||
&:hover input[type="checkbox"] + .check {
|
||||
box-shadow: none !important;
|
||||
border-color: $gray-light !important;
|
||||
}
|
||||
input[type="checkbox"]:checked + .check {
|
||||
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: $gray-light !important;
|
||||
}
|
||||
}
|
||||
.b-radio.radio {
|
||||
|
||||
input[type="radio"] + .check {
|
||||
width: 13px !important;
|
||||
height: 13px !important;
|
||||
border: 1px solid $gray-light !important;
|
||||
}
|
||||
input[type="radio"] + .check::before {
|
||||
background: black !important;
|
||||
width: 7px !important;
|
||||
height: 7px !important;
|
||||
}
|
||||
&:focus input[type="radio"] + .check,
|
||||
&:active input[type="radio"] + .check,
|
||||
&:hover input[type="radio"] + .check {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
input[type="radio"]:checked + .check {
|
||||
border-color: $gray-light !important;
|
||||
}
|
||||
&:focus input[type="radio"]:checked + .check {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Tables
|
||||
.table-container {
|
||||
padding: 0 $table-side-padding;
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
overflow: auto;
|
||||
.table {
|
||||
tbody {
|
||||
td {
|
||||
border-bottom: 0px solid $gray-light !important;
|
||||
}
|
||||
.b-checkbox.checkbox .control-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.th-wrap {
|
||||
font-size: 12px !important;
|
||||
font-weight: normal !important;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
}
|
||||
.pagination-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.85em !important;
|
||||
font-weight: normal !important;
|
||||
border-top: 1px solid $gray;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: $page-side-padding;
|
||||
padding-right: $page-side-padding;
|
||||
color: $gray-light;
|
||||
|
||||
.shown-items {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.items-per-page {
|
||||
flex-grow: 5;
|
||||
margin-top: 0.35em;
|
||||
.field-label {
|
||||
flex-grow: 5;
|
||||
margin-right: 0.5em;
|
||||
.label {
|
||||
font-size: 1em !important;
|
||||
font-weight: normal !important;
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
select {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
flex-grow: 1;
|
||||
a[disabled="disabled"] {
|
||||
color: $gray-light;
|
||||
}
|
||||
.pagination-link, .pagination-previous, .pagination-next {
|
||||
background-color: transparent;
|
||||
color: $secondary;
|
||||
border: none;
|
||||
}
|
||||
.pagination-link.is-current {
|
||||
color: $gray-light;
|
||||
}
|
||||
.pagination-link::after:not(:last-child) {
|
||||
content: ',';
|
||||
color: $gray-light;
|
||||
}
|
||||
.mdi-chevron-left::before {
|
||||
content: "\F40A";
|
||||
font-size: 17px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.mdi-chevron-right::before {
|
||||
content: "\F40A";
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.tabs {
|
||||
a {
|
||||
font-size: 13px;
|
||||
margin-bottom: -3px;
|
||||
&:hover{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
li.is-active a {
|
||||
border-bottom: 5px solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
// WordPress Media Modal customization
|
||||
.wp-core-ui {
|
||||
a:focus{ box-shadow: none; }
|
||||
}
|
||||
.media-modal-backdrop {
|
||||
z-index: 9999999 !important;
|
||||
}
|
||||
.media-modal {
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
bottom: 100px;
|
||||
right: 100px;
|
||||
background-color: white;
|
||||
z-index: 99999999999 !important;
|
||||
}
|
||||
// .media-modal {
|
||||
// left: 100px;
|
||||
// top: 100px;
|
||||
// bottom: 100px;
|
||||
// right: 100px;
|
||||
// background-color: white;
|
||||
// z-index: 99999999999 !important;
|
||||
|
||||
// .media-modal-content {
|
||||
// background-color: white;
|
||||
// margin: 42px 60px;
|
||||
// box-shadow: none;
|
||||
// }
|
||||
|
||||
// .media-frame-title {
|
||||
// border-bottom: 1px solid #298596 !important;
|
||||
// margin-bottom: 60px !important;
|
||||
// box-shadow: none !important;
|
||||
|
||||
// h1, h2 {
|
||||
// font-size: 20px;
|
||||
// font-weight: 500;
|
||||
// color: $tertiary;
|
||||
// display: inline-block;
|
||||
// margin-bottom: 3px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .media-frame-router {
|
||||
// margin-top: 28px;
|
||||
// a.media-menu-item.active {
|
||||
// border-top: none;
|
||||
// border-left: none;
|
||||
// border-right: none;
|
||||
// border-bottom: 3px solid $primary;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .media-frame-content {
|
||||
// margin-top: 30px;
|
||||
|
||||
// .attachments-browser .attachments, .media-toolbar {
|
||||
// padding: 12px;
|
||||
// right: 270px;
|
||||
|
||||
// .media-toolbar-primary {
|
||||
// max-width: 30%;
|
||||
// }
|
||||
// .media-toolbar-secondary {
|
||||
// max-width: 70%;
|
||||
// }
|
||||
// .attachment {
|
||||
// padding: 12px;
|
||||
// }
|
||||
// .attachment.details {
|
||||
// box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 14px $primary-light;
|
||||
// }
|
||||
// .attachment.details .check, .wp-core-ui .attachment.selected .check:focus, .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
|
||||
// background-color: $primary-light;
|
||||
// box-shadow: 0 0 0 1px #fff,0 0 0 2px $primary-light;
|
||||
// }
|
||||
// }
|
||||
// .media-sidebar {
|
||||
// background-color: white;
|
||||
// width: 238px;
|
||||
// }
|
||||
|
||||
// .crop-content{
|
||||
// .imgareaselect-outer {
|
||||
// background-color: white;
|
||||
// opacity: 0.6;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .media-frame-toolbar .media-toolbar {
|
||||
// bottom: initial;
|
||||
// margin-top: -1px;
|
||||
// padding: 28px 0px;
|
||||
// }
|
||||
|
||||
// .media-button.button-primary {
|
||||
// background-color: $success;
|
||||
// border: none;
|
||||
// box-shadow: none;
|
||||
// color: #fff;
|
||||
// text-decoration: none;
|
||||
// text-shadow: none;
|
||||
// }
|
||||
// .media-button.button-primary[disabled] {
|
||||
// color: #66c6e4 !important;
|
||||
// background: $success !important;
|
||||
// border-color: none!important;
|
||||
// box-shadow: none !important;
|
||||
// text-shadow: none !important;
|
||||
// cursor: default;
|
||||
// }
|
||||
// .media-button.button-secondary {
|
||||
// color: $tertiary;
|
||||
// border-color: #999;
|
||||
// background: white;
|
||||
// box-shadow: none;
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// .button-hero {
|
||||
// background-color: $secondary;
|
||||
// border: none;
|
||||
// box-shadow: none;
|
||||
// color: #fff;
|
||||
// text-decoration: none;
|
||||
// text-shadow: none;
|
||||
// font-size: 14px;
|
||||
// height: 46px;
|
||||
// line-height: 20px !important;
|
||||
// padding: 0 36px;
|
||||
|
||||
// &:hover{
|
||||
// background-color: #339daf;
|
||||
// color: white;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
}
|
||||
|
|
@ -21,6 +21,7 @@ return [
|
|||
|
||||
// Actions
|
||||
'edit' => __( 'Edit', 'tainacan' ),
|
||||
'settings' => __( 'Settings', 'tainacan' ),
|
||||
'new' => __( 'New', 'tainacan' ),
|
||||
'add' => __( 'Add', 'tainacan' ),
|
||||
'import' => __( 'Import', 'tainacan' ),
|
||||
|
|
@ -71,7 +72,7 @@ return [
|
|||
'title_create_category_page' => __( 'Taxonomy Creation', 'tainacan' ),
|
||||
'title_create_item_collection' => __( 'Create Item on Collection', 'tainacan' ),
|
||||
'title_create_filter' => __( 'Filter Creation', 'tainacan' ),
|
||||
'title_edit_collection' => __( 'Settings of Collection', 'tainacan' ),
|
||||
'title_collection_settings' => __( 'Settings of Collection', 'tainacan' ),
|
||||
'title_edit_item' => __( 'Edit Item', 'tainacan' ),
|
||||
'title_category_edition_page' => __( 'Taxonomy Edition', 'tainacan' ),
|
||||
'title_filter_edition' => __( 'Filter Edition', 'tainacan' ),
|
||||
|
|
@ -140,7 +141,8 @@ return [
|
|||
'label_attachment' => __( 'Attachment', 'tainacan' ),
|
||||
'label_enabled' => __( 'Enabled', 'tainacan' ),
|
||||
'label_disabled' => __( 'Disabled', 'tainacan' ),
|
||||
'label_creation' => __( 'Creation', 'tainacan' ),
|
||||
'label_creation' => __( 'Creation', 'tainacan' ),
|
||||
'label_creation_date' => __( 'Creation date', 'tainacan' ),
|
||||
'label_collection_items' => __( 'Collection Items', 'tainacan' ),
|
||||
'label_collection_fields' => __( 'Collection Metadata', 'tainacan' ),
|
||||
'label_collection_filters' => __( 'Collection Filters', 'tainacan' ),
|
||||
|
|
@ -152,7 +154,7 @@ return [
|
|||
'label_term_without_name' => __( 'Term without name', 'tainacan' ),
|
||||
'label_inherited' => __( 'Inherited', 'tainacan' ),
|
||||
'label_sorting' => __( 'Sorting', 'tainacan' ),
|
||||
'label_who_when' => __( 'Who and when', 'tainacan' ),
|
||||
'label_event_date' => __( 'Event date', 'tainacan' ),
|
||||
'label_event_title' => __( 'Event', 'tainacan' ),
|
||||
'label_header_image' => __( 'Header Image', 'tainacan' ),
|
||||
'label_empty_header_image' => __( 'Empty Header Image', 'tainacan' ),
|
||||
|
|
@ -180,12 +182,17 @@ return [
|
|||
'label_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||
'label_edit_selected_collections' => __( 'Edit selected collections', 'tainacan' ),
|
||||
'label_delete_selected_items' => __( 'Delete selected items', 'tainacan' ),
|
||||
'label_delete_selected_categories' => __( 'Delete selected categories', 'tainacan' ),
|
||||
'label_edit_selected_items' => __( 'Edit selected items', 'tainacan' ),
|
||||
'label_edit_selected_categories' => __( 'Edit selected categories', 'tainacan' ),
|
||||
'label_select_all_collections_page' => __( 'Select all collections on page', 'tainacan' ),
|
||||
'label_select_all_items_page' => __( 'Select all items on page', 'tainacan' ),
|
||||
'label_select_all_categories_page' => __( 'Select all categories on page', 'tainacan' ),
|
||||
'label_edit_attachments' => __( 'Edit attachments', 'tainacan' ),
|
||||
'label_blank_collection' => __( 'Blank collection', 'tainacan' ),
|
||||
'label_dublin_core' => __( 'Dublin Core', 'tainacan' ),
|
||||
'label_created_by' => __( 'Created by', 'tainacan' ),
|
||||
'label_apply_changes' => __( 'Apply changes', 'tainacan' ),
|
||||
|
||||
// Instructions. More complex sentences to guide user and placeholders
|
||||
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),
|
||||
|
|
@ -213,6 +220,8 @@ return [
|
|||
'info_no_collection_created' => __( 'No collection was created in this repository.', 'tainacan' ),
|
||||
'info_no_collection_draft' => __( 'No draft collection found.', 'tainacan' ),
|
||||
'info_no_collection_trash' => __( 'No collection on trash.', 'tainacan' ),
|
||||
'info_no_category_draft' => __( 'No draft category found.', 'tainacan' ),
|
||||
'info_no_category_trash' => __( 'No category on trash.', 'tainacan' ),
|
||||
'info_no_category_created' => __( 'No taxonomy was created in this repository.', 'tainacan' ),
|
||||
'info_no_item_created' => __( 'No item was created in this collection.', 'tainacan' ),
|
||||
'info_no_item_draft' => __( 'No draft item found.', 'tainacan' ),
|
||||
|
|
@ -232,6 +241,7 @@ return [
|
|||
'info_warning_category_delete' => __( 'Do you really want to delete this taxonomy?', 'tainacan' ),
|
||||
'info_warning_selected_collections_delete' => __( 'Do you really want to delete the selected collections?', 'tainacan' ),
|
||||
'info_warning_selected_items_delete' => __( 'Do you really want to delete the selected items?', 'tainacan' ),
|
||||
'info_warning_selected_categories_delete' => __( 'Do you really want to delete the selected categories?', 'tainacan' ),
|
||||
'info_warning_collection_related' => __( 'The metadata Collection related is required', 'tainacan' ),
|
||||
'info_warning_no_fields_found' => __( 'No metadata found in this collection', 'tainacan' ),
|
||||
'info_showing_items' => __( 'Showing items ', 'tainacan' ),
|
||||
|
|
|
|||
|
|
@ -20,20 +20,6 @@ export default {
|
|||
@import "../../node_modules/buefy/src/scss/components/_radio.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_tag.scss";
|
||||
|
||||
/* Rules for sizing the icon. */
|
||||
.material-icons.md-18 { font-size: 18px; }
|
||||
.material-icons.md-24 { font-size: 24px; }
|
||||
.material-icons.md-36 { font-size: 36px; }
|
||||
.material-icons.md-48 { font-size: 48px; }
|
||||
|
||||
/* Rules for using icons as black on a light background. */
|
||||
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
|
||||
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
|
||||
|
||||
/* Rules for using icons as white on a dark background. */
|
||||
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
|
||||
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
|
||||
|
||||
// Tainacan custom colors
|
||||
$primary: #2cb4c1;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
|
|
@ -63,6 +49,11 @@ export default {
|
|||
|
||||
$danger: #a23939;
|
||||
$danger-invert: findColorInvert($danger);
|
||||
|
||||
$table-side-padding: 4.166666667%;
|
||||
|
||||
@import "../admin/scss/_tables.scss";
|
||||
@import "../admin/scss/_tooltips.scss";
|
||||
|
||||
.theme-items-list {
|
||||
|
||||
|
|
@ -383,26 +374,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// Tables
|
||||
.table-wrapper {
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
tbody {
|
||||
td { border-bottom: 0px solid $gray-light !important; }
|
||||
}
|
||||
.b-checkbox.checkbox input[type="checkbox"] + .check {
|
||||
width: 0.85em !important;
|
||||
height: 0.85em !important;
|
||||
border-radius: 2px !important;
|
||||
border: 1px solid #7a7a7a !important;
|
||||
}
|
||||
.th-wrap {
|
||||
font-size: 12px !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.pagination-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ class REST_Collections_Controller extends REST_Controller {
|
|||
|
||||
# Always returns id
|
||||
if(is_array($attributes_to_filter)) {
|
||||
$attributes_to_filter[] = 'id';
|
||||
$attributes_to_filter[] = 'id';
|
||||
} else {
|
||||
$attributes_to_filter = array($attributes_to_filter, 'id');
|
||||
}
|
||||
|
|
@ -184,7 +184,9 @@ class REST_Collections_Controller extends REST_Controller {
|
|||
|
||||
if ( $request['context'] === 'edit' ) {
|
||||
$item_arr['current_user_can_edit'] = $item->can_edit();
|
||||
}
|
||||
}
|
||||
|
||||
$item_arr['url'] = get_permalink( $item_arr['id'] );
|
||||
}
|
||||
|
||||
return $item_arr;
|
||||
|
|
|
|||
|
|
@ -179,6 +179,8 @@ class REST_Items_Controller extends REST_Controller {
|
|||
$item_arr['current_user_can_edit'] = $item->can_edit();
|
||||
}
|
||||
|
||||
$item_arr['url'] = get_permalink( $item_arr['id'] );
|
||||
|
||||
return $item_arr;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,13 @@ class Embed {
|
|||
add_filter('wp_embed_handler_video', [$this, 'filter_video_embed'], 10, 4);
|
||||
add_filter('wp_embed_handler_audio', [$this, 'filter_audio_embed'], 10, 4);
|
||||
|
||||
/**
|
||||
* Add responsiveness to embeds
|
||||
*/
|
||||
add_filter('embed_oembed_html', [$this, 'responsive_embed'], 10, 3);
|
||||
add_action( 'admin_enqueue_scripts', array( &$this, 'add_css' ) );
|
||||
add_action( 'wp_enqueue_scripts', array( &$this, 'add_css' ) );
|
||||
|
||||
/**
|
||||
* ADD PDF Embed handler using PDF.js
|
||||
* @var [type]
|
||||
|
|
@ -101,5 +108,24 @@ class Embed {
|
|||
return null;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Responsiveness
|
||||
*/
|
||||
public function add_css() {
|
||||
global $TAINACAN_BASE_URL;
|
||||
wp_enqueue_style( 'tainacan-embeds', $TAINACAN_BASE_URL . '/assets/css/tainacan-embeds.css' );
|
||||
}
|
||||
/**
|
||||
* Adds a responsive embed wrapper around oEmbed content
|
||||
* @param string $html The oEmbed markup
|
||||
* @param string $url The URL being embedded
|
||||
* @param array $attr An array of attributes
|
||||
* @return string Updated embed markup
|
||||
*/
|
||||
function responsive_embed($html, $url, $attr) {
|
||||
return $html !== '' ? '<div class="tainacan-embed-container">'.$html.'</div>' : '';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -455,18 +455,40 @@ class Item extends Entity {
|
|||
* it returns all metadata
|
||||
*
|
||||
* @param int|string|Tainacan\Entities\Field $field Field object, ID or slug to retrieve only one field. empty returns all fields
|
||||
* @param bool $hide_empty Wether to hide or not fields the item has no value to
|
||||
* @param array|string $args {
|
||||
* Optional. Array or string of arguments.
|
||||
*
|
||||
* @type bool $hide_empty Wether to hide or not fields the item has no value to
|
||||
* Default: true
|
||||
* @type string $before_title String to be added before each metadata title
|
||||
* Default '<h3>'
|
||||
* @type string $after_title String to be added after each metadata title
|
||||
* Default '</h3>'
|
||||
* @type string $before_value String to be added before each metadata value
|
||||
* Default '<p>'
|
||||
* @type string $after_value String to be added after each metadata value
|
||||
* Default '</p>'
|
||||
* }
|
||||
*
|
||||
* @return string The HTML output
|
||||
* @throws \Exception
|
||||
*/
|
||||
public function get_metadata_as_html($field = null, $hide_empty = true) {
|
||||
public function get_metadata_as_html($field = null, $args = array()) {
|
||||
|
||||
$Tainacan_Item_Metadata = \Tainacan\Repositories\Item_Metadata::get_instance();
|
||||
$Tainacan_Fields = \Tainacan\Repositories\Fields::get_instance();
|
||||
|
||||
$return = '';
|
||||
|
||||
$defaults = array(
|
||||
'hide_empty' => true,
|
||||
'before_title' => '<h3>',
|
||||
'after_title' => '</h3>',
|
||||
'before_value' => '<p>',
|
||||
'after_value' => '</p>',
|
||||
);
|
||||
$args = wp_parse_args($args, $defaults);
|
||||
|
||||
if (!is_null($field)) {
|
||||
|
||||
$field_object = null;
|
||||
|
|
@ -484,9 +506,9 @@ class Item extends Entity {
|
|||
|
||||
if ( $field_object instanceof \Tainacan\Entities\Field ) {
|
||||
$item_meta = new \Tainacan\Entities\Item_Metadata_Entity($this, $field_object);
|
||||
if ($item_meta->has_value() || !$hide_empty) {
|
||||
$return .= '<h3>' . $field_object->get_name() . '</h3>';
|
||||
$return .= $item_meta->get_value_as_html();
|
||||
if ($item_meta->has_value() || !$args['hide_empty']) {
|
||||
$return .= $args['before_title'] . $field_object->get_name() . $args['after_title'];
|
||||
$return .= $args['before_value'] . $item_meta->get_value_as_html() . $args['after_value'];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -498,9 +520,9 @@ class Item extends Entity {
|
|||
$fields = $this->get_fields();
|
||||
|
||||
foreach ( $fields as $item_meta ) {
|
||||
if ($item_meta->has_value() || !$hide_empty) {
|
||||
$return .= '<h3>' . $item_meta->get_field()->get_name() . '</h3>';
|
||||
$return .= $item_meta->get_value_as_html();
|
||||
if ($item_meta->has_value() || !$args['hide_empty']) {
|
||||
$return .= $args['before_title'] . $item_meta->get_field()->get_name() . $args['after_title'];
|
||||
$return .= $args['before_value'] . $item_meta->get_value_as_html() . $args['after_value'];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export const filter_type_mixin = {
|
|||
.then(res => {
|
||||
if (res.data.length > 0) {
|
||||
for (let item of res.data) {
|
||||
this.options.push({label: item.title, value: item.id, img: item.thumbnail });
|
||||
this.options.push({label: item.title, value: item.id, img: item.thumbnail.thumb });
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<b-field
|
||||
class="filter-item-forms"
|
||||
id="filter-item-forms"
|
||||
:message="getErrorMessage"
|
||||
:type="filterTypeMessage">
|
||||
<b-collapse
|
||||
|
|
@ -22,7 +22,6 @@
|
|||
:is="filter.filter_type_object.component"
|
||||
:filter="filter"
|
||||
:query="query"
|
||||
:repository="repository"
|
||||
@input="listen( $event )"/>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
|
@ -37,8 +36,8 @@
|
|||
props: {
|
||||
filter: Object,
|
||||
query: Object,
|
||||
open: false,
|
||||
repository: Boolean,
|
||||
open: true,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
<style lang="scss">
|
||||
@import "../../../src/admin/scss/_variables.scss";
|
||||
|
||||
.filter-item-forms {
|
||||
#filter-item-forms {
|
||||
|
||||
.datepicker {
|
||||
|
||||
|
|
|
|||
|
|
@ -123,4 +123,11 @@ $Tainacan_Exposers = \Tainacan\Exposers\Exposers::get_instance();
|
|||
|
||||
$Tainacan_Embed = \Tainacan\Embed::get_instance();
|
||||
|
||||
require_once(__DIR__ . '/../admin/class-tainacan-admin.php');
|
||||
$Tainacan_Admin = \Tainacan\Admin::get_instance();
|
||||
|
||||
require_once(__DIR__ . '/../theme-helper/class-tainacan-theme-helper.php');
|
||||
require_once(__DIR__ . '/../theme-helper/template-tags.php');
|
||||
$Tainacan_Theme_Helper = \Tainacan\Theme_Helper::get_instance();
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ export default {
|
|||
this.$route.query.orderby = 'date';
|
||||
|
||||
this.$store.dispatch('search/set_postquery', this.$route.query);
|
||||
|
||||
this.loadItems();
|
||||
}
|
||||
|
||||
|
|
@ -61,6 +62,10 @@ export default {
|
|||
this.$store.dispatch('search/add_fetchonly_meta', field );
|
||||
this.updateURLQueries();
|
||||
},
|
||||
addFetchOnly( field ){
|
||||
this.$store.dispatch('search/add_fetchonly', field );
|
||||
this.updateURLQueries();
|
||||
},
|
||||
removeFetchOnlyMeta( field ){
|
||||
this.$store.dispatch('search/remove_fetchonly_meta', field );
|
||||
this.updateURLQueries();
|
||||
|
|
@ -111,17 +116,22 @@ export default {
|
|||
this.$store.dispatch('search/set_postquery', this.$route.query);
|
||||
},
|
||||
loadItems() {
|
||||
|
||||
this.$emit( 'isLoadingItems', true);
|
||||
this.$store.dispatch('collection/fetchItems', this.collectionId).then((res) => {
|
||||
this.$emit( 'isLoadingItems', false);
|
||||
this.$emit( 'hasFiltered', res.hasFiltered);
|
||||
//var event = new Event('tainacan-items-change')
|
||||
//document.dispatchEvent(event);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$emit( 'isLoadingItems', false);
|
||||
});
|
||||
|
||||
// Foreces fetch_only to be filled before any search happens
|
||||
if (this.$store.getters['search/getFetchOnly'] == undefined)
|
||||
this.$emit( 'hasToPrepareFieldsAndFilters');
|
||||
else {
|
||||
this.$emit( 'isLoadingItems', true);
|
||||
this.$store.dispatch('collection/fetchItems', { 'collectionId': this.collectionId, 'isOnTheme': (this.$route.name == null) }).then((res) => {
|
||||
this.$emit( 'isLoadingItems', false);
|
||||
this.$emit( 'hasFiltered', res.hasFiltered);
|
||||
//var event = new Event('tainacan-items-change')
|
||||
//document.dispatchEvent(event);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$emit( 'isLoadingItems', false);
|
||||
});
|
||||
}
|
||||
},
|
||||
setCollectionId(collectionId) {
|
||||
this.collectionId = collectionId;
|
||||
|
|
|
|||
|
|
@ -58,9 +58,14 @@ export const updateCategory = ({ commit }, category) => {
|
|||
});
|
||||
};
|
||||
|
||||
export const fetchCategories = ({ commit }, { page, categoriesPerPage } ) => {
|
||||
export const fetchCategories = ({ commit }, { page, categoriesPerPage, status } ) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.tainacan.get(`/taxonomies?paged=${page}&perpage=${categoriesPerPage}`)
|
||||
let endpoint = `/taxonomies?paged=${page}&perpage=${categoriesPerPage}&context=edit`;
|
||||
|
||||
if (status != undefined && status != '')
|
||||
endpoint = endpoint + '&status=' + status;
|
||||
|
||||
axios.tainacan.get(endpoint)
|
||||
.then(res => {
|
||||
let categories = res.data;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import axios from '../../../axios/axios';
|
||||
import qs from 'qs';
|
||||
|
||||
export const fetchItems = ({ rootGetters, dispatch, commit }, collectionId) => {
|
||||
export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, isOnTheme }) => {
|
||||
commit('cleanItems');
|
||||
return new Promise ((resolve, reject) => {
|
||||
|
||||
|
|
@ -14,10 +14,13 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, collectionId) => {
|
|||
hasFiltered = true;
|
||||
|
||||
// Differentiates between repository level and collection level queries
|
||||
let endpoint = '/collection/'+collectionId+'/items?context=edit&'
|
||||
let endpoint = '/collection/'+collectionId+'/items?'
|
||||
|
||||
if (collectionId == undefined)
|
||||
endpoint = '/items?context=edit&'
|
||||
endpoint = '/items?'
|
||||
|
||||
if (!isOnTheme)
|
||||
endpoint = endpoint + 'context=edit&'
|
||||
|
||||
axios.tainacan.get(endpoint + qs.stringify(postQueries) )
|
||||
.then(res => {
|
||||
|
|
|
|||
|
|
@ -69,8 +69,10 @@ export const setStatus= ({ commit }, status ) => {
|
|||
export const setOrderBy = ({ commit }, orderBy ) => {
|
||||
|
||||
// Primitive Types: string, date, item, term, compound, float
|
||||
if (orderBy.id == 'date') {
|
||||
if (orderBy.id == 'creation_date') {
|
||||
commit('setPostQueryAttribute', { attr: 'orderby', value: 'date' } );
|
||||
} else if (orderBy.id == 'author_name') {
|
||||
commit('setPostQueryAttribute', { attr: 'orderby', value: 'author_name' } );
|
||||
} else if (orderBy.field_type_object.primitive_type == 'float' || orderBy.field_type_object.primitive_type == 'int') {
|
||||
commit('setPostQueryAttribute', { attr: 'meta_key', value: orderBy.id } );
|
||||
commit('setPostQueryAttribute', { attr: 'orderby', value: 'meta_value_num' } );
|
||||
|
|
|
|||
|
|
@ -42,4 +42,12 @@ export const getSearchQuery = state => {
|
|||
|
||||
export const getStatus = state => {
|
||||
return state.postquery.status;
|
||||
}
|
||||
|
||||
export const getFetchOnly = state => {
|
||||
return state.postquery.fetch_only;
|
||||
}
|
||||
|
||||
export const getFetchOnlyMeta = state => {
|
||||
return ( ! state.postquery.fetch_only['meta'] ) ? [] : state.postquery.fetch_only['meta'];
|
||||
}
|
||||
|
|
@ -13,9 +13,12 @@ const state = {
|
|||
post_type: [],
|
||||
metaquery: [],
|
||||
taxquery: [],
|
||||
fetch_only: [
|
||||
{'meta': [] }
|
||||
],
|
||||
fetch_only: {
|
||||
'0': 'thumbnail',
|
||||
'meta': [],
|
||||
'1': 'creation_date',
|
||||
'2': 'author_name'
|
||||
},
|
||||
},
|
||||
totalItems: 0
|
||||
};
|
||||
|
|
|
|||
|
|
@ -47,25 +47,44 @@ export const addTaxQuery = ( state, filter ) => {
|
|||
};
|
||||
|
||||
export const addFetchOnly = ( state, field ) => {
|
||||
state.postquery.fechonly = ( ! state.postquery.fechonly ) ? [{'meta': []}] : state.postquery.fechonly;
|
||||
let index = state.postquery.fechonly.findIndex( item => item === field);
|
||||
if ( index >= 0 ){
|
||||
Vue.set( state.postquery.fechonly, index, field);
|
||||
} else {
|
||||
state.postquery.fechonly.push(field);
|
||||
state.postquery.fetch_only = ( ! state.postquery.fetch_only ) ? { '0': 'thumbnail', 'meta': [], '1': 'creation_date', '2': 'author_name' } : state.postquery.fetch_only;
|
||||
|
||||
for (let key in field) {
|
||||
state.postquery.fetch_only[key] = field[key];
|
||||
}
|
||||
};
|
||||
export const addFetchOnlyMeta = ( state, field ) => {
|
||||
state.postquery.fechonly['meta'] = ( ! state.postquery.fechonly['meta'] ) ? [] : state.postquery.fechonly['meta'];
|
||||
let index = state.postquery.fechonly['meta'].findIndex( item => item === field);
|
||||
if ( index >= 0 ){
|
||||
Vue.set( state.postquery.fechonly['meta'], index, field);
|
||||
state.postquery.fetch_only = ( ! state.postquery.fetch_only ) ? { '0': 'thumbnail', 'meta': [], '1': 'creation_date', '2': 'author_name' } : state.postquery.fetch_only;
|
||||
// console.log(state.postquery.fetch_only);
|
||||
//console.log(state.postquery.fetch_only['meta']);
|
||||
state.postquery.fetch_only['meta'] = ( ! state.postquery.fetch_only['meta'] ) ? [] : state.postquery.fetch_only['meta'];
|
||||
let index = state.postquery.fetch_only['meta'].findIndex( item => item == field);
|
||||
if ( index >= 0 ){
|
||||
state.postquery.fetch_only['meta'][index] = field;
|
||||
} else {
|
||||
state.postquery.fechonly['meta'].push(field);
|
||||
state.postquery.fetch_only['meta'].push(field);
|
||||
}
|
||||
//console.log(state.postquery.fetch_only['meta']);
|
||||
//console.log("----------------------------");
|
||||
};
|
||||
|
||||
export const removeFetchOnly = ( state, field ) => {
|
||||
for (let key in field) {
|
||||
delete state.postquery.fetch_only[key];
|
||||
}
|
||||
};
|
||||
|
||||
export const removeFetchOnlyMeta = ( state, field ) => {
|
||||
if(state.postquery.fetch_only['meta'] != undefined) {
|
||||
let index = state.postquery.fetch_only['meta'].findIndex( item => item == field);
|
||||
if (index >= 0) {
|
||||
state.postquery.fetch_only['meta'].splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const removeMetaQuery = ( state, filter ) => {
|
||||
state.postquery.metaquery = ( ! state.postquery.metaquery ) ? [] : state.postquery.metaquery;
|
||||
let index = state.postquery.metaquery.findIndex( item => item.key === filter.field_id);
|
||||
if (index >= 0) {
|
||||
state.postquery.metaquery.splice(index, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
=== Tainacan ===
|
||||
Contributors: fabianobn, jacsonp, leogermani, weryques
|
||||
Contributors: fabianobn, jacsonp, leogermani, weryques, wetah
|
||||
Tags: museums, libraries, archives, GLAM, collections, repository
|
||||
Requires at least: 4.8
|
||||
Tested up to: 4.9
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
|
||||
html {
|
||||
margin-top: 0 !important; /* resolução do erro que estava dando no Firefox com espaço no topo*/
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// Styles to be loaded both in admin and front end (theme)
|
||||
|
||||
.tainacan-embed-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
padding-top: 30px;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
||||
iframe, object, embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,39 +5,32 @@ Plugin URI: https://tainacan.org/new
|
|||
Description: powerfull and flexible repository platform for WordPress. Manage and publish you digital collections as easily as publishing a post to your blog, while having all the tools of a professional respository platform.
|
||||
Author: Media Lab / UFG
|
||||
Version: 0.1
|
||||
Text Domain: tainacan
|
||||
License: GPLv2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-3.0.html
|
||||
*/
|
||||
|
||||
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
|
||||
|
||||
$TAINACAN_BASE_URL = plugins_url('', __FILE__);
|
||||
|
||||
const TAINACAN_API_DIR = __DIR__ . '/api/';
|
||||
const TAINACAN_CLASSES_DIR = __DIR__ . '/classes/';
|
||||
|
||||
require_once(TAINACAN_CLASSES_DIR . 'tainacan-creator.php');
|
||||
require_once(TAINACAN_API_DIR . 'tainacan-rest-creator.php');
|
||||
|
||||
// DEV Interface, used for debugging
|
||||
require_once('dev-interface/class-tainacan-dev-interface.php');
|
||||
function tnc_enable_dev_wp_interface() {
|
||||
return defined('TNC_ENABLE_DEV_WP_INTERFACE') && true === TNC_ENABLE_DEV_WP_INTERFACE ? true : false;
|
||||
}
|
||||
if ( tnc_enable_dev_wp_interface() ) {
|
||||
$Tainacan_Dev_interface = \Tainacan\DevInterface\DevInterface::get_instance();
|
||||
}
|
||||
|
||||
function tnc_enable_dev_wp_interface() {
|
||||
return defined('TNC_ENABLE_DEV_WP_INTERFACE') && true === TNC_ENABLE_DEV_WP_INTERFACE ? true : false;
|
||||
}
|
||||
|
||||
$Tainacan_Capabilities = \Tainacan\Capabilities::get_instance();
|
||||
register_activation_hook( __FILE__, array( $Tainacan_Capabilities, 'init' ) );
|
||||
|
||||
// TODO move it somewhere else?
|
||||
require_once('admin/class-tainacan-admin.php');
|
||||
$Tainacan_Admin = \Tainacan\Admin::get_instance();
|
||||
|
||||
require_once('theme-helper/class-tainacan-theme-helper.php');
|
||||
require_once('theme-helper/template-tags.php');
|
||||
$Tainacan_Admin = \Tainacan\Theme_Helper::get_instance();
|
||||
|
||||
function tainacan_load_plugin_textdomain() {
|
||||
load_plugin_textdomain( 'tainacan', FALSE, basename( dirname( __FILE__ ) ) . '/languages/' );
|
||||
}
|
||||
add_action( 'plugins_loaded', 'tainacan_load_plugin_textdomain' );
|
||||
add_action( 'plugins_loaded', 'tainacan_load_plugin_textdomain' );
|
||||
|
||||
|
||||
$Tainacan_Capabilities = \Tainacan\Capabilities::get_instance();
|
||||
register_activation_hook( __FILE__, array( $Tainacan_Capabilities, 'init' ) );
|
||||
|
|
|
|||
|
|
@ -14,10 +14,24 @@ use \Tainacan\Repositories;
|
|||
* it returns all metadata
|
||||
*
|
||||
* @param int|string|Tainacan\Entities\Field $field Field object, ID or slug to retrieve only one field. empty returns all fields
|
||||
* @param bool $hide_empty Wether to hide or not fields the item has no value to
|
||||
* @param array|string $args
|
||||
* @param array|string $args {
|
||||
* Optional. Array or string of arguments.
|
||||
*
|
||||
* @type bool $hide_empty Wether to hide or not fields the item has no value to
|
||||
* Default: true
|
||||
* @type string $before_title String to be added before each metadata title
|
||||
* Default '<h3>'
|
||||
* @type string $after_title String to be added after each metadata title
|
||||
* Default '</h3>'
|
||||
* @type string $before_value String to be added before each metadata value
|
||||
* Default '<p>'
|
||||
* @type string $after_value String to be added after each metadata value
|
||||
* Default '</p>'
|
||||
* }
|
||||
* @return string The HTML output
|
||||
*/
|
||||
function tainacan_get_the_metadata($field = null, $hide_empty = true) {
|
||||
function tainacan_get_the_metadata($field = null, $args = array()) {
|
||||
$post = get_post();
|
||||
$theme_helper = \Tainacan\Theme_Helper::get_instance();
|
||||
|
||||
|
|
@ -26,12 +40,12 @@ function tainacan_get_the_metadata($field = null, $hide_empty = true) {
|
|||
|
||||
$item = new Entities\Item($post);
|
||||
|
||||
return $item->get_metadata_as_html($field, $hide_empty);
|
||||
return $item->get_metadata_as_html($field, $args);
|
||||
|
||||
}
|
||||
|
||||
function tainacan_the_metadata($field = null, $hide_empty = true) {
|
||||
echo tainacan_get_the_metadata($field, $hide_empty);
|
||||
function tainacan_the_metadata($field = null, $args = array()) {
|
||||
echo tainacan_get_the_metadata($field, $args);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue