Skeleton for dropdown add menu in home
This commit is contained in:
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
|
@ -63,9 +63,46 @@
|
|||
<!-- Right side -->
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button class="button" @click="onAddClicked()">
|
||||
<i class="fa fa-fw fa-plus"></i> Add
|
||||
<!-- 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 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" });
|
||||
|
|
Reference in a new issue