diff --git a/app/components/dropdown-menu.gjs b/app/components/dropdown-menu.gjs new file mode 100644 index 0000000..db1319a --- /dev/null +++ b/app/components/dropdown-menu.gjs @@ -0,0 +1,53 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import { on } from '@ember/modifier'; +import Icon from '#components/icon'; + +export default class DropdownMenu extends Component { + @tracked isOpen = false; + + @action + toggleMenu(e) { + e?.stopPropagation(); + this.isOpen = !this.isOpen; + } + + @action + closeMenu(e) { + e?.stopPropagation(); + this.isOpen = false; + } + + get triggerIcon() { + return this.args.triggerIcon || 'more-vertical'; + } + + +} diff --git a/app/components/photo-carousel.gjs b/app/components/photo-carousel.gjs index c4ffa07..866e764 100644 --- a/app/components/photo-carousel.gjs +++ b/app/components/photo-carousel.gjs @@ -33,6 +33,14 @@ export default class PhotoCarousel extends Component { return !this.canScrollRight; } + get isGalleryMain() { + return this.args.variant === 'gallery-main'; + } + + get isGalleryThumbnails() { + return this.args.variant === 'gallery-thumbnails'; + } + get variantClass() { return this.args.variant || 'inline'; } @@ -205,29 +213,47 @@ export default class PhotoCarousel extends Component { /> {{/if}} - {{#if photo.isLandscape}} - - {{#if photo.thumbUrl}} - - {{/if}} - {{@name}} - - {{else}} - {{! Portrait uses thumb everywhere if available }} + {{#if this.isGalleryMain}} + {{@name}} + {{else if this.isGalleryThumbnails}} {{@name}} + {{else}} + {{#if photo.isLandscape}} + + {{#if photo.thumbUrl}} + + {{/if}} + {{@name}} + + {{else}} + {{! Portrait uses thumb everywhere if available }} + {{@name}} + {{/if}} {{/if}} {{/each}} diff --git a/app/components/photo-gallery.gjs b/app/components/photo-gallery.gjs index 1cb1909..7bf9aca 100644 --- a/app/components/photo-gallery.gjs +++ b/app/components/photo-gallery.gjs @@ -1,11 +1,15 @@ import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; +import { inject as service } from '@ember/service'; import { action } from '@ember/object'; import { on } from '@ember/modifier'; -import Icon from './icon'; +import { fn } from '@ember/helper'; +import Icon from '#components/icon'; import PhotoCarousel from './photo-carousel'; +import DropdownMenu from '#components/dropdown-menu'; export default class PhotoGallery extends Component { + @service toast; @tracked currentPhoto = this.args.selectedPhoto || this.args.photos?.[0]; @action @@ -21,7 +25,8 @@ export default class PhotoGallery extends Component { if ( e.target.closest('.thumbnail-strip-container') || e.target.closest('.carousel-nav-btn') || - e.target.closest('.close-btn') + e.target.closest('.close-btn') || + e.target.closest('.actions-btn-container') ) { return; } @@ -41,6 +46,20 @@ export default class PhotoGallery extends Component { } } + @action + async copyEventId(closeMenu) { + if (this.currentPhoto?.eventId) { + try { + await navigator.clipboard.writeText(this.currentPhoto.eventId); + this.toast.show('Event ID copied to clipboard'); + } catch (err) { + console.error('Failed to copy event ID:', err); + this.toast.show('Failed to copy event ID'); + } + } + closeMenu(); + } +