-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5220c7b
commit 274d439
Showing
6 changed files
with
206 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <template> | ||
| <dialog ref="dialog" class="modal-window text-light"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <slot name="header" /> | ||
| <button | ||
| type="button" | ||
| class="btn-close" | ||
| aria-label="Close" | ||
| @click="$emit('close')" | ||
| ></button> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <slot /> | ||
| </div> | ||
| </div> | ||
| </dialog> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref, watch } from 'vue'; | ||
| defineEmits<{ | ||
| (e: 'close'): void; | ||
| }>(); | ||
| const props = defineProps<{ | ||
| show: boolean; | ||
| }>(); | ||
| const dialog = ref<HTMLDialogElement>(); | ||
| watch( | ||
| () => props.show, | ||
| (newValue) => { | ||
| if (newValue) { | ||
| dialog.value?.showModal(); | ||
| } else { | ||
| dialog.value?.close(); | ||
| } | ||
| }, | ||
| ); | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"> | ||
| @import '~/assets/css/bootstrap/_config.scss'; | ||
| dialog.modal-window { | ||
| --bs-modal-zindex: #{$zindex-modal}; | ||
| --bs-modal-width: #{$modal-md}; | ||
| --bs-modal-padding: #{$modal-inner-padding}; | ||
| --bs-modal-margin: #{$modal-dialog-margin}; | ||
| --bs-modal-color: #{$modal-content-color}; | ||
| --bs-modal-bg: #{$modal-content-bg}; | ||
| --bs-modal-border-color: #{$modal-content-border-color}; | ||
| --bs-modal-border-width: #{$modal-content-border-width}; | ||
| --bs-modal-border-radius: #{$modal-content-border-radius}; | ||
| --bs-modal-box-shadow: #{$modal-content-box-shadow-xs}; | ||
| --bs-modal-inner-border-radius: #{$modal-content-inner-border-radius}; | ||
| --bs-modal-header-padding-x: #{$modal-header-padding-x}; | ||
| --bs-modal-header-padding-y: #{$modal-header-padding-y}; | ||
| --bs-modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y | ||
| --bs-modal-header-border-color: #{$modal-header-border-color}; | ||
| --bs-modal-header-border-width: #{$modal-header-border-width}; | ||
| --bs-modal-title-line-height: #{$modal-title-line-height}; | ||
| --bs-modal-footer-gap: #{$modal-footer-margin-between}; | ||
| --bs-modal-footer-bg: #{$modal-footer-bg}; | ||
| --bs-modal-footer-border-color: #{$modal-footer-border-color}; | ||
| --bs-modal-footer-border-width: #{$modal-footer-border-width}; | ||
| --bs-backdrop-zindex: #{$zindex-modal-backdrop}; | ||
| --bs-backdrop-bg: #{$modal-backdrop-bg}; | ||
| --bs-backdrop-opacity: #{$modal-backdrop-opacity}; | ||
| padding: 0; | ||
| border: 0; | ||
| background: none; | ||
| min-width: var(--bs-modal-width); | ||
| width: 60%; | ||
| &::backdrop { | ||
| background: var(--bs-backdrop-bg); | ||
| opacity: var(--bs-backdrop-opacity); | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,90 @@ | ||
| <template> | ||
| <div v-if="!isLoaded" id="container"> | ||
| <div id="dialog"> | ||
| <div v-if="project" class="text-light"> | ||
| <ViewMenuBar /> | ||
| <div class="project"> | ||
| <div class="rows"> | ||
| <ViewProjectRow | ||
| v-for="row in project.data.rows" | ||
| :key="row.id" | ||
| :row="row" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <ViewBackpack /> | ||
| <ViewSearch /> | ||
| </div> | ||
| <div v-else class="dialog-container"> | ||
| <div class="dialog bg-dark-subtle text-light"> | ||
| <h5>Default Files</h5> | ||
| <ul class="list-group mb-3"> | ||
| <li class="list-group-item"> | ||
| <a | ||
| href="https://raw.githubusercontent.com/ltouroumov/worm-cyoa-v6-fork/master/project-v17.json" | ||
| @click.prevent="loadRemoteFile" | ||
| > | ||
| Worm V6 (Lt's Fork) | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| <div | ||
| v-if="isLoading" | ||
| class="d-flex align-items-center justify-content-start gap-3 mb-3" | ||
| > | ||
| <div class="spinner-border text-primary" role="status"> | ||
| <span class="visually-hidden">Loading...</span> | ||
| </div> | ||
| <strong>Loading ...</strong> | ||
| </div> | ||
|
|
||
| <h5>Load File</h5> | ||
| <LoadProject /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useProjectStore } from '~/composables/store/project'; | ||
| import { ref } from '#imports'; | ||
| import ViewBackpack from '~/components/viewer/modal/ViewBackpack.vue'; | ||
| import ViewSearch from '~/components/viewer/modal/ViewSearch.vue'; | ||
| import ViewMenuBar from '~/components/viewer/ViewMenuBar.vue'; | ||
| import { useProjectRefs, useProjectStore } from '~/composables/store/project'; | ||
| const { loadProject } = useProjectStore(); | ||
| const { project } = useProjectRefs(); | ||
| const isLoading = ref<boolean>(false); | ||
| const { isLoaded } = useProjectStore(); | ||
| const loadRemoteFile = async ({ target }: MouseEvent) => { | ||
| if (target && target instanceof HTMLAnchorElement) { | ||
| isLoading.value = true; | ||
| const fileURL = target.href; | ||
| const result: any = await $fetch(fileURL, { parseResponse: JSON.parse }); | ||
| loadProject(result, fileURL); | ||
| isLoading.value = false; | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| #container { | ||
| width: 100vw; | ||
| height: 100vh; | ||
| .project { | ||
| background: black; | ||
| color: white; | ||
| font-family: sans-serif; | ||
| padding: 0 1em; | ||
| } | ||
| .dialog-container { | ||
| min-height: 50vh; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| #dialog { | ||
| border: 2px solid black; | ||
| border-radius: 10px; | ||
| padding: 10px; | ||
| .dialog { | ||
| border: 2px solid black; | ||
| border-radius: 10px; | ||
| padding: 10px; | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.