Skeleton for dropdown add menu in home

This commit is contained in:
Sagi Dayan 2020-05-09 22:48:26 -04:00
parent 85f73ab139
commit bc6ace210a
5 changed files with 51 additions and 10 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -63,9 +63,46 @@
<!-- Right side -->
<div class="level-right">
<div class="level-item">
<button class="button" @click="onAddClicked()">
<!-- Dropdown -->
<div :class="`dropdown ${addMenuOpen ? 'is-active' : ''}`">
<div class="dropdown-trigger">
<button
class="button"
aria-haspopup="true"
aria-controls="dropdown-menu"
@click="addMenuOpen=!addMenuOpen"
>
<span>Add</span>
<span class="icon is-small">
<i
:class="`fa fa-angle-${addMenuOpen ? 'up' : 'down'}`"
aria-hidden="true"
></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" @click="onAddClicked('book')">
<i class="fa fa-fw fa-book"></i> Add a book
</a>
<a class="dropdown-item" @click="onAddClicked('slideshow')">
<i class="fa fa-fw fa-photo"></i> New slideshow
</a>
<a class="dropdown-item" @click="onAddClicked('puzzle')">
<i class="fa fa-fw fa-puzzle-piece"></i> Create a puzzle
</a>
<hr class="dropdown-divider" />
<a class="dropdown-item" @click="onAddClicked('child')">
<i class="fa fa-fw fa-child"></i> Add a child
</a>
</div>
</div>
</div>
<!-- End Dropdown -->
<!-- <button class="button" @click="onAddClicked()">
<i class="fa fa-fw fa-plus"></i> Add
</button>
</button>-->
<button class="button is-success m-l-md" @click="showCreateCallModal=true">
<i class="fa fa-fw fa-phone"></i> Call
</button>
@ -135,12 +172,16 @@ export default {
showCoverModal: false,
showCreateCallModal: false,
showAddConnectionModal: false,
childCoverModalImage: null
childCoverModalImage: null,
addMenuOpen: false
};
},
methods: {
onAddClicked() {
this.notify({ message: "Add button clicked. Still not working" });
onAddClicked(action: string) {
this.notify({
message: `Add ${action} button clicked. Still not working`
});
this.addMenuOpen = false;
},
onDeleteClicked() {
this.notify({ message: "Delete button clicked. Still not working" });