Add custom context menu on survey list (implemented Create)
This commit is contained in:
parent
ddd8ebcb97
commit
5615833f24
|
@ -36,13 +36,50 @@
|
|||
</div>
|
||||
|
||||
<!-- Lista de Encuestas del Usuario -->
|
||||
<div class="ds-list" oncontextmenu="return false;">
|
||||
<div class="ds-list" (contextmenu)="openContextMenu($event)">
|
||||
<!-- Context Menu -->
|
||||
<div class="ds-contextmenu ds-contextmenu--closed" id="contextmenu">
|
||||
<ul id="ds-context-menu__list">
|
||||
<div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-create--separator">
|
||||
<li>
|
||||
<button
|
||||
*ngIf="!isAdmin() && isAuthenticated()"
|
||||
type="button"
|
||||
(click)="resetForm()"
|
||||
data-toggle="modal"
|
||||
data-target="#crearEncuesta"
|
||||
>
|
||||
<fa-icon class="contextmenu__icon" [icon]="faPlus"></fa-icon>Create
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
<div class="ds-contextmenu__divider ds-contextmenu__divider--separator-bottom" id="contextmenu-edit--separator">
|
||||
<li class="d-justify justify-content-start">
|
||||
<button type="button" id="contextmenu-edit"><fa-icon class="contextmenu__icon" [icon]="faEdit"></fa-icon>Edit</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" id="contextmenu-duplicate"><fa-icon class="contextmenu__icon" [icon]="faCopy"></fa-icon>Duplicate</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" id="contextmenu-rename"><fa-icon class="contextmenu__icon" [icon]="faFile"></fa-icon>Rename</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" id="contextmenu-share"><fa-icon class="contextmenu__icon" [icon]="faShareAlt"></fa-icon>Share</button>
|
||||
</li>
|
||||
</div>
|
||||
<div class="ds-contextmenu__divider" id="contextmenu-delete--separator">
|
||||
<li>
|
||||
<button type="button"><fa-icon class="contextmenu__icon" [icon]="faTrashAlt"></fa-icon>Delete</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="ds-list--entity"
|
||||
*ngFor="let encuesta of encuestas; trackBy: trackId"
|
||||
(dblclick)="openSurvey($event)"
|
||||
(click)="selectSurvey($event)"
|
||||
(contextmenu)="openContextMenu($event)"
|
||||
[attr.data-id]="encuesta.id"
|
||||
>
|
||||
<div class="entity-header">
|
||||
|
|
|
@ -23,7 +23,7 @@ import { AccountService } from 'app/core/auth/account.service';
|
|||
import { Account } from 'app/core/auth/account.model';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { faShareAlt, faLock, faUnlock, faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faShareAlt, faLock, faUnlock, faCalendarAlt, faEdit, faCopy, faFile, faTrashAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import * as $ from 'jquery';
|
||||
|
||||
|
@ -37,6 +37,11 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
|
|||
faLock = faLock;
|
||||
faUnlock = faUnlock;
|
||||
faCalendarAlt = faCalendarAlt;
|
||||
faEdit = faEdit;
|
||||
faCopy = faCopy;
|
||||
faFile = faFile;
|
||||
faTrashAlt = faTrashAlt;
|
||||
faPlus = faPlus;
|
||||
|
||||
account: Account | null = null;
|
||||
usuarioExtra: UsuarioExtra | null = null;
|
||||
|
@ -99,6 +104,9 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
|
|||
|
||||
ngOnInit(): void {
|
||||
document.body.addEventListener('click', e => {
|
||||
document.getElementById('contextmenu')!.classList.add('ds-contextmenu--closed');
|
||||
document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--open');
|
||||
document.getElementById('contextmenu')!.style.maxHeight = '0%';
|
||||
if (e.target) {
|
||||
if (!(e.target as HTMLElement).classList.contains('ds-list--entity')) {
|
||||
document.querySelectorAll('.ds-list--entity').forEach(e => {
|
||||
|
@ -304,15 +312,31 @@ export class EncuestaComponent implements OnInit, AfterViewInit {
|
|||
document.querySelectorAll('.ds-list--entity').forEach(e => {
|
||||
e.classList.remove('active');
|
||||
});
|
||||
if (event.target.classList.contains('ds-list--entity')) {
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
// Open Context Menu
|
||||
// Edit
|
||||
// Delete
|
||||
// Copy
|
||||
// Rename
|
||||
// Share
|
||||
if (event.type === 'contextmenu') {
|
||||
event.preventDefault();
|
||||
|
||||
document.getElementById('contextmenu-create--separator')!.style.display = 'block';
|
||||
document.getElementById('contextmenu-edit--separator')!.style.display = 'block';
|
||||
document.getElementById('contextmenu-delete--separator')!.style.display = 'block';
|
||||
document.getElementById('contextmenu-edit')!.style.display = 'block';
|
||||
document.getElementById('contextmenu-duplicate')!.style.display = 'block';
|
||||
document.getElementById('contextmenu-rename')!.style.display = 'block';
|
||||
document.getElementById('contextmenu-share')!.style.display = 'block';
|
||||
|
||||
if ((event.target as HTMLElement).classList.contains('ds-list')) {
|
||||
document.getElementById('contextmenu-edit--separator')!.style.display = 'none';
|
||||
document.getElementById('contextmenu-delete--separator')!.style.display = 'none';
|
||||
} else if ((event.target as HTMLElement).classList.contains('ds-list--entity')) {
|
||||
event.target.classList.add('active');
|
||||
document.getElementById('contextmenu-create--separator')!.style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById('contextmenu')!.style.top = event.layerY + 'px';
|
||||
document.getElementById('contextmenu')!.style.left = event.layerX + 'px';
|
||||
document.getElementById('contextmenu')!.classList.remove('ds-contextmenu--closed');
|
||||
document.getElementById('contextmenu')!.classList.add('ds-contextmenu--open');
|
||||
document.getElementById('contextmenu')!.style.maxHeight = '100%';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,3 +2,8 @@
|
|||
.off-canvas-sidebar:after {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
height: 100vh !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
@ -97,3 +97,4 @@
|
|||
@import 'paper-dashboard/datasurvey-modal';
|
||||
@import 'paper-dashboard/datasurvey-list';
|
||||
@import 'paper-dashboard/datasurvey-table';
|
||||
@import 'paper-dashboard/datasurvey-contextmenu';
|
||||
|
|
|
@ -0,0 +1,70 @@
|
|||
.ds-contextmenu {
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
z-index: 100;
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
||||
max-height: 0%;
|
||||
overflow: hidden;
|
||||
|
||||
/* Set our transitions up. */
|
||||
-webkit-transition: max-height 0.8s;
|
||||
-moz-transition: max-height 0.8s;
|
||||
transition: max-height 0.8s;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0.2rem 0;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: 0;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 0.4rem 8rem 0.4rem 3rem;
|
||||
color: #313747;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.contextmenu__icon {
|
||||
font-size: 1rem;
|
||||
color: #808080;
|
||||
margin-right: 1rem;
|
||||
position: absolute;
|
||||
left: 0.8rem;
|
||||
bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ds-contextmenu__divider {
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.ds-contextmenu__divider--separator-top {
|
||||
border-bottom: 1px solid #dadce0;
|
||||
}
|
||||
|
||||
.ds-contextmenu__divider--separator-bottom {
|
||||
border-bottom: 1px solid #dadce0;
|
||||
}
|
||||
|
||||
&--open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--closed {
|
||||
display: none;
|
||||
}
|
||||
}
|
|
@ -19,9 +19,9 @@
|
|||
width: 100%;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.ds-list--entity {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
@ -31,7 +31,6 @@
|
|||
padding: 0.5rem;
|
||||
margin: 1rem;
|
||||
word-wrap: break-word;
|
||||
position: relative;
|
||||
|
||||
*:not(div) {
|
||||
pointer-events: none;
|
||||
|
@ -61,8 +60,8 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.entity-share {
|
||||
|
|
Loading…
Reference in New Issue