views: add `maskClosable=false` to keep form/modal when clicked outside (#631)

Fixes #629 Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
2020-08-28 15:50:22 +07:00 · 2020-08-28 15:50:22 +07:00 · 151f6850d6
parent bbd2b8cd95
commit 151f6850d6
28 changed files with 134 additions and 22 deletions
--- a/ui/src/components/view/DedicateModal.vue
+++ b/ui/src/components/view/DedicateModal.vue
@ -19,6 +19,7 @@
  <a-modal
    v-model="dedicatedDomainModal"
    :title="label"
+    :maskClosable="false"
    @cancel="closeModal"
    @ok="handleDedicateForm">
    <DedicateDomain
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@ -85,6 +85,7 @@
        <a-modal
          :visible="showAction"
          :closable="true"
+          :maskClosable="false"
          style="top: 20px;"
          @cancel="closeAction"
          :confirmLoading="actionLoading"
@ -117,6 +118,7 @@
        v-else
        :visible="showAction"
        :closable="true"
+        :maskClosable="false"
        style="top: 20px;"
        @ok="handleSubmit"
        @cancel="closeAction"
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@ -147,6 +147,7 @@
    <a-modal
      :visible="showAddNetworkModal"
      :title="$t('label.network.addvm')"
+      :maskClosable="false"
      @cancel="closeModals"
      @ok="submitAddNetwork">
      {{ $t('message.network.addvm.desc') }}
@ -168,6 +169,7 @@
    <a-modal
      :visible="showUpdateIpModal"
      :title="$t('label.change.ipaddress')"
+      :maskClosable="false"
      @cancel="closeModals"
      @ok="submitUpdateIP"
    >
@ -182,6 +184,7 @@
    <a-modal
      :visible="showSecondaryIpModal"
      :title="$t('label.acquire.new.secondary.ip')"
+      :maskClosable="false"
      :footer="null"
      :closable="false"
      class="wide-modal"
--- a/ui/src/views/compute/wizard/NetworkSelection.vue
+++ b/ui/src/views/compute/wizard/NetworkSelection.vue
@ -72,6 +72,7 @@
      :visible="showCreateForm"
      :title="$t('label.add.network')"
      :closable="true"
+      :maskClosable="false"
      :footer="null"
      @cancel="showCreateForm = false"
      centered
--- a/ui/src/views/dashboard/OnboardingDashboard.vue
+++ b/ui/src/views/dashboard/OnboardingDashboard.vue
@ -37,6 +37,7 @@
      :title="$t('message.change.password')"
      :visible="this.step === 1"
      :closable="true"
+      :maskClosable="false"
      :footer="null"
      @cancel="closeAction"
      centered
@ -50,6 +51,7 @@
      :title="$t('label.installwizard.addzoneintro.title')"
      :visible="this.step === 2"
      :closable="true"
+      :maskClosable="false"
      :footer="null"
      @cancel="closeAction"
      centered
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@ -20,6 +20,7 @@
    <a-modal
      :visible="showAction"
      :closable="true"
+      :maskClosable="false"
      style="top: 20px;"
      @ok="handleSubmit"
      @cancel="parentCloseAction"
--- a/ui/src/views/image/IsoZones.vue
+++ b/ui/src/views/image/IsoZones.vue
@ -78,6 +78,7 @@
      :title="$t('label.action.copy.iso')"
      :visible="showCopyActionForm"
      :closable="true"
+      :maskClosable="false"
      @ok="handleCopyIsoSubmit"
      @cancel="onCloseCopyForm"
      :confirmLoading="copyLoading"
--- a/ui/src/views/image/TemplateZones.vue
+++ b/ui/src/views/image/TemplateZones.vue
@ -70,6 +70,7 @@
      :title="$t('label.action.copy.template')"
      :visible="showCopyActionForm"
      :closable="true"
+      :maskClosable="false"
      @ok="handleCopyTemplateSubmit"
      @cancel="onCloseModal"
      :confirmLoading="copyLoading"
@ -111,6 +112,7 @@
      :title="$t('label.action.delete.template')"
      :visible="showDeleteTemplate"
      :closable="true"
+      :maskClosable="false"
      @ok="deleteTemplate"
      @cancel="onCloseModal"
      :confirmLoading="deleteLoading"
--- a/ui/src/views/infra/InfraSummary.vue
+++ b/ui/src/views/infra/InfraSummary.vue
@ -42,6 +42,7 @@
            :title="$t('label.sslcertificates')"
            :visible="sslFormVisible"
            :footer="null"
+            :maskClosable="false"
            @cancel="sslModalClose">
            <p>
              {{ $t('message.update.ssl') }}
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@ -59,7 +59,11 @@
      </template>
    </a-pagination>

-    <a-modal v-model="modal" :title="$t('label.dedicate.vlan.vni.range')" @ok="handleSubmit">
+    <a-modal
+      v-model="modal"
+      :title="$t('label.dedicate.vlan.vni.range')"
+      :maskClosable="false"
+      @ok="handleSubmit">
      <a-spin :spinning="formLoading">
        <a-form
          :form="form"
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@ -68,7 +68,11 @@
      </template>
    </a-pagination>

-    <a-modal v-model="addIpRangeModal" :title="$t('label.add.ip.range')" @ok="handleAddIpRange">
+    <a-modal
+      v-model="addIpRangeModal"
+      :title="$t('label.add.ip.range')"
+      :maskClosable="false"
+      @ok="handleAddIpRange">
      <a-form
        :form="form"
        @submit="handleAddIpRange"
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@ -87,7 +87,11 @@
      </template>
    </a-pagination>

-    <a-modal v-model="accountModal" v-if="selectedItem" @ok="accountModal = false">
+    <a-modal
+      v-model="accountModal"
+      v-if="selectedItem"
+      :maskClosable="false"
+      @ok="accountModal = false">
      <div>
        <div style="margin-bottom: 10px;">
          <div class="list__label">{{ $t('label.account') }}</div>
@ -104,7 +108,12 @@
      </div>
    </a-modal>

-    <a-modal :zIndex="1001" v-model="addAccountModal" :title="$t('label.add.account')" @ok="handleAddAccount">
+    <a-modal
+      :zIndex="1001"
+      :maskClosable="false"
+      v-model="addAccountModal"
+      :title="$t('label.add.account')"
+      @ok="handleAddAccount">
      <a-spin :spinning="domainsLoading">
        <div style="margin-bottom: 10px;">
          <div class="list__label">{{ $t('label.account') }}:</div>
@ -123,7 +132,11 @@
      </a-spin>
    </a-modal>

-    <a-modal v-model="addIpRangeModal" :title="$t('label.add.ip.range')" @ok="handleAddIpRange">
+    <a-modal
+      v-model="addIpRangeModal"
+      :title="$t('label.add.ip.range')"
+      :maskClosable="false"
+      @ok="handleAddIpRange">
      <a-form
        :form="form"
        @submit="handleAddIpRange"
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@ -66,7 +66,11 @@
      </template>
    </a-pagination>

-    <a-modal v-model="addIpRangeModal" :title="$t('label.add.ip.range')" @ok="handleAddIpRange">
+    <a-modal
+      v-model="addIpRangeModal"
+      :title="$t('label.add.ip.range')"
+      :maskClosable="false"
+      @ok="handleAddIpRange">
      <a-form
        :form="form"
        @submit="handleAddIpRange"
--- a/ui/src/views/infra/network/ServiceProvidersTab.vue
+++ b/ui/src/views/infra/network/ServiceProvidersTab.vue
@ -45,6 +45,7 @@
          :title="$t(currentAction.label)"
          :visible="showFormAction"
          :closable="true"
+          :maskClosable="false"
          style="top: 20px;"
          @cancel="onCloseAction"
          :confirmLoading="actionLoading"
@ -61,6 +62,7 @@
        :title="$t(currentAction.label)"
        :visible="showFormAction"
        :confirmLoading="actionLoading"
+        :maskClosable="false"
        style="top: 20px;"
        @ok="handleSubmit"
        @cancel="onCloseAction"
--- a/ui/src/views/infra/routers/RouterHealthCheck.vue
+++ b/ui/src/views/infra/routers/RouterHealthCheck.vue
@ -43,6 +43,7 @@
        :title="$t('label.action.router.health.checks')"
        :visible="showGetHealthChecksForm"
        :closable="true"
+        :maskClosable="false"
        @ok="handleGetHealthChecksSubmit"
        @cancel="onCloseGetHealthChecksForm"
        centered>
--- a/ui/src/views/infra/zone/IpAddressRangeForm.vue
+++ b/ui/src/views/infra/zone/IpAddressRangeForm.vue
@ -112,6 +112,7 @@
    </div>
    <a-modal
      :visible="showError"
+      :maskClosable="false"
      title="Error!"
      @ok="() => { showError = false }"
      @cancel="() => { showError = false }"
--- a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@ -63,6 +63,7 @@
          :title="$t('label.edit.traffic.type')"
          :visible="showEditTraffic"
          :closable="true"
+          :maskClosable="false"
          @ok="updateTrafficLabel(trafficInEdit)"
          @cancel="cancelEditTraffic"
          centered
@ -149,6 +150,7 @@
    <a-modal
      :visible="showError"
      :title="`${$t('label.error')}!`"
+      :maskClosable="false"
      @ok="() => { showError = false }"
      @cancel="() => { showError = false }"
      centered
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@ -96,7 +96,7 @@
      </draggable>
    </div>

-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null">
+    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :maskClosable="false">
      <a-spin v-if="tagsLoading"></a-spin>

      <div v-else>
@ -130,7 +130,7 @@
      </div>

    </a-modal>
-    <a-modal :title="ruleModalTitle" v-model="ruleModalVisible" @ok="handleRuleModalForm">
+    <a-modal :title="ruleModalTitle" :maskClosable="false" v-model="ruleModalVisible" @ok="handleRuleModalForm">
      <a-form :form="ruleForm" @submit="handleRuleModalForm">
        <a-form-item :label="$t('label.number')">
          <a-input-number style="width: 100%" v-decorator="['number']" />
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@ -101,7 +101,12 @@
      </template>
    </a-pagination>

-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :afterClose="closeModal"
+      :maskClosable="false">
      <div class="add-tags">
        <div class="add-tags__input">
          <p class="add-tags__label">{{ $t('label.key') }}</p>
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@ -114,7 +114,12 @@
      </template>
    </a-table>

-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :afterClose="closeModal"
+      :maskClosable="false">
      <a-spin v-if="tagsLoading"></a-spin>

      <div v-else>
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@ -139,7 +139,13 @@
      </template>
    </a-pagination>

-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal" class="tags-modal">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :afterClose="closeModal"
+      :maskClosable="false"
+      class="tags-modal">
      <span v-show="tagsModalLoading" class="modal-loading">
        <a-icon type="loading"></a-icon>
      </span>
@ -178,6 +184,7 @@
      v-model="stickinessModalVisible"
      :footer="null"
      :afterClose="closeModal"
+      :maskClosable="false"
      :okButtonProps="{ props: {htmlType: 'submit'}}">

      <span v-show="stickinessModalLoading" class="modal-loading">
@ -245,7 +252,12 @@
      </a-form>
    </a-modal>

-    <a-modal :title="$t('label.edit.rule')" v-model="editRuleModalVisible" :afterClose="closeModal" @ok="handleSubmitEditForm">
+    <a-modal
+      :title="$t('label.edit.rule')"
+      v-model="editRuleModalVisible"
+      :afterClose="closeModal"
+      :maskClosable="false"
+      @ok="handleSubmitEditForm">
      <span v-show="editRuleModalLoading" class="modal-loading">
        <a-icon type="loading"></a-icon>
      </span>
@ -276,6 +288,7 @@

    <a-modal
      :title="$t('label.add.vms')"
+      :maskClosable="false"
      v-model="addVmModalVisible"
      class="vm-modal"
      width="60vw"
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@ -123,7 +123,12 @@
      </template>
    </a-pagination>

-    <a-modal :title="$t('label.edit.tags')" v-model="tagsModalVisible" :footer="null" :afterClose="closeModal">
+    <a-modal
+      :title="$t('label.edit.tags')"
+      v-model="tagsModalVisible"
+      :footer="null"
+      :maskClosable="false"
+      :afterClose="closeModal">
      <span v-show="tagsModalLoading" class="tags-modal-loading">
        <a-icon type="loading"></a-icon>
      </span>
@ -155,6 +160,7 @@

    <a-modal
      :title="$t('label.add.vm')"
+      :maskClosable="false"
      v-model="addVmModalVisible"
      class="vm-modal"
      width="60vw"
--- a/ui/src/views/network/StaticRoutesTab.vue
+++ b/ui/src/views/network/StaticRoutesTab.vue
@ -35,7 +35,7 @@
      </div>
    </div>

-    <a-modal title="Edit Tags" v-model="tagsModalVisible" :footer="null">
+    <a-modal title="Edit Tags" v-model="tagsModalVisible" :footer="null" :maskClosable="false">
      <a-spin v-if="tagsLoading"></a-spin>

      <div v-else>
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@ -72,6 +72,7 @@
        <a-modal
          v-model="modals.networkAcl"
          :title="$t('label.add.acl.list')"
+          :maskClosable="false"
          @ok="handleNetworkAclFormSubmit">
          <a-form @submit.prevent="handleNetworkAclFormSubmit" :form="networkAclForm">
            <a-form-item :label="$t('label.add.list.name')">
@ -121,7 +122,11 @@
          </template>
        </a-pagination>

-        <a-modal v-model="modals.gateway" :title="$t('label.add.new.gateway')" @ok="handleGatewayFormSubmit">
+        <a-modal
+          v-model="modals.gateway"
+          :title="$t('label.add.new.gateway')"
+          :maskClosable="false"
+          @ok="handleGatewayFormSubmit">
          <a-spin :spinning="modals.gatewayLoading">
            <p>{{ $t('message.add.new.gateway.to.vpc') }}</p>
            <a-form @submit.prevent="handleGatewayFormSubmit" :form="gatewayForm">
@ -242,7 +247,11 @@
            <span>{{ props.value }} / {{ $t('label.page') }}</span>
          </template>
        </a-pagination>
-        <a-modal v-model="modals.vpnConnection" :title="$t('label.create.vpn.connection')" @ok="handleVpnConnectionFormSubmit">
+        <a-modal
+          v-model="modals.vpnConnection"
+          :title="$t('label.create.vpn.connection')"
+          :maskClosable="false"
+          @ok="handleVpnConnectionFormSubmit">
          <a-spin :spinning="modals.vpnConnectionLoading">
            <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
              <a-form-item :label="$t('label.vpncustomergatewayid')">
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@ -154,7 +154,11 @@
      </a-list-item>
    </a-list>

-    <a-modal v-model="showCreateNetworkModal" :title="$t('label.add.new.tier')" @ok="handleAddNetworkSubmit">
+    <a-modal
+      v-model="showCreateNetworkModal"
+      :title="$t('label.add.new.tier')"
+      :maskClosable="false"
+      @ok="handleAddNetworkSubmit">
      <a-spin :spinning="modalLoading">
        <a-form @submit.prevent="handleAddNetworkSubmit" :form="form">
          <a-form-item :label="$t('label.name')">
@ -195,7 +199,11 @@
      </a-spin>
    </a-modal>

-    <a-modal v-model="showAddInternalLB" :title="$t('label.add.internal.lb')" @ok="handleAddInternalLBSubmit">
+    <a-modal
+      v-model="showAddInternalLB"
+      :title="$t('label.add.internal.lb')"
+      :maskClosable="false"
+      @ok="handleAddInternalLBSubmit">
      <a-spin :spinning="modalLoading">
        <a-form @submit.prevent="handleAddInternalLBSubmit" :form="form">
          <a-form-item :label="$t('label.name')">
--- a/ui/src/views/network/VpnDetails.vue
+++ b/ui/src/views/network/VpnDetails.vue
@ -27,7 +27,12 @@
      </a-button>
    </div>

-    <a-modal v-model="disableVpn" :footer="null" oncancel="disableVpn = false" :title="$t('label.disable.vpn')">
+    <a-modal
+      v-model="disableVpn"
+      :footer="null"
+      oncancel="disableVpn = false"
+      :title="$t('label.disable.vpn')"
+      :maskClosable="false">
      <p>{{ $t('message.disable.vpn') }}</p>

      <a-divider></a-divider>
@ -44,7 +49,12 @@
      {{ $t('label.enable.vpn') }}
    </a-button>

-    <a-modal v-model="enableVpn" :footer="null" onCancel="enableVpn = false" :title="$t('label.enable.vpn')">
+    <a-modal
+      v-model="enableVpn"
+      :footer="null"
+      onCancel="enableVpn = false"
+      :title="$t('label.enable.vpn')"
+      :maskClosable="false">
      <p>{{ $t('message.enable.vpn') }}</p>

      <a-divider></a-divider>
--- a/ui/src/views/plugins/quota/EditTariffValueWizard.vue
+++ b/ui/src/views/plugins/quota/EditTariffValueWizard.vue
@ -23,6 +23,7 @@
    :confirmLoading="loading"
    :title="$t('label.quota.configuration')"
    :closable="true"
+    :maskClosable="false"
    :visible="showAction"
    @ok="submitTariff"
    @cancel="onClose"
--- a/ui/src/views/project/iam/ProjectRoleTab.vue
+++ b/ui/src/views/project/iam/ProjectRoleTab.vue
@ -61,7 +61,12 @@
            </a-tooltip>
          </span>
        </a-table>
-        <a-modal title="Edit Project Role" v-model="editModalVisible" :footer="null" :afterClose="closeAction">
+        <a-modal
+          title="Edit Project Role"
+          v-model="editModalVisible"
+          :footer="null"
+          :afterClose="closeAction"
+          :maskClosable="false">
          <a-form
            :form="form"
            @submit="updateProjectRole"
@ -103,7 +108,12 @@
            </span>
          </a-form>
        </a-modal>
-        <a-modal title="Create Project Role" v-model="createModalVisible" :footer="null" :afterClose="closeAction">
+        <a-modal
+          title="Create Project Role"
+          v-model="createModalVisible"
+          :footer="null"
+          :afterClose="closeAction"
+          :maskClosable="false">
          <a-form
            :form="form"
            @submit="createProjectRole"