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

View File

@ -1,10 +1,16 @@
<template>
<div>
<div
@click="$emit('closeProcessesPopup')"
class="processes-popup-backdrop" />
<div class="processes-popup">
<div class="popup-header">
<span
@click="showProcessesList = !showProcessesList"
@click="bgProcesses.length > 0 ? showProcessesList = !showProcessesList : null"
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">
<i
:class="{ 'mdi-menu-up': showProcessesList,
@ -110,6 +116,7 @@
</p>
</div>
</div>
</div>
</template>
<script>
@ -205,13 +212,23 @@ export default {
border-right-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{
background-color: $blue2;
width: 320px;
max-width: 100%;
position: absolute;
top: 48px;
right: 26px;
border-radius: 5px;
animation-name: appear-from-top;
animation-duration: 0.3s;