Overhauled visuals for date picker

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
index 26edc93b066633e89d96733200c8a05236676502..60989b967520a5cbfac5cd7187350883d0116d74 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Date/Picker.js
@@ -114,6 +114,18 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                                element.parentNode.insertBefore(container, element);
                                container.insertBefore(element, button);
                                
+                               // check if the date input has one of the following classes set otherwise default to 'short'
+                               var hasClass = false, knownClasses = ['tiny', 'short', 'medium', 'long'];
+                               for (var i = 0; i < 4; i++) {
+                                       if (element.classList.contains(knownClasses[i])) {
+                                               hasClass = true;
+                                       }
+                               }
+                               
+                               if (!hasClass) {
+                                       element.classList.add('short')
+                               }
+                               
                                _data.set(element, {
                                        shadow: shadowElement,
                                        
@@ -457,7 +469,11 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                        _dateMonth = elCreate('select');
                        _dateMonth.className = 'month';
                        _dateMonth.addEventListener('change', this._changeMonth.bind(this));
-                       monthYearContainer.appendChild(_dateMonth);
+                       
+                       var selectWrapper = elCreate('label');
+                       selectWrapper.className = 'selectDropdown';
+                       selectWrapper.appendChild(_dateMonth);
+                       monthYearContainer.appendChild(selectWrapper);
                        
                        var months = '', monthNames = Language.get('__monthsShort');
                        for (var i = 0; i < 12; i++) {
@@ -468,7 +484,11 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                        _dateYear = elCreate('select');
                        _dateYear.className = 'year';
                        _dateYear.addEventListener('change', this._changeYear.bind(this));
-                       monthYearContainer.appendChild(_dateYear);
+                       
+                       selectWrapper = elCreate('label');
+                       selectWrapper.className = 'selectDropdown';
+                       selectWrapper.appendChild(_dateYear);
+                       monthYearContainer.appendChild(selectWrapper);
                        
                        _dateMonthNext = elCreate('a');
                        _dateMonthNext.className = 'icon icon16 fa-arrow-right next';

diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss
index 237b29c38fd958077e44d634eb2ef5b85ebcc923..3400f01a6e66e73a8ee25fedc94c7b64cff266d1 100644 (file)
--- a/wcfsetup/install/files/style/ui/datePicker.scss
+++ b/wcfsetup/install/files/style/ui/datePicker.scss
@@ -1,7 +1,4 @@
-// TODO: overhaul file
-
 .inputAddon > .inputDatePicker {
-       // TODO: background-color: @wcfInputBackgroundColor !important;
        cursor: pointer;
        flex: 0 1 150px;
        min-width: 150px;
@@ -10,7 +7,7 @@
 .datePicker {
        background-color: $wcfDropdownBackground;
        border: 1px solid $wcfDropdownBorder;
-       border-radius: 3px;
+       box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
        color: $wcfDropdownText;
        opacity: 0;
        position: absolute;
@@ -19,8 +16,6 @@
        width: 240px;
        z-index: 450;
        
-       @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
-       
        &.active {
                opacity: 1;
                transition-delay: 0s;
@@ -56,7 +51,7 @@
        
        > header,
        > footer {
-               padding: $wcfGapSmall;
+               padding: 10px;
                position: relative;
                text-align: center;
        }
@@ -72,63 +67,57 @@
                }
                
                &.previous {
-                       left: $wcfGapSmall;
+                       left: 10px;
                }
                
                &.next {
-                       right: $wcfGapSmall;
+                       right: 10px;
                }
        }
        
-       > ul {
+       .selectDropdown + .selectDropdown {
+               margin-left: 5px;
+       }
+       
+       > ul > li {
                border-top: 1px solid $wcfDropdownBorder;
+               display: flex;
                
-               // hide borders
-               margin: 0 -1px -1px 0;
+               > a,
+               > span {
+                       display: block;
+                       flex: 1;
+                       padding: 5px 0;
+                       text-align: center;
+                       
+                       &:not(:last-child) {
+                               border-right: 1px solid $wcfDropdownBorder;
+                       }
+               }
                
-               > li {
-                       display: flex;
+               > a {
+                       color: $wcfDropdownLink;
                        
-                       > a,
-                       > span {
-                               border: 1px solid $wcfDropdownBorder;
-                               border-width: 0 1px 1px 0;
-                               display: block;
-                               flex: 1;
-                               padding: $wcfGapTiny 0;
-                               text-align: center;
+                       &:hover {
+                               text-decoration: none;
                        }
                        
-                       > a {
-                               // TODO: background-color: @wcfContainerAccentBackgroundColor;
-                               // TODO: color: @wcfColor;
-                               
-                               &:hover {
-                                       text-decoration: none;
-                               }
-                               
-                               &.active,
-                               &:not(.otherMonth):hover {
-                                       // TODO:        background-color: @wcfContainerHoverBackgroundColor;
-                               }
-                               
-                               &.otherMonth {
-                                       // TODO:        background-color: @wcfContainerBackgroundColor;
-                                       // TODO: color: @wcfDimmedColor;
-                                       cursor: default;
-                               }
+                       &.active,
+                       &:not(.otherMonth):hover {
+                               background-color: $wcfDropdownBackgroundActive;
+                               color: $wcfDropdownLinkActive;
                        }
                        
-                       > span {
-                               // TODO: background-color: @wcfTabularBoxBackgroundColor;
-                               // TODO: border-right-color: @wcfTabularBoxBackgroundColor;
-                               // TODO: color: @wcfTabularBoxColor;
-                               font-size: .85rem;
-                               text-transform: uppercase;
-                               
-                               // TODO: .textShadow(@wcfTabularBoxBackgroundColor);
+                       &.otherMonth {
+                               color: $wcfContentDimmedText;
+                               cursor: default;
                        }
                }
+               
+               > span {
+                       text-transform: uppercase;
+                       @extend .wcfFontSmall;
+               }
        }
        
        > footer {