From ae0349487d512b28a93d00e0683c887675da749c Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Fri, 24 Jul 2020 11:32:52 +0200 Subject: [PATCH] Change tab notification indicator --- api/js/framework/fw_ui.js | 8 +++++--- pixelegg/css/mobile.css | 16 ++++++++++++++++ pixelegg/css/monochrome.css | 16 ++++++++++++++++ pixelegg/css/pixelegg.css | 16 ++++++++++++++++ pixelegg/less/layout_raster_main.less | 16 ++++++++++++++++ pixelegg/mobile/fw_mobile.css | 16 ++++++++++++++++ 6 files changed, 85 insertions(+), 3 deletions(-) diff --git a/api/js/framework/fw_ui.js b/api/js/framework/fw_ui.js index dee91f8f7b..c63023100a 100644 --- a/api/js/framework/fw_ui.js +++ b/api/js/framework/fw_ui.js @@ -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); }; /** diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index cf85c9da97..087791c47e 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -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; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 1274682980..aef350d3eb 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -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; diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index d7fca6e8c9..28608e8ba6 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -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; diff --git a/pixelegg/less/layout_raster_main.less b/pixelegg/less/layout_raster_main.less index 50c55bc32b..740610101c 100644 --- a/pixelegg/less/layout_raster_main.less +++ b/pixelegg/less/layout_raster_main.less @@ -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; diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 69ea78b5a8..8ad4893334 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -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;