tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds a backdrop to processes list to allow disabling it from clicking outside the popup.

This commit is contained in:
mateuswetah 2018-08-05 22:48:54 -03:00
parent 0899db14b4
commit 39404ba1a0
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/admin/components/other/processes-popup.vue
View File

@ -1,10 +1,16 @@
<template> <template>
<div>
<div
@click="$emit('closeProcessesPopup')"
class="processes-popup-backdrop" />
<div class="processes-popup"> <div class="processes-popup">
<div class="popup-header"> <div class="popup-header">
<span <span
@click="showProcessesList = !showProcessesList" @click="bgProcesses.length > 0 ? showProcessesList = !showProcessesList : null"
class="header-title">{{ getUnfinishedProcesses() + ' ' + $i18n.get('info_unfinished_processes') }}</span> class="header-title">{{ getUnfinishedProcesses() + ' ' + $i18n.get('info_unfinished_processes') }}</span>
<a @click="showProcessesList = !showProcessesList"> <a
v-if="bgProcesses.length > 0"
@click="showProcessesList = !showProcessesList">
<span class="icon has-text-blue5"> <span class="icon has-text-blue5">
<i <i
:class="{ 'mdi-menu-up': showProcessesList, :class="{ 'mdi-menu-up': showProcessesList,
@ -110,6 +116,7 @@
</p> </p>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -205,13 +212,23 @@ export default {
border-right-color: $gray2; border-right-color: $gray2;
border-top-color: $gray2; border-top-color: $gray2;
} }
.processes-popup-backdrop {
position: absolute;
top: 0;
right: 0;
left: 0;
border: 0;
width: 100%;
height: 100vh;
right: 26px;
}
.processes-popup{ .processes-popup{
background-color: $blue2; background-color: $blue2;
width: 320px; width: 320px;
max-width: 100%; max-width: 100%;
position: absolute; position: absolute;
top: 48px; top: 48px;
right: 26px;
border-radius: 5px; border-radius: 5px;
animation-name: appear-from-top; animation-name: appear-from-top;
animation-duration: 0.3s; animation-duration: 0.3s;