From 0653093bd5af5ce0bddce59c36647e808b6a0668 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 25 Oct 2015 18:59:19 +0100 Subject: [PATCH] Restored basic interactive dropdown functionality --- wcfsetup/install/files/js/WCF.js | 2 +- .../files/style/layout/pageHeader.scss | 2 +- wcfsetup/install/files/style/ui/badge.scss | 2 +- .../files/style/ui/dropdownInteractive.scss | 298 ++++++++++++++++++ 4 files changed, 301 insertions(+), 3 deletions(-) create mode 100644 wcfsetup/install/files/style/ui/dropdownInteractive.scss diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index 151088fd37..23c507482d 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -1126,7 +1126,7 @@ WCF.Dropdown.Interactive.Instance = Class.extend({ var $header = $('
').appendTo(this._container); $('' + options.title + '').appendTo($header); - this._linkList = $('').appendTo($header); + this._linkList = $('').appendTo($header); $itemContainer = $('
').appendTo(this._container); this._itemList = $('
    ').appendTo($itemContainer); diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index cc2e2c3ce7..aa1f4660ba 100644 --- a/wcfsetup/install/files/style/layout/pageHeader.scss +++ b/wcfsetup/install/files/style/layout/pageHeader.scss @@ -180,7 +180,7 @@ @extend .icon24; } - > span:not(.icon) { + > span:not(.icon):not(.badge) { display: none; } } diff --git a/wcfsetup/install/files/style/ui/badge.scss b/wcfsetup/install/files/style/ui/badge.scss index 35bc935aa7..40d75057da 100644 --- a/wcfsetup/install/files/style/ui/badge.scss +++ b/wcfsetup/install/files/style/ui/badge.scss @@ -3,7 +3,7 @@ a.badge { background-color: $wcfContentText; color: $wcfContentBackground; display: inline-block; - padding: 3px 5px; + padding: 1px 5px; position: relative; text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */ vertical-align: middle; diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss new file mode 100644 index 0000000000..80c2e87c50 --- /dev/null +++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss @@ -0,0 +1,298 @@ +.interactiveDropdown { + background-color: $wcfDropdownBackground; + border: 1px solid $wcfDropdownBorder; + color: $wcfDropdownLink; + display: block; + position: absolute; + z-index: 450; + + @include boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px); + + &:not(.open) { + display: none !important; + } + + > .pointer { + border: 10px solid transparent; + border-bottom-color: $wcfDropdownBorder; + border-top-width: 0; + content: ""; + display: inline-block; + position: absolute; + top: -10px; + z-index: 100; + + > span { + border: 8px solid transparent; + border-bottom-color: $wcfDropdownBackground; + border-top-width: 0; + content: ""; + display: inline-block; + left: -8px; + position: absolute; + top: 2px; + z-index: 101; + } + } + + &.interactiveDropdownUserMenu { + > .interactiveDropdownItemsContainer { + overflow: visible; + max-height: none; + } + + > .pointer { + border-width: 0 7px 7px 7px; + top: -7px; + + > span { + border-width: 0 5px 5px 5px; + left: -5px; + } + } + } +} + +.interactiveDropdownHeader { + align-items: center; + display: flex; + padding: 5px 10px; +} + +.interactiveDropdownTitle { + flex: 1 1 auto; + + @extend .wcfFontHeadline; +} + +.interactiveDropdownLinks { + flex: 0 0 auto; + margin-left: 5px; +} + +.interactiveDropdownItemsContainer { + border: 1px solid $wcfDropdownBorderInner; + border-width: 1px 0; + max-height: 300px; + padding: 3px 0; + + &.ps-container { + > .interactiveDropdownItems { + position: relative; + z-index: 100; + } + + > .ps-scrollbar-y-rail { + z-index: 200; + } + } +} + +.interactiveDropdownItems { + background-color: $wcfDropdownBackground; + + .loading, + .noItems { + padding: 20px 10px; + text-align: center; + + @extend .wcfFontHeadline; + } + + .notificationItem { + overflow: hidden; + padding: 5px 10px; + position: relative; + + &:not(:last-child) { + border-bottom: 1px solid $wcfDropdownBorderInner; + } + + a { + color: $wcfDropdownLink; + } + + &:hover { + background-color: $wcfDropdownBackgroundActive; + color: $wcfDropdownLinkActive; + + a { + color: $wcfDropdownLinkActive; + text-decoration: underline; + } + } + + > .box32 { + margin-bottom: 0; + } + + &.groupedNotificationItem .fa-users::before { + position: relative; + top: 3px; + } + } +} + +.interactiveDropdownItemOutstanding { + /*//background-color: @wcfDropdownHoverBackgroundColor; + background-repeat: no-repeat; + background-size: 200%; + + //.linearGradientNative(~"to left, @{wcfDropdownHoverBackgroundColor} 50%, @{wcfDropdownBackgroundColor} 100%"); + + &:hover { + background-position: 100%; + }*/ + + display: flex; + + > .box32 { + flex: 1 1 auto; + } +} + +.interactiveDropdownItemMarkAsRead { + align-self: center; + flex: 0 0 auto; + margin-left: 5px; +} + +.interactiveDropdownItemOutstandingIcon > div.box32 { + //padding-right: 16px + (@wcfGapSmall + @wcfGapTiny); +} + +&.interactiveDropdownItemShadow { + > .box32 { + position: relative; + } + + > .box32, + > .interactiveDropdownItemMarkAsRead { + pointer-events: none; + z-index: 20; + + a { + pointer-events: all; + } + } + + > .interactiveDropdownItemShadowLink { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + z-index: 10; + } +} + +.interactiveDropdownItemsUserMenu > li { + &.dropdownDivider { + border-bottom: 1px solid $wcfDropdownBorderInner; + padding: 0 !important; + } + + &:not(.dropdownDivider) { + padding: 5px; + } + + h3 { + @extend .wcfFontHeadline + } + + .box64 { + position: relative; + + .interactiveDropdownUserMenuLinkList { + bottom: 0; + position: absolute; + } + } + + .interactiveDropdownUserMenuLinkList > li { + display: inline-block; + + @extend .wcfFontSmall; + + &:after { + content: " \2013 "; + } + + &:last-child:after { + content: ""; + } + } +} + +.interactiveDropdownShowAll { + color: $wcfDropdownLink; + display: block; + padding: 5px 10px; + text-align: center; + + &:hover { + color: $wcfDropdownLink; + text-decoration: underline; + } +} + +@media only screen and (min-width: 801px) { + .interactiveDropdown { + min-width: 350px; + } + + .interactiveDropdownItemsContainer { + overflow: hidden; + position: relative; + } + + .interactiveDropdownItems .notificationItem { + max-width: 400px; + } + + .interactiveDropdownItemMarkAsRead { + opacity: .6; + transition: opacity .2s linear; + } + + .interactiveDropdownItemOutstandingIcon:hover .interactiveDropdownItemMarkAsRead { + opacity: 1; + } +} + +@media only screen and (max-width: 800px) { + .DEBUG_ONLY_interactiveDropdown { + border-width: 1px 0; + box-sizing: border-box; + left: 0 !important; + right: 0 !important; + width: 100%; + + > .interactiveDropdownItemsContainer { + overflow-x: auto; + + > .interactiveDropdownItems > li.interactiveDropdownItemOutstandingIcon > div.interactiveDropdownItemMarkAsRead { + bottom: 0; + position: absolute; + right: 0; + top: 0; + //width: (@wcfGapSmall + @wcfGapTiny) + 16px + (@wcfGapSmall + @wcfGapTiny); + + > a { + display: block; + height: 100%; + text-align: center; + + > .icon { + position: relative; + top: 50%; + + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + } + } + } + } + } +} -- 2.20.1