Datepicker feedback changed #2316

enonic · Jan 14, 2022 · 15a89aa · 15a89aa
1 parent c4cf833
commit 15a89aa
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 55 deletions.
diff --git a/src/main/resources/assets/admin/common/js/ui/time/DatePicker.ts b/src/main/resources/assets/admin/common/js/ui/time/DatePicker.ts
@@ -20,8 +20,10 @@ export class DatePickerBuilder {
 
     closeOnSelect: boolean = true;
 
-    setDefaultDate(value: Date): DatePickerBuilder {
-        this.defaultDate = value;
+    setDefaultDate(value: Date | undefined): DatePickerBuilder {
+        if (value) {
+            this.defaultDate = value;
+        }
         return this;
     }
 
@@ -54,12 +56,7 @@ export class DatePicker
         }
 
         if (builder.defaultDate) {
-            this.setDefaultHandler(
-                () => {
-                    this.setSelectedDate(builder.defaultDate);
-                },
-                builder.defaultDate
-            );
+            this.setDefaultValueHandler(() => this.setSelectedDate(builder.defaultDate));
         }
     }
 

diff --git a/src/main/resources/assets/admin/common/js/ui/time/DateTimePicker.ts b/src/main/resources/assets/admin/common/js/ui/time/DateTimePicker.ts
@@ -27,8 +27,11 @@ export class DateTimePickerBuilder {
     // use local timezone if timezone value is not initialized
     useLocalTimezoneIfNotPresent: boolean = false;
 
-    setDefaultDate(value: Date): DateTimePickerBuilder {
-        this.defaultDate = value;
+    setDefaultDate(value: Date | undefined): DateTimePickerBuilder {
+        // We don't want the set default button to appear when there is no default date
+        if (value) {
+            this.defaultDate = value;
+        }
         return this;
     }
 
@@ -81,12 +84,7 @@ export class DateTimePicker
         }
 
         if (builder.defaultDate) {
-            this.setDefaultHandler(
-                () => {
-                    this.setSelectedDateTime(builder.defaultDate);
-                },
-                builder.defaultDate
-            );
+            this.setDefaultValueHandler(() => this.setSelectedDateTime(builder.defaultDate));
         }
     }
 

diff --git a/src/main/resources/assets/admin/common/js/ui/time/Picker.ts b/src/main/resources/assets/admin/common/js/ui/time/Picker.ts
@@ -12,23 +12,15 @@ import {SelectedDateChangedEvent} from './SelectedDateChangedEvent';
 export class Picker<T extends Element>
     extends DivEl {
 
-    private showDefaultButton: Boolean = false;
-
     protected popup: T;
 
-    protected popupOkButton: Button;
-
-    protected popupDefaultButton: Button;
-
     protected selectedDate: Date;
 
     protected input: TextInput;
 
-    protected defaultDate: Date;
-
     protected validUserInput: boolean;
 
-    private defaultHandler: Function;
+    private defaultValueHandler: Function;
 
     private builder: any;
 
@@ -55,11 +47,8 @@ export class Picker<T extends Element>
         this.input.resetBaseValues();
     }
 
-    public setDefaultHandler(setDefault: Function, defaultDate: Date | undefined): void {
-        if (defaultDate) {
-            this.showDefaultButton = true;
-        }
-        this.defaultHandler = setDefault;
+    public setDefaultValueHandler(handler: Function): void {
+        this.defaultValueHandler = handler;
     }
 
     getTextInput(): TextInput {
@@ -202,25 +191,23 @@ export class Picker<T extends Element>
         }
     }
 
-    private initDefaultButton() {
-        this.popupDefaultButton = new Button(i18n('action.setDefault'));
-        this.popupDefaultButton.addClass('default-button');
-        this.popupDefaultButton.onClicked(() => {
-            if (this.setDefaultHandler) {
-                this.defaultHandler();
-            }
+    private initDefaultButton(): Button {
+        const popupDefaultButton = new Button(i18n('action.setDefault'));
+        popupDefaultButton.addClass('default-button');
+        popupDefaultButton.onClicked(() => {
+            this.defaultValueHandler();
         });
-        return this.popupDefaultButton;
+        return popupDefaultButton;
     }
 
-    private initCloseButton() {
-        this.popupOkButton = new Button(i18n('action.ok'));
-        this.popupOkButton.addClass('ok-button');
-        this.popupOkButton.onClicked(() => {
+    private initCloseButton(): Button {
+        const popupCloseButton = new Button(i18n('action.ok'));
+        popupCloseButton.addClass('close-button');
+        popupCloseButton.onClicked(() => {
             this.hidePopup();
         });
 
-        return this.popupOkButton;
+        return popupCloseButton;
     }
 
     private createPopup() {
@@ -230,16 +217,17 @@ export class Picker<T extends Element>
 
         this.initPopup(this.builder);
         this.setupPopupListeners(this.builder);
-        const buttonContainer = new DivEl('btn-container');
 
-        if (this.showDefaultButton) {
-            buttonContainer.appendChild(this.initDefaultButton());
-        }
+        const popUpItems = new DivEl();
 
-        const okButton = this.initCloseButton();
-        buttonContainer.appendChild(okButton);
+        if (this.defaultValueHandler) {
+            // Adds the needed css to align the buttons
+            popUpItems.setClass('btn-container');
+            popUpItems.appendChild(this.initDefaultButton());
+        }
+        popUpItems.appendChild(this.initCloseButton());
 
-        this.popup.appendChild(buttonContainer);
+        this.popup.appendChild(popUpItems);
 
         this.popup.insertAfterEl(this.input);
     }

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/time/date-picker.less b/src/main/resources/assets/admin/common/styles/api/ui/time/date-picker.less
@@ -10,7 +10,7 @@
 
       .btn-container {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
       }
 
       .year-container,

diff --git a/src/main/resources/assets/admin/common/styles/api/ui/time/date-time-picker.less b/src/main/resources/assets/admin/common/styles/api/ui/time/date-time-picker.less
@@ -16,7 +16,7 @@
 
       .btn-container {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
       }
 
       .date-picker-dialog,

diff --git a/src/main/resources/assets/admin/common/styles/mixins.less b/src/main/resources/assets/admin/common/styles/mixins.less
@@ -17,16 +17,28 @@
 }
 
 .picker-dialog-button(@margin, @display: block) {
-  .ok-button {
-    background: @admin-button-blue2;
+  .picker-btn() {
     padding: 4px 19px 4px 19px;
     position: relative;
     display: @display;
     margin: @margin;
   }
 
+  .close-button {
+    .picker-btn();
+
+    background-color: @admin-button-blue2;
+    margin-left: auto;
+
+    span {
+      display: block;
+    }
+  }
+
   .default-button {
-    .ok-button();
+    .picker-btn();
+
+    background-color: @form-button-bg;
   }
 }