colibris: introduce skin variants, in order to customize the rendering

This provide a nice way to change the colors of main containers from settings file. See comment inside settings for how it works
caminhodasaguas · Apr 19, 2020 · 709e5d2 · 709e5d2
1 parent 913d5fd
commit 709e5d2
Show file tree

Hide file tree

Showing 13 changed files with 418 additions and 20 deletions.
diff --git a/settings.json.docker b/settings.json.docker
@@ -95,6 +95,30 @@
    */
   "skinName": "${SKIN_NAME:colibris}",
 
+  /*
+   * Skin Variants
+   *
+   * For the colibris skin only, you can choose how to render the three main
+   * containers:
+   * - toolbar (top menu with icons)
+   * - editor (containing the text of the pad)
+   * - background (area outside of editor, mostly visible when using page style)
+   *
+   * For each of the 3 containers you can choose 4 color combinations:
+   * super-light, light, dark, super-dark.
+   *
+   * For example, to make the toolbar dark, you will include "dark-toolbar" into
+   * skinVariants.
+   *
+   * You can provide multiple skin variants separated by spaces. Default
+   * skinVariant is "super-light-toolbar super-light-editor light-background".
+   *
+   * For the editor container, you can also make it full width by adding
+   * "full-width-editor" variant (by default editor is rendered as a page, with
+   * a max-width of 900px).
+   */
+  "skinVariants": "super-light-toolbar super-light-editor light-background",
+
   /*
    * IP and port which Etherpad should bind at.
    *

diff --git a/settings.json.template b/settings.json.template
@@ -86,6 +86,30 @@
    */
   "skinName": "colibris",
 
+  /*
+   * Skin Variants
+   *
+   * For the colibris skin only, you can choose how to render the three main
+   * containers:
+   * - toolbar (top menu with icons)
+   * - editor (containing the text of the pad)
+   * - background (area outside of editor, mostly visible when using page style)
+   *
+   * For each of the 3 containers you can choose 4 color combinations:
+   * super-light, light, dark, super-dark.
+   *
+   * For example, to make the toolbar dark, you will include "dark-toolbar" into
+   * skinVariants.
+   *
+   * You can provide multiple skin variants separated by spaces. Default
+   * skinVariant is "super-light-toolbar super-light-editor light-background".
+   *
+   * For the editor container, you can also make it full width by adding
+   * "full-width-editor" variant (by default editor is rendered as a page, with
+   * a max-width of 900px).
+   */
+  "skinVariants": "super-light-toolbar super-light-editor light-background",
+
   /*
    * IP and port which Etherpad should bind at.
    *

diff --git a/src/node/handler/PadMessageHandler.js b/src/node/handler/PadMessageHandler.js
@@ -1065,6 +1065,7 @@ async function handleClientReady(client, message)
     // mile wide...
     var clientVars = {
       "skinName": settings.skinName,
+      "skinVariants": settings.skinVariants,
       "accountPrivs": {
           "maxRevisions": 100
       },

diff --git a/src/node/utils/Settings.js b/src/node/utils/Settings.js
@@ -62,6 +62,8 @@ exports.faviconTimeslider = "../../" + exports.favicon;
  */
 exports.skinName = null;
 
+exports.skinVariants = "super-light-toolbar super-light-editor light-background";
+
 /**
  * The IP ep-lite should listen to
  */

diff --git a/src/static/js/ace.js b/src/static/js/ace.js
@@ -225,7 +225,7 @@ function Ace2Editor()
       var iframeHTML = [];
 
       iframeHTML.push(doctype);
-      iframeHTML.push("<html class='inner-editor'><head>");
+      iframeHTML.push("<html class='inner-editor " + clientVars.skinVariants + "'><head>");
 
       // calls to these functions ($$INCLUDE_...)  are replaced when this file is processed
       // and compressed, putting the compressed code from the named file directly into the
@@ -316,7 +316,7 @@ window.onload = function () {\n\
   }, 0);\n\
 }';
 
-      var outerHTML = [doctype, '<html class="inner-editor outerdoc"><head>']
+      var outerHTML = [doctype, '<html class="inner-editor outerdoc ' + clientVars.skinVariants + '"><head>']
 
       var includedCSS = [];
       var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};

diff --git a/src/static/skins/colibris/pad.css b/src/static/skins/colibris/pad.css
@@ -19,6 +19,8 @@
 @import url("src/plugins/tables2.css");
 @import url("src/plugins/author_hover.css");
 
