Interactive dropdown overhaul

diff --git a/com.woltlab.wcf/templates/notificationListUserPanel.tpl b/com.woltlab.wcf/templates/notificationListUserPanel.tpl
index 0e5a4819abf467eb44aecf26611b18a04256c1c9..924b98c7625c756e81aefbb0feab3b69d7b09c8c 100644 (file)
--- a/com.woltlab.wcf/templates/notificationListUserPanel.tpl
+++ b/com.woltlab.wcf/templates/notificationListUserPanel.tpl
@@ -1,11 +1,11 @@
 {foreach from=$notifications[notifications] item=notification}
        <li class="notificationItem{if $notification[event]->getAuthors()|count > 1} groupedNotificationItem{/if}{if !$notification[event]->isConfirmed()} interactiveDropdownItemOutstanding{/if}" data-link="{if $notification[event]->isConfirmed()}{$notification[event]->getLink()}{else}{link controller='NotificationConfirm' id=$notification[notificationID]}{/link}{/if}" data-link-replace-all="{if $notification[event]->isConfirmed()}false{else}true{/if}" data-object-id="{@$notification[notificationID]}" data-is-read="{if $notification[event]->isConfirmed()}true{else}false{/if}">
-               <div class="box32">
-                       <div class="framed">
+               <div class="box48">
+                       <div>
                                {if $notification[event]->getAuthors()|count < 2}
-                                       {@$notification[event]->getAuthor()->getAvatar()->getImageTag(32)}
+                                       {@$notification[event]->getAuthor()->getAvatar()->getImageTag(48)}
                                {else}
-                                       <span class="icon icon32 fa-users"></span>
+                                       <span class="icon icon48 fa-users"></span>
                                {/if}
                        </div>
                        
@@ -15,4 +15,4 @@
                        </div>
                </div>
        </li>
-{/foreach}
\ No newline at end of file
+{/foreach}

diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index a1dc79959b4996cd0a5b20ee98d51269875c6cd3..22fbe3e4f3283b3d9648db5adb5f761cce399176 100644 (file)
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -3,7 +3,7 @@
                {if $__wcf->user->userID}
                        <!-- user menu -->
                        <li id="userMenu">
-                               <a class="framed" href="{link controller='User' object=$__wcf->user}{/link}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span></a>
+                               <a class="jsTooltip" href="{link controller='User' object=$__wcf->user}{/link}" title="{lang}wcf.user.controlPanel{/lang}">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span></a>
                                <div class="interactiveDropdown interactiveDropdownStatic interactiveDropdownUserMenu">
                                        <div class="interactiveDropdownHeader">
                                                <span class="interactiveDropdownTitle">{lang}wcf.user.controlPanel{/lang}</span>
@@ -19,23 +19,23 @@
                                        <div class="interactiveDropdownItemsContainer">
                                                <ul class="interactiveDropdownItems interactiveDropdownItemsUserMenu">
                                                        <li>
-                                                               <div class="box64">
-                                                                       <a href="{link controller='User' object=$__wcf->user}{/link}" class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(64)}</a>
+                                                               <div class="box48">
+                                                                       <a href="{link controller='User' object=$__wcf->user}{/link}" class="framed">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(48)}</a>
                                                                        
                                                                        <div class="containerHeadline">
-                                                                               <h3><a href="{link controller='User' object=$__wcf->user}{/link}">{$__wcf->user->username}</a></h3>
-                                                                               {if MODULE_USER_RANK}
-                                                                                       <p>
+                                                                               <h3>
+                                                                                       <a href="{link controller='User' object=$__wcf->user}{/link}">{$__wcf->user->username}</a>
+                                                                                       {if MODULE_USER_RANK}
                                                                                                {if $__wcf->getUserProfileHandler()->getUserTitle()}
                                                                                                        <span class="badge userTitleBadge{if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->cssClassName} {@$__wcf->getUserProfileHandler()->getRank()->cssClassName}{/if}">{$__wcf->getUserProfileHandler()->getUserTitle()}</span>
                                                                                                {/if}
                                                                                                {if $__wcf->getUserProfileHandler()->getRank() && $__wcf->getUserProfileHandler()->getRank()->rankImage}
                                                                                                        <span class="userRankImage">{@$__wcf->getUserProfileHandler()->getRank()->getImage()}</span>
                                                                                                {/if}
