fix wrong background color of title bar when dialog / modal shows

app/scripts/controllers/debug.js

@@ -172,8 +172,13 @@
             angular.element('#log-detail-modal').modal();
         };
 
+        $('#log-detail-modal').on('show.bs.modal', function (e) {
+            ariaNgNativeElectronService.updateTitleBarBackgroundColorWithModalOverlay();
+        });
+
         $('#log-detail-modal').on('hide.bs.modal', function (e) {
             $scope.context.currentLog = null;
+            ariaNgNativeElectronService.updateTitleBarBackgroundColor();
         });
 
         $scope.executeAria2Method = function () {

app/scripts/controllers/new.js

@@ -595,8 +595,13 @@
             updateAllDirNodesSelectedStatus();
         };
 
+        $('#custom-choose-file-modal').on('show.bs.modal', function (e) {
+            ariaNgNativeElectronService.updateTitleBarBackgroundColorWithModalOverlay();
+        });
+
         $('#custom-choose-file-modal').on('hide.bs.modal', function (e) {
             $scope.context.fileExtensions = null;
+            ariaNgNativeElectronService.updateTitleBarBackgroundColor();
         });
 
         $scope.setSelectedFile = function () {

app/scripts/controllers/settings-ariang.js

@@ -468,8 +468,13 @@
             angular.element('#import-settings-modal').modal();
         };
 
+        $('#import-settings-modal').on('show.bs.modal', function (e) {
+            ariaNgNativeElectronService.updateTitleBarBackgroundColorWithModalOverlay();
+        });
+
         $('#import-settings-modal').on('hide.bs.modal', function (e) {
             $scope.context.importSettings = null;
+            ariaNgNativeElectronService.updateTitleBarBackgroundColor();
         });
 
         $scope.openAriaNgConfigFile = function () {
@@ -515,9 +520,14 @@
             angular.element('#export-settings-modal').modal();
         };
 
+        $('#export-settings-modal').on('show.bs.modal', function (e) {
+            ariaNgNativeElectronService.updateTitleBarBackgroundColorWithModalOverlay();
+        });
+
         $('#export-settings-modal').on('hide.bs.modal', function (e) {
             $scope.context.exportSettings = null;
             $scope.context.exportSettingsCopied = false;
+            ariaNgNativeElectronService.updateTitleBarBackgroundColor();
         });
 
         $scope.copyExportSettings = function () {

app/scripts/controllers/task-detail.js

@@ -605,8 +605,13 @@
             updateAllDirNodesSelectedStatus();
         };
 
+        $('#custom-choose-file-modal').on('show.bs.modal', function (e) {
+            ariaNgNativeElectronService.updateTitleBarBackgroundColorWithModalOverlay();
+        });
+
         $('#custom-choose-file-modal').on('hide.bs.modal', function (e) {
             $scope.context.fileExtensions = null;
+            ariaNgNativeElectronService.updateTitleBarBackgroundColor();
         });
 
         $scope.setSelectedFile = function (updateNodeSelectedStatus) {

app/scripts/core/root.js

@@ -28,23 +28,16 @@
             return false;
         };
 
