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
This commit is contained in:
Hadi Nategh 2019-05-27 17:11:43 +02:00
parent 038caabd72
commit f424b1cdb6
12 changed files with 504 additions and 393 deletions

View File

@ -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);

View File

@ -425,7 +425,7 @@ abstract class Framework extends Framework\Extra
{
$GLOBALS['egw_info']['server']['versions']['maintenance_release'] = self::api_version();
}
$var['powered_by'] = '<a href="http://www.egroupware.org/" target="_blank">'.
$var['powered_by'] = '<a href="http://www.egroupware.org/" class="powered_by" target="_blank">'.
lang('Powered by').' EGroupware '.
$GLOBALS['egw_info']['server']['versions']['maintenance_release'].'</a>';
@ -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('<a href="'.$extra_item['url'].'" title="'.$extra_item['title'].'"></a>', 'search');
}
else
{
$this->_add_topmenu_item($extra_item);
}
}
$this->_add_topmenu_item($apps['logout']);
}
/**

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -39,7 +39,6 @@
</div>
<div id="egw_fw_topmenu_info_items">
{topmenu_info_items}
<div id="egwpopup_fw_notifications" title="">0</div>
</div>
</div>
<div id="egw_fw_sidebar">

View File

@ -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;

View File

@ -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;

View File

@ -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{

View File

@ -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
}

View File

@ -306,6 +306,7 @@
z-index: 1;
margin-top: 0px;
left: 256px;
background-color: #fbfbfb;
span {
background-color: transparent;
&:before{

View File

@ -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;