-                                                                                       </p>
-                                                                               {/if}
+                                                                                       {/if}
+                                                                               </h3>
                                                                                
-                                                                               <ul class="interactiveDropdownUserMenuLinkList">
+                                                                               <ul class="inlineList dotSeparated">
                                                                                        <li><a href="{link controller='User' object=$__wcf->user}{/link}">{lang}wcf.user.myProfile{/lang}</a></li>
                                                                                        {if $__wcf->getUserProfileHandler()->canEditOwnProfile()}<li><a href="{link controller='User' object=$__wcf->user}editOnInit=true#about{/link}">{lang}wcf.user.editProfile{/lang}</a></li>{/if}
                                                                                        {if $__wcf->session->getPermission('admin.general.canUseAcp')}<li><a href="{link isACP=true}{/link}">{lang}wcf.global.acp.short{/lang}</a></li>{/if}
@@ -48,13 +48,13 @@
                                                        
                                                        {foreach from=$__wcf->getUserMenu()->getMenuItems('') item=menuCategory}
                                                                <li class="interactiveDropdownUserMenuItem">
-                                                                       <div class="box32">
-                                                                               <div><span class="icon icon32 {@$menuCategory->getIconClassName()}"></span></div>
+                                                                       <div class="box48">
+                                                                               <div><span class="icon icon48 {@$menuCategory->getIconClassName()}"></span></div>
                                                                                
                                                                                <div class="containerHeadline">
                                                                                        <h3>{lang}{$menuCategory->menuItem}{/lang}</h3>
                                                                                        
-                                                                                       <ul class="interactiveDropdownUserMenuLinkList">
+                                                                                       <ul class="inlineList dotSeparated">
                                                                                                {foreach from=$__wcf->getUserMenu()->getMenuItems($menuCategory->menuItem) item=menuItem}
                                                                                                        <li><a href="{$menuItem->getProcessor()->getLink()}">{@$menuItem}</a></li>
                                                                                                {/foreach}
@@ -76,12 +76,10 @@
                                </script>
                        </li>
                        
-                       <li><a href="{link controller='Settings'}{/link}" class="noJsOnly" style="display: none"><span class="icon icon32 fa-cogs"></span> <span>{lang}wcf.user.menu.settings{/lang}</span></a></li>
-                       
                        <!-- user notifications -->
                        {if !$__hideUserMenu|isset}
                                <li id="userNotifications" data-count="{#$__wcf->getUserNotificationHandler()->getNotificationCount()}">
-                                       <a href="{link controller='NotificationList'}{/link}"><span class="icon icon32 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeUpdate">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
+                                       <a class="jsTooltip" href="{link controller='NotificationList'}{/link}" title="{lang}wcf.user.notification.notifications{/lang}"><span class="icon icon32 fa-bell-o"></span> <span>{lang}wcf.user.notification.notifications{/lang}</span>{if $__wcf->getUserNotificationHandler()->getNotificationCount()} <span class="badge badgeUpdate">{#$__wcf->getUserNotificationHandler()->getNotificationCount()}</span>{/if}</a>
                                        {if !OFFLINE || $__wcf->session->getPermission('admin.general.canViewPageDuringOfflineMode')}
                                                <script data-relocate="true">
                                                        //<![CDATA[
@@ -231,7 +229,7 @@
                {if !$__hideUserMenu|isset}
                        {if $__wcf->user->userID && $__wcf->session->getPermission('mod.general.canUseModeration')}
                                <li id="outstandingModeration" data-count="{#$__wcf->getModerationQueueManager()->getOutstandingModerationCount()}">
-                                       <a href="{link controller='ModerationList'}{/link}">
+                                       <a class="jsTooltip" href="{link controller='ModerationList'}{/link}" title="{lang}wcf.moderation.moderation{/lang}">
                                                <span class="icon icon32 fa-exclamation-triangle"></span>
                                                <span>{lang}wcf.moderation.moderation{/lang}</span>
                                                {if $__wcf->getModerationQueueManager()->getUnreadModerationCount()}<span class="badge badgeUpdate">{#$__wcf->getModerationQueueManager()->getUnreadModerationCount()}</span>{/if}
@@ -257,9 +255,5 @@
                        
                        {event name='menuItems'}
                {/if}
-               
-               {if $__wcf->user->userID}
-                       <li><a href="{link controller='Logout'}t={@SECURITY_TOKEN}{/link}" class="noJsOnly" style="display: none"><span class="icon icon32 fa-sign-out"></span> <span>{lang}wcf.user.logout{/lang}</span></a></li>
-               {/if}
        </ul>
 </nav>
\ No newline at end of file

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index ab7bb640434e2143c1e43227a6b41588a140e579..a1aee5bc2271762bb170ec2234316464091e9d4e 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -238,6 +238,17 @@
                                        transform-origin: 50% 0;
                                }
                        }
