diff --git a/api/js/framework/fw_base.js b/api/js/framework/fw_base.js index 0357c6a865..a200dc114d 100644 --- a/api/js/framework/fw_base.js +++ b/api/js/framework/fw_base.js @@ -1164,5 +1164,39 @@ var fw_base = (function(){ "use strict"; return Class.extend( } } } + }, + + /** + * Set a notification message for topmenu info item + * + * @param {string} _id id of topmenu info item with its prefix + * @param {string} _message message that should be displayed + * @param {string} _tooltip hint text as tooltip + */ + topmenu_info_notify: function(_id, _switch, _message, _tooltip) { + var $items = jQuery('#egw_fw_topmenu_info_items').children(); + var prefix = "topmenu_info_"; + + $items.each(function(i,item){ + if (item.id == prefix+_id || item.id == _id) + { + var $notify = jQuery(item).find('.egw_fw_topmenu_info_notify'); + if (_switch) + { + if ($notify.length == 0) + { + $notify = jQuery(document.createElement('div')) + .addClass('egw_fw_topmenu_info_notify') + .prop('title', _tooltip) + .appendTo(item); + } + $notify.prop('title', _tooltip).text(_message); + } + else + { + $notify.remove(); + } + } + }); } });}).call(this); diff --git a/api/src/Framework.php b/api/src/Framework.php index 233f4f9c27..f2c73f263c 100644 --- a/api/src/Framework.php +++ b/api/src/Framework.php @@ -1121,52 +1121,70 @@ abstract class Framework extends Framework\Extra */ function topmenu(array $vars,array $apps) { - $this->_add_topmenu_info_item($this->_user_avatar_menu(), 'user_avatar'); + // array of topmenu info items (orders of the items matter) + $topmenu_info_items = [ + 'user_avatar' => $this->_user_avatar_menu(), + 'logout' => (Header\UserAgent::mobile() || $GLOBALS['egw_info']['user']['preferences']['common']['theme'] == 'fw_mobile') ? self::_logout_menu() : null, + 'update' => ($update = Framework\Updates::notification()) ? $update : null, + 'notifications' => ($GLOBALS['egw_info']['user']['apps']['notifications']) ? self::_get_notification_bell() : null, + 'quick_add' => $vars['quick_add'], + 'print_title' => $this->_print_menu() + ]; + + // array of topmenu items (orders of the items matter) + $topmenu_items = [ + 0 => (is_array(($current_user = $this->_current_users()))) ? $current_user : null, + ]; + + // Home should be at the top before preferences if($GLOBALS['egw_info']['user']['apps']['home'] && isset($apps['home'])) { $this->_add_topmenu_item($apps['home']); } + // array of topmenu preferences items (orders of the items matter) + $topmenu_preferences = ['prefs', 'acl', 'cats', 'security']; + + // set topmenu preferences items if($GLOBALS['egw_info']['user']['apps']['preferences']) { - $this->add_preferences_topmenu('prefs'); - $this->add_preferences_topmenu('acl'); - $this->add_preferences_topmenu('cats'); - $this->add_preferences_topmenu('security'); + foreach ($topmenu_preferences as $prefs) + { + $this->add_preferences_topmenu($prefs); + } } - /* disable help until content is reworked - if($GLOBALS['egw_info']['user']['apps']['manual'] && isset($apps['manual'])) - { - $this->_add_topmenu_item(array_merge($apps['manual'],array('title' => lang('Help')))); - }*/ - + // call topmenu info items hooks Hooks::process('topmenu_info',array(),true); - if (($update = Framework\Updates::notification())) - { - $this->_add_topmenu_info_item($update, 'update'); - } - if($GLOBALS['egw_info']['user']['apps']['notifications']) - { - $this->_add_topmenu_info_item(self::_get_notification_bell(), 'notifications'); - } - - if (is_array(($current_user = $this->_current_users()))) $this->_add_topmenu_item($current_user); - $this->_add_topmenu_info_item($vars['quick_add'], 'quick_add'); - $this->_add_topmenu_info_item($this->_print_menu(), 'print_title'); // Add extra items added by hooks foreach(self::$top_menu_extra as $extra_item) { if ($extra_item['name'] == 'search') { - $this->_add_topmenu_info_item('', 'search'); + $topmenu_info_items['search'] = ''; } else { - $this->_add_topmenu_item($extra_item); + array_push($topmenu_items, $extra_item); } } - $this->_add_topmenu_item($apps['logout']); + // push logout as the last item in topmenu items list + array_push($topmenu_items, $apps['logout']); + + // set topmenu info items + foreach ($topmenu_info_items as $id => $content) + { + if (!$content || (in_array($id, ['search', 'quick_add', 'update']) && (Header\UserAgent::mobile() || $GLOBALS['egw_info']['user']['preferences']['common']['theme'] == 'fw_mobile'))) + { + continue; + } + $this->_add_topmenu_info_item($content, $id); + } + // set topmenu items + foreach ($topmenu_items as $item) + { + if ($item) $this->_add_topmenu_item($item); + } } /** diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 37c998e23a..fb9ca76f22 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -6982,6 +6982,8 @@ span.egw_tutorial_title { body .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { background-image: url(../images/topmenu_items/mobile/menu.png); } + body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_topmenu_info_items, + body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_topmenu, body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo, body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout, body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_appsToggle { diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 62c3a396ca..d55c42132e 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -680,7 +680,7 @@ .sidebar-toggle{ #egw_fw_top_toolbar { div#egw_fw_menu {background-image: url(../images/topmenu_items/mobile/menu.png);} - #egw_fw_userinfo, .egw_fw_logout, #egw_fw_appsToggle {display: none !important;} + #egw_fw_topmenu_info_items, #egw_fw_topmenu, #egw_fw_userinfo, .egw_fw_logout, #egw_fw_appsToggle {display: none !important;} } #egw_fw_sidebar{ top: 70px; diff --git a/pixelegg/head_mobile.tpl b/pixelegg/head_mobile.tpl index 1482db52c4..eef9116689 100644 --- a/pixelegg/head_mobile.tpl +++ b/pixelegg/head_mobile.tpl @@ -32,25 +32,29 @@ {hook_after_navbar}
-
- -
+ +
+ + +
+
-
0
-
- +
+ {topmenu_info_items}
-
- - - - +
+
+ {topmenu_items} +
+ {user_info} +
+ {powered_by} +
-
{topmenu_items}
diff --git a/pixelegg/js/fw_mobile.js b/pixelegg/js/fw_mobile.js index 8301fba2fa..5da8ccb1ca 100644 --- a/pixelegg/js/fw_mobile.js +++ b/pixelegg/js/fw_mobile.js @@ -396,12 +396,7 @@ { this._super.apply(this,arguments); this.setSidebarState(this.activeApp.preferences.toggleMenu); - var self = this; - var $user = jQuery('#egw_fw_userinfo .user'); - - var $avatar = jQuery('#egw_fw_userinfo .avatar img'); - $avatar.attr('src', egw.webserverUrl + '/api/avatar.php?account_id=' + egw.user('account_id')); - + var $avatar = jQuery('#topmenu_info_user_avatar'); var $sidebar = jQuery('#egw_fw_sidebar'); $sidebar.removeClass('avatarSubmenu'); this.updateAppsToggle(); @@ -409,8 +404,6 @@ $avatar.off().on('click',function(){ $sidebar.toggleClass('avatarSubmenu',!$sidebar.hasClass('avatarSubmenu')); }); - - }, /** @@ -462,13 +455,13 @@ if (state === 'on') { jQuery('.egw_fw_sidebar_dropMask').remove(); - $toggleMenu.addClass('sidebar-toggle'); + $toggleMenu.addClass('sidebar-toggle egw_fw_sidebar_toggleOn'); this.toggleMenuResizeHandler(collapseSize); this.setToggleMenuState('off'); } else { - $toggleMenu.removeClass('sidebar-toggle'); + $toggleMenu.removeClass('sidebar-toggle egw_fw_sidebar_toggleOn'); this.toggleMenuResizeHandler(expandSize); this.setToggleMenuState('on'); if (screen.width<700) @@ -1058,7 +1051,7 @@ jQuery(document).ready(function() { window.framework = new fw_mobile("egw_fw_sidemenu", "egw_fw_tabs", - window.egw_webserverUrl, egw_setSideboxSize, 300, 'egw_fw_basecontainer', 'egw_fw_menu'); + window.egw_webserverUrl, egw_setSideboxSize, 300, 'egw_fw_basecontainer', 'egw_fw_toggler'); window.callManual = window.framework.callManual; jQuery('#egw_fw_print').click(function(){window.framework.print();}); jQuery('#topmenu_logout').click(function(){ window.framework.redirect(this.getAttribute('href')); return false;}); diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 3ec02dbe97..d28dae544a 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -6993,6 +6993,8 @@ span.egw_tutorial_title { body .sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { background-image: url(../images/topmenu_items/mobile/menu.png); } + body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_topmenu_info_items, + body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_topmenu, body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo, body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout, body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_appsToggle { @@ -7620,7 +7622,8 @@ form[id^="ranking-"] .dialogHeadbar { left: 10px; float: none; } - body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar #egwpopup_fw_notifications { + body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar #egwpopup_fw_notifications, + body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar #egw_fw_topmenu_info_items { display: none !important; } body #egw_fw_basecontainer.sidebar-toggle #egw_fw_top_toolbar div#egw_fw_menu { @@ -7682,6 +7685,20 @@ form[id^="ranking-"] .dialogHeadbar { body #egw_fw_basecontainer #egw_fw_top_toolbar #egwpopup_fw_notifications .popup_note { display: none; } + body #egw_fw_basecontainer #egw_fw_top_toolbar #egw_fw_topmenu_info_items { + height: 50px; + } + body #egw_fw_basecontainer #egw_fw_top_toolbar #egw_fw_topmenu_info_items .topmenu_info_item { + border: 0; + height: 50px; + } + body #egw_fw_basecontainer #egw_fw_top_toolbar #egw_fw_topmenu_info_items #topmenu_info_print_title span { + height: 50px; + } + body #egw_fw_basecontainer #egw_fw_top_toolbar #egw_fw_topmenu_info_items #topmenu_info_user_avatar span { + margin-top: 4px; + margin-left: 0px; + } body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul { border-left: 6px solid silver; } @@ -7739,6 +7756,29 @@ form[id^="ranking-"] .dialogHeadbar { body #egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_apps > div { margin-bottom: 5px; } + body #egw_fw_basecontainer #egw_fw_toggler { + height: 50px; + } + body #egw_fw_basecontainer #egw_fw_toggler span { + top: 15px; + } + body #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler { + height: 50px; + background-color: transparent; + } + body #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler span { + top: 15px; + } + body #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler span, + body #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span { + background-color: white; + } + body #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler span:before, + body #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:before, + body #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler span:after, + body #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span:after { + background-color: white !important; + } body div.dhtmlxMenu_egw_SubLevelArea_Polygon { font-size: medium; top: 50px !important; diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less index 5c393baaa7..ef579ba28f 100644 --- a/pixelegg/mobile/fw_mobile.less +++ b/pixelegg/mobile/fw_mobile.less @@ -385,7 +385,7 @@ } #egw_fw_basecontainer.sidebar-toggle { #egw_fw_top_toolbar { - #egwpopup_fw_notifications {display: none !important;} + #egwpopup_fw_notifications, #egw_fw_topmenu_info_items {display: none !important;} div#egw_fw_menu { background-image: url(../images/topmenu_items/mobile/menu.svg); width: 50px; @@ -443,6 +443,24 @@ margin-left: 15px; .popup_note {display: none;} } + #egw_fw_topmenu_info_items { + height: 50px; + .topmenu_info_item { + border: 0; + height: 50px; + } + #topmenu_info_print_title { + span { + height: 50px; + } + } + #topmenu_info_user_avatar { + span { + margin-top: 4px; + margin-left: 0px; + } + } + } div#egw_fw_topmenu_items { ul { border-left: 6px solid silver; @@ -510,6 +528,27 @@ .egw_fw_ui_sidemenu_entry_apps> div{ margin-bottom: 5px; } + #egw_fw_toggler { + height: 50px; + span { + top: 15px; + } + } + } + #egw_fw_basecontainer.egw_fw_sidebar_toggleOn { + #egw_fw_toggler { + height: 50px; + background-color: transparent; + span { + top: 15px; + } + } + + } + #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler span, + #egw_fw_basecontainer.egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span{ + background-color: white; + &:before, &:after {background-color: white !important} }