Merge pull request #269 from hotwax/feature/add-confirmation-buttons-…

…to-date-pickers Feature: Add confirmation buttons to date pickers
hotwax · Nov 8, 2022 · 83ae8ea · 83ae8ea
2 parents 67aa19d + c29ca4c
commit 83ae8ea
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/components/InitialJobConfiguration.vue b/src/components/InitialJobConfiguration.vue
@@ -20,6 +20,7 @@
         <ion-modal :is-open="isOpen" @didDismiss="() => isOpen = false">
           <ion-content force-overscroll="false">
             <ion-datetime
+              show-default-buttons
               hour-cycle="h23"
               :value="runTime ? getDateTime(runTime) : ''"
               @ionChange="updateRunTime($event, currentJob)"
@@ -53,7 +54,8 @@
         <ion-label @click="() => isOpen = true" slot="end">{{ currentJob?.runTime ? getTime(currentJob.runTime) : $t('Select run time') }}</ion-label>
         <ion-modal class="date-time-modal" :is-open="isOpen" @didDismiss="() => isOpen = false">
           <ion-content force-overscroll="false">
-            <ion-datetime
+            <ion-datetime          
+              show-default-buttons
               hour-cycle="h12"
               :min="minDateTime"
               :value="currentJob?.runTime ? getDateTime(currentJob?.runTime) : ''"
@@ -272,6 +274,12 @@ ion-item:nth-child(2) > ion-label:nth-child(3) {
   .mobile-only {
     display: none;
   }  
+
+  ion-modal {
+    --width: 290px;
+    --height: 440px;
+    --border-radius: 8px;
+  }
 }
 
 ion-modal {

diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
@@ -24,7 +24,8 @@
         <!-- <ion-button id="open-run-time-modal" size="small" fill="outline" color="medium" v-show="!currentJob?.runTime">{{ $t("Select run time") }}</ion-button> -->
         <ion-modal class="date-time-modal" :is-open="isOpen" @didDismiss="() => isOpen = false">
           <ion-content force-overscroll="false">
-            <ion-datetime
+            <ion-datetime          
+              show-default-buttons
               hour-cycle="h23"
               :value="runTime ? getDateTime(runTime) : ''"
               @ionChange="updateRunTime($event, currentJob)"
@@ -453,7 +454,6 @@ ion-label:nth-child(3) {
   cursor: pointer;
 }
 
-
 ion-modal {
   --width: 290px;
   --height: 440px;

diff --git a/src/views/BulkEditor.vue b/src/views/BulkEditor.vue
@@ -70,7 +70,8 @@
             <ion-label class="ion-text-wrap" @click="() => isOpenGlobal = true" slot="end">{{ $t('Select run time') }}</ion-label>
             <ion-modal class="date-time-modal" :is-open="isOpenGlobal" @didDismiss="() => isOpenGlobal = false">
               <ion-content force-overscroll="false">
-                <ion-datetime
+                <ion-datetime            
+                  show-default-buttons
                   hour-cycle="h12"
                 />
               </ion-content>
@@ -118,7 +119,8 @@
             <ion-label class="ion-text-wrap" @click="() => isOpen = true" slot="end">{{ $t('Select run time') }}</ion-label>
             <ion-modal class="date-time-modal" :is-open="isOpen" @didDismiss="() => isOpen = false">
               <ion-content force-overscroll="false">
-                <ion-datetime
+                <ion-datetime              
+                  show-default-buttons
                   hour-cycle="h12"
                 />
               </ion-content>
@@ -238,4 +240,10 @@ export default defineComponent({
   ion-button {
     margin: var(--spacer-base) var(--spacer-xs);
   }
+
+  ion-modal {
+    --width: 290px;
+    --height: 440px;
+    --border-radius: 8px;
+  }
 </style>