Skeleton for dropdown add menu in home
This commit is contained in:
parent
85f73ab139
commit
bc6ace210a
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 -->
|
<!-- Right side -->
|
||||||
<div class="level-right">
|
<div class="level-right">
|
||||||
<div class="level-item">
|
<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
|
<i class="fa fa-fw fa-plus"></i> Add
|
||||||
</button>
|
</button>-->
|
||||||
<button class="button is-success m-l-md" @click="showCreateCallModal=true">
|
<button class="button is-success m-l-md" @click="showCreateCallModal=true">
|
||||||
<i class="fa fa-fw fa-phone"></i> Call
|
<i class="fa fa-fw fa-phone"></i> Call
|
||||||
</button>
|
</button>
|
||||||
|
@ -135,12 +172,16 @@ export default {
|
||||||
showCoverModal: false,
|
showCoverModal: false,
|
||||||
showCreateCallModal: false,
|
showCreateCallModal: false,
|
||||||
showAddConnectionModal: false,
|
showAddConnectionModal: false,
|
||||||
childCoverModalImage: null
|
childCoverModalImage: null,
|
||||||
|
addMenuOpen: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onAddClicked() {
|
onAddClicked(action: string) {
|
||||||
this.notify({ message: "Add button clicked. Still not working" });
|
this.notify({
|
||||||
|
message: `Add ${action} button clicked. Still not working`
|
||||||
|
});
|
||||||
|
this.addMenuOpen = false;
|
||||||
},
|
},
|
||||||
onDeleteClicked() {
|
onDeleteClicked() {
|
||||||
this.notify({ message: "Delete button clicked. Still not working" });
|
this.notify({ message: "Delete button clicked. Still not working" });
|
||||||
|
|
Loading…
Reference in a new issue