+                       
+                       /* hover effect for user menu button */
+                       &#userMenu {
+                               > a {
+                                       &:hover {
+                                               > img {
+                                                       box-shadow: 0 0 0 2px $wcfHeaderLink;
+                                               }
+                                       }
+                               }
+                       }
                }
        }
 }

diff --git a/wcfsetup/install/files/style/ui/dropdownInteractive.scss b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
index 9ad1bd9457fa8b6100b363f035f3dd9a608206a0..a63097353973777526a64473dd7be5bc860538a5 100644 (file)
--- a/wcfsetup/install/files/style/ui/dropdownInteractive.scss
+++ b/wcfsetup/install/files/style/ui/dropdownInteractive.scss
@@ -1,9 +1,8 @@
+/* styling for interactive dropdowns (currently only used in the user panel) */
 .interactiveDropdown {
-       background-color: $wcfDropdownBackground;
-       border: 1px solid $wcfDropdownBorder;
-       border-width: 1px 0;
+       background-color: $wcfContentBackground;
        box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .2);
-       color: $wcfDropdownLink;
+       color: $wcfContentText;
        display: block;
        position: absolute;
        z-index: 450;
@@ -14,7 +13,7 @@
        
        > .elementPointer {
                border: 10px solid transparent;
-               border-bottom-color: $wcfDropdownBorder;
+               //border-bottom-color: $wcfDropdownBorder;
                border-top-width: 0;
                content: "";
                display: block;
@@ -23,7 +22,7 @@
                
                > span {
                        border: 8px solid transparent;
-                       border-bottom-color: rgb(247, 248, 250); // @todo
+                       border-bottom-color: $wcfSidebarBackground;
                        border-top-width: 0;
                        content: "";
                        display: block;
@@ -55,26 +54,39 @@
        }
 }
 
+/* drop down header */
 .interactiveDropdownHeader {
        align-items: center;
-       background-color: rgb(247, 248, 250); // @todo
+       background-color: $wcfSidebarBackground;
+       color: $wcfSidebarHeadlineText;
        display: flex;
-       padding: 5px 10px;
-}
-
-.interactiveDropdownTitle {
-       flex: 1 1 auto;
+       padding: 10px 20px;
        
-       @extend .wcfFontHeadline;
-}
-
-.interactiveDropdownLinks {
-       flex: 0 0 auto;
-       margin-left: 5px;
+       a {
+               color: $wcfSidebarHeadlineLink;
+               
+               &:hover {
+                       color: $wcfSidebarHeadlineLinkActive;
+                       
+                       text-decoration: underline;
+               }
+       }
+       
+       .interactiveDropdownTitle {
+               flex: 1 1 auto;
+               
+               @extend .wcfFontHeadline;
+       }
+       
+       .interactiveDropdownLinks {
+               flex: 0 0 auto;
+               margin-left: 5px;
+       }
 }
 
