Proper datetime support / updated style

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
index 87836c9e5e0748386f10fcf46026b388155369ed..721a49d9d407458280349f0ee670f2bb0714cf20 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
@@ -232,11 +232,16 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                        if (data.isDateTime) {
                                _dateHour.value = date.getHours();
                                _dateMinute.value = date.getMinutes();
+                               
+                               _datePicker.classList.add('datePickerTime');
+                       }
+                       else {
+                               _datePicker.classList.remove('datePickerTime');
                        }
                        
                        this._renderPicker(date.getDate(), date.getMonth(), date.getFullYear());
                        
-                       UiAlignment.set(_datePicker, _input, { pointer: true });
+                       UiAlignment.set(_datePicker, _input);
                },
                
                /**
@@ -450,11 +455,6 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                        _datePicker.className = 'datePicker';
                        _datePicker.addEventListener(WCF_CLICK_EVENT, function(event) { event.stopPropagation(); });
                        
-                       var pointer = elCreate('span');
-                       pointer.className = 'elementPointer';
-                       pointer.innerHTML = '<span></span>';
-                       _datePicker.appendChild(pointer);
-                       
                        var header = elCreate('header');
                        _datePicker.appendChild(header);
                        

diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss
index b6ab4af3a0f6c9129b8ef902a47b84e64db9c8b2..e66e593c9086cda1771b1125564662390e2a2fa0 100644 (file)
--- a/wcfsetup/install/files/style/ui/datePicker.scss
+++ b/wcfsetup/install/files/style/ui/datePicker.scss
@@ -6,57 +6,22 @@
 
 .datePicker {
        background-color: $wcfDropdownBackground;
-       border: 1px solid $wcfDropdownBorder;
-       box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
+       border-radius: 2px;
+       box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        color: $wcfDropdownText;
-       opacity: 0;
+       display: none;
        position: absolute;
-       transition: visibility .3s linear .3s, opacity .3s linear;
-       visibility: hidden;
        width: 240px;
        z-index: 450;
        
        &.active {
-               opacity: 1;
-               transition-delay: 0s;
-               visibility: visible;
+               display: block;
        }
        
        &.datePickerTime > footer {
                display: block;
        }
        
-       > .elementPointer {
-               border: 10px solid transparent;
-               border-bottom-color: $wcfDropdownBorder;
-               border-top-width: 0;
-               
-               > span {
-                       border: 9px solid transparent;
-                       border-bottom-color: $wcfDropdownBackground;
-                       border-top-width: 0;
-                       left: -9px;
-                       position: absolute;
-                       top: 1px;
-               }
-               
-               &.flipVertical {
-                       border: 10px transparent solid;
-                       border-top-color: $wcfDropdownBorder;
-                       border-bottom-width: 0;
-                       bottom: 0;
-                       top: auto;
-                       
-                       > span {
-                               border: 9px transparent solid;
-                               border-top-color: $wcfDropdownBackground;
-                               border-bottom-width: 0;
-                               bottom: 1px;
-                               top: auto;
-                       }
-               }
-       }
-       
        > header,
        > footer {
                padding: 10px;
@@ -136,6 +101,7 @@
        }
        
        > footer {
+               border-top: 1px solid $wcfDropdownBorder;
                display: none;
        }
 }