dynamically load gallery

This commit is contained in:
Henry Jameson 2026-06-04 18:27:09 +03:00
commit 3aca1ce6c0
7 changed files with 24 additions and 15 deletions

View file

@ -1,9 +1,9 @@
import { mapState as mapPiniaState } from 'pinia'
import { mapGetters, mapState } from 'vuex'
import { defineAsyncComponent } from 'vue'
import Attachment from 'src/components/attachment/attachment.vue'
import ChatMessageDate from 'src/components/chat_message_date/chat_message_date.vue'
import Gallery from 'src/components/gallery/gallery.vue'
import LinkPreview from 'src/components/link-preview/link-preview.vue'
import Popover from 'src/components/popover/popover.vue'
import StatusContent from 'src/components/status_content/status_content.vue'
@ -34,7 +34,9 @@ const ChatMessage = {
Attachment,
StatusContent,
UserAvatar,
Gallery,
Gallery: defineAsyncComponent(
() => import( 'src/components/gallery/gallery.vue'),
),
LinkPreview,
ChatMessageDate,
UserPopover,

View file

@ -1,7 +1,6 @@
import { cloneDeep } from 'lodash'
import { defineAsyncComponent } from 'vue'
import Gallery from 'src/components/gallery/gallery.vue'
import StatusContent from 'src/components/status_content/status_content.vue'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
@ -24,7 +23,9 @@ const Draft = {
),
StatusContent,
Gallery,
Gallery: defineAsyncComponent(
() => import( 'src/components/gallery/gallery.vue')
),
},
props: {
draft: {

View file

@ -39,7 +39,7 @@
class="faint"
>{{ $t('drafts.empty') }}</p>
</span>
<gallery
<Gallery
v-if="draft.files?.length !== 0"
class="attachments media-body"
:compact="true"

View file

@ -1,17 +1,15 @@
import { debounce, map, reject, uniqBy } from 'lodash'
import { mapActions, mapState } from 'pinia'
import { mapGetters } from 'vuex'
import { defineAsyncComponent } from 'vue'
import Attachment from 'src/components/attachment/attachment.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
import suggestor from 'src/components/emoji_input/suggestor.js'
import Gallery from 'src/components/gallery/gallery.vue'
import MediaUpload from 'src/components/media_upload/media_upload.vue'
import PollForm from 'src/components/poll/poll_form.vue'
import Popover from 'src/components/popover/popover.vue'
import QuoteForm from 'src/components/quote/quote_form.vue'
import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
import Select from 'src/components/select/select.vue'
import StatusContent from 'src/components/status_content/status_content.vue'
@ -141,14 +139,20 @@ const PostStatusForm = {
components: {
MediaUpload,
EmojiInput,
PollForm,
QuoteForm,
PollForm: defineAsyncComponent(
() => import( 'src/components/poll/poll_form.vue')
),
QuoteForm: defineAsyncComponent(
() => import( 'src/components/quote/quote_form.vue')
),
ScopeSelector,
Checkbox,
Select,
Attachment,
StatusContent,
Gallery,
Gallery: defineAsyncComponent(
() => import( 'src/components/gallery/gallery.vue')
),
DraftCloser,
Popover,
},

View file

@ -396,7 +396,7 @@
/>
</button>
</div>
<gallery
<Gallery
v-if="newStatus.files && newStatus.files.length > 0"
class="attachments"
:grid="true"

View file

@ -1,9 +1,9 @@
import { mapState as mapPiniaState } from 'pinia'
import { mapGetters, mapState } from 'vuex'
import { defineAsyncComponent } from 'vue'
import StatusBody from 'src/components/status_body/status_body.vue'
import Attachment from '../attachment/attachment.vue'
import Gallery from '../gallery/gallery.vue'
import LinkPreview from '../link-preview/link-preview.vue'
import Poll from '../poll/poll.vue'
@ -132,7 +132,9 @@ const StatusContent = {
components: {
Attachment,
Poll,
Gallery,
Gallery: defineAsyncComponent(
() => import( 'src/components/gallery/gallery.vue')
),
LinkPreview,
StatusBody,
},

View file

@ -34,7 +34,7 @@
/>
</div>
<gallery
<Gallery
v-if="status.attachments.length !== 0"
class="attachments media-body"
:compact="compact"