Improve modal performance by adding no-fade

2023-06-07 12:06:14 +02:00
parent 5fde4c99ee
commit 01cd0862d3
22 changed files with 40 additions and 6 deletions
@@ -28,6 +28,7 @@
        vertical: block.options.style.orientation === 'vertical',
        end: block.options.style.position === 'end'
      }"
+      no-fade
      class="h-100"
      :class="{ 'd-flex flex-column': block.options.style.orientation !== 'vertical' }"
    >
@@ -230,6 +230,7 @@
      size="lg"
      scrollable
      hide-footer
+      no-fade
      :title="$t('tabs.newBlockModal')"
    >
      <new-block-selector
@@ -9,6 +9,7 @@
    hide-header
    hide-footer
    size="xl"
+    no-fade
    @hidden="hideModal"
  >
    <page-block
@@ -50,6 +51,7 @@ export default {
  data () {
    return {
      showModal: false,
+
      block: undefined,
      record: undefined,
      page: undefined,
@@ -132,6 +134,7 @@ export default {
      const recordID = paramsRecordID || queryRecordID
      this.block = this.customBlock || this.page.blocks.find(block => block.blockID === blockID)
      this.module = moduleID !== NoID ? this.getModuleByID(moduleID) : undefined
+      this.showModal = !!(this.block || {}).blockID

      if (recordID) {
        this.$ComposeAPI
@@ -143,8 +146,6 @@ export default {
      } else if (this.module) {
        this.record = new compose.Record(this.module, {})
      }
-
-      this.showModal = !!(this.block || {}).blockID
    },

    hideModal () {
@@ -19,6 +19,7 @@
      body-class="p-0"
      footer-class="flex-column align-items-stretch"
      centered
+      no-fade
      @hide="onModalHide"
    >
      <b-card
@@ -13,6 +13,7 @@
      :title="$t('label.export')"
      hide-footer
      body-class="p-0"
+      no-fade
      @hide="toggleModal"
    >
      <configurator
@@ -14,6 +14,7 @@
      :title="$t('recordList.import.to', { modulename: module.name })"
      hide-footer
      body-class="p-0"
+      no-fade
      @hide="onModalHide"
    >
      <keep-alive>
@@ -4,10 +4,11 @@
    v-model="showModal"
    scrollable
    dialog-class="h-100 mw-90"
-    content-class="position-initial"
+    content-class="card position-initial"
    body-class="p-0 bg-gray"
    footer-class="p-0"
    size="xl"
+    no-fade
    @hidden="hideModal"
  >
    <template #modal-title>
@@ -6,6 +6,7 @@
      lazy
      scrollable
      :title="title"
+      no-fade
      @hide="onHide"
    >
      <c-translator-form
@@ -407,6 +407,7 @@
        :visible="!!updateField"
        body-class="p-0 border-top-0"
        header-class="p-3 pb-0 border-bottom-0"
+        no-fade
        @ok="handleFieldSave(updateField)"
        @hide="updateField=null"
      >
@@ -155,6 +155,7 @@
      size="lg"
      scrollable
      :title="$t('build.selectBlockTitle')"
+      no-fade
      body-class="vh-75"
    >
      <new-block-selector
@@ -178,6 +179,7 @@
      :visible="showCreator"
      body-class="p-0 border-top-0"
      header-class="p-3 pb-0 border-bottom-0"
+      no-fade
      @ok="updateBlocks()"
      @hide="editor = undefined"
    >
@@ -199,6 +201,7 @@
      body-class="p-0 border-top-0"
      footer-class="d-flex justify-content-between"
      header-class="p-3 pb-0 border-bottom-0"
+      no-fade
      @hide="editor = undefined"
    >
      <configurator
@@ -383,6 +383,7 @@
      cancel-variant="link"
      size="xl"
      scrollable
+      no-fade
      @ok="updateLayout()"
      @cancel="layoutEditor.layout = undefined"
      @hide="layoutEditor.layout = undefined"
@@ -623,6 +624,7 @@
      size="lg"
      label-class="text-primary"
      cancel-variant="link"
+      no-fade
      @close="closeIconModal"
      @ok="saveIconModal"
    >
@@ -703,6 +705,7 @@
      hide-header
      hide-footer
      centered
+      no-fade
      body-class="p-1"
    >
      <b-img
@@ -291,6 +291,7 @@
      hide-header
      hide-footer
      centered
+      no-fade
      body-class="p-1"
    >
      <b-img
@@ -305,6 +306,7 @@
      hide-header
      hide-footer
      centered
+      no-fade
      body-class="p-1"
    >
      <b-img
@@ -149,6 +149,7 @@
      size="xl"
      body-class="p-0 border-top-0"
      header-class="pb-0 px-3 pt-3 border-bottom-0"
+      no-fade
      @ok="updateBlock()"
    >
      <b-tabs
@@ -240,6 +241,7 @@
      scrollable
      size="xl"
      body-class="py-3"
+      no-fade
      @ok="saveDatasources"
    >
      <configurator
@@ -279,6 +281,7 @@
      hide-footer
      :title="$t('builder:add.display-element')"
      body-class="px-0 py-3"
+      no-fade
    >
      <selector
        :items="displayElements.types"
@@ -293,6 +296,7 @@
      hide-footer
      :title="$t('builder:add.datasource')"
      body-class="px-0 py-3"
+      no-fade
    >
      <selector
        :items="datasources.types"
@@ -309,6 +313,7 @@
      ok-variant="primary"
      :title="$t('builder:scenarios.label')"
      body-class="py-3"
+      no-fade
    >
      <configurator
        v-if="report"
@@ -40,6 +40,7 @@
      :ok-title="$t('general:save')"
      :cancel-title="$t('general:cancel')"
      body-class="p-0"
+      no-fade
      @ok="saveExpression"
      @hidden="resetExpression"
    >
@@ -57,6 +57,7 @@
      :ok-title="$t('general:save')"
      :cancel-title="$t('general:cancel')"
      body-class="p-0"
+      no-fade
      @ok="saveExpression"
      @hidden="resetExpression"
    >
@@ -305,6 +305,7 @@
      :ok-title="$t('general:save')"
      :cancel-title="$t('general:cancel')"
      body-class="p-0"
+      no-fade
      @ok="saveExpression"
      @hidden="resetExpression"
    >
@@ -14,6 +14,7 @@
      size="lg"
      :title="$t('general:import.json')"
      ok-only
+      no-fade
      class="d-none"
      @ok="$emit('import', workflows)"
    >
@@ -311,6 +311,7 @@
      :hide-header-close="workflow.workflowID === '0'"
      :no-close-on-backdrop="workflow.workflowID === '0'"
      :no-close-on-esc="workflow.workflowID === '0'"
+      no-fade
    >
      <template #modal-title>
        {{ $t('editor:workflow-configuration') }}
@@ -401,6 +402,7 @@
      size="lg"
      scrollable
      hide-footer
+      no-fade
      body-class="p-0"
    >
      <help />
@@ -411,6 +413,7 @@
      v-model="issuesModal.show"
      :title="$t('editor:issues')"
      hide-footer
+      no-fade
    >
      <div
        v-for="(issue, index) in issuesModal.issues"
@@ -433,6 +436,7 @@
      :ok-title="`${dryRun.lookup ? this.$t('editor:load-and-configure') : this.$t('editor:run-workflow')}`"
      :cancel-title="$t('editor:back')"
      ok-variant="success"
+      no-fade
      @cancel.prevent="dryRun.lookup = true"
      @ok="dryRunOk"
    >
@@ -6,6 +6,7 @@
    :ok-title="$t('start.show')"
    :cancel-title="$t('start.skip')"
    body-class="p-0"
+    no-fade
    @ok="onSave"
    @cancel="onCancel"
  >
@@ -56,6 +56,7 @@
      size="sm"
      body-class="p-0"
      cancel-variant="link"
+      no-fade
      @ok="$emit('input', currentColor || value)"
      @hide="closeMenu"
    >
@@ -11,6 +11,7 @@
      :ok-title="labels.save"
      :cancel-title="labels.cancel"
      cancel-variant="light"
+      no-fade
      body-class="d-flex flex-column p-0"
      class="h-100 overflow-hidden"
      @hide="onHide"
@@ -173,6 +174,7 @@
      ok-only
      :ok-title="labels.add.save"
      :ok-disabled="!addEnabled"
+      no-fade
      @ok="onAddEval"
    >
      <b-form-group
@@ -343,13 +345,13 @@ export default {
        } else if (this.currentRole) {
          const { roleID } = this.currentRole
          this.processing = true
-  
+
          return this.fetchRules(roleID).then(() => {
            return Promise.all(this.evaluate.map(e => {
              const { userID } = e.userID || {}
              let { roleID = [] } = e
              roleID = roleID.map(({ roleID }) => roleID)
-    
+
              return this.evaluatePermissions({ roleID, userID }).then(rules => {
                return {
                  ...e,
@@ -6,7 +6,7 @@
    :hide-footer="!current"
    :title="current ? current.title : 'Workflow prompts'"
    :busy="isLoading"
-
+    no-fade
    @hide="deactivate()"
  >
    <component