From: Alexander Ebert Date: Mon, 18 Jan 2016 17:04:46 +0000 (+0100) Subject: Overhauled visuals for date picker X-Git-Tag: 3.0.0_Beta_1~2030^2~152 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=6d8f7f47fa67615725b80242f83bbeeb8c632a1c;p=GitHub%2FWoltLab%2FWCF.git 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 26edc93b06..60989b9675 100644 --- 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 237b29c38f..3400f01a6e 100644 --- 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 {