Add themes supportto plugins manager

ChromiumBasedEditors/plugins/manager/code.js

@@ -133,6 +133,9 @@ function updateList()
 		return;
 	
     let _content = "<ul>";
+	
+	let currentTheme = Asc.plugin.theme ? Asc.plugin.theme.name : "";
+    let currentThemeStyle = Asc.plugin.theme ? Asc.plugin.theme.type : "";
 
     for (let i = 0; i < EditorPlugins.pluginsData.length; i++)
     {
@@ -140,8 +143,9 @@ function updateList()
         if (EditorPlugins.pluginsData[i].baseUrl != null && EditorPlugins.pluginsData[i].baseUrl != "")
             url = EditorPlugins.pluginsData[i].baseUrl;
 
-        let iconsArray = (EditorPlugins.pluginsData[i].variations[0] && EditorPlugins.pluginsData[i].variations[0].icons && EditorPlugins.pluginsData[i].variations[0].icons.length) ? 
-                                    EditorPlugins.pluginsData[i].variations[0].icons : [];
+		let variation = EditorPlugins.pluginsData[i].variations[0];
+		let iconsRecs = (variation && variation.icons2) ? variation.icons2 : variation.icons;
+        let iconsArray = (iconsRecs && iconsRecs.length) ? iconsRecs : [];
 
         let iconSrc;
         if (iconsArray.length > 0)
@@ -159,9 +163,6 @@ function updateList()
             else
             {
                 let iconIndex = 0;
-                let currentTheme = "";
-                let currentThemeStyle = "";
-
                 for (let i = 0, len = iconsArray.length; i < len; i++)
                 {
                     if (currentTheme === iconsArray[i].theme)
@@ -174,14 +175,27 @@ function updateList()
                         iconIndex = i;                    
                     }
                 }
-                iconSrc = iconsArray[iconIndex]["100%"]["normal"];
+				
+				let procentsScale = "" + ((window.devicePixelRatio * 100 + 0.5) >> 0) + "%";
+				let iconForScale = iconsArray[iconIndex][procentsScale] ? iconsArray[iconIndex][procentsScale] : iconsArray[iconIndex]["100%"];
+                iconSrc = iconForScale["normal"];
             }
         }
-
-        if (iconSrc)
+		
+		if (iconSrc)
             iconSrc = url + iconSrc;
+		
+		var addonForDefault = "";
+		if (window.devicePixelRatio > 1.49)
+			addonForDefault = "@1.5x";
+		if (window.devicePixelRatio > 1.99)
+			addonForDefault = "@2x";
+			
+		if (currentThemeStyle === "")
+			currentThemeStyle = "light";			
+        
         if (!iconSrc)
-            iconSrc = (window.devicePixelRatio >= 2) ? "./resources/default@2x.png" : "./resources/default.png";
+            iconSrc = "./resources/" + currentThemeStyle + "/default" + addonForDefault + ".png";
 
         let item = "<li><a class=\"item\">";
         item += ("<img class=\"icon\" src=\"" + iconSrc + "\"></img>");
@@ -193,11 +207,9 @@ function updateList()
 		}
 		
         item += ("<span class=\"defaultlable\" style=\"flex-grow: 1;margin-left: 10px; line-height: 28px;\">" + _namePlugin + "</span>");
-
-        let classRemove = (window.devicePixelRatio >= 2) ? "del2" : "del";
         if (!EditorPlugins.pluginsData[i].isSystemInstall)
         {
-            item += ("<i class=\"btn " + classRemove + "\" onclick=\"deletePlugin('" + EditorPlugins.pluginsData[i].guid + "');\" title=\"remove plugin\"></i>");
+            item += ("<i class=\"btn\" style=\"background-size:cover; background-image: url(./resources/" + currentThemeStyle + "/remove" + addonForDefault + ".png" + ")\" onclick=\"deletePlugin('" + EditorPlugins.pluginsData[i].guid + "');\" title=\"remove plugin\"></i>");
         }
 
         item += "</a></li>";
@@ -299,7 +311,8 @@ function updateList()
 		}
     };
 	
-	window.Asc.plugin.onTranslate = function(){
+	window.Asc.plugin.onTranslate = function()
+	{
 		window.language = window.Asc.plugin.info.lang;
 		if (window.language && window.language.length >= 2)
 		{
@@ -321,5 +334,17 @@ function updateList()
 		document.getElementById("button_add").innerHTML = window.Asc.plugin.tr("Add plugin");
 		document.getElementById("l2").innerHTML = window.Asc.plugin.tr("Installed plugins");
 	};
+	
+	window.Asc.plugin.onThemeChanged = function(theme)
+	{
+		window.Asc.plugin.onThemeChangedBase(theme);
+		
+		var styleTheme = document.createElement('style');
+		styleTheme.type = 'text/css';
+		styleTheme.innerHTML = ".item:hover {background-color: " + theme["highlight-button-hover"] + "}";
+		document.getElementsByTagName('head')[0].appendChild(styleTheme);	
+		
+		updateList();
+	};
 
 })(window, undefined);

ChromiumBasedEditors/plugins/manager/index.html

@@ -3,6 +3,9 @@
 <head>
     <title>Manage Plugins</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
+	<script type='text/javascript' src='../v1/plugins.js'></script>
+	<script type='text/javascript' src='../v1/plugins-ui.js'></script>
+    <link rel="stylesheet" href="../v1/plugins.css">
         
     <style >
         #viewport {
@@ -66,15 +69,6 @@
             opacity: 1;
         }
 
-        .btn.del {            
-            background-image: url(./resources/remove.png);
-			background-size:cover;
-        }
-
-        .btn.del2 {
-            background-image: url(./resources/remove@2x.png);
-			background-size:cover;
-        }
     </style>
 </head>
 <body>
@@ -92,14 +86,6 @@
     <div id="mask" style="position:absolute; left: 0;right: 0; top: 0; bottom: 0; margin: 0; padding: 0; background-color: #FFFFFF; z-index: 100;">
     </div>
 
-    <!-- jquery -->
-	<script src="jquery.min.js"></script>
-	
-	<!-- plugin -->
-	<script type='text/javascript' src='../v1/plugins.js'></script>
-	<script type='text/javascript' src='../v1/plugins-ui.js'></script>
-    <link rel="stylesheet" href="../v1/plugins.css">
-
 	<!-- code -->
 	<script src="code.js"></script>
 </body>