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

Finishes implementation of ShrinkHeader. Fixes bug on FiltersList, where new Filters where being saved with disabled field. Adjusts ItemEditionPage columns size according to Design team requirements.

This commit is contained in:
Mateus Machado Luna 2018-05-21 13:20:13 -03:00
parent 92aebd2c2f
commit b0b98630d6
15 changed files with 94 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/admin/admin.vue
View File

@ -82,7 +82,7 @@
padding: 0px;
margin: $header-height auto 0 auto;
position: relative;
overflow-y: auto;
overflow-y: hidden;
height: calc(100% - 53px);
@media screen and (max-width: 769px) {

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

@ -637,6 +637,11 @@ export default {
this.isLoading = false;
});
}
},
mounted() {
document.getElementById('collection-page-container').addEventListener('scroll', ($event) => {
this.$emit('onShrinkHeader', ($event.originalTarget.scrollTop > 53));
});
}
}

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

@ -6,7 +6,7 @@
class="tainacan-form"
label-width="120px">
<div class="columns">
<div class="column is-5">
<div class="column is-5-5">
<!-- Status -------------------------------- -->
<div class="section-label">
@ -56,7 +56,7 @@
:title="$i18n.getHelperTitle('items', 'document')"
:message="$i18n.getHelperMessage('items', 'document')"/>
</div>
<div class="section-box">
<div class="section-box ">
<div
v-if="form.document != undefined && form.document != null &&
form.document_type != undefined && form.document_type != null &&
@ -253,12 +253,12 @@
<div class="section-label">
<label>{{ $i18n.get('label_attachments') }}</label>
</div>
<div class="section-box">
<div class="section-box section-attachments">
<button
type="button"
class="button is-secondary"
@click.prevent="attachmentMediaFrame.openFrame($event)">
{{ $i18n.get("label_add_attachment") }}
{{ $i18n.get("label_edit_attachments") }}
</button>
<div class="uploaded-files">
@ -271,8 +271,7 @@
</div>
</div>
<div class="column is-1" />
<div class="column is-6">
<div class="column is-4-5">
<label class="section-label">{{ $i18n.get('fields') }}</label>
<br>
<a
@ -639,7 +638,7 @@ export default {
},
mounted() {
document.getElementById('collection-page-container').addEventListener('scroll', ($event) => {
this.$shouldShrink = ($event.originalTarget.scrollTop > 5);
this.$emit('onShrinkHeader', ($event.originalTarget.scrollTop > 53));
});
},
beforeRouteLeave ( to, from, next ) {
@ -665,11 +664,28 @@ export default {
@import '../../scss/_variables.scss';
.page-container{
height: calc(100% - 82px);
}
padding: 25px 0px;
.tainacan-page-title {
padding-left: $page-side-padding;
padding-right: $page-side-padding;
}
.column {
padding-top: 0px;
padding-bottom: 0px;
}
.column.is-5-5 {
width: 45.833333333%;
padding-left: $page-side-padding;
padding-right: $page-side-padding;
}
.column.is-4-5 {
width: 37.5%;
padding-left: $page-side-padding;
padding-right: $page-side-padding;
}
form>.columns>.column{
padding: 0px;
}
.section-label {
@ -689,6 +705,7 @@ export default {
.section-box {
border: 1px solid $draggable-border-color;
background-color: white;
padding: 30px;
margin-top: 16px;
margin-bottom: 38px;
@ -715,6 +732,12 @@ export default {
}
}
}
.section-attachments {
height: 400px;
max-width: 100%;
resize: both;
overflow: auto;
}
.uploaded-files {
display: flex;

9
src/admin/components/lists/fields-list.vue
View File

@ -3,7 +3,7 @@
<b-loading :active.sync="isLoadingFieldTypes"/>
<tainacan-title v-if="!isRepositoryLevel"/>
<b-tabs v-model="activeTab">
<b-tab-item :label="$i18n.get('category')">
<b-tab-item :label="$i18n.get('taxonomy')">
<div class="columns">
<div class="column">
<draggable
@ -322,6 +322,13 @@ export default {
.catch(() => {
this.isLoadingFields = false;
});
},
mounted() {
if (!this.isRepositoryLevel) {
document.getElementById('collection-page-container').addEventListener('scroll', ($event) => {
this.$emit('onShrinkHeader', ($event.originalTarget.scrollTop > 53));
});
}
}
}
</script>

7
src/admin/components/lists/filters-list.vue
View File

@ -438,6 +438,13 @@ export default {
.catch(() => {
this.isLoadingFilters = false;
});
},
mounted() {
if (!this.isRepositoryLevel) {
document.getElementById('collection-page-container').addEventListener('scroll', ($event) => {
this.$emit('onShrinkHeader', ($event.originalTarget.scrollTop > 53));
});
}
}
}
</script>

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

@ -374,9 +374,9 @@ export default {
background-color: transparent;
&.selected-row {
background-color: $primary-lighter !important;
background-color: $primary-lighter;
.checkbox-cell .checkbox, .actions-cell .actions-container {
background-color: $primary-lighter !important;
background-color: $primary-lighter;
}
}
td {
@ -439,17 +439,17 @@ export default {
}
&:hover {
background-color: $tainacan-input-background;
background-color: $tainacan-input-background !important;
cursor: pointer;
.checkbox-cell {
visibility: visible;
.checkbox { background-color: $tainacan-input-background; }
.checkbox { background-color: $tainacan-input-background !important; }
}
.actions-cell {
.actions-container {
visibility: visible;
background: $tainacan-input-background;
background: $tainacan-input-background !important;
}
&::after {

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

@ -40,7 +40,7 @@ import draggable from 'vuedraggable'
import store from '../../js/store/store'
import router from './router'
import eventBusSearch from '../../js/event-bus-search';
import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin, SubheaderShrinkPlugin } from './utilities';
import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from './utilities';
import VueMask from 'v-mask';
// Configure and Register Plugins
@ -48,7 +48,6 @@ Vue.use(Buefy);
Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin);
Vue.use(RouterHelperPlugin);
Vue.use(SubheaderShrinkPlugin);
Vue.use(ConsolePlugin, {visual: false});
Vue.use(VueMask);

21
src/admin/js/utilities.js
View File

@ -258,25 +258,4 @@ RouterHelperPlugin.install = function (Vue, options = {}) {
}
}
// USER PREFERENCES - Used to save key-value information for user settings of plugin
export const SubheaderShrinkPlugin = {};
SubheaderShrinkPlugin.install = function (Vue, options = {}) {
Vue.ShouldShrink = false;
Object.defineProperties(Vue.prototype, {
"$shouldShrink": {
"get": function () {
return vm.ShouldShrink;
},
"set": function (value) {
vm.ShouldShrink = value
return this;
}
}
})
}

2
src/admin/js/wp-media-frames.js
View File

@ -16,7 +16,7 @@ export default {
content: 'upload', // First view that is opened
autoSelect: true,
states: [
new wp.media.controller.MediaLibrary({
new wp.media.controller.Library({
title: this.params.button_labels.frame_title,
library: wp.media.query({
status: null,

6
src/admin/pages/lists/events-page.vue
View File

@ -145,6 +145,12 @@
},
mounted(){
this.loadEvents();
if (!this.isRepositoryLevel) {
document.getElementById('collection-page-container').addEventListener('scroll', ($event) => {
this.$emit('onShrinkHeader', ($event.originalTarget.scrollTop > 53));
});
}
}
}
</script>

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

@ -86,6 +86,7 @@
</aside>
<div
id="items-list-area"
class="items-list-area"
:class="{ 'spaced-to-right': !isFiltersMenuCompressed }">
<!-- SEARCH CONTROL ------------------------- -->
@ -344,8 +345,13 @@
this.$eventBusSearch.setCollectionId(this.collectionId);
this.$eventBusSearch.updateStoreFromURL();
this.$eventBusSearch.loadItems();
}
if (!this.isRepositoryLevel && !this.isOnTheme) {
document.getElementById('items-list-area').addEventListener('scroll', ($event) => {
this.$emit('onShrinkHeader', ($event.originalTarget.scrollTop > 53));
});
}
}
}
</script>
@ -357,7 +363,7 @@
margin-bottom: 0.1rem;
}
.page-container, .page-container-small {
.page-container {
padding: 0px;
}
@ -400,7 +406,7 @@
.table-container {
padding-left: 8.333333%;
padding-right: 8.333333%;
height: calc(100% - 82px);
//height: calc(100% - 82px);
}
#collection-search-button {
@ -412,11 +418,11 @@
}
.filters-menu {
position: absolute;
position: relative;
width: $filter-menu-width;
max-width: $filter-menu-width;
min-height: calc(100% - 82px);
height: calc(100% - 82px);
min-height: 100%;
height: 100%;
background-color: $tainacan-input-background;
padding: $page-small-side-padding;
float: left;
@ -440,6 +446,7 @@
margin-left: 0;
transition: margin-left ease 0.5s;
height: 100%;
overflow: auto;
}
.spaced-to-right {
margin-left: $filter-menu-width;

14
src/admin/pages/singles/collection-page.vue
View File

@ -2,12 +2,14 @@
<div class="columns is-fullheight">
<section class="column is-secondary-content">
<tainacan-subheader
:class="{ 'is-shrink': headerShouldShrink }"
:class="{ 'is-shrink': shouldShrinkHeader }"
:id="collectionId"/>
<router-view
@onShrinkHeader="shouldShrinkHeader = $event"
id="collection-page-container"
:collection-id="collectionId"
class="page-container page-container-small"/>
class="page-container page-container-small"
:class="{'page-container-shrinked': shouldShrinkHeader }"/>
</section>
</div>
</template>
@ -19,12 +21,8 @@ export default {
name: 'CollectionPage',
data(){
return {
collectionId: Number
}
},
computed: {
headerShouldShrink() {
return this.$shouldShrink;
collectionId: Number,
shouldShrinkHeader: false
}
},
components: {

6
src/admin/scss/tainacan-admin.scss
View File

@ -68,9 +68,13 @@ a:hover {
padding: $page-mobile-top-padding $page-mobile-side-padding;
}
}
.page-container-small{
.page-container-small {
height: calc(100% - 82px);
overflow-y: auto;
transition: height 0.6s;
}
.page-container-shrinked {
height: calc(100% - 53px) !important;
}
.page-container-narrow{
padding: $page-small-top-padding $page-small-side-padding;

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

@ -182,7 +182,7 @@ return [
'label_edit_selected_items' => __( 'Edit selected items', 'tainacan' ),
'label_select_all_collections_page' => __( 'Select all collections on page', 'tainacan' ),
'label_select_all_items_page' => __( 'Select all items on page', 'tainacan' ),
'label_add_attachment' => __( 'Add attachment', 'tainacan' ),
'label_edit_attachments' => __( 'Edit attachments', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),

1
src/js/store/modules/filter/actions.js
View File

@ -60,6 +60,7 @@ export const sendFilter = ( { commit }, { collectionId, fieldId, name, filterTyp
export const updateFilter = ( { commit }, { filterId, index, options }) => {
return new Promise(( resolve, reject ) => {
let endpoint = '/filters/' + filterId;
options['context'] = 'edit';
axios.tainacan.put(endpoint, options)
.then( res => {