-        var setTitleBarColor = function () {
-            var computedStyle = window.getComputedStyle(document.getElementById('window-title-bar'));
-            var backgroundColor = computedStyle.getPropertyValue('background-color');
-            var symbolColor = computedStyle.getPropertyValue('color');
-            ariaNgNativeElectronService.setTitleBarColor(backgroundColor, symbolColor);
-        };
-
         var setLightTheme = function () {
             $rootScope.currentTheme = 'light';
             angular.element('body').removeClass('theme-dark');
-            setTitleBarColor();
+            ariaNgNativeElectronService.updateTitleBarBackgroundColor();
         };
 
         var setDarkTheme = function () {
             $rootScope.currentTheme = 'dark';
             angular.element('body').addClass('theme-dark');
-            setTitleBarColor();
+            ariaNgNativeElectronService.updateTitleBarBackgroundColor();
         };
 
         var setThemeBySystemSettings = function () {

app/scripts/directives/exportCommandApiDialog.js

@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').directive('ngExportCommandApiDialog', ['clipboard', 'ariaNgCommonService', function (clipboard, ariaNgCommonService) {
+    angular.module('ariaNg').directive('ngExportCommandApiDialog', ['clipboard', 'ariaNgCommonService', 'ariaNgNativeElectronService', function (clipboard, ariaNgCommonService, ariaNgNativeElectronService) {
         return {
             restrict: 'E',
             templateUrl: 'views/export-command-api-dialog.html',
@@ -98,6 +98,14 @@
                     scope.context.isCopied = true;
                 };
 
+                angular.element(element).on('show.bs.modal', function () {
+                    ariaNgNativeElectronService.updateTitleBarBackgroundColorWithModalOverlay();
+                });
+
+                angular.element(element).on('hide.bs.modal', function () {
+                    ariaNgNativeElectronService.updateTitleBarBackgroundColor();
+                });
+
                 angular.element(element).on('hidden.bs.modal', function () {
                     scope.$apply(function () {
                         scope.options = null;

app/scripts/directives/settingDialog.js

@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').directive('ngSettingDialog', ['ariaNgCommonService', 'aria2SettingService', function (ariaNgCommonService, aria2SettingService) {
+    angular.module('ariaNg').directive('ngSettingDialog', ['ariaNgCommonService', 'aria2SettingService', 'ariaNgNativeElectronService', function (ariaNgCommonService, aria2SettingService, ariaNgNativeElectronService) {
         return {
             restrict: 'E',
             templateUrl: 'views/setting-dialog.html',
@@ -49,6 +49,14 @@
                     });
                 };
 
+                angular.element(element).on('show.bs.modal', function () {
+                    ariaNgNativeElectronService.updateTitleBarBackgroundColorWithModalOverlay();
+                });
+
+                angular.element(element).on('hide.bs.modal', function () {
+                    ariaNgNativeElectronService.updateTitleBarBackgroundColor();
+                });
+
                 angular.element(element).on('hidden.bs.modal', function () {
                     scope.$apply(function () {
                         scope.setting = null;

app/scripts/services/ariaNgCommonService.js

@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').factory('ariaNgCommonService', ['$window', '$location', '$timeout', 'base64', 'moment', 'SweetAlert', 'ariaNgConstants', 'ariaNgLocalizationService', function ($window, $location, $timeout, base64, moment, SweetAlert, ariaNgConstants, ariaNgLocalizationService) {
+    angular.module('ariaNg').factory('ariaNgCommonService', ['$window', '$location', '$timeout', 'base64', 'moment', 'SweetAlert', 'ariaNgConstants', 'ariaNgLocalizationService', 'ariaNgNativeElectronService', function ($window, $location, $timeout, base64, moment, SweetAlert, ariaNgConstants, ariaNgLocalizationService, ariaNgNativeElectronService) {
         var getTimeOption = function (time) {
             var name = '';
             var value = time;
@@ -29,12 +29,16 @@
 
         var showDialog = function (title, text, type, callback, options) {
             $timeout(function () {
+                ariaNgNativeElectronService.updateTitleBarBackgroundColorWithSweetAlertOverlay();
+
                 SweetAlert.swal({
                     title: title,
                     text: text,
                     type: type,
                     confirmButtonText: options && options.confirmButtonText || null
                 }, function () {
+                    ariaNgNativeElectronService.updateTitleBarBackgroundColor();
+
                     if (callback) {
                         callback();
                     }
@@ -58,7 +62,11 @@
                 options.confirmButtonColor = '#F39C12';
             }
 
+            ariaNgNativeElectronService.updateTitleBarBackgroundColorWithSweetAlertOverlay();
+
             SweetAlert.swal(options, function (isConfirm) {
+                ariaNgNativeElectronService.updateTitleBarBackgroundColor();
+
                 if (!isConfirm) {
                     return;
                 }

app/scripts/services/ariaNgNativeElectronService.js

@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').factory('ariaNgNativeElectronService', ['$q', 'ariaNgLogService', 'ariaNgLocalizationService', function ($q, ariaNgLogService, ariaNgLocalizationService) {
+    angular.module('ariaNg').factory('ariaNgNativeElectronService', ['$window', '$q', 'ariaNgLogService', 'ariaNgLocalizationService', function ($window, $q, ariaNgLogService, ariaNgLocalizationService) {
         var electron = angular.isFunction(window.nodeRequire) ? nodeRequire('electron') : {};
         var ipcRenderer = electron.ipcRenderer || {};
 
@@ -73,8 +73,61 @@
             setNativeTheme: function (theme) {
                 invokeMainProcessMethod('render-set-native-theme', theme);
             },
-            setTitleBarColor: function (titleBarBackgroundColor, titleBarSymbolColor) {
-                invokeMainProcessMethod('render-set-titlebar-color', titleBarBackgroundColor, titleBarSymbolColor);
+            updateTitleBarBackgroundColor: function () {
+                var titleBar = angular.element('#window-title-bar');
+
+                if (!titleBar || !titleBar[0]) {
+                    return;
+                }
+
+                var computedStyle = $window.getComputedStyle(titleBar[0]);
+                var backgroundColor = computedStyle.getPropertyValue('background-color');
+                var symbolColor = computedStyle.getPropertyValue('color');
+                invokeMainProcessMethod('render-set-titlebar-color', backgroundColor, symbolColor);
+            },
+            updateTitleBarBackgroundColorWithSweetAlertOverlay: function () {
+                var titleBar = angular.element('#window-title-bar');
+
+                if (!titleBar || !titleBar[0]) {
+                    return;
+                }
+
+                var computedStyle = $window.getComputedStyle(titleBar[0]);
+                var backgroundColor = computedStyle.getPropertyValue('background-color');
+                var symbolColor = computedStyle.getPropertyValue('color');
+
+                // This electron version not support transparent title bar, so we set hard code color
+                var currentTheme = angular.element('body').hasClass('theme-dark') ? 'dark' : 'light';
+
+                if (currentTheme === 'light') {
+                    backgroundColor = 'rgb(148, 148, 148)';
+                } else if (currentTheme === 'dark') {
+                    backgroundColor = 'rgb(7, 7, 7)';
+                }
+
+                invokeMainProcessMethod('render-set-titlebar-color', backgroundColor, symbolColor);
+            },
+            updateTitleBarBackgroundColorWithModalOverlay: function () {
+                var titleBar = angular.element('#window-title-bar');
+
+                if (!titleBar || !titleBar[0]) {
+                    return;
+                }
+
+                var computedStyle = $window.getComputedStyle(titleBar[0]);
+                var backgroundColor = computedStyle.getPropertyValue('background-color');
+                var symbolColor = computedStyle.getPropertyValue('color');
+
+                // This electron version not support transparent title bar, so we set hard code color
+                var currentTheme = angular.element('body').hasClass('theme-dark') ? 'dark' : 'light';
+
+                if (currentTheme === 'light') {
+                    backgroundColor = 'rgb(86, 86, 86)';
+                } else if (currentTheme === 'dark') {
+                    backgroundColor = 'rgb(6, 6, 6)';
+                }
+
+                invokeMainProcessMethod('render-set-titlebar-color', backgroundColor, symbolColor);
             },
             reload: function () {
                 invokeMainProcessMethod('render-reload-native-window');