Adapts tabs and footer buttons to mobile app mode.
This commit is contained in:
mateuswetah
parent
6e45845dd7
commit
f6d12932a4
|
|
@ -177,41 +177,6 @@
|
|||
v-html="getBeginRightForm"/>
|
||||
</template>
|
||||
|
||||
<div class="columns">
|
||||
|
||||
<!-- Comment Status ------------------------ -->
|
||||
<div
|
||||
class="column is-narrow"
|
||||
v-if="collection && collection.allow_comments && collection.allow_comments == 'open' && !$adminOptions.hideItemEditionCommentsToggle">
|
||||
<div class="section-label">
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i class="tainacan-icon tainacan-icon-comment"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_comments') }}
|
||||
</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'comment_status')"
|
||||
:message="$i18n.getHelperMessage('items', 'comment_status')"/>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left: 2em;"
|
||||
class="section-status">
|
||||
<div class="field has-addons">
|
||||
<b-switch
|
||||
id="tainacan-checkbox-comment-status"
|
||||
size="is-small"
|
||||
true-value="open"
|
||||
false-value="closed"
|
||||
v-model="form.comment_status">
|
||||
{{ $i18n.get('label_allow_comments') }}
|
||||
</b-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="b-tabs">
|
||||
<nav
|
||||
v-if="tabs.length >= 2"
|
||||
|
|
@ -527,6 +492,44 @@
|
|||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!$adminOptions.mobileAppMode"
|
||||
style="margin: 0.75rem 0 2rem;"
|
||||
class="columns">
|
||||
|
||||
<!-- Comment Status ------------------------ -->
|
||||
<div
|
||||
class="column is-narrow"
|
||||
v-if="collection && collection.allow_comments && collection.allow_comments == 'open' && !$adminOptions.hideItemEditionCommentsToggle">
|
||||
<div class="section-label">
|
||||
<label>
|
||||
<span class="icon has-text-gray4">
|
||||
<i class="tainacan-icon tainacan-icon-comment"/>
|
||||
</span>
|
||||
{{ $i18n.get('label_comments') }}
|
||||
</label>
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('items', 'comment_status')"
|
||||
:message="$i18n.getHelperMessage('items', 'comment_status')"/>
|
||||
</div>
|
||||
<div
|
||||
style="margin-left: 2em;"
|
||||
class="section-status">
|
||||
<div class="field has-addons">
|
||||
<b-switch
|
||||
id="tainacan-checkbox-comment-status"
|
||||
size="is-small"
|
||||
true-value="open"
|
||||
false-value="closed"
|
||||
v-model="form.comment_status">
|
||||
{{ $i18n.get('label_allow_comments') }}
|
||||
</b-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -669,7 +672,6 @@
|
|||
:current-user-can-delete="item && item.current_user_can_delete"
|
||||
:current-user-can-publish="collection && collection.current_user_can_publish_items"
|
||||
:is-editing-item-metadata-inside-iframe="isEditingItemMetadataInsideIframe"
|
||||
:visibility="visibility"
|
||||
@onSubmit="onSubmit"
|
||||
@onDiscard="onDiscard"
|
||||
@onPrevInSequence="onPrevInSequence"
|
||||
|
|
@ -752,7 +754,6 @@ export default {
|
|||
metadataCollapses: [],
|
||||
metadataSectionCollapses: [],
|
||||
collapseAll: true,
|
||||
visibility: !this.$adminOptions.hideItemEditionStatusPublishOption ? 'publish' : 'private',
|
||||
form: {
|
||||
collectionId: Number,
|
||||
status: '',
|
||||
|
|
@ -1198,7 +1199,6 @@ export default {
|
|||
this.initializeMediaFrames();
|
||||
|
||||
// Pre-fill status with publish to incentivate it
|
||||
this.visibility = !this.$adminOptions.hideItemEditionStatusPublishOption ? 'publish' : 'private';
|
||||
this.form.status = 'auto-draft'
|
||||
this.form.document = this.item.document;
|
||||
this.form.document_type = this.item.document_type;
|
||||
|
|
@ -1631,9 +1631,6 @@ export default {
|
|||
if (this.form.document_options !== undefined && this.form.document_options['forced_iframe_height'] !== undefined)
|
||||
this.urlIframeHeight = this.form.document_options['forced_iframe_height'];
|
||||
|
||||
if (this.item.status == 'publish' || this.item.status == 'private')
|
||||
this.visibility = this.item.status;
|
||||
|
||||
this.loadMetadata();
|
||||
this.setLastUpdated(this.item.modification_date);
|
||||
|
||||
|
|
@ -1767,14 +1764,44 @@ export default {
|
|||
|
||||
<style lang="scss">
|
||||
|
||||
.tainacan-admin-collection-mobile-app-mode .page-container.item-edition-container,
|
||||
.tainacan-admin-collection-mobile-app-mode .page-container.item-creation-container {
|
||||
padding-top: 0px;
|
||||
.tainacan-admin-collection-mobile-app-mode {
|
||||
.page-container.item-edition-container,
|
||||
.page-container.item-creation-container {
|
||||
padding-top: 0px;
|
||||
}
|
||||
.column.main-column {
|
||||
padding-top: 0.75em !important;
|
||||
}
|
||||
.b-tabs {
|
||||
#tainacanTabsSwiper {
|
||||
background-color: var(--tainacan-gray1);
|
||||
--tainacan-background-color: var(--tainacan-gray1);
|
||||
position: sticky;
|
||||
top: 56px;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
background-color: transparent !important;
|
||||
pointer-events: none;
|
||||
|
||||
.item-edition-footer-dropdown {
|
||||
pointer-events: all;
|
||||
}
|
||||
.button {
|
||||
pointer-events: all;
|
||||
box-shadow: 2px 2px 12px -8px var(--tainacan-gray5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-container.item-edition-container,
|
||||
.page-container.item-creation-container {
|
||||
padding: var(--tainacan-container-padding) 0px 0px 0px;
|
||||
padding: 0px 0px 60px 0px;
|
||||
height: calc(100% + 42px);
|
||||
|
||||
.tainacan-page-title {
|
||||
margin-top: var(--tainacan-container-padding);
|
||||
}
|
||||
|
||||
&>.tainacan-form {
|
||||
margin-bottom: 60px;
|
||||
|
|
|
|||
|
|
@ -29,19 +29,23 @@
|
|||
<!-- Item is an autodraft (item creation) -->
|
||||
<template v-if="(status == 'auto-draft' || status == undefined)">
|
||||
<button
|
||||
v-if="!$adminOptions.mobileAppMode"
|
||||
@click="$emit('onDiscard')"
|
||||
type="button"
|
||||
class="button is-outlined">{{ $i18n.get('label_discard') }}</button>
|
||||
<button
|
||||
@click="openItemCreationStatusDialog"
|
||||
type="button"
|
||||
class="button is-secondary">{{ $i18n.get('label_create_item') }}</button>
|
||||
class="button is-secondary"
|
||||
:style="{ marginLeft: $adminOptions.mobileAppMode ? 'auto' : '0.5em' }">{{ $i18n.get('label_create_item') }}</button>
|
||||
</template>
|
||||
|
||||
<!-- Item is public, draft or private -->
|
||||
<template v-else>
|
||||
|
||||
<!-- Send items to Trash -->
|
||||
<button
|
||||
v-if="!isOnSequenceEdit && currentUserCanDelete"
|
||||
v-if="!isOnSequenceEdit && currentUserCanDelete && !$adminOptions.mobileAppMode"
|
||||
@click="$emit('onSubmit', 'trash')"
|
||||
type="button"
|
||||
class="button is-outlined">
|
||||
|
|
@ -49,18 +53,21 @@
|
|||
<span v-else>{{ $i18n.get('status_trash') }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Update dropdown with -->
|
||||
<b-dropdown
|
||||
v-if="!$adminOptions.hideItemEditionStatusOption"
|
||||
ref="item-edition-footer-dropdown"
|
||||
:triggers="['contextmenu']"
|
||||
aria-role="list"
|
||||
animation="item-appear"
|
||||
:mobile-modal="false"
|
||||
position="is-top-left"
|
||||
class="item-edition-footer-dropdown">
|
||||
class="item-edition-footer-dropdown"
|
||||
:style="{ marginLeft: $adminOptions.mobileAppMode ? 'auto' : '0.5em' }">
|
||||
<template #trigger>
|
||||
<button
|
||||
:disabled="hasSomeError && (status == 'publish' || status == 'private')"
|
||||
@click="!$adminOptions.mobileAppMode ? $emit(
|
||||
@click="!$adminOptions.mobileAppMode && !isMobileScreen ? $emit(
|
||||
'onSubmit',
|
||||
( currentUserCanPublish && !$adminOptions.hideItemEditionStatusPublishOption ) ? status : 'draft',
|
||||
( (isOnSequenceEdit && !isCurrentItemOnSequenceEdit) ? 'next' : null)
|
||||
|
|
@ -128,6 +135,20 @@
|
|||
{{ status == 'publish' ? $i18n.get('label_update_as_public') : $i18n.get('label_verb_publish') }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
||||
<!-- In case we do not want to show status, just an update button -->
|
||||
<button
|
||||
v-else
|
||||
:disabled="hasSomeError && (status == 'publish' || status == 'private')"
|
||||
@click="$emit('onSubmit', status)"
|
||||
type="button"
|
||||
class="button"
|
||||
:class="{
|
||||
'is-success': status == 'publish' || status == 'private',
|
||||
'is-secondary': status == 'draft'
|
||||
}">
|
||||
{{ $i18n.get('label_update') }}
|
||||
</button>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
@ -176,8 +197,7 @@ export default {
|
|||
hasSomeError: Boolean,
|
||||
currentUserCanDelete: Boolean,
|
||||
currentUserCanPublish: Boolean,
|
||||
isEditingItemMetadataInsideIframe: Boolean,
|
||||
visibility: String
|
||||
isEditingItemMetadataInsideIframe: Boolean
|
||||
},
|
||||
mounted() {
|
||||
this.$parent.$on('toggleItemEditionFooterDropdown', () => {
|
||||
|
|
@ -197,6 +217,7 @@ export default {
|
|||
canCancel: false,
|
||||
props: {
|
||||
icon: 'item',
|
||||
currentUserCanPublish: this.currentUserCanPublish,
|
||||
onConfirm: (selectedStatus) => {
|
||||
this.$emit('onSubmit', selectedStatus);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<div class="status-radios">
|
||||
<b-radio
|
||||
v-model="selectedStatus"
|
||||
v-for="(statusOption, index) of $statusHelper.getStatuses().filter((status) => status.slug != 'trash')"
|
||||
v-for="(statusOption, index) of availableStatus"
|
||||
:key="index"
|
||||
:native-value="statusOption.slug">
|
||||
<span class="icon has-text-gray">
|
||||
|
|
@ -72,6 +72,7 @@
|
|||
name: 'ItemCreationStatusDialog',
|
||||
props: {
|
||||
icon: String,
|
||||
currentUserCanPublish: Boolean,
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => {}
|
||||
|
|
@ -79,7 +80,20 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
selectedStatus: 'publish'
|
||||
selectedStatus: !this.$adminOptions.hideItemEditionStatusPublishOption ? 'publish' : 'private'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
availableStatus() {
|
||||
return this.$statusHelper.getStatuses().filter((status) => {
|
||||
if (
|
||||
status.slug != 'trash' &&
|
||||
( ( this.currentUserCanPublish && !this.$adminOptions.hideItemEditionStatusPublishOption ) || status.slug != 'publish' )
|
||||
)
|
||||
return true;
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -120,5 +134,30 @@
|
|||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.modal-card {
|
||||
padding: 2rem 0.875rem 0.875rem;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.modal-custom-icon {
|
||||
display: none !important;
|
||||
}
|
||||
.modal-card-body {
|
||||
padding: 0 1.25rem !important;
|
||||
}
|
||||
.status-radios {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.status-radios .b-radio {
|
||||
margin-bottom: 0.5rem !important;
|
||||
font-size: 1.125rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.status-radios .b-radio::not(:last-child) {
|
||||
border-bottom: 1px solid var(--tainacan-gray2);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,16 @@
|
|||
{{ $i18n.get('status_' + item.status) }}
|
||||
</span>
|
||||
{{ $i18n.get('title_item_page') + ' ' }}
|
||||
<span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}</span>
|
||||
<span style="font-weight: 600;">{{ (item != null && item != undefined) ? item.title : '' }}
|
||||
</span>
|
||||
<span
|
||||
v-if="(item != null && item != undefined && item.status != undefined && item.status != 'autodraft' && !isLoading)"
|
||||
class="icon has-text-gray4">
|
||||
<i
|
||||
class="tainacan-icon tainacan-icon-1em"
|
||||
:class="$statusHelper.getIcon(item.status)"
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
</tainacan-title>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue