From 378dbe848510a7fbc1ffed792ccb548ed5168665 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <90scastro@gmail.com>
Date: Fri, 15 Feb 2019 17:59:06 +0100
Subject: [PATCH] skins: Improve clientPluginNames class helper

Moving classes to html tag so it can be used to style other part of template depending on plugins like #users, #chat etc...
Rename plugin class with "plugin-" prefix, because there were conflicts with some plugins using the same .ep_font_color class to apply css rules
---
 src/static/js/pluginfw/hooks.js               |  2 +-
 src/static/skins/colibris/src/layout.css      | 38 +++++++++----------
 .../skins/colibris/src/plugins/font_color.css |  2 +-
 src/templates/pad.html                        |  4 +-
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/static/js/pluginfw/hooks.js b/src/static/js/pluginfw/hooks.js
index 3d19107d6..7f26c3bfb 100644
--- a/src/static/js/pluginfw/hooks.js
+++ b/src/static/js/pluginfw/hooks.js
@@ -146,7 +146,7 @@ exports.clientPluginNames = function() {
   var client_plugin_names = _.uniq(
     exports.plugins.parts
       .filter(function(part) { return part.hasOwnProperty('client_hooks'); })
-      .map(function(part) { return part['plugin']; })
+      .map(function(part) { return 'plugin-' + part['plugin']; })
   );
 
   return client_plugin_names;
diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css
index 0e8b57744..d0f7357bf 100644
--- a/src/static/skins/colibris/src/layout.css
+++ b/src/static/skins/colibris/src/layout.css
@@ -25,11 +25,11 @@
   padding-left: 40px; /* space for side div */
 }
 
-#outerdocbody.ep_author_neat {
+#outerdocbody.plugin-ep_author_neat {
   padding-left: 120px; /* more space for sidediv */
 }
 @media (max-width:600px) { 
-  #outerdocbody.ep_author_neat { padding-left: 0; }
+  #outerdocbody.plugin-ep_author_neat { padding-left: 0; }
   #options-linenoscheck { display:none; }
   #options-linenoscheck ~ label { display:none; }
 }
@@ -62,7 +62,7 @@
   padding: 0;
 }
 
-#outerdocbody.ep_author_neat #sidediv { 
+#outerdocbody.plugin-ep_author_neat #sidediv { 
   right: calc(100% - 113px); 
 }
 
@@ -71,24 +71,24 @@
 .authortooltip { margin-top: 65px !important; margin-left: 60px; }
 .caretindicator { margin-top: 61px!important; margin-left: 52px; }
 
-#outerdocbody.ep_author_neat .authortooltip{ margin-left: 145px; }
-#outerdocbody.ep_author_neat .caretindicator{ margin-left: 52px; margin-top: 65px!important;}
+#outerdocbody.plugin-ep_author_neat .authortooltip{ margin-left: 145px; }
+#outerdocbody.plugin-ep_author_neat .caretindicator{ margin-left: 52px; margin-top: 65px!important;}
 @media (max-width:1000px) { 
-  #outerdocbody.ep_author_neat .authortooltip{ margin-left: 115px; } 
+  #outerdocbody.plugin-ep_author_neat .authortooltip{ margin-left: 115px; } 
   .caretindicator{ margin-left: 13px; } 
-  #outerdocbody.ep_author_neat .caretindicator{ margin-left: 17px; } 
+  #outerdocbody.plugin-ep_author_neat .caretindicator{ margin-left: 17px; } 
 }
 
 @media (min-width: 1381px) { 
-  #outerdocbody.ep_comments_page  { padding-right: 150px; } }
-  #outerdocbody.ep_comments_page #comments { left: calc(100% - 150px) }
+  #outerdocbody.plugin-ep_comments_page  { padding-right: 150px; } }
+  #outerdocbody.plugin-ep_comments_page #comments { left: calc(100% - 150px) }
 @media (max-width: 1380px) { 
-  #outerdocbody.ep_comments_page #comments { left: calc(100% - 220px) }
-  #outerdocbody.ep_comments_page  { padding-right: 220px; } 
+  #outerdocbody.plugin-ep_comments_page #comments { left: calc(100% - 220px) }
+  #outerdocbody.plugin-ep_comments_page  { padding-right: 220px; } 
 }
 @media (max-width: 1278px) { 
-  #outerdocbody.ep_comments_page #comments { display: none; }
-  #outerdocbody.ep_comments_page  { padding-right: 0px; } 
+  #outerdocbody.plugin-ep_comments_page #comments { display: none; }
+  #outerdocbody.plugin-ep_comments_page  { padding-right: 0px; } 
 }
 
 @media (max-width:1000px) {
@@ -107,13 +107,13 @@
 
   .comment-modal, .authortooltip { margin-top: 20px !important; }
   .caretindicator { margin-top: 0px !important; }
-  #outerdocbody.ep_author_neat  .caretindicator { margin-top: 10px !important; }
+  #outerdocbody.plugin-ep_author_neat  .caretindicator { margin-top: 10px !important; }
 
-  #outerdocbody.ep_author_neat #sidedivinner>div:before { padding-right: 10px !important; }
-  #outerdocbody.ep_author_neat #sidedivinner.authorColors>div, 
-  #outerdocbody.ep_author_neat #sidedivinner.authorColors>div.primary-none, 
-  #outerdocbody.ep_author_neat #sidedivinner>div { padding-right: 6px!important; }
-  #outerdocbody.ep_author_neat #sidediv { padding-right: 0 !important; }
+  #outerdocbody.plugin-ep_author_neat #sidedivinner>div:before { padding-right: 10px !important; }
+  #outerdocbody.plugin-ep_author_neat #sidedivinner.authorColors>div, 
+  #outerdocbody.plugin-ep_author_neat #sidedivinner.authorColors>div.primary-none, 
+  #outerdocbody.plugin-ep_author_neat #sidedivinner>div { padding-right: 6px!important; }
+  #outerdocbody.plugin-ep_author_neat #sidediv { padding-right: 0 !important; }
 }
 
 @media (max-width:600px) {
diff --git a/src/static/skins/colibris/src/plugins/font_color.css b/src/static/skins/colibris/src/plugins/font_color.css
index da719cb00..4ecd5c1cd 100644
--- a/src/static/skins/colibris/src/plugins/font_color.css
+++ b/src/static/skins/colibris/src/plugins/font_color.css
@@ -1,4 +1,4 @@
-li.acl-write.font-color-icon.ep_font_color {
+li.acl-write.font-color-icon.plugin-ep_font_color {
   display: none;
 }
 
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 0e067113e..bee248f57 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -6,7 +6,7 @@
 %>
 <!doctype html>
 <% e.begin_block("htmlHead"); %>
-<html>
+<html class="<%=hooks.clientPluginNames().join(' '); %>">
 <% e.end_block(); %>
 
         <title><%=settings.title%></title>
@@ -100,7 +100,7 @@
             <% e.end_block(); %>
         </div>
 
-        <div id="editorcontainerbox" class="<%=hooks.clientPluginNames().join(' '); %>">
+        <div id="editorcontainerbox">
             <div id="editorcontainer" class="editorcontainer"></div>
             <div id="editorloadingbox">
               <div id="passwordRequired">