Add dropdown component, photo actions menu
This commit is contained in:
53
app/components/dropdown-menu.gjs
Normal file
53
app/components/dropdown-menu.gjs
Normal file
@@ -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';
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class="dropdown-menu-container">
|
||||
<button
|
||||
class="dropdown-trigger-btn btn-press"
|
||||
type="button"
|
||||
title={{@triggerTitle}}
|
||||
{{on "click" this.toggleMenu}}
|
||||
>
|
||||
<Icon
|
||||
@name={{this.triggerIcon}}
|
||||
@size={{@iconSize}}
|
||||
@color={{@iconColor}}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{{#if this.isOpen}}
|
||||
<div class="dropdown-popover {{@popoverClass}}">
|
||||
{{yield this.closeMenu}}
|
||||
</div>
|
||||
<div
|
||||
class="menu-backdrop"
|
||||
{{on "click" this.closeMenu}}
|
||||
role="button"
|
||||
></div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
Reference in New Issue
Block a user