From 2a2f0bf3900dceac1806d60dc7f3146a4f420a89 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Wed, 24 Feb 2021 12:22:27 +0100 Subject: [PATCH] Keep darkmode state in serverside session too. Fix darkmode state in egroupware iframes. --- api/js/framework/fw_base.js | 18 ++++++++++++++++-- api/js/jsapi/app_base.js | 2 -- api/js/jsapi/egw_app.js | 2 -- api/js/jsapi/egw_app.ts | 2 -- api/src/Framework.php | 2 +- api/src/Framework/Ajax.php | 9 +++++++++ pixelegg/css/mobile.css | 7 +++++++ pixelegg/css/monochrome.css | 1 + pixelegg/css/pixelegg.css | 1 + pixelegg/less/darkmode.less | 2 +- pixelegg/mobile/fw_mobile.css | 7 +++++++ 11 files changed, 43 insertions(+), 10 deletions(-) diff --git a/api/js/framework/fw_base.js b/api/js/framework/fw_base.js index d74c6e4bed..4821fbb61f 100644 --- a/api/js/framework/fw_base.js +++ b/api/js/framework/fw_base.js @@ -1320,7 +1320,21 @@ var fw_base = (function(){ "use strict"; return Class.extend( */ _setDarkMode: function(_state) { - jQuery('html').attr('data-darkmode', _state); - egw.setSessionItem('api', 'darkmode',_state == '0' ?'0':'1'); + let state = _state == '0' ?'0':'1'; + jQuery('html').attr('data-darkmode', state); + jQuery('iframe').each((i, frame) =>{ + try { + if (frame && frame.contentWindow && frame.contentWindow.jQuery) + { + frame.contentWindow.jQuery('html').attr('data-darkmode', _state == 0?'':'1'); + } + }catch(e) + { + + } + + }) + egw.setSessionItem('api', 'darkmode',state); + egw.json('EGroupware\\Api\\Framework\\Ajax::ajax_set_darkmode_flag',[state]).sendRequest(); } });}).call(this); diff --git a/api/js/jsapi/app_base.js b/api/js/jsapi/app_base.js index 2c17b19a01..2c491104b7 100644 --- a/api/js/jsapi/app_base.js +++ b/api/js/jsapi/app_base.js @@ -180,8 +180,6 @@ var AppJS = (function(){ "use strict"; return Class.extend( if (this.egw && this.egw.is_popup()) { this._set_Window_title(); - // apply theme mode - jQuery('html').attr('data-darkmode', egw.getSessionItem('api', 'darkmode') == '0'?'0':'1'); } // Highlights the favorite based on initial list state diff --git a/api/js/jsapi/egw_app.js b/api/js/jsapi/egw_app.js index fea13684b8..126755cdf2 100644 --- a/api/js/jsapi/egw_app.js +++ b/api/js/jsapi/egw_app.js @@ -116,8 +116,6 @@ var EgwApp = /** @class */ (function () { this._fix_iFrameScrolling(); if (this.egw && this.egw.is_popup()) { this._set_Window_title(); - // apply theme mode - jQuery('html').attr('data-darkmode', egw.getSessionItem('api', 'darkmode') == '0' ? '0' : '1'); } // Highlights the favorite based on initial list state this.highlight_favorite(); diff --git a/api/js/jsapi/egw_app.ts b/api/js/jsapi/egw_app.ts index 8a073ac2e1..65ec5c0304 100644 --- a/api/js/jsapi/egw_app.ts +++ b/api/js/jsapi/egw_app.ts @@ -206,8 +206,6 @@ export abstract class EgwApp if (this.egw && this.egw.is_popup()) { this._set_Window_title(); - // apply theme mode - jQuery('html').attr('data-darkmode', egw.getSessionItem('api', 'darkmode') == '0'?'0':'1'); } // Highlights the favorite based on initial list state diff --git a/api/src/Framework.php b/api/src/Framework.php index c79b64f329..eb1421d545 100644 --- a/api/src/Framework.php +++ b/api/src/Framework.php @@ -534,7 +534,7 @@ abstract class Framework extends Framework\Extra 'dir_code' => lang('language_direction_rtl') != 'rtl' ? '' : ' dir="rtl"', 'include_wz_tooltip'=> $include_wz_tooltip, 'webserver_url' => $GLOBALS['egw_info']['server']['webserver_url'], - 'darkmode' => $this->isTop()? $GLOBALS['egw_info']['user']['preferences']['common']['darkmode'] : '' + 'darkmode' => !empty(Cache::getSession('api','darkmode')) ?? $GLOBALS['egw_info']['user']['preferences']['common']['darkmode'] ); } diff --git a/api/src/Framework/Ajax.php b/api/src/Framework/Ajax.php index 756a705e14..ef8103a8b0 100755 --- a/api/src/Framework/Ajax.php +++ b/api/src/Framework/Ajax.php @@ -731,6 +731,15 @@ abstract class Ajax extends Api\Framework } } + /** + * keep darkmode flag on session + * @param $_mode + */ + public static function ajax_set_darkmode_flag($_mode) + { + Api\Cache::setSession('api', 'darkmode', $_mode); + } + /** * Stores the user defined sorting of the applications inside the preferences * diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index b9a5217696..92f3059b87 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -80,6 +80,7 @@ } html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery, + html[data-darkmode='1'] iframe, html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active, html[data-darkmode='1'] video, html[data-darkmode='1'] #loginMainDiv, @@ -7041,6 +7042,12 @@ form[id^="ranking-"] .dialogHeadbar { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl { background-image: url(../images/topmenu_items/access.svg); } +#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_calls { + background-image: url(../images/phone.svg); + background-repeat: no-repeat; + background-size: 18px; + background-position-x: -2px; +} div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub_item td.sub_item_icon img[src*="svg"] { background-color: transparent; background-image: none; diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css index 99720f9cf7..ac17132aa7 100644 --- a/pixelegg/css/monochrome.css +++ b/pixelegg/css/monochrome.css @@ -58,6 +58,7 @@ } html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery, + html[data-darkmode='1'] iframe, html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active, html[data-darkmode='1'] video, html[data-darkmode='1'] #loginMainDiv, diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 47996445fe..c16da39111 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -69,6 +69,7 @@ } html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery, + html[data-darkmode='1'] iframe, html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active, html[data-darkmode='1'] video, html[data-darkmode='1'] #loginMainDiv, diff --git a/pixelegg/less/darkmode.less b/pixelegg/less/darkmode.less index 34538eb766..c4d8b2953d 100644 --- a/pixelegg/less/darkmode.less +++ b/pixelegg/less/darkmode.less @@ -31,7 +31,7 @@ position: fixed; // ATM Firefox doesn't like filter:invert on none fixed html filter: invert(1) hue-rotate(180deg) brightness(0.7); img, #blueimp-gallery, - #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active, + iframe, #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active, video, #loginMainDiv, .et2_taglist_tags_icon { filter: invert(1) hue-rotate(180deg) !important; } diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index 59b0797e6d..b5d695b181 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -43,6 +43,7 @@ } html[data-darkmode='1'] img, html[data-darkmode='1'] #blueimp-gallery, + html[data-darkmode='1'] iframe, html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active, html[data-darkmode='1'] video, html[data-darkmode='1'] #loginMainDiv, @@ -6875,6 +6876,12 @@ span.egw_tutorial_title { #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_acl { background-image: url(../images/topmenu_items/access.svg); } +#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_calls { + background-image: url(../images/phone.svg); + background-repeat: no-repeat; + background-size: 18px; + background-position-x: -2px; +} div.dhtmlxMenu_egw_SubLevelArea_Polygon table.dhtmlxMebu_SubLevelArea_Tbl tr.sub_item td.sub_item_icon img[src*="svg"] { background-color: transparent; background-image: none;