Beings implementation of per-metadata navigation.
This commit is contained in:
mateuswetah
parent
b00400ac86
commit
d467c6b7b6
|
|
@ -215,6 +215,53 @@
|
|||
</span>
|
||||
</a>
|
||||
|
||||
<b-field
|
||||
v-if="metadatumList && metadatumList.length > 3"
|
||||
class="header-item metadata-navigation"
|
||||
:class="{ 'is-active': isMetadataNavigation }">
|
||||
<b-button
|
||||
v-if="!isMetadataNavigation"
|
||||
@click="isMetadataNavigation = true; setMetadatumFocus(0);"
|
||||
size="is-ghost"
|
||||
outlined>
|
||||
<span>{{ 'Navigate' }}</span>
|
||||
<span
|
||||
class="icon is-small">
|
||||
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-play" />
|
||||
</span>
|
||||
</b-button>
|
||||
<b-button
|
||||
v-if="isMetadataNavigation"
|
||||
@click="setMetadatumFocus(focusedMetadatum - 1)"
|
||||
size="is-small"
|
||||
outlined>
|
||||
<span
|
||||
class="icon is-small">
|
||||
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-showmore tainacan-icon-rotate-180" />
|
||||
</span>
|
||||
</b-button>
|
||||
<b-button
|
||||
v-if="isMetadataNavigation"
|
||||
@click="setMetadatumFocus(focusedMetadatum + 1)"
|
||||
size="is-small"
|
||||
outlined>
|
||||
<span
|
||||
class="icon is-small">
|
||||
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-showmore" />
|
||||
</span>
|
||||
</b-button>
|
||||
<b-button
|
||||
v-if="isMetadataNavigation"
|
||||
@click="isMetadataNavigation = false"
|
||||
size="is-small"
|
||||
outlined>
|
||||
<span
|
||||
class="icon is-small has-success-color">
|
||||
<i class="tainacan-icon tainacan-icon-1-125em tainacan-icon-finish" />
|
||||
</span>
|
||||
</b-button>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
v-if="metadatumList && metadatumList.length > 5"
|
||||
class="header-item">
|
||||
|
|
@ -240,12 +287,16 @@
|
|||
v-show="(metadataNameFilterString == '' || filterByMetadatumName(itemMetadatum))"
|
||||
v-for="(itemMetadatum, index) of metadatumList"
|
||||
:key="index"
|
||||
:ref="'tainacan-form-item--' + index"
|
||||
:item-metadatum="itemMetadatum"
|
||||
:metadata-name-filter-string="metadataNameFilterString"
|
||||
:is-collapsed="metadataCollapses[index]"
|
||||
:is-mobile-screen="isMobileScreen"
|
||||
:is-last-metadatum="index > 2 && (index == metadatumList.length - 1)"
|
||||
@changeCollapse="onChangeCollapse($event, index)"/>
|
||||
:is-focused="focusedMetadatum === index"
|
||||
@changeCollapse="onChangeCollapse($event, index)"
|
||||
@touchstart.native="setMetadatumFocus(index)"
|
||||
@mouseenter.native="setMetadatumFocus(index)" />
|
||||
|
||||
<!-- Hook for extra Form options -->
|
||||
<template
|
||||
|
|
@ -788,7 +839,9 @@
|
|||
</template>
|
||||
|
||||
</transition>
|
||||
<footer class="footer">
|
||||
<footer
|
||||
class="footer"
|
||||
:class="{ 'has-some-metadatum-focused': isMetadataNavigation && activeTab === 'metadata' && focusedMetadatum !== false }">
|
||||
<!-- Sequence Progress -->
|
||||
<div
|
||||
v-if="isOnSequenceEdit"
|
||||
|
|
@ -825,7 +878,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="form-submission-footer"
|
||||
class="form-submission-footer"
|
||||
v-if="isEditingMetadataIframeMode">
|
||||
<button
|
||||
@click="onSubmit()"
|
||||
|
|
@ -1109,7 +1162,9 @@ export default {
|
|||
urlIframeHeight: 450,
|
||||
urlIsImage: false,
|
||||
isMobileScreen: false,
|
||||
openMetadataNameFilter: false
|
||||
openMetadataNameFilter: false,
|
||||
focusedMetadatum: false,
|
||||
isMetadataNavigation: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -1932,6 +1987,28 @@ export default {
|
|||
this.isMobileScreen = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 768;
|
||||
});
|
||||
}, 500),
|
||||
setMetadatumFocus(index) {
|
||||
this.focusedMetadatum = index;
|
||||
|
||||
let fieldElement = this.$refs['tainacan-form-item--' + index] && this.$refs['tainacan-form-item--' + index][0] && this.$refs['tainacan-form-item--' + index][0]['$el'];
|
||||
if (fieldElement) {
|
||||
let inputElement = fieldElement.getElementsByTagName('input')[0] || fieldElement.getElementsByTagName('select')[0] || fieldElement.getElementsByTagName('textarea')[0];
|
||||
|
||||
if (inputElement) {
|
||||
setTimeout(() => {
|
||||
if (inputElement.type === 'checkbox' || inputElement.type === 'radio')
|
||||
inputElement.focus();
|
||||
else
|
||||
inputElement.click();
|
||||
|
||||
setTimeout(() => {
|
||||
fieldElement.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 100);
|
||||
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2106,6 +2183,27 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.metadata-navigation {
|
||||
position: initial;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
z-index: 9999;
|
||||
transition: right 0.3s ease, top 0.3s ease, position 0.3s ease;
|
||||
|
||||
&.is-active {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.metadata-navigation /deep/ .button {
|
||||
border-radius: 0 !important;
|
||||
margin-left: 0.25em;
|
||||
min-height: 2.25em;
|
||||
background-color: rgba(255,255,255,0.5) !important;
|
||||
}
|
||||
|
||||
.collapse-all {
|
||||
font-size: 0.75em;
|
||||
white-space: nowrap;
|
||||
|
|
@ -2315,6 +2413,7 @@ export default {
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transition: bottom 0.5s ease;
|
||||
|
||||
.form-submission-footer {
|
||||
.button {
|
||||
|
|
@ -2392,6 +2491,10 @@ export default {
|
|||
height: auto;
|
||||
position: fixed;
|
||||
|
||||
&.has-some-metadatum-focused {
|
||||
bottom: -400px;
|
||||
}
|
||||
|
||||
.update-info-section {
|
||||
margin-left: auto;
|
||||
margin-bottom: 0.5em;
|
||||
|
|
|
|||
|
|
@ -132,7 +132,8 @@
|
|||
hideCollapses: false,
|
||||
isLastMetadatum: false,
|
||||
metadataNameFilterString: '',
|
||||
isMobileScreen: false
|
||||
isMobileScreen: false,
|
||||
isFocused: false
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
@ -168,7 +169,8 @@
|
|||
(this.metadatumComponent ? ' tainacan-metadatum-component--' + this.metadatumComponent : '') +
|
||||
(this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.placeholder ? ' has-placeholder' : '') +
|
||||
(this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.description ? ' has-description' : '') +
|
||||
(this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.id ? ' tainacan-metadatum-id--' + this.itemMetadatum.metadatum.id : '');
|
||||
(this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.id ? ' tainacan-metadatum-id--' + this.itemMetadatum.metadatum.id : '') +
|
||||
(this.isFocused ? ' is-focused' : '');
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -300,6 +302,8 @@
|
|||
.field {
|
||||
border-bottom: 1px solid var(--tainacan-input-border-color);
|
||||
padding: 10px var(--tainacan-container-padding);
|
||||
transform: scale(1.0);
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.hightlighted-metadatum {
|
||||
background-color: var(--tainacan-white);
|
||||
|
|
@ -309,6 +313,10 @@
|
|||
animation-iteration-count: 2;
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
transform: scale(1.005);
|
||||
}
|
||||
|
||||
&.has-collapses-hidden {
|
||||
border-bottom: none;
|
||||
padding: 10px !important;
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
:amount-selected="Array.isArray(valueComponent) ? valueComponent.length : (valueComponent ? '1' : '0')"
|
||||
:is-checkbox="getComponent == 'tainacan-taxonomy-checkbox'"
|
||||
@input="(selected) => valueComponent = selected"
|
||||
:is-mobile-screen="isMobileScreen"
|
||||
/>
|
||||
<div
|
||||
v-if="displayCreateNewTerm && !isTermCreationPanelOpen && (maxMultipleValues !== undefined ? (maxMultipleValues > valueComponent.length) : true)"
|
||||
|
|
@ -96,6 +97,7 @@
|
|||
maxtags: '',
|
||||
allowNew: false,
|
||||
allowSelectToCreate: false,
|
||||
isMobileScreen: false,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div class="tainacan-form">
|
||||
<div
|
||||
class="tainacan-form">
|
||||
|
||||
<b-tabs
|
||||
size="is-small"
|
||||
animated
|
||||
|
|
@ -335,7 +337,8 @@
|
|||
default: true,
|
||||
},
|
||||
amountSelected: 0,
|
||||
maxMultipleValues: undefined
|
||||
maxMultipleValues: undefined,
|
||||
isMobileScreen: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -813,9 +816,21 @@
|
|||
.tainacan-form {
|
||||
margin-top: 12px;
|
||||
max-width: 100%;
|
||||
|
||||
.form-submit {
|
||||
padding-top: 16px !important;
|
||||
}
|
||||
&.is-expanded-on-mobile:focus,
|
||||
&.is-expanded-on-mobile:focus-within,
|
||||
&.is-expanded-on-mobile:focus-visible {
|
||||
background-color: var(--tainacan-background-color);
|
||||
z-index: 9999999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-show-more {
|
||||
|
|
@ -846,8 +861,8 @@
|
|||
margin-left: 0.7em;
|
||||
margin-bottom: 0px !important;
|
||||
height: auto;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
-webkit-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
|
||||
|
|
@ -858,8 +873,11 @@
|
|||
|
||||
@media screen and (max-width: 768px) {
|
||||
.control-label {
|
||||
padding-top: 0.55em;
|
||||
padding-bottom: 0.55em;
|
||||
padding-top: 0.8125em;
|
||||
padding-bottom: 0.8125em;
|
||||
padding-left: calc(0.875em - 1px);
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--tainacan-gray1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -942,6 +960,7 @@
|
|||
|
||||
&.has-only-one-column {
|
||||
max-width: 100%;
|
||||
border-right: none;
|
||||
|
||||
ul {
|
||||
-moz-column-count: 2;
|
||||
|
|
@ -1036,6 +1055,7 @@
|
|||
|
||||
.tainacan-checkbox-search-section {
|
||||
margin-bottom: 0;
|
||||
|
||||
.control {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1176,7 +1196,7 @@
|
|||
@media screen and (max-width: 768px) {
|
||||
|
||||
.tainacan-modal-checkbox-list-body,
|
||||
.tainacan-finder-column.has-only-one-column,
|
||||
.tainacan-finder-column.has-only-one-column ul,
|
||||
.tainacan-modal-checkbox-search-results-body {
|
||||
-moz-column-count: auto;
|
||||
-webkit-column-count: auto;
|
||||
|
|
@ -1188,6 +1208,7 @@
|
|||
}
|
||||
.tainacan-finder-columns-container {
|
||||
max-height: calc(100vh - 140px - 56px);
|
||||
|
||||
.tainacan-finder-column,
|
||||
.tainacan-finder-column ul {
|
||||
max-height: 100%;
|
||||
|
|
|
|||
|
|
@ -61,15 +61,21 @@ body.tainacan-admin-page #wp-auth-check-wrap {
|
|||
#tainacan-admin-app * {
|
||||
// For Firefox
|
||||
scrollbar-color: var(--tainacan-gray3) transparent;
|
||||
scrollbar-width: thin;
|
||||
|
||||
// For Chromium and related
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4em;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--tainacan-gray3);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 770px) {
|
||||
// For Firefox
|
||||
scrollbar-width: thin;
|
||||
|
||||
// For Chromium and related
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tainacan Loading
|
||||
|
|
|
|||
Loading…
Reference in New Issue