+/* container for dropdown items */
 .interactiveDropdownItemsContainer {
-       border: 1px solid $wcfDropdownBorderInner;
+       border: 1px solid $wcfContentBorderInner;
        border-width: 1px 0;
        max-height: 300px;
        
@@ -90,24 +102,18 @@
        }
 }
 
+/* dropdown item list */
 .interactiveDropdownItems {
-       background-color: $wcfDropdownBackground;
-       
        > li {
-               color: $wcfContentText;
-               padding: 8px 10px;
+               padding: 15px 20px;
                position: relative;
                
                &:not(:last-child) {
-                       border-bottom: 1px solid $wcfDropdownBorderInner;
+                       border-bottom: 1px solid $wcfContentBorderInner;
                }
                
                &:hover {
-                       background-color: rgb(242, 242, 242);
-               }
-               
-               > .box32 {
-                       margin-bottom: 0;
+                       background-color: $wcfTabularBoxBackgroundActive;
                }
                
                a {
@@ -117,6 +123,11 @@
                                color: $wcfContentLinkActive;
                        }
                }
+               
+               .box48 {
+                       align-items: center;
+                       overflow: hidden;
+               }
        }
        
        .loading,
@@ -126,45 +137,13 @@
                
                @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;
-               }
-       }
 }
 
+/* outstanding / unread item */
 .interactiveDropdownItemOutstanding {
        display: flex;
        
-       > .box32 {
+       > .box48 {
                flex: 1 1 auto;
        }
        
@@ -173,18 +152,22 @@
        }
 }
 
+/* mark as read button for an item */
 .interactiveDropdownItemMarkAsRead {
        align-self: center;
        flex: 0 0 auto;
        margin-left: 5px;
 }
 
-&.interactiveDropdownItemShadow {
-       > .box32 {
+/* Adds a link spanning the entire item while being placed behind all other links appearing
+   within the regular text using a lower z-index. Allows for regular links to be accessible,
+   but causes the item to act as a link. */
+.interactiveDropdownItemShadow {
+       > .box48 {
                position: relative;
        }
        
-       > .box32,
+       > .box48,
        > .interactiveDropdownItemMarkAsRead {
                pointer-events: none;
                z-index: 20;
@@ -203,51 +186,17 @@
                z-index: 10;
        }
 }
-       
-.interactiveDropdownItemsUserMenu > li {
-       h3 {
-               @extend .wcfFontHeadline
-       }
-       
-       .box64 {
-               position: relative;
-               
-               .containerHeadline {
-                       padding-bottom: 10px;
-               }
-               
-               .interactiveDropdownUserMenuLinkList {
-                       bottom: 0;
-                       position: absolute;
-               }
-       }
-       
-       .icon {
-               position: relative;
-               top: 5px;
-       }
-       
-       .interactiveDropdownUserMenuLinkList > li {
-               display: inline-block;
-               
-               @extend .wcfFontSmall;
-               
-               &:not(:last-child)::after {
-                       content: "\00b7";
-                       margin-left: 5px;
-               }
-       }
-}
 
+/* show all button shown in dropdown menu bottom */
 .interactiveDropdownShowAll {
-       background-color: rgb(247, 248, 250);
-       color: $wcfDropdownLink;
+       background-color: $wcfSidebarBackground;
+       color: $wcfSidebarHeadlineText;
        display: block;
-       padding: 5px 10px;
+       padding: 10px 20px;
        text-align: center;
        
        &:hover {
-               color: $wcfDropdownLink;
+               color: $wcfSidebarHeadlineText;
                text-decoration: underline;
        }
 }
@@ -262,11 +211,12 @@
                position: relative;
        }
        
-       .interactiveDropdownItems .notificationItem {
+       .interactiveDropdownItems:not(.interactiveDropdownItemsUserMenu) > li {
                max-width: 400px;
        }
 }
 
+/* todo: mobile version
 @media only screen and (max-width: 800px) {
        .DEBUG_ONLY_interactiveDropdown {
                border-width: 1px 0;
@@ -303,3 +253,4 @@
                }
        }
 }
+*/
\ No newline at end of file