Change tab notification indicator

This commit is contained in:
Hadi Nategh 2020-07-24 11:32:52 +02:00
parent 8bb9111cd5
commit ae0349487d
6 changed files with 85 additions and 3 deletions

View File

@ -357,7 +357,10 @@ function egw_fw_ui_tab(_parent, _contHeaderDiv, _contDiv, _icon, _callback,
return true;
});
this.notificationDiv = document.createElement("div");
jQuery(this.notificationDiv).addClass('notifyTabDiv')
.hide()
.appendTo(this.headerDiv);
jQuery(this.headerDiv).append(this.closeButton);
//Create the icon and append it to the header div
@ -413,8 +416,7 @@ function egw_fw_ui_tab(_parent, _contHeaderDiv, _contDiv, _icon, _callback,
egw_fw_ui_tab.prototype.setNotification = function(_off)
{
this.notification = _off ? 0 : this.notification+1;
this.setTitle(this.notification > 0 ?
this.tag.displayName+ " (" + this.notification + ")" : this.tag.displayName);
jQuery(this.notificationDiv).text(this.notification).toggle(this.notification > 0);
};
/**

View File

@ -4318,6 +4318,22 @@ td.message span.message {
background-repeat: repeat-x;
height: 100%;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv {
position: absolute;
background-color: #c14343;
bottom: 5px;
height: 17px;
left: 0%;
color: #fff9fb;
border: 2px solid #ffffff;
text-align: center;
border-bottom: 0;
border-radius: 50%;
white-space: nowrap;
line-height: 16px;
width: 17px;
font-weight: bold;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
background-color: rgba(153, 204, 255, 0.4);
padding-bottom: 0px;

View File

@ -4307,6 +4307,22 @@ td.message span.message {
background-repeat: repeat-x;
height: 100%;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv {
position: absolute;
background-color: #c14343;
bottom: 5px;
height: 17px;
left: 0%;
color: #fff9fb;
border: 2px solid #ffffff;
text-align: center;
border-bottom: 0;
border-radius: 50%;
white-space: nowrap;
line-height: 16px;
width: 17px;
font-weight: bold;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
background-color: rgba(153, 204, 255, 0.4);
padding-bottom: 0px;

View File

@ -4318,6 +4318,22 @@ td.message span.message {
background-repeat: repeat-x;
height: 100%;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv {
position: absolute;
background-color: #c14343;
bottom: 5px;
height: 17px;
left: 0%;
color: #fff9fb;
border: 2px solid #ffffff;
text-align: center;
border-bottom: 0;
border-radius: 50%;
white-space: nowrap;
line-height: 16px;
width: 17px;
font-weight: bold;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
background-color: rgba(153, 204, 255, 0.4);
padding-bottom: 0px;

View File

@ -86,6 +86,22 @@
cursor: pointer;
background-repeat:repeat-x;
height: 100%;
.notifyTabDiv {
position: absolute;
background-color: #c14343;
bottom: 5px;
height: 17px;
left: 0%;
color: #fff9fb;
border: 2px solid #ffffff;
text-align: center;
border-bottom: 0;
border-radius: 50%;
white-space: nowrap;
line-height: 16px;
width: 17px;
font-weight: bold;
}
&:hover {
background-color: @color_hover_row;
padding-bottom: 0px;

View File

@ -4329,6 +4329,22 @@ td.message span.message {
background-repeat: repeat-x;
height: 100%;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv {
position: absolute;
background-color: #c14343;
bottom: 5px;
height: 17px;
left: 0%;
color: #fff9fb;
border: 2px solid #ffffff;
text-align: center;
border-bottom: 0;
border-radius: 50%;
white-space: nowrap;
line-height: 16px;
width: 17px;
font-weight: bold;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
background-color: rgba(153, 204, 255, 0.4);
padding-bottom: 0px;