From 1f066dee26b75121f99a3abda97c1053a1eeae14 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Fri, 17 Jul 2020 14:09:37 +0200 Subject: [PATCH] Implement new egw messaging (keeps not deliberately dismissed messages) --- api/js/jsapi/egw_message.js | 28 ++++++------- pixelegg/css/mobile.css | 55 ++++++++++++++++++++------ pixelegg/css/monochrome.css | 55 ++++++++++++++++++++------ pixelegg/css/pixelegg.css | 55 ++++++++++++++++++++------ pixelegg/less/def_colors.less | 6 +-- pixelegg/less/layout_dialog.less | 67 +++++++++++++++++++++++--------- pixelegg/mobile/fw_mobile.css | 55 ++++++++++++++++++++------ 7 files changed, 240 insertions(+), 81 deletions(-) diff --git a/api/js/jsapi/egw_message.js b/api/js/jsapi/egw_message.js index 5ae4e18d4c..dc0239201d 100644 --- a/api/js/jsapi/egw_message.js +++ b/api/js/jsapi/egw_message.js @@ -25,7 +25,6 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd) "use strict"; _app; // not used, but required by function signature - var message_timer; var error_reg_exp; var a_href_reg = /([^<]+)<\/a>/img; var new_line_reg = /<\/?(p|br)\s*\/?>\n?/ig; @@ -66,7 +65,8 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd) message: function(_msg, _type, _discardID) { var jQuery = _wnd.jQuery; - + var wrapper = jQuery('.egw_message_wrapper').length > 0 ? jQuery('.egw_message_wrapper') + : jQuery(_wnd.document.createElement('div')).addClass('egw_message_wrapper').css('position', 'absolute'); if (_msg && !_type) { if (typeof error_reg_exp == 'undefined') error_reg_exp = new RegExp('(error|'+egw.lang('error')+')', 'i'); @@ -80,19 +80,13 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd) egw(egw.top).message(_msg, _type); return; } - // handle message display for non-framework templates, eg. idots or jerryr - if (message_timer) - { - _wnd.clearTimeout(message_timer); - message_timer = null; - } + var parent = jQuery('div#divAppboxHeader'); // popup has no app-header (idots) or it is hidden by onlyPrint class (jdots) --> use body if (!parent.length || parent.hasClass('onlyPrint')) { parent = jQuery('body'); } - jQuery('div#egw_message').remove(); if (_msg) // empty _msg just removes pervious message { @@ -103,6 +97,8 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd) .attr('id','egw_message') .text(_msg) .addClass(_type+'_message') + .prependTo(wrapper); + var msg_close = jQuery(_wnd.document.createElement('span')) .click(function() { //check if the messeage should be discarded forever if (_type == 'info' && _discardID @@ -123,10 +119,10 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd) egw.setLocalStorageItem(discardAppName,'discardedMsgs',JSON.stringify(discarded)); } } - jQuery(this).remove(); + jQuery(msg_div).remove(); }) - .css('position', 'absolute'); - + .addClass('close') + .appendTo(msg_div); // discard checkbox implementation if (_discardID && _type === 'info') { @@ -173,7 +169,7 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd) msg_div.append(msg_discard); } - parent.prepend(msg_div); + parent.prepend(wrapper); // replace simple a href (NO other attribute, to gard agains XSS!) var matches = a_href_reg.exec(_msg); @@ -188,12 +184,12 @@ egw.extend('message', egw.MODULE_WND_LOCAL, function(_app, _wnd) msg_div.append(jQuery(_wnd.document.createElement('span')).text(parts[1])); } // center the message - msg_div.css('right', ((jQuery(_wnd).innerWidth()-msg_div.width())/2)+'px'); + wrapper.css('right', ((jQuery(_wnd).innerWidth()-msg_div.width())/2)+'px'); if (_type == 'success') // clear message again after some time, if no error { - message_timer = _wnd.setTimeout(function() { - jQuery('div#egw_message').remove(); + _wnd.setTimeout(function() { + msg_div.remove(); }, 5000); } } diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index d5afe8f551..cf85c9da97 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -3309,38 +3309,71 @@ div.admin-config form > table td b { white-space: pre-wrap; } .warning_message { - border-top: 6px solid rgba(255, 204, 0, 0.9) !important; + border-left: 24px solid rgba(255, 204, 0, 0.5) !important; + background-image: url(../images/dialog_warning.png); } .error_message { - border-top: 6px solid rgba(204, 0, 51, 0.8) !important; + border-left: 24px solid rgba(204, 0, 51, 0.5) !important; background-image: url(../images/dialog_error.png); - background-position: 4px 13px; - background-size: 12px; - background-repeat: no-repeat; +} +.info_message { + background-image: url(../images/dialog_info.png); } .info_message .discard { float: right; margin-top: 4px; } +.success_message { + background-image: url(../images/check.png); +} /** * Message in popup */ -body > div#egw_message { - background-color: #E6E6E6; +body .egw_message_wrapper { + background-color: #d9d9d9; right: 33%; box-shadow: 2px 3px 13px #666666; -moz-box-shadow: 2px 3px 13px #666666; -webkit-box-shadow: 2px 3px 13px #666666; -khtml-box-shadow: 2px 3px 13px #666666; top: 0px; + z-index: 100000; +} +body .egw_message_wrapper > div:last-child { + margin-bottom: 0px !important; +} +body .egw_message_wrapper div#egw_message { + background-color: #fafafa; + position: relative; padding: 13px; padding-left: 20px; + padding-right: 40px; min-width: 130px; - z-index: 100000; - margin: 0px auto; - max-width: 90%; + margin: 0px auto 2px 0px; white-space: pre-wrap; - border-top: 6px solid #33CC66; + border-left: 24px solid rgba(51, 204, 102, 0.5); + display: block; + background-position: -19px; + background-size: 16px; + background-repeat: no-repeat; +} +body .egw_message_wrapper div#egw_message span.close { + float: right; + height: 20px; + width: 20px; + position: absolute; + background: #d0cdcdb5; + right: 10px; + top: 10px; + background-image: url(../images/close.svg); + background-size: 12px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + cursor: pointer; +} +body .egw_message_wrapper div#egw_message span.close:hover { + filter: invert(1); } /** * Less-file for egroupware diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 060daa4cab..1274682980 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -3298,38 +3298,71 @@ div.admin-config form > table td b { white-space: pre-wrap; } .warning_message { - border-top: 6px solid rgba(255, 204, 0, 0.9) !important; + border-left: 24px solid rgba(255, 204, 0, 0.5) !important; + background-image: url(../images/dialog_warning.png); } .error_message { - border-top: 6px solid rgba(204, 0, 51, 0.8) !important; + border-left: 24px solid rgba(204, 0, 51, 0.5) !important; background-image: url(../images/dialog_error.png); - background-position: 4px 13px; - background-size: 12px; - background-repeat: no-repeat; +} +.info_message { + background-image: url(../images/dialog_info.png); } .info_message .discard { float: right; margin-top: 4px; } +.success_message { + background-image: url(../images/check.png); +} /** * Message in popup */ -body > div#egw_message { - background-color: #E6E6E6; +body .egw_message_wrapper { + background-color: #d9d9d9; right: 33%; box-shadow: 2px 3px 13px #666666; -moz-box-shadow: 2px 3px 13px #666666; -webkit-box-shadow: 2px 3px 13px #666666; -khtml-box-shadow: 2px 3px 13px #666666; top: 0px; + z-index: 100000; +} +body .egw_message_wrapper > div:last-child { + margin-bottom: 0px !important; +} +body .egw_message_wrapper div#egw_message { + background-color: #fafafa; + position: relative; padding: 13px; padding-left: 20px; + padding-right: 40px; min-width: 130px; - z-index: 100000; - margin: 0px auto; - max-width: 90%; + margin: 0px auto 2px 0px; white-space: pre-wrap; - border-top: 6px solid #33CC66; + border-left: 24px solid rgba(51, 204, 102, 0.5); + display: block; + background-position: -19px; + background-size: 16px; + background-repeat: no-repeat; +} +body .egw_message_wrapper div#egw_message span.close { + float: right; + height: 20px; + width: 20px; + position: absolute; + background: #d0cdcdb5; + right: 10px; + top: 10px; + background-image: url(../images/close.svg); + background-size: 12px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + cursor: pointer; +} +body .egw_message_wrapper div#egw_message span.close:hover { + filter: invert(1); } /** * Less-file for egroupware diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 22d4267e0e..d7fca6e8c9 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -3309,38 +3309,71 @@ div.admin-config form > table td b { white-space: pre-wrap; } .warning_message { - border-top: 6px solid rgba(255, 204, 0, 0.9) !important; + border-left: 24px solid rgba(255, 204, 0, 0.5) !important; + background-image: url(../images/dialog_warning.png); } .error_message { - border-top: 6px solid rgba(204, 0, 51, 0.8) !important; + border-left: 24px solid rgba(204, 0, 51, 0.5) !important; background-image: url(../images/dialog_error.png); - background-position: 4px 13px; - background-size: 12px; - background-repeat: no-repeat; +} +.info_message { + background-image: url(../images/dialog_info.png); } .info_message .discard { float: right; margin-top: 4px; } +.success_message { + background-image: url(../images/check.png); +} /** * Message in popup */ -body > div#egw_message { - background-color: #E6E6E6; +body .egw_message_wrapper { + background-color: #d9d9d9; right: 33%; box-shadow: 2px 3px 13px #666666; -moz-box-shadow: 2px 3px 13px #666666; -webkit-box-shadow: 2px 3px 13px #666666; -khtml-box-shadow: 2px 3px 13px #666666; top: 0px; + z-index: 100000; +} +body .egw_message_wrapper > div:last-child { + margin-bottom: 0px !important; +} +body .egw_message_wrapper div#egw_message { + background-color: #fafafa; + position: relative; padding: 13px; padding-left: 20px; + padding-right: 40px; min-width: 130px; - z-index: 100000; - margin: 0px auto; - max-width: 90%; + margin: 0px auto 2px 0px; white-space: pre-wrap; - border-top: 6px solid #33CC66; + border-left: 24px solid rgba(51, 204, 102, 0.5); + display: block; + background-position: -19px; + background-size: 16px; + background-repeat: no-repeat; +} +body .egw_message_wrapper div#egw_message span.close { + float: right; + height: 20px; + width: 20px; + position: absolute; + background: #d0cdcdb5; + right: 10px; + top: 10px; + background-image: url(../images/close.svg); + background-size: 12px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + cursor: pointer; +} +body .egw_message_wrapper div#egw_message span.close:hover { + filter: invert(1); } /** * Less-file for egroupware diff --git a/pixelegg/less/def_colors.less b/pixelegg/less/def_colors.less index 228a7e4983..757383383a 100644 --- a/pixelegg/less/def_colors.less +++ b/pixelegg/less/def_colors.less @@ -17,9 +17,9 @@ // Basic colour // Message color codes - @egw_color_msg_error: fade(#CC0033, 80%); - @egw_color_msg_warning: fade(#FFCC00, 90%); - @egw_color_msg_info: #33CC66; + @egw_color_msg_error: fade(#CC0033, 50%); + @egw_color_msg_warning: fade(#FFCC00, 50%); + @egw_color_msg_info: fade(#33CC66, 50%); // CI EGW diff --git a/pixelegg/less/layout_dialog.less b/pixelegg/less/layout_dialog.less index bff939a104..54a26391d1 100755 --- a/pixelegg/less/layout_dialog.less +++ b/pixelegg/less/layout_dialog.less @@ -430,33 +430,64 @@ div.admin-config form > table { white-space: pre-wrap; } .warning_message { - border-top: 6px solid @egw_color_msg_warning !important; + border-left: 24px solid @egw_color_msg_warning !important; + background-image: url(../images/dialog_warning.png); } .error_message { - border-top: 6px solid @egw_color_msg_error !important; + border-left: 24px solid @egw_color_msg_error !important; background-image: url(../images/dialog_error.png); - background-position: 4px 13px; - background-size: 12px; - background-repeat: no-repeat; } -.info_message .discard { - float:right; - margin-top: 4px; +.info_message { + background-image: url(../images/dialog_info.png); + .discard { + float:right; + margin-top: 4px; + } +} +.success_message { + background-image: url(../images/check.png); } /** * Message in popup */ -body > div#egw_message { - background-color: @gray_10; +body .egw_message_wrapper { + .background_color_15_gray; right: 33%; .box_shadow; top: 0px; - padding: 13px; - padding-left: 20px; - min-width: 130px; z-index: 100000; - margin: 0px auto; - max-width: 90%; - white-space: pre-wrap; - border-top: 6px solid @egw_color_msg_info; -} + & > div:last-child { + margin-bottom: 0px !important; + } + div#egw_message { + .background_color_5_gray; + position: relative; + padding: 13px; + padding-left: 20px; + padding-right: 40px; + min-width: 130px; + margin: 0px auto 2px 0px; + white-space: pre-wrap; + border-left: 24px solid @egw_color_msg_info; + display: block; + background-position: -19px; + background-size: 16px; + background-repeat: no-repeat; + span.close { + float: right; + height: 20px; + width: 20px; + position: absolute; + background: #d0cdcdb5; + right: 10px; + top: 10px; + background-image: url(../images/close.svg); + background-size: 12px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + cursor: pointer; + &:hover {filter: invert(1);} + } + } +} \ No newline at end of file diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index d9a8acc622..69ea78b5a8 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -3320,38 +3320,71 @@ div.admin-config form > table td b { white-space: pre-wrap; } .warning_message { - border-top: 6px solid rgba(255, 204, 0, 0.9) !important; + border-left: 24px solid rgba(255, 204, 0, 0.5) !important; + background-image: url(../images/dialog_warning.png); } .error_message { - border-top: 6px solid rgba(204, 0, 51, 0.8) !important; + border-left: 24px solid rgba(204, 0, 51, 0.5) !important; background-image: url(../images/dialog_error.png); - background-position: 4px 13px; - background-size: 12px; - background-repeat: no-repeat; +} +.info_message { + background-image: url(../images/dialog_info.png); } .info_message .discard { float: right; margin-top: 4px; } +.success_message { + background-image: url(../images/check.png); +} /** * Message in popup */ -body > div#egw_message { - background-color: #E6E6E6; +body .egw_message_wrapper { + background-color: #d9d9d9; right: 33%; box-shadow: 2px 3px 13px #666666; -moz-box-shadow: 2px 3px 13px #666666; -webkit-box-shadow: 2px 3px 13px #666666; -khtml-box-shadow: 2px 3px 13px #666666; top: 0px; + z-index: 100000; +} +body .egw_message_wrapper > div:last-child { + margin-bottom: 0px !important; +} +body .egw_message_wrapper div#egw_message { + background-color: #fafafa; + position: relative; padding: 13px; padding-left: 20px; + padding-right: 40px; min-width: 130px; - z-index: 100000; - margin: 0px auto; - max-width: 90%; + margin: 0px auto 2px 0px; white-space: pre-wrap; - border-top: 6px solid #33CC66; + border-left: 24px solid rgba(51, 204, 102, 0.5); + display: block; + background-position: -19px; + background-size: 16px; + background-repeat: no-repeat; +} +body .egw_message_wrapper div#egw_message span.close { + float: right; + height: 20px; + width: 20px; + position: absolute; + background: #d0cdcdb5; + right: 10px; + top: 10px; + background-image: url(../images/close.svg); + background-size: 12px; + background-repeat: no-repeat; + background-position: center; + border-radius: 50%; + cursor: pointer; +} +body .egw_message_wrapper div#egw_message span.close:hover { + filter: invert(1); } /** * Less-file for egroupware