+@import url("src/pad-variants.css");
+
 html {
   font-size: 15px;
 }
@@ -30,18 +32,24 @@ html {
  */
 
 :root {
-  --dark-color: #374256;
-  --dark-soft-color: #576273;
+  --super-dark-color: #374256;
+  --dark-color: #576273; /*#4d5d77*/
+  --dark-soft-color: #6d7684; /*#606978;*/
+
   --primary-color: #64d29b;
   --middle-color: #d2d2d2; /* between light-soft-color and dark-soft-color, use for border for examples */
-  --light-soft-color: #f2f3f4; /*#f9f9f9;*/
-  --light-color: white;
 
-  --text-color: var(--dark-color);
-  --text-soft-color: var(--dark-soft-color);
+  --light-soft-color: #d8dade;
+  --light-color: #f2f3f4; /*#f9f9f9;*/
+  --super-light-color: white;
+}
+
+html {
+  --text-color: var(--super-dark-color);
+  --text-soft-color: var(--dark-color);
   --border-color: var(--middle-color);
-  --bg-soft-color: var(--light-soft-color);
-  --bg-color: var(--light-color);
+  --bg-soft-color: var(--light-color);
+  --bg-color: var(--super-light-color);
 
   --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
@@ -60,5 +68,5 @@ h1 {
 
 /* BACKGROUND COLOR */
 #editorcontainerbox {
-  background-color: var(--bg-soft-color);
+  background-color: #f2f3f4; /* default */
 }
diff --git a/src/static/skins/colibris/src/components/chat.css b/src/static/skins/colibris/src/components/chat.css
@@ -11,6 +11,7 @@
 
 #chatbox.stickyChat {
   border: none;
+  background-color: var(--bg-soft-color);
 }
 
 #chatbox.stickyChat.chatAndUsersChat{
@@ -36,6 +37,8 @@
 
 #chattext {
   border-bottom: 1px solid var(--border-color);
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
 .plugin-ep_author_neat #chattext {
@@ -60,9 +63,10 @@
 }
 
 #chaticon {
-  box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
   border: none;
   padding: 10px 20px;
+  background-color: var(--bg-soft-color);
+  color: var(--text-color);
   right: 30px;
 }
 

diff --git a/src/static/skins/colibris/src/components/scrollbars.css b/src/static/skins/colibris/src/components/scrollbars.css
@@ -17,9 +17,9 @@
 }
 
 .thin-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--bg-soft-color);
+  background-color: var(--scrollbar-track);
   border-radius: 10px;
-  border: 5px solid var(--bg-color);
+  border: 5px solid var(--scrollbar-bg);
 }
 
 .thin-scrollbar::-webkit-scrollbar {
@@ -28,6 +28,6 @@
 
 .thin-scrollbar::-webkit-scrollbar-thumb {
   border-radius: 7px;
-  background-color: var(--border-color);
-  border: 5px solid var(--bg-color);
+  background-color: var(--scrollbar-thumb);
+  border: 5px solid var(--scrollbar-bg);
 }
diff --git a/src/static/skins/colibris/src/components/users.css b/src/static/skins/colibris/src/components/users.css
@@ -7,6 +7,7 @@ table#otheruserstable {
   height: 250px;
   border-left: none;
   transition: none;
+  border-bottom-color: var(--border-color)
 }
 .popup#users.chatAndUsers #mycolorpicker.popup {
   right: calc(100% + 30px);

diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css
@@ -18,7 +18,8 @@
   box-shadow: 0 0 0 0.5px rgba(209, 209, 209, 0.32), 0 0 7pt 0pt rgba(204, 204, 204, 0.52);
   border: 0;
   border-radius: 5px;
-  background-color: white;
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 #sidediv {
   padding-top: 55px; /* = #innerdocbody iframe padding-top */

diff --git a/src/static/skins/colibris/src/pad-editor.css b/src/static/skins/colibris/src/pad-editor.css
@@ -1,7 +1,9 @@
-#innerdocbody, #innerdocbody {
+#innerdocbody {
   font-size: 15px;
   line-height: 25px;
   padding: 0;
+  background: transparent;
+  color: var(--text-color);
 }
 
 #innerdocbody span, #innerdocbody span {
@@ -26,5 +28,5 @@ option {
 }
 
 #innerdocbody a {
-  color: #3f51b5;
+  color: var(--primary-color);
 }