Restored basic interactive dropdown functionality

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 151088fd37aed349d67278028a0b0a1faf1d3d48..23c507482d8dbeab913563be8b8bd66218415a07 100755 (executable)
--- 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 = $('<div class="interactiveDropdownHeader" />').appendTo(this._container);
                        $('<span class="interactiveDropdownTitle">' + options.title + '</span>').appendTo($header);
-                       this._linkList = $('<ul class="interactiveDropdownLinks"></ul>').appendTo($header);
+                       this._linkList = $('<ul class="interactiveDropdownLinks inlineList"></ul>').appendTo($header);
                        
                        $itemContainer = $('<div class="interactiveDropdownItemsContainer" />').appendTo(this._container);
                        this._itemList = $('<ul class="interactiveDropdownItems" />').appendTo($itemContainer);

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index cc2e2c3ce7c164bb7c85dbb4cf6ed3b345bebd98..aa1f4660ba69ce0198fbeb70637a13868e3e791d 100644 (file)
--- 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 35bc935aa7531738c12eb9cd1f80bdef1566601d..40d75057da38cc21902e0c84a078a83143fbfa37 100644 (file)
--- 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 (file)
index 0000000..80c2e87
--- /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%);
+                                       }
+                               }
+                       }
+               }
+       }
+}