Skip to content

Commit

Permalink
add generic fullscreen modal template for gallery modal
Browse files Browse the repository at this point in the history 
preparation for the fullscreen modal needed for #139
  • Loading branch information
@3vorp
3vorp committed Sep 14, 2024
1 parent 18f8389 commit 1799443
Show file tree
Hide file tree
Showing 5 changed files with 281 additions and 198 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"homepage": "https://github.com/Faithful-Resource-Pack/App#readme",
"dependencies": {
"@vitejs/plugin-vue2": "^2.3.1",
"axios": "^1.7.4",
"axios": "^1.7.7",
"d3": "7.9.0",
"dompurify": "^3.1.6",
"dotenv": "^16.4.5",
Expand All @@ -36,7 +36,7 @@
"pinia": "^2.2.2",
"prettier": "^3.3.3",
"prismjs": "~1.29.0",
"vite": "^5.4.1",
"vite": "^5.4.5",
"vue": "^2.7.16",
"vue-calendar-heatmap": "0.8.4",
"vue-graph": "0.8.7",
Expand All @@ -52,7 +52,7 @@
"chai": "^5.1.1",
"cors": "^2.8.5",
"env-cmd": "^10.1.0",
"express": "^4.19.2",
"express": "^4.21.0",
"mocha": "^10.7.3",
"nodemon": "^3.1.4",
"puppeteer": "^22.12.1"
Expand Down
67 changes: 67 additions & 0 deletions pages/components/fullscreen-modal.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<template>
<v-dialog
v-model="modalOpened"
fullscreen
hide-overlay
transition="dialog-bottom-transition"
@keydown.esc="closeModal"
>
<v-card>
<v-toolbar>
<v-btn icon @click.stop="closeModal">
<v-icon>mdi-close</v-icon>
</v-btn>
<v-toolbar-title v-if="loading">{{ $root.lang().global.loading }}</v-toolbar-title>
<template v-else>
<v-toolbar-title v-if="title">{{ title }}</v-toolbar-title>
<v-spacer v-if="$slots.toolbar" />
<slot name="toolbar" />
</template>
</v-toolbar>
<slot v-if="!loading" />
</v-card>
</v-dialog>
</template>

<script>
export default {
name: "fullscreen-modal",
props: {
value: {
type: Boolean,
required: true,
},
title: {
type: String,
required: false,
},
loading: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
modalOpened: false,
};
},
methods: {
closeModal() {
this.$emit("close");
},
},
watch: {
value: {
handler(n) {
this.modalOpened = n;
},
// has issues if the modal is open on page load otherwise
immediate: true,
},
modalOpened(n) {
this.$emit("input", n);
},
},
};
</script>
6 changes: 5 additions & 1 deletion pages/contribution/main.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,11 @@
class="my-0 pt-0"
small-chips
clearable
@newUser="(l) => { this.contributors = l }"
@newUser="
(l) => {
this.contributors = l;
}
"
/>
</v-col>
<v-col cols="12" sm="6" class="pb-0 py-sm-0">
Expand Down
137 changes: 67 additions & 70 deletions pages/gallery/modal/main.vue
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,70 @@
<template>
<v-dialog
<fullscreen-modal
v-model="modalOpened"
fullscreen
hide-overlay
transition="dialog-bottom-transition"
@keydown.esc="closeModal"
:loading="loading"
:title="modalTitle"
@close="closeModal"
>
<v-card>
<fullscreen-preview v-model="previewOpen" :src="clickedImage" :aspect-ratio="1 / 1" texture />

