From 28c5a05a0a4419f69e7669129138fe29b6d68794 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Mon, 26 Jan 2015 22:58:48 +0100 Subject: [PATCH] Updated user menu to better match the other dropdowns --- com.woltlab.wcf/templates/userPanel.tpl | 70 ++++++++++++++-------- wcfsetup/install/files/js/WCF.User.js | 17 ++++++ wcfsetup/install/files/js/WCF.js | 39 ++++++++---- wcfsetup/install/files/style/dropdown.less | 27 +++++++++ 4 files changed, 116 insertions(+), 37 deletions(-) diff --git a/com.woltlab.wcf/templates/userPanel.tpl b/com.woltlab.wcf/templates/userPanel.tpl index 6c333e08c2..4ebc5315bb 100644 --- a/com.woltlab.wcf/templates/userPanel.tpl +++ b/com.woltlab.wcf/templates/userPanel.tpl @@ -1,29 +1,51 @@ {if $__wcf->user->userID} - +
  • + {@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(24)} {lang}wcf.user.userNote{/lang} +
    +
    + {$__wcf->user->username} + {hascontent} +
      + {content} + {event name='userMenuLinks'} + {/content} +
    + {/hascontent} +
    +
    + +
    + {lang}wcf.user.logout{/lang} +
    +
    • diff --git a/wcfsetup/install/files/js/WCF.User.js b/wcfsetup/install/files/js/WCF.User.js index 9767fb9d6e..daa00fd557 100644 --- a/wcfsetup/install/files/js/WCF.User.js +++ b/wcfsetup/install/files/js/WCF.User.js @@ -524,6 +524,23 @@ WCF.User.Panel.Notification = WCF.User.Panel.Abstract.extend({ } }); +/** + * User Panel implementation for user menu dropdown. + * + * @see WCF.User.Panel.Abstract + */ +WCF.User.Panel.UserMenu = WCF.User.Panel.Abstract.extend({ + /** + * @see WCF.User.Panel.Abstract.init() + */ + init: function() { + this._super($('#userMenu'), 'userMenu', { + pointerOffset: '13px', + staticDropdown: true + }); + } +}); + /** * Quick login box */ diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index ba609a7baf..7383d003b4 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -1424,6 +1424,12 @@ WCF.Dropdown.Interactive.Instance = Class.extend({ */ _linkList: null, + /** + * option list + * @var object + */ + _options: { }, + /** * arrow pointer * @var jQuery @@ -1445,22 +1451,29 @@ WCF.Dropdown.Interactive.Instance = Class.extend({ * @param object options */ init: function(dropdownContainer, triggerElement, identifier, options) { + this._options = options || { }; this._triggerElement = triggerElement; - this._container = $('
    ').click(function(event) { event.stopPropagation(); }); - - var $header = $('
    ').appendTo(this._container); - $('' + options.title + '').appendTo($header); - this._linkList = $('
      ').appendTo($header); - - var $itemContainer = $('
      ').appendTo(this._container); - this._itemList = $('
        ').appendTo($itemContainer); - - $('' + WCF.Language.get('wcf.user.panel.showAll') + '').appendTo(this._container); + var $itemContainer = null; + if (options.staticDropdown === true) { + this._container = this._triggerElement.find('.interactiveDropdownStatic:eq(0)').data('source', identifier).click(function(event) { event.stopPropagation(); }); + } + else { + this._container = $('
        ').click(function(event) { event.stopPropagation(); }); + + var $header = $('
        ').appendTo(this._container); + $('' + options.title + '').appendTo($header); + this._linkList = $('
          ').appendTo($header); + + $itemContainer = $('
          ').appendTo(this._container); + this._itemList = $('
            ').appendTo($itemContainer); + + $('' + WCF.Language.get('wcf.user.panel.showAll') + '').appendTo(this._container); + } this._pointer = $('').appendTo(this._container); - if (!$.browser.mobile) { + if (!$.browser.mobile && $itemContainer !== null) { // use jQuery scrollbar on desktop, mobile browsers have a similar display built-in $itemContainer.perfectScrollbar({ suppressScrollX: true @@ -1642,7 +1655,7 @@ WCF.Dropdown.Interactive.Instance = Class.extend({ }); this._pointer.css({ - left: '4px' + left: (this._options.pointerOffset ? this._options.pointerOffset : '4px') }); } else { @@ -1653,7 +1666,7 @@ WCF.Dropdown.Interactive.Instance = Class.extend({ }); this._pointer.css({ - right: '4px' + right: (this._options.pointerOffset ? this._options.pointerOffset : '4px') }); } }, diff --git a/wcfsetup/install/files/style/dropdown.less b/wcfsetup/install/files/style/dropdown.less index 65b16450c1..608a72134d 100644 --- a/wcfsetup/install/files/style/dropdown.less +++ b/wcfsetup/install/files/style/dropdown.less @@ -425,6 +425,23 @@ } } } + + &.interactiveDropdownItemsUserMenu { + > li { + &:not(.dropdownDivider) { + border-bottom-width: 0 !important; + } + + &.dropdownDivider { + padding: 0; + } + + > a { + display: block; + text-decoration: none; + } + } + } } } @@ -456,6 +473,16 @@ z-index: 101; } } + + &.interactiveDropdownUserMenu > .pointer { + border-width: 0 7px 7px 7px; + top: -7px; + + > span { + border-width: 0 5px 5px 5px; + left: -5px; + } + } } @media only screen and (min-width: 801px) { -- 2.20.1