From: Alexander Ebert Date: Sun, 5 Jun 2016 09:53:20 +0000 (+0200) Subject: Proper datetime support / updated style X-Git-Tag: 3.0.0_Beta_1~1530 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=03ce923e47b526e4b803e6be6435f981a15a4c2f;p=GitHub%2FWoltLab%2FWCF.git 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 87836c9e5e..721a49d9d4 100644 --- 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 = ''; - _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 b6ab4af3a0..e66e593c90 100644 --- 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; } }