-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Separated out project list to other component.
Opened project is saved using session storage. Added a message for when no project could be loaded when going into /editor route. Fixed library not showing images correctly and a type error. Moved creating and opening projects to project store. Fixed projects not being able to load when a media item associated with it is unavailable. Added more functionality to library items.
- Loading branch information
Showing
10 changed files
with
382 additions
and
210 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
113 changes: 113 additions & 0 deletions
113
packages/safelight/src/components/Editor/Library/LibraryItem.vue
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,113 @@ | ||
| <template> | ||
| <div class="bg-checkerboard flex aspect-video w-full items-center justify-center"> | ||
| <img | ||
| v-if="$props.item.previewImage.value" | ||
| class="max-h-full max-w-full rounded-t-md" | ||
| :aria-label="'Preview image for ' + $props.item.name.value" | ||
| :src="$props.item.previewImage.value" | ||
| /> | ||
| <Skeleton | ||
| v-else | ||
| class="max-h-full max-w-full rounded-none rounded-t-md" | ||
| height="100%" | ||
| width="100%" | ||
| /> | ||
| </div> | ||
| <div class="flex items-center gap-1 px-1"> | ||
| <p | ||
| v-tooltip.bottom="{ value: $props.item.name.value, showDelay: 500 }" | ||
| class="flex-1 overflow-x-hidden overflow-ellipsis whitespace-nowrap text-base" | ||
| > | ||
| {{ $props.item.name.value }} | ||
| </p> | ||
| <Button | ||
| title="Options" | ||
| text | ||
| rounded | ||
| severity="secondary" | ||
| aria-haspopup="true" | ||
| aria-controls="library_item_menu" | ||
| @click="overlay?.show" | ||
| > | ||
| <template #icon> | ||
| <PhDotsThreeVertical size="20" /> | ||
| </template> | ||
| </Button> | ||
| </div> | ||
| <OverlayPanel id="library_item_menu" ref="overlay"> | ||
| <Toolbar> | ||
| <template #center> | ||
| <Button | ||
| v-tooltip.bottom="{ value: 'Delete', showDelay: 500 }" | ||
| severity="contrast" | ||
| text | ||
| :disabled="hasItemInTimeline" | ||
| @click="alertt('yea no')" | ||
| > | ||
| <template #icon> | ||
| <PhTrash /> | ||
| </template> | ||
| </Button> | ||
| </template> | ||
| </Toolbar> | ||
| <Menu :model="menuItems" /> | ||
| </OverlayPanel> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import { PhTrash, type PhDotsThreeVertical } from '@phosphor-icons/vue'; | ||
| import type Media from '@safelight/shared/Media/Media'; | ||
| import type Menu from 'primevue/menu'; | ||
| import type { MenuItem } from 'primevue/menuitem'; | ||
| import type OverlayPanel from 'primevue/overlaypanel'; | ||
| const props = defineProps<{ | ||
| item: Media; | ||
| }>(); | ||
| const project = useProject(); | ||
| const menuItems = ref<MenuItem[]>([ | ||
| { | ||
| label: 'Temp' | ||
| } | ||
| ]); | ||
| // My god | ||
| // TODO: Not this | ||
| const hasItemInTimeline = computed(() => { | ||
| console.log('A'); | ||
| return project.project | ||
| ? project.project.timelines.some( | ||
| (t) => | ||
| t.isSimpleTimeline() && | ||
| t.items.some( | ||
| (i) => | ||
| i.isBaseTimelineItem() && | ||
| i.isVideo() && | ||
| i.media.value?.id == props.item.id | ||
| ) | ||
| ) | ||
| : false; | ||
| }); | ||
| const alertt = (text: string) => window.alert(text); | ||
| const overlay = ref<OverlayPanel>(); | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| #library_item_menu .p-overlaypanel-content { | ||
| padding: 0 !important; | ||
| > .p-menu { | ||
| border: none; | ||
| } | ||
| > .p-toolbar { | ||
| @apply border-surface-100/10 rounded-b-none p-1; | ||
| border-top-width: 0; | ||
| border-left-width: 0; | ||
| border-right-width: 0; | ||
| } | ||
| } | ||
| </style> |
74 changes: 74 additions & 0 deletions
74
packages/safelight/src/components/Menu/ProjectList/ProjectList.vue
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,74 @@ | ||
| <template> | ||
| <DataTable :value="projects" :loading> | ||
| <template #header> | ||
| <div class="align-items-center justify-content-between flex flex-wrap gap-2"> | ||
| <h2 class="m-0 flex-1">Projects</h2> | ||
| <Button rounded title="Refresh list" @click="loadList()"> | ||
| <template #icon> | ||
| <PhArrowsClockwise size="18" /> | ||
| </template> | ||
| </Button> | ||
| <SplitButton | ||
| label="New project" | ||
| rounded | ||
| :model="projectTypes" | ||
| @click="project.new.newSimpleProject()" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <Column field="name" header="Project" /> | ||
| <Column field="type" header="Type" /> | ||
| <Column header="Modified"> | ||
| <template #body="slotProps"> | ||
| {{ formatDateTime((slotProps.data as StoredProject).updated) }} | ||
| </template> | ||
| </Column> | ||
| <Column> | ||
| <template #body="slotProps"> | ||
| <Button @click="project.openProject(slotProps.data)">Open</Button> | ||
| </template> | ||
| </Column> | ||
| </DataTable> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { Storage, type StoredProject } from '@safelight/shared/base/Storage'; | ||
| import { DateTime } from 'luxon'; | ||
| import type { MenuItem } from 'primevue/menuitem'; | ||
| const project = useProject(); | ||
| const projectTypes: MenuItem[] = [ | ||
| { | ||
| label: 'Simple', | ||
| command: project.new.newSimpleProject | ||
| }, | ||
| { label: 'Test', command() {} } | ||
| ] as const; | ||
| const projects = ref<StoredProject[]>([]); | ||
| const loading = ref(true); | ||
| onMounted(() => { | ||
| loadList(); | ||
| }); | ||
| function loadList() { | ||
| loading.value = true; | ||
| Storage.getProjects() | ||
| .then((p) => { | ||
| projects.value = p; | ||
| }) | ||
| .catch((err) => { | ||
| console.error(err); | ||
| }) | ||
| .finally(() => { | ||
| loading.value = false; | ||
| }); | ||
| } | ||
| function formatDateTime(dt: string) { | ||
| const date = DateTime.fromISO(dt).toLocal(); | ||
| return date.toLocaleString({ dateStyle: 'long', timeStyle: 'short' }); | ||
| } | ||
| </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
Oops, something went wrong.