eduardo
/
datasurvey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add custom context menu on survey list (implemented Create)

This commit is contained in:
Pablo Bonilla 2021-07-16 22:27:34 -06:00
parent ddd8ebcb97
commit 5615833f24
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
6 changed files with 151 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/main/webapp/app/entities/encuesta/list/encuesta.component.html
View File

@ -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">

40
src/main/webapp/app/entities/encuesta/list/encuesta.component.ts
View File

@ -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')) {
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';
}
// Open Context Menu
// Edit
// Delete
// Copy
// Rename
// Share
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%';
}
}
}

5
src/main/webapp/app/layouts/main/main.component.scss
View File

@ -2,3 +2,8 @@
.off-canvas-sidebar:after {
background: #0f172a;
}
.main-panel {
height: 100vh !important;
overflow-y: auto;
}

1
src/main/webapp/content/scss/paper-dashboard.scss
View File

@ -97,3 +97,4 @@
@import 'paper-dashboard/datasurvey-modal';
@import 'paper-dashboard/datasurvey-list';
@import 'paper-dashboard/datasurvey-table';
@import 'paper-dashboard/datasurvey-contextmenu';

70
src/main/webapp/content/scss/paper-dashboard/_datasurvey-contextmenu.scss Normal file
View File

@ -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;
}
}

5
src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss
View File

@ -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 {