From f424b1cdb6b1ea110152c30707dc75356fa9e3ba Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 27 May 2019 17:11:43 +0200 Subject: [PATCH] WIP new framework style: - Fix tab's close buttons jump while hovering - Add search menu into info menu - Add notifications as info menu and style it nicely - Toggle avatar top menu by clicking away on body - Fix notifications popup message alignment --- api/js/framework/fw_desktop.js | 18 ++- api/src/Framework.php | 21 +-- pixelegg/css/mobile.css | 169 ++++++++++++---------- pixelegg/css/monochrome.css | 169 ++++++++++++---------- pixelegg/css/pixelegg.css | 172 +++++++++++++---------- pixelegg/head.tpl | 1 - pixelegg/less/layout_messages.less | 66 +-------- pixelegg/less/layout_raster_buttons.less | 72 +++++++++- pixelegg/less/layout_raster_header.less | 10 +- pixelegg/less/layout_raster_main.less | 29 ++-- pixelegg/less/layout_raster_sidebar.less | 1 + pixelegg/mobile/fw_mobile.css | 169 ++++++++++++---------- 12 files changed, 504 insertions(+), 393 deletions(-) diff --git a/api/js/framework/fw_desktop.js b/api/js/framework/fw_desktop.js index 6034f778a5..2f27562558 100644 --- a/api/js/framework/fw_desktop.js +++ b/api/js/framework/fw_desktop.js @@ -462,7 +462,23 @@ toggle_avatar_menu: function () { - jQuery('#egw_fw_topmenu').toggle(); + var $menu = jQuery('#egw_fw_topmenu'); + var $body = jQuery('body'); + if (!$menu.is(":visible")) + { + $body.on('click', function(e){ + if (e.target.id != 'topmenu_info_user_avatar') + { + jQuery(this).off(e); + $menu.toggle(); + } + }); + } + else + { + $body.off('click'); + } + $menu.toggle(); } }); })(window); diff --git a/api/src/Framework.php b/api/src/Framework.php index 31ab2f4bcc..b3f843bb75 100644 --- a/api/src/Framework.php +++ b/api/src/Framework.php @@ -425,7 +425,7 @@ abstract class Framework extends Framework\Extra { $GLOBALS['egw_info']['server']['versions']['maintenance_release'] = self::api_version(); } - $var['powered_by'] = ''. + $var['powered_by'] = ''. lang('Powered by').' EGroupware '. $GLOBALS['egw_info']['server']['versions']['maintenance_release'].''; @@ -1174,12 +1174,6 @@ abstract class Framework extends Framework\Extra }*/ Hooks::process('topmenu_info',array(),true); - // Add extra items added by hooks - foreach(self::$top_menu_extra as $extra_item) { - $this->_add_topmenu_item($extra_item); - } - - $this->_add_topmenu_item($apps['logout']); if (($update = Framework\Updates::notification())) { @@ -1193,7 +1187,18 @@ abstract class Framework extends Framework\Extra $this->_add_topmenu_item($this->_current_users()); $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'); + } + else + { + $this->_add_topmenu_item($extra_item); + } + } + $this->_add_topmenu_item($apps['logout']); } /** diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index e34b64a452..045d161afa 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -244,6 +244,7 @@ .et2_file .progress li:hover div.remove { width: 16px; height: 16px; + background-image: url("../images/delete.svg"); } .et2_file .progress p { background-color: #FFDD73; @@ -388,6 +389,14 @@ background-size: 12px 12px; padding: 0px; } + .et2_link_list td div.delete { + visibility: hidden; + background-image: url("../images/delete.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 12px 12px; + padding: 0px; + } .egw_tooltip { background-color: #ffffff; } @@ -3442,10 +3451,10 @@ td.lettersearch { * @version $Id$ */ #egwpopup { - top: 85px; + top: 46px; right: 0px !important; left: auto !important; - height: calc(100% - 130px); + height: calc(100% - 69px); width: 277px !important; position: absolute; background: white; @@ -3696,68 +3705,6 @@ td.lettersearch { #egwpopup div#egwpopup_header .egwpopup_deleteall:hover { opacity: 1; } -#egwpopup_fw_notifications { - cursor: pointer; - display: inline-block; - float: right; - margin-right: 1em; - margin-top: 0px; - z-index: 200; - width: 26px; - height: 16px; - top: 11px; - position: fixed; - right: 109px; - border: 1px solid #656565; - border-radius: 3px; - text-align: center; - color: #646464; - font-weight: bold; -} -#egwpopup_fw_notifications .popup_note { - position: absolute; - width: 280px; - height: 30px; - left: -293px; - top: -8px; - border: 1px solid silver; - background: #ffffff; - text-align: center; - font-size: 10pt; - line-height: 22pt; - color: #b9436c; - white-space: nowrap; - z-index: 999; -} -#egwpopup_fw_notifications .popup_note:before { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -10px; - width: 0; - height: 0; - border-left: 10px solid #C2C2C2; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; -} -#egwpopup_fw_notifications .popup_note:after { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -8px; - width: 0; - height: 0; - border-left: 8px solid #FFFFFF; - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; -} -#egwpopup_fw_notifications.egwpopup_notify { - color: white; - background: #b9436c; - border-color: #b9436c; -} /*popup Messsage*/ div#egwpopup_message { background-color: .color_gray_0; @@ -3979,6 +3926,12 @@ td.message span.message { -webkit-box-shadow: 2px 3px 13px #666666; -khtml-box-shadow: 2px 3px 13px #666666; } +#egw_fw_header #egw_fw_topmenu a.powered_by { + width: calc(100% - 20px); + display: inline-block; + padding: 10px; + background-color: #fbfbfb; +} #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_info_items { display: inline-block; background: white; @@ -4086,11 +4039,11 @@ td.message span.message { padding-left: 20px; background-image: url(../images/topmenu_items/help.svg); } -#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search { +#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_current_user { background-repeat: no-repeat; background-size: 16px; padding-left: 20px; - background-image: url(../images/topmenu_items/search.svg); + background-image: url(../images/users.png); } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout { background-repeat: no-repeat; @@ -4187,12 +4140,6 @@ td.message span.message { #egw_fw_main { padding: 0; width: auto; - /* @media screen and (-webkit-min-device-pixel-ratio:0) { - #egw_fw_tabs { - Chrome needs margin-top - margin-top: 3px; - } - }*/ } #egw_fw_main #egw_fw_tabs { position: relative; @@ -4202,12 +4149,12 @@ td.message span.message { } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header { margin: 0px 0 0 0; - padding: 0px 150px 0px 60px; + padding: 0px 250px 0px 60px; background-position: bottom; background-repeat: repeat-x; background-color: transparent; height: 39px; - /*aktive Tabs*/ + /*active Tabs*/ } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 { display: inline; @@ -4240,6 +4187,10 @@ td.message span.message { background-color: rgba(153, 204, 255, 0.4); padding-bottom: 0px; padding-top: 8px; + transition: none; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover:not(.egw_fw_ui_tab_header_active) .egw_fw_ui_tab_close_button { + top: 8px; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { font-size: 11px; @@ -4547,6 +4498,7 @@ td.message span.message { z-index: 1; margin-top: 0px; left: 256px; + background-color: #fbfbfb; } #egw_fw_basecontainer #egw_fw_toggler span { background-color: transparent; @@ -4918,6 +4870,7 @@ td.message span.message { z-index: 1000; background-color: #fbfbfb; /*Notification*/ + /*Search button*/ /*current user info*/ /*current user info*/ /*time zone*/ @@ -4949,9 +4902,11 @@ td.message span.message { border: none; margin-top: 2px; margin-left: 1px; + pointer-events: none; } #egw_fw_topmenu_info_items #topmenu_info_user_avatar span img { width: 40px; + pointer-events: none; } #egw_fw_topmenu_info_items #topmenu_info_logout { background-image: url(../images/logout.svg); @@ -4969,6 +4924,71 @@ td.message span.message { height: 45px; display: inline-block; } +#egw_fw_topmenu_info_items #topmenu_info_notifications { + line-height: 45px; + text-align: center; + cursor: pointer; + display: inline-block; + color: #fbfbfb; + font-weight: bold; + opacity: 0.4; + background-image: url(../images/notification_message.svg); + border-left: 1px solid #636262; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note { + position: absolute; + width: 280px; + height: 30px; + left: -96px; + top: 45px; + border: 1px solid silver; + background: #ffffff; + text-align: center; + font-size: 10pt; + line-height: 22pt; + color: #b9436c; + white-space: nowrap; + z-index: 999; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note:before { + content: ''; + position: absolute; + left: 252px; + width: 0; + height: 0px; + border-left: 14px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #aaa; + margin-bottom: 12px; + margin-left: 1px; + top: -12px; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note:after { + content: ''; + position: absolute; + top: -10px; + left: 252px; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #ffffff; + margin-bottom: 11px; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications.egwpopup_notify { + background-image: url(../images/notification_message_active.svg); + opacity: 1; + border-left: 1px solid #bfc0bf; +} +#egw_fw_topmenu_info_items #topmenu_info_search { + background-repeat: no-repeat; + background-image: url(../images/topmenu_items/search.svg); +} +#egw_fw_topmenu_info_items #topmenu_info_search a { + width: 45px; + height: 45px; + display: inline-block; +} #egw_fw_topmenu_info_items form { height: 0px; } @@ -4993,6 +5013,7 @@ td.message span.message { background-color: white; } #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container { + z-index: 1000; position: fixed; right: 93px !important; top: 47px; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 4eeeb20e29..6661075271 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -233,6 +233,7 @@ .et2_file .progress li:hover div.remove { width: 16px; height: 16px; + background-image: url("../images/delete.svg"); } .et2_file .progress p { background-color: #FFDD73; @@ -377,6 +378,14 @@ background-size: 12px 12px; padding: 0px; } + .et2_link_list td div.delete { + visibility: hidden; + background-image: url("../images/delete.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 12px 12px; + padding: 0px; + } .egw_tooltip { background-color: #ffffff; } @@ -3431,10 +3440,10 @@ td.lettersearch { * @version $Id$ */ #egwpopup { - top: 85px; + top: 46px; right: 0px !important; left: auto !important; - height: calc(100% - 130px); + height: calc(100% - 69px); width: 277px !important; position: absolute; background: white; @@ -3685,68 +3694,6 @@ td.lettersearch { #egwpopup div#egwpopup_header .egwpopup_deleteall:hover { opacity: 1; } -#egwpopup_fw_notifications { - cursor: pointer; - display: inline-block; - float: right; - margin-right: 1em; - margin-top: 0px; - z-index: 200; - width: 26px; - height: 16px; - top: 11px; - position: fixed; - right: 109px; - border: 1px solid #656565; - border-radius: 3px; - text-align: center; - color: #646464; - font-weight: bold; -} -#egwpopup_fw_notifications .popup_note { - position: absolute; - width: 280px; - height: 30px; - left: -293px; - top: -8px; - border: 1px solid silver; - background: #ffffff; - text-align: center; - font-size: 10pt; - line-height: 22pt; - color: #b9436c; - white-space: nowrap; - z-index: 999; -} -#egwpopup_fw_notifications .popup_note:before { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -10px; - width: 0; - height: 0; - border-left: 10px solid #C2C2C2; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; -} -#egwpopup_fw_notifications .popup_note:after { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -8px; - width: 0; - height: 0; - border-left: 8px solid #FFFFFF; - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; -} -#egwpopup_fw_notifications.egwpopup_notify { - color: white; - background: #b9436c; - border-color: #b9436c; -} /*popup Messsage*/ div#egwpopup_message { background-color: .color_gray_0; @@ -3968,6 +3915,12 @@ td.message span.message { -webkit-box-shadow: 2px 3px 13px #666666; -khtml-box-shadow: 2px 3px 13px #666666; } +#egw_fw_header #egw_fw_topmenu a.powered_by { + width: calc(100% - 20px); + display: inline-block; + padding: 10px; + background-color: #fbfbfb; +} #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_info_items { display: inline-block; background: white; @@ -4075,11 +4028,11 @@ td.message span.message { padding-left: 20px; background-image: url(../images/topmenu_items/help.svg); } -#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search { +#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_current_user { background-repeat: no-repeat; background-size: 16px; padding-left: 20px; - background-image: url(../images/topmenu_items/search.svg); + background-image: url(../images/users.png); } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout { background-repeat: no-repeat; @@ -4176,12 +4129,6 @@ td.message span.message { #egw_fw_main { padding: 0; width: auto; - /* @media screen and (-webkit-min-device-pixel-ratio:0) { - #egw_fw_tabs { - Chrome needs margin-top - margin-top: 3px; - } - }*/ } #egw_fw_main #egw_fw_tabs { position: relative; @@ -4191,12 +4138,12 @@ td.message span.message { } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header { margin: 0px 0 0 0; - padding: 0px 150px 0px 60px; + padding: 0px 250px 0px 60px; background-position: bottom; background-repeat: repeat-x; background-color: transparent; height: 39px; - /*aktive Tabs*/ + /*active Tabs*/ } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 { display: inline; @@ -4229,6 +4176,10 @@ td.message span.message { background-color: rgba(153, 204, 255, 0.4); padding-bottom: 0px; padding-top: 8px; + transition: none; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover:not(.egw_fw_ui_tab_header_active) .egw_fw_ui_tab_close_button { + top: 8px; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { font-size: 11px; @@ -4536,6 +4487,7 @@ td.message span.message { z-index: 1; margin-top: 0px; left: 256px; + background-color: #fbfbfb; } #egw_fw_basecontainer #egw_fw_toggler span { background-color: transparent; @@ -4907,6 +4859,7 @@ td.message span.message { z-index: 1000; background-color: #fbfbfb; /*Notification*/ + /*Search button*/ /*current user info*/ /*current user info*/ /*time zone*/ @@ -4938,9 +4891,11 @@ td.message span.message { border: none; margin-top: 2px; margin-left: 1px; + pointer-events: none; } #egw_fw_topmenu_info_items #topmenu_info_user_avatar span img { width: 40px; + pointer-events: none; } #egw_fw_topmenu_info_items #topmenu_info_logout { background-image: url(../images/logout.svg); @@ -4958,6 +4913,71 @@ td.message span.message { height: 45px; display: inline-block; } +#egw_fw_topmenu_info_items #topmenu_info_notifications { + line-height: 45px; + text-align: center; + cursor: pointer; + display: inline-block; + color: #fbfbfb; + font-weight: bold; + opacity: 0.4; + background-image: url(../images/notification_message.svg); + border-left: 1px solid #636262; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note { + position: absolute; + width: 280px; + height: 30px; + left: -96px; + top: 45px; + border: 1px solid silver; + background: #ffffff; + text-align: center; + font-size: 10pt; + line-height: 22pt; + color: #b9436c; + white-space: nowrap; + z-index: 999; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note:before { + content: ''; + position: absolute; + left: 252px; + width: 0; + height: 0px; + border-left: 14px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #aaa; + margin-bottom: 12px; + margin-left: 1px; + top: -12px; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note:after { + content: ''; + position: absolute; + top: -10px; + left: 252px; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #ffffff; + margin-bottom: 11px; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications.egwpopup_notify { + background-image: url(../images/notification_message_active.svg); + opacity: 1; + border-left: 1px solid #bfc0bf; +} +#egw_fw_topmenu_info_items #topmenu_info_search { + background-repeat: no-repeat; + background-image: url(../images/topmenu_items/search.svg); +} +#egw_fw_topmenu_info_items #topmenu_info_search a { + width: 45px; + height: 45px; + display: inline-block; +} #egw_fw_topmenu_info_items form { height: 0px; } @@ -4982,6 +5002,7 @@ td.message span.message { background-color: white; } #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container { + z-index: 1000; position: fixed; right: 93px !important; top: 47px; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 4ce2fadf42..f5f1b4b2ad 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -242,9 +242,9 @@ background-color: transparent; } .et2_file .progress li:hover div.remove { - background-image: url("../images/delete.svg"); width: 16px; height: 16px; + background-image: url("../images/delete.svg"); } .et2_file .progress p { background-color: #FFDD73; @@ -381,7 +381,15 @@ width: 14px !important; height: 14px !important; } - .et2_link_list td div.delete, .et2_vfs td div.delete { + .et2_link_list td div.delete { + visibility: hidden; + background-image: url("../images/delete.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 12px 12px; + padding: 0px; + } + .et2_link_list td div.delete { visibility: hidden; background-image: url("../images/delete.svg"); background-position: center; @@ -3443,10 +3451,10 @@ td.lettersearch { * @version $Id$ */ #egwpopup { - top: 85px; + top: 46px; right: 0px !important; left: auto !important; - height: calc(100% - 130px); + height: calc(100% - 69px); width: 277px !important; position: absolute; background: white; @@ -3697,68 +3705,6 @@ td.lettersearch { #egwpopup div#egwpopup_header .egwpopup_deleteall:hover { opacity: 1; } -#egwpopup_fw_notifications { - cursor: pointer; - display: inline-block; - float: right; - margin-right: 1em; - margin-top: 0px; - z-index: 200; - width: 26px; - height: 16px; - top: 11px; - position: fixed; - right: 109px; - border: 1px solid #656565; - border-radius: 3px; - text-align: center; - color: #646464; - font-weight: bold; -} -#egwpopup_fw_notifications .popup_note { - position: absolute; - width: 280px; - height: 30px; - left: -293px; - top: -8px; - border: 1px solid silver; - background: #ffffff; - text-align: center; - font-size: 10pt; - line-height: 22pt; - color: #b9436c; - white-space: nowrap; - z-index: 999; -} -#egwpopup_fw_notifications .popup_note:before { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -10px; - width: 0; - height: 0; - border-left: 10px solid #C2C2C2; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; -} -#egwpopup_fw_notifications .popup_note:after { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -8px; - width: 0; - height: 0; - border-left: 8px solid #FFFFFF; - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; -} -#egwpopup_fw_notifications.egwpopup_notify { - color: white; - background: #b9436c; - border-color: #b9436c; -} /*popup Messsage*/ div#egwpopup_message { background-color: .color_gray_0; @@ -3980,6 +3926,12 @@ td.message span.message { -webkit-box-shadow: 2px 3px 13px #666666; -khtml-box-shadow: 2px 3px 13px #666666; } +#egw_fw_header #egw_fw_topmenu a.powered_by { + width: calc(100% - 20px); + display: inline-block; + padding: 10px; + background-color: #fbfbfb; +} #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_info_items { display: inline-block; background: white; @@ -4087,11 +4039,11 @@ td.message span.message { padding-left: 20px; background-image: url(../images/topmenu_items/help.svg); } -#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search { +#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_current_user { background-repeat: no-repeat; background-size: 16px; padding-left: 20px; - background-image: url(../images/topmenu_items/search.svg); + background-image: url(../images/users.png); } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout { background-repeat: no-repeat; @@ -4188,12 +4140,6 @@ td.message span.message { #egw_fw_main { padding: 0; width: auto; - /* @media screen and (-webkit-min-device-pixel-ratio:0) { - #egw_fw_tabs { - Chrome needs margin-top - margin-top: 3px; - } - }*/ } #egw_fw_main #egw_fw_tabs { position: relative; @@ -4203,12 +4149,12 @@ td.message span.message { } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header { margin: 0px 0 0 0; - padding: 0px 150px 0px 60px; + padding: 0px 250px 0px 60px; background-position: bottom; background-repeat: repeat-x; background-color: transparent; height: 39px; - /*aktive Tabs*/ + /*active Tabs*/ } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 { display: inline; @@ -4241,6 +4187,10 @@ td.message span.message { background-color: rgba(153, 204, 255, 0.4); padding-bottom: 0px; padding-top: 8px; + transition: none; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover:not(.egw_fw_ui_tab_header_active) .egw_fw_ui_tab_close_button { + top: 8px; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { font-size: 11px; @@ -4548,6 +4498,7 @@ td.message span.message { z-index: 1; margin-top: 0px; left: 256px; + background-color: #fbfbfb; } #egw_fw_basecontainer #egw_fw_toggler span { background-color: transparent; @@ -4919,6 +4870,7 @@ td.message span.message { z-index: 1000; background-color: #fbfbfb; /*Notification*/ + /*Search button*/ /*current user info*/ /*current user info*/ /*time zone*/ @@ -4950,9 +4902,11 @@ td.message span.message { border: none; margin-top: 2px; margin-left: 1px; + pointer-events: none; } #egw_fw_topmenu_info_items #topmenu_info_user_avatar span img { width: 40px; + pointer-events: none; } #egw_fw_topmenu_info_items #topmenu_info_logout { background-image: url(../images/logout.svg); @@ -4970,6 +4924,71 @@ td.message span.message { height: 45px; display: inline-block; } +#egw_fw_topmenu_info_items #topmenu_info_notifications { + line-height: 45px; + text-align: center; + cursor: pointer; + display: inline-block; + color: #fbfbfb; + font-weight: bold; + opacity: 0.4; + background-image: url(../images/notification_message.svg); + border-left: 1px solid #636262; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note { + position: absolute; + width: 280px; + height: 30px; + left: -96px; + top: 45px; + border: 1px solid silver; + background: #ffffff; + text-align: center; + font-size: 10pt; + line-height: 22pt; + color: #b9436c; + white-space: nowrap; + z-index: 999; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note:before { + content: ''; + position: absolute; + left: 252px; + width: 0; + height: 0px; + border-left: 14px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #aaa; + margin-bottom: 12px; + margin-left: 1px; + top: -12px; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note:after { + content: ''; + position: absolute; + top: -10px; + left: 252px; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #ffffff; + margin-bottom: 11px; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications.egwpopup_notify { + background-image: url(../images/notification_message_active.svg); + opacity: 1; + border-left: 1px solid #bfc0bf; +} +#egw_fw_topmenu_info_items #topmenu_info_search { + background-repeat: no-repeat; + background-image: url(../images/topmenu_items/search.svg); +} +#egw_fw_topmenu_info_items #topmenu_info_search a { + width: 45px; + height: 45px; + display: inline-block; +} #egw_fw_topmenu_info_items form { height: 0px; } @@ -4994,6 +5013,7 @@ td.message span.message { background-color: white; } #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container { + z-index: 1000; position: fixed; right: 93px !important; top: 47px; diff --git a/pixelegg/head.tpl b/pixelegg/head.tpl index a04542ee58..fced8984af 100644 --- a/pixelegg/head.tpl +++ b/pixelegg/head.tpl @@ -39,7 +39,6 @@
{topmenu_info_items} -
0
diff --git a/pixelegg/less/layout_messages.less b/pixelegg/less/layout_messages.less index 6b80ab13a7..80ec2e5bbc 100755 --- a/pixelegg/less/layout_messages.less +++ b/pixelegg/less/layout_messages.less @@ -17,10 +17,10 @@ #egwpopup { - top: 85px; + top: 46px; right:0px !important; left: auto !important; - height: ~"calc(100% - 130px)"; + height: ~"calc(100% - 69px)"; width: 277px !important; position: absolute; background: white; @@ -239,67 +239,7 @@ } } -#egwpopup_fw_notifications { - cursor: pointer; - display: inline-block; - float: right; - margin-right: 1em; - margin-top: 0px; - z-index: 200; - width: 26px; - height: 16px; - top: 11px; - position: fixed; - right: 109px; - border: 1px solid #656565; - border-radius: 3px; - text-align: center; - color: #646464; - font-weight: bold; - .popup_note { - position: absolute; - position: absolute; - width: 280px; - height: 30px; - left: -293px; - top: -8px; - border: 1px solid silver; - background: #ffffff; - text-align: center; - font-size: 10pt; - line-height: 22pt; - color: #b9436c; - white-space: nowrap; - z-index:999; - &:before { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -10px; - width: 0; height: 0; - border-left: 10px solid #C2C2C2; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - } - &:after { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -8px; - width: 0; height: 0; - border-left: 8px solid #FFFFFF; - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; - } - } -} -#egwpopup_fw_notifications.egwpopup_notify { - color: white; - background: #b9436c; - border-color:#b9436c; -} + /*popup Messsage*/ div#egwpopup_message { background-color: .color_gray_0; diff --git a/pixelegg/less/layout_raster_buttons.less b/pixelegg/less/layout_raster_buttons.less index 9139195566..be7c57eeff 100644 --- a/pixelegg/less/layout_raster_buttons.less +++ b/pixelegg/less/layout_raster_buttons.less @@ -49,8 +49,10 @@ border: none; margin-top: 2px; margin-left: 1px; + pointer-events: none; img { width: 40px; + pointer-events: none; } } } @@ -73,8 +75,74 @@ } } /*Notification*/ - #topmenu_info_notifications {} + #topmenu_info_notifications { + line-height: 45px; + text-align: center; + cursor: pointer; + display: inline-block; + color: #fbfbfb; + font-weight: bold; + opacity: 0.4; + background-image: url(../images/notification_message.svg); + border-left: 1px solid #636262; + .popup_note { + position: absolute; + width: 280px; + height: 30px; + left: -96px; + top: 45px; + border: 1px solid silver; + background: #ffffff; + text-align: center; + font-size: 10pt; + line-height: 22pt; + color: #b9436c; + white-space: nowrap; + z-index: 999; + &:before { + content: ''; + position: absolute; + left: 252px; + width: 0; + height: 0px; + border-left: 14px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #aaa; + margin-bottom: 12px; + margin-left: 1px; + top: -12px; + } + &:after { + content: ''; + position: absolute; + top: -10px; + left: 252px; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #ffffff; + margin-bottom: 11px; + } + } + } + #topmenu_info_notifications.egwpopup_notify { + background-image: url(../images/notification_message_active.svg); + opacity: 1; + border-left: 1px solid #bfc0bf; + } + /*Search button*/ + #topmenu_info_search + { + background-repeat: no-repeat; + background-image: url(../images/topmenu_items/search.svg); + a { + width: 45px; + height: 45px; + display: inline-block; + } + } /*current user info*/ #topmenu_info_current_users {} @@ -112,7 +180,7 @@ // ADD different APPs .chzn-container { - + z-index: 1000; position: fixed; right: 93px !important; top: 47px; diff --git a/pixelegg/less/layout_raster_header.less b/pixelegg/less/layout_raster_header.less index 17a203ee37..c0ba2d61a1 100644 --- a/pixelegg/less/layout_raster_header.less +++ b/pixelegg/less/layout_raster_header.less @@ -71,6 +71,12 @@ top: 46px; background: white; .box_shadow; + a.powered_by { + width: ~"calc(100% - 20px)"; + display: inline-block; + padding: 10px; + background-color: #fbfbfb; + } #egw_fw_topmenu_info_items { display: inline-block; background: white; @@ -179,11 +185,11 @@ background-image: url(../images/topmenu_items/help.svg); } /*Search*/ - a#topmenu_search{ + a#topmenu_current_user{ background-repeat: no-repeat; background-size:16px; padding-left: 20px; - background-image: url(../images/topmenu_items/search.svg); + background-image: url(../images/users.png); } /*logout*/ a#topmenu_logout{ diff --git a/pixelegg/less/layout_raster_main.less b/pixelegg/less/layout_raster_main.less index d3b347f608..d74e48a332 100644 --- a/pixelegg/less/layout_raster_main.less +++ b/pixelegg/less/layout_raster_main.less @@ -48,17 +48,6 @@ #egw_fw_main { padding: 0; width: auto; - - // ######################################## - // APPS - // CHrome hack -/* @media screen and (-webkit-min-device-pixel-ratio:0) { - #egw_fw_tabs { - Chrome needs margin-top - margin-top: 3px; - } - }*/ - // ####################################### // AREA for Content #egw_fw_tabs{ @@ -68,7 +57,7 @@ width: 100%; .egw_fw_ui_tabs_header { margin: 0px 0 0 0; - padding: 0px 150px 0px 60px; + padding: 0px 250px 0px 60px; background-position: bottom; background-repeat: repeat-x; background-color: transparent; @@ -102,6 +91,14 @@ background-color: @color_hover_row; padding-bottom: 0px; padding-top: 8px; + transition: none; + + } + &:hover:not(.egw_fw_ui_tab_header_active) + { + .egw_fw_ui_tab_close_button { + top: 8px; + } } // APP Name @@ -122,11 +119,7 @@ } } - // ########## - // # # - // # # - // ########## - /*aktive Tabs*/ + /*active Tabs*/ .egw_fw_ui_tab_header_active { border-left: 1px solid #bfc0bf; border-right: 1px solid #bfc0bf; @@ -161,7 +154,7 @@ background-size: 6px 6px; position: absolute; } - // Ende Tabs + // End of Tabs } diff --git a/pixelegg/less/layout_raster_sidebar.less b/pixelegg/less/layout_raster_sidebar.less index 28c5bfed16..a6d2f281c4 100644 --- a/pixelegg/less/layout_raster_sidebar.less +++ b/pixelegg/less/layout_raster_sidebar.less @@ -306,6 +306,7 @@ z-index: 1; margin-top: 0px; left: 256px; + background-color: #fbfbfb; span { background-color: transparent; &:before{ diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 2f2931a99c..4dfa088b1a 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -255,6 +255,7 @@ .et2_file .progress li:hover div.remove { width: 16px; height: 16px; + background-image: url("../images/delete.svg"); } .et2_file .progress p { background-color: #FFDD73; @@ -399,6 +400,14 @@ background-size: 12px 12px; padding: 0px; } + .et2_link_list td div.delete { + visibility: hidden; + background-image: url("../images/delete.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: 12px 12px; + padding: 0px; + } .egw_tooltip { background-color: #ffffff; } @@ -3453,10 +3462,10 @@ td.lettersearch { * @version $Id$ */ #egwpopup { - top: 85px; + top: 46px; right: 0px !important; left: auto !important; - height: calc(100% - 130px); + height: calc(100% - 69px); width: 277px !important; position: absolute; background: white; @@ -3707,68 +3716,6 @@ td.lettersearch { #egwpopup div#egwpopup_header .egwpopup_deleteall:hover { opacity: 1; } -#egwpopup_fw_notifications { - cursor: pointer; - display: inline-block; - float: right; - margin-right: 1em; - margin-top: 0px; - z-index: 200; - width: 26px; - height: 16px; - top: 11px; - position: fixed; - right: 109px; - border: 1px solid #656565; - border-radius: 3px; - text-align: center; - color: #646464; - font-weight: bold; -} -#egwpopup_fw_notifications .popup_note { - position: absolute; - width: 280px; - height: 30px; - left: -293px; - top: -8px; - border: 1px solid silver; - background: #ffffff; - text-align: center; - font-size: 10pt; - line-height: 22pt; - color: #b9436c; - white-space: nowrap; - z-index: 999; -} -#egwpopup_fw_notifications .popup_note:before { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -10px; - width: 0; - height: 0; - border-left: 10px solid #C2C2C2; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; -} -#egwpopup_fw_notifications .popup_note:after { - content: ''; - position: absolute; - top: 50%; - left: 100%; - margin-top: -8px; - width: 0; - height: 0; - border-left: 8px solid #FFFFFF; - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; -} -#egwpopup_fw_notifications.egwpopup_notify { - color: white; - background: #b9436c; - border-color: #b9436c; -} /*popup Messsage*/ div#egwpopup_message { background-color: .color_gray_0; @@ -3990,6 +3937,12 @@ td.message span.message { -webkit-box-shadow: 2px 3px 13px #666666; -khtml-box-shadow: 2px 3px 13px #666666; } +#egw_fw_header #egw_fw_topmenu a.powered_by { + width: calc(100% - 20px); + display: inline-block; + padding: 10px; + background-color: #fbfbfb; +} #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_info_items { display: inline-block; background: white; @@ -4097,11 +4050,11 @@ td.message span.message { padding-left: 20px; background-image: url(../images/topmenu_items/help.svg); } -#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_search { +#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_current_user { background-repeat: no-repeat; background-size: 16px; padding-left: 20px; - background-image: url(../images/topmenu_items/search.svg); + background-image: url(../images/users.png); } #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_logout { background-repeat: no-repeat; @@ -4198,12 +4151,6 @@ td.message span.message { #egw_fw_main { padding: 0; width: auto; - /* @media screen and (-webkit-min-device-pixel-ratio:0) { - #egw_fw_tabs { - Chrome needs margin-top - margin-top: 3px; - } - }*/ } #egw_fw_main #egw_fw_tabs { position: relative; @@ -4213,12 +4160,12 @@ td.message span.message { } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header { margin: 0px 0 0 0; - padding: 0px 150px 0px 60px; + padding: 0px 250px 0px 60px; background-position: bottom; background-repeat: repeat-x; background-color: transparent; height: 39px; - /*aktive Tabs*/ + /*active Tabs*/ } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 { display: inline; @@ -4251,6 +4198,10 @@ td.message span.message { background-color: rgba(153, 204, 255, 0.4); padding-bottom: 0px; padding-top: 8px; + transition: none; +} +#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover:not(.egw_fw_ui_tab_header_active) .egw_fw_ui_tab_close_button { + top: 8px; } #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 { font-size: 11px; @@ -4558,6 +4509,7 @@ td.message span.message { z-index: 1; margin-top: 0px; left: 256px; + background-color: #fbfbfb; } #egw_fw_basecontainer #egw_fw_toggler span { background-color: transparent; @@ -4929,6 +4881,7 @@ td.message span.message { z-index: 1000; background-color: #fbfbfb; /*Notification*/ + /*Search button*/ /*current user info*/ /*current user info*/ /*time zone*/ @@ -4960,9 +4913,11 @@ td.message span.message { border: none; margin-top: 2px; margin-left: 1px; + pointer-events: none; } #egw_fw_topmenu_info_items #topmenu_info_user_avatar span img { width: 40px; + pointer-events: none; } #egw_fw_topmenu_info_items #topmenu_info_logout { background-image: url(../images/logout.svg); @@ -4980,6 +4935,71 @@ td.message span.message { height: 45px; display: inline-block; } +#egw_fw_topmenu_info_items #topmenu_info_notifications { + line-height: 45px; + text-align: center; + cursor: pointer; + display: inline-block; + color: #fbfbfb; + font-weight: bold; + opacity: 0.4; + background-image: url(../images/notification_message.svg); + border-left: 1px solid #636262; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note { + position: absolute; + width: 280px; + height: 30px; + left: -96px; + top: 45px; + border: 1px solid silver; + background: #ffffff; + text-align: center; + font-size: 10pt; + line-height: 22pt; + color: #b9436c; + white-space: nowrap; + z-index: 999; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note:before { + content: ''; + position: absolute; + left: 252px; + width: 0; + height: 0px; + border-left: 14px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #aaa; + margin-bottom: 12px; + margin-left: 1px; + top: -12px; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications .popup_note:after { + content: ''; + position: absolute; + top: -10px; + left: 252px; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 12px solid #ffffff; + margin-bottom: 11px; +} +#egw_fw_topmenu_info_items #topmenu_info_notifications.egwpopup_notify { + background-image: url(../images/notification_message_active.svg); + opacity: 1; + border-left: 1px solid #bfc0bf; +} +#egw_fw_topmenu_info_items #topmenu_info_search { + background-repeat: no-repeat; + background-image: url(../images/topmenu_items/search.svg); +} +#egw_fw_topmenu_info_items #topmenu_info_search a { + width: 45px; + height: 45px; + display: inline-block; +} #egw_fw_topmenu_info_items form { height: 0px; } @@ -5004,6 +5024,7 @@ td.message span.message { background-color: white; } #egw_fw_topmenu_info_items #topmenu_info_quick_add .chzn-container { + z-index: 1000; position: fixed; right: 93px !important; top: 47px;