diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html index 83c3a1a..67fc551 100644 --- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.html +++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.html @@ -36,13 +36,50 @@ -
+
+ +
+
    +
    +
  • + +
  • +
    +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
    +
    +
  • + +
  • +
    +
+
+
diff --git a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts index e1e40ae..5f4685b 100644 --- a/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts +++ b/src/main/webapp/app/entities/encuesta/list/encuesta.component.ts @@ -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%'; + } } } diff --git a/src/main/webapp/app/layouts/main/main.component.scss b/src/main/webapp/app/layouts/main/main.component.scss index 98938a5..ebfe953 100644 --- a/src/main/webapp/app/layouts/main/main.component.scss +++ b/src/main/webapp/app/layouts/main/main.component.scss @@ -2,3 +2,8 @@ .off-canvas-sidebar:after { background: #0f172a; } + +.main-panel { + height: 100vh !important; + overflow-y: auto; +} diff --git a/src/main/webapp/content/scss/paper-dashboard.scss b/src/main/webapp/content/scss/paper-dashboard.scss index 80db6c0..3eab78d 100644 --- a/src/main/webapp/content/scss/paper-dashboard.scss +++ b/src/main/webapp/content/scss/paper-dashboard.scss @@ -97,3 +97,4 @@ @import 'paper-dashboard/datasurvey-modal'; @import 'paper-dashboard/datasurvey-list'; @import 'paper-dashboard/datasurvey-table'; +@import 'paper-dashboard/datasurvey-contextmenu'; diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-contextmenu.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-contextmenu.scss new file mode 100644 index 0000000..241512c --- /dev/null +++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-contextmenu.scss @@ -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; + } +} diff --git a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss index ba1b97c..99874c8 100644 --- a/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss +++ b/src/main/webapp/content/scss/paper-dashboard/_datasurvey-list.scss @@ -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 {