-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #253 from SpeciesFileGroup/development
Add pinpoint lib for keys
- Loading branch information
Showing
7 changed files
with
511 additions
and
226 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <template> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke-width="1.5" | ||
| stroke="currentColor" | ||
| > | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" | ||
| /> | ||
| </svg> | ||
| </template> |
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,15 @@ | ||
| <template> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke-width="1.5" | ||
| stroke="currentColor" | ||
| > | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" | ||
| /> | ||
| </svg> | ||
| </template> |
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,52 @@ | ||
| <template> | ||
| <VButton | ||
| primary | ||
| class="!px-1 py-1 rounded-full" | ||
| title="Metadata" | ||
| @click="isModalVisible = true" | ||
| > | ||
| <IconInformation class="w-4 h-4" /> | ||
| </VButton> | ||
| <VModal | ||
| v-if="isModalVisible" | ||
| @close="() => (isModalVisible = false)" | ||
| > | ||
| <template #header> | ||
| <h3 class="font-medium">Metadata</h3> | ||
| </template> | ||
| <div class="p-4 pt-0"> | ||
| <VTable> | ||
| <VTableHeader> | ||
| <VTableHeaderRow> | ||
| <VTableHeaderCell>Data</VTableHeaderCell> | ||
| <VTableHeaderCell></VTableHeaderCell> | ||
| </VTableHeaderRow> | ||
| </VTableHeader> | ||
| <VTableBody> | ||
| <VTableBodyRow | ||
| v-for="[key, value] in Object.entries(metadata)" | ||
| :key="key" | ||
| > | ||
| <VTableBodyCell class="capitalize"> | ||
| {{ key.replaceAll('_', ' ') }} | ||
| </VTableBodyCell> | ||
| <VTableBodyCell>{{ value }}</VTableBodyCell> | ||
| </VTableBodyRow> | ||
| </VTableBody> | ||
| </VTable> | ||
| </div> | ||
| </VModal> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref } from 'vue' | ||
| defineProps({ | ||
| metadata: { | ||
| type: Object, | ||
| required: true | ||
| } | ||
| }) | ||
| const isModalVisible = ref(false) | ||
| </script> |
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,9 @@ | ||
| import keyId from '../views/keyId.vue' | ||
|
|
||
| export default [ | ||
| { | ||
| name: 'keys-id', | ||
| path: '/keys/:id', | ||
| component: keyId | ||
| } | ||
| ] |
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,151 @@ | ||
| <template> | ||
| <div class="flex flex-col h-full container mx-auto"> | ||
| <ClientOnly> | ||
| <VuePinpoint | ||
| ref="pinpoint" | ||
| v-bind="options" | ||
| > | ||
| <template #title="{ metadata }"> | ||
| <div class="flex gap-2 justify-center items-center"> | ||
| <h1>{{ metadata.title }}</h1> | ||
| <MetadataModal :metadata="metadata" /> | ||
| </div> | ||
| </template> | ||
| <template #button-up-label> | ||
| <div class="flex gap-2 items-center"> | ||
| <IconArrowUp class="h-3" /> Back <IconArrowUp class="h-3" /> | ||
| </div> | ||
| </template> | ||
| <template #target="{ id, label }"> | ||
| <RouterLink | ||
| :to="{ name: 'otus-id', params: { id } }" | ||
| v-html="label" | ||
| /> | ||
| </template> | ||
| </VuePinpoint> | ||
| </ClientOnly> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { useRoute } from 'vue-router' | ||
| import { ref } from 'vue' | ||
| import { VuePinpoint } from '@sfgrp/pinpoint' | ||
| import '@sfgrp/pinpoint/dist/pinpoint.css' | ||
| import MetadataModal from '../components/MetadataModal.vue' | ||
| const route = useRoute() | ||
| const options = ref({ | ||
| leadId: route.params.id, | ||
| baseUrl: __APP_ENV__.url, | ||
| projectToken: __APP_ENV__.project_token | ||
| }) | ||
| </script> | ||
|
|
||
| <style> | ||
| .pinpoint-app { | ||
| @apply py-4 flex flex-col gap-4; | ||
| ul { | ||
| @apply ml-4; | ||
| } | ||
| } | ||
| .pinpoint-tree { | ||
| @apply pb-1; | ||
| li { | ||
| @apply text-secondary-color; | ||
| } | ||
| } | ||
| .pinpoint-previous-list-item { | ||
| @apply text-secondary-color; | ||
| } | ||
| .pinpoint-previous-couplets { | ||
| h2 { | ||
| @apply px-5; | ||
| @apply p-4 pl-5 pr-5 border-b font-medium border-base-muted flex justify-between; | ||
| } | ||
| } | ||
| .pinpoint-previous-list { | ||
| @apply py-4 px-1; | ||
| } | ||
| .pinpoint-couplet { | ||
| @apply flex flex-col gap-4; | ||
| } | ||
| .pinpoint-couplet-container { | ||
| @apply flex flex-col justify-center items-center; | ||
| } | ||
| .pinpoint-couplet-node { | ||
| h1 { | ||
| @apply px-5; | ||
| @apply p-4 pl-5 pr-5 border-b font-medium border-base-muted flex justify-between; | ||
| } | ||
| div { | ||
| display: none; | ||
| } | ||
| } | ||
| .pinpoint-node-container { | ||
| @apply px-5; | ||
| h3 { | ||
| @apply text-lg text-center my-4; | ||
| } | ||
| } | ||
| .pinpoint-button-go { | ||
| display: none; | ||
| } | ||
| .pinpoint-button-up { | ||
| @apply px-3 py-1 hover:bg-opacity-80 bg-primary-color text-primary-content text-sm items-center; | ||
| } | ||
| pinpoint-button-up::before { | ||
| content: 's'; | ||
| } | ||
| .pinpoint-node-target { | ||
| @apply my-4; | ||
| } | ||
| .pinpoint-key-title { | ||
| @apply text-center text-xl; | ||
| } | ||
| .pinpoint-couplet-node, | ||
| .pinpoint-previous-couplets, | ||
| .pinpoint-node, | ||
| .pinpoint-node-container { | ||
| @apply border-base-muted bg-base-foreground print:shadow-none print:border-0 rounded; | ||
| box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; | ||
| border: 1px solid rgba(98, 105, 118, 0.16); | ||
| transition: transform 0.3s ease-out, opacity 0.3s ease-out, | ||
| box-shadow 0.3s ease-out; | ||
| } | ||
| .pinpoint-node { | ||
| @apply px-4; | ||
| } | ||
| .pinpoint-couplet-node { | ||
| @apply w-1/2; | ||
| .pinpoint-node-target { | ||
| @apply mx-5; | ||
| } | ||
| } | ||
| .pinpoint-couplet-children-container { | ||
| @apply gap-4; | ||
| @apply grid-cols-1; | ||
| @apply md:grid-cols-[repeat(auto-fit,minmax(100px,1fr))]; | ||
| } | ||
| </style> |