<v-toolbar>
<v-btn icon @click.stop="closeModal">
<v-icon>mdi-close</v-icon>
</v-btn>
<template v-if="Object.keys(textureObj).length > 0">
<v-toolbar-title>[#{{ textureID }}] {{ textureObj.texture.name }}</v-toolbar-title>

<v-spacer />

<v-btn icon @click="$emit('share', textureID)">
<v-icon>mdi-share-variant</v-icon>
</v-btn>
</template>
<template v-else>
<v-toolbar-title>{{ $root.lang().global.loading }}</v-toolbar-title>
</template>
</v-toolbar>

<template #toolbar>
<v-btn icon @click="$emit('share', textureID)">
<v-icon>mdi-share-variant</v-icon>
</v-btn>
</template>
<fullscreen-preview v-model="previewOpen" :src="clickedImage" :aspect-ratio="1 / 1" texture />
<div
v-if="Object.keys(textureObj).length > 0"
class="gallery-dialog-container d-sm-flex flex-column flex-sm-row pa-2 pa-sm-7"
>
<!-- image display -->
<div
v-if="Object.keys(textureObj).length > 0"
class="gallery-dialog-container d-sm-flex flex-column flex-sm-row pa-2 pa-sm-7"
class="gallery-dialog-textures d-sm-flex flex-row flex-sm-column overflow-auto mb-2 mb-sm-0 mx-n1 mx-sm-0"
>
<!-- image display -->
<div
class="gallery-dialog-textures d-sm-flex flex-row flex-sm-column overflow-auto mb-2 mb-sm-0 mx-n1 mx-sm-0"
>
<template v-for="group in grouped">
<div class="d-flex flex-row pb-2 pb-sm-0">
<div v-for="url in group" class="gallery-dialog-texture-container px-2 pb-sm-2" :key="url.name">
<gallery-image
modal
:src="url.image"
:textureID="textureID"
:ignoreList="ignoreList"
@click="openFullscreenPreview(url.image)"
>
<p>{{ $root.lang().gallery.error_message.texture_not_done }}</p>
</gallery-image>
<h2>{{ packToName[url.name] }}</h2>
</div>
<template v-for="group in grouped">
<div class="d-flex flex-row pb-2 pb-sm-0">
<div
v-for="url in group"
class="gallery-dialog-texture-container px-2 pb-sm-2"
:key="url.name"
>
<gallery-image
modal
:src="url.image"
:textureID="textureID"
:ignoreList="ignoreList"
@click="openFullscreenPreview(url.image)"
>
<p>{{ $root.lang().gallery.error_message.texture_not_done }}</p>
</gallery-image>
<h2>{{ packToName[url.name] }}</h2>
</div>
</template>
</div>
</div>
</template>
</div>

<!-- texture details -->
<div class="pl-sm-7">
<v-tabs id="info-tabs" v-model="selectedTab" :show-arrows="false">
<v-tabs-slider />
<!-- texture details -->
<div class="pl-sm-7">
<v-tabs id="info-tabs" v-model="selectedTab" :show-arrows="false">
<v-tabs-slider />

<v-tab v-for="tab in tabs" :key="tab" style="text-transform: uppercase">
{{ tab }}
</v-tab>
</v-tabs>
<v-tab v-for="tab in tabs" :key="tab" style="text-transform: uppercase">
{{ tab }}
</v-tab>
</v-tabs>

<v-tabs-items v-model="selectedTab" class="info-table">
<v-tab-item v-for="tab in tabs" :key="tab">
<texture-tab v-if="tab === tabs.information" :textureObj="textureObj" />
<author-tab
v-if="tab === tabs.authors"
:contributions="textureObj.contributions"
:packToName="packToName"
:discordIDtoName="discordIDtoName"
/>
</v-tab-item>
</v-tabs-items>
</div>
<v-tabs-items v-model="selectedTab" class="info-table">
<v-tab-item v-for="tab in tabs" :key="tab">
<texture-tab v-if="tab === tabs.information" :textureObj="textureObj" />
<author-tab
v-if="tab === tabs.authors"
:contributions="textureObj.contributions"
:packToName="packToName"
:discordIDtoName="discordIDtoName"
/>
</v-tab-item>
</v-tabs-items>
</div>
</v-card>
</v-dialog>
</div>
</fullscreen-modal>
</template>

<script>
Expand All @@ -86,6 +73,7 @@ import GalleryImage from "../gallery-image.vue";
import TextureTab from "./texture-tab.vue";
import AuthorTab from "./author-tab.vue";
import FullscreenPreview from "../../components/fullscreen-preview.vue";
import FullscreenModal from "../../components/fullscreen-modal.vue";
const PACK_GRID_ORDER = [
["default", "faithful_32x", "faithful_64x"],
Expand All @@ -108,6 +96,7 @@ export default {
components: {
GalleryImage,
FullscreenPreview,
FullscreenModal,
TextureTab,
AuthorTab,
},
Expand Down Expand Up @@ -173,6 +162,13 @@ export default {
}),
);
},
loading() {
return !Object.keys(this.textureObj).length;
},
modalTitle() {
if (this.loading) return this.$root.lang().global.loading;
return `[#${this.textureID}] ${this.textureObj.texture.name}`;
},
},
watch: {
textureID: {
Expand Down Expand Up @@ -203,6 +199,7 @@ export default {
handler(n) {
this.modalOpened = n;
},
// has issues if the modal is open on page load otherwise
immediate: true,
},
modalOpened(n) {
Expand Down
Loading

0 comments on commit 1799443

Please sign in to comment.