Merge pull request #1043 from ProcessMaker/feature/ticket-599

ticket 599: Validation Delete Confirmation UI
ProcessMaker · Aug 20, 2021 · 27b0b05 · 27b0b05
2 parents 7ce2d83 + 547bfa8
commit 27b0b05
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/components/inspector/options-list.vue b/src/components/inspector/options-list.vue
@@ -45,13 +45,13 @@
           <draggable @update="updateSort" :element="'div'" v-model="optionsList" group="options" @start="drag=true" @end="drag=false" >
             <div v-for="(option, index) in optionsList" :key="option.value">
               <div v-if="removeIndex === index">
-                <div class="card mb-3 bg-danger text-white text-right">
-                  <div class="card-body p-2" v-html="currentItemToDelete"/>
+                <div class="card mb-3 bg-danger text-white text-left" style="border-radius: 0.25em">
+                  <div class="card-body p-3" v-html="currentItemToDelete"/>
                   <div class="card-footer text-right p-2">
-                    <button type="button" class="btn btn-sm btn-light mr-2" @click="removeIndex=null" data-cy="inspector-options-remove-cancel">
+                    <button type="button" class="btn btn-sm btn-light mr-2 text-capitalize" @click="removeIndex=null" data-cy="inspector-options-remove-cancel">
                       {{ $t('Cancel') }}
                     </button>
-                    <button type="button" class="btn btn-sm btn-danger" @click="deleteOption()" data-cy="inspector-options-remove-confirm">
+                    <button type="button" class="btn btn-sm btn-danger text-capitalize" @click="deleteOption()" data-cy="inspector-options-remove-confirm">
                       {{ $t('Delete') }}
                     </button>
                   </div>
@@ -389,7 +389,7 @@ export default {
           && this.optionsList[this.removeIndex] !==
           undefined) {
         let itemName =  this.optionsList[this.removeIndex][this.valueField];
-        return this.$t('Are you sure you want to delete "{{item}}"?', {item:itemName});
+        return this.$t('Are you sure you want to delete "{{item}}" option?', {item:itemName});
       }
       return '';
     },

diff --git a/src/components/inspector/validation-select.vue b/src/components/inspector/validation-select.vue
@@ -32,15 +32,15 @@
     <div v-if="hasRules">
       <div role="tablist">
         <b-card v-for="(rule, index) in rules" class="mb-2" :key="index">
-          <div v-if="showDeleteConfirmCard && removeIndex == index" class="card mb-3 bg-danger text-white text-right">
-            <div class="card-body p-2">
+          <div v-if="showDeleteConfirmCard && removeIndex == index" class="card mb-3 bg-danger text-white text-right"  style="border-radius: 0.25em">
+            <div class="card-body p-3 text-left">
               {{ confirmMessage }}
             </div>
             <div class="card-footer text-right p-2">
-              <button type="button" class="btn btn-sm btn-light mr-2" @click="hideDeleteConfirmCard" data-cy="cancel-confirm-delete-rule">
+              <button type="button" class="btn btn-sm btn-light mr-2 text-capitalize" @click="hideDeleteConfirmCard" data-cy="cancel-confirm-delete-rule">
                 {{ $t('Cancel') }}
               </button>
-              <button type="button" class="btn btn-sm btn-danger" @click="deleteRule(index)" data-cy="confirm-delete-rule">
+              <button type="button" class="btn btn-sm btn-danger text-capitalize" @click="deleteRule(index)" data-cy="confirm-delete-rule">
                 {{ $t('Delete') }}
               </button>
             </div>