Various UI improvement (#4017)

src/static/css/iframe_editor.css

@@ -25,9 +25,10 @@ html.inner-editor {
 
 /* ACE-PAD Container (i.e. where the text is displayed) */
 #innerdocbody {
-  padding: 10px;
+  padding: 15px;
   overflow: hidden;
   background-color: white;
+  line-height: 1.6;
 
   /* Be careful editing following rules. Longs words should not overflow, ep_align justify should work,
      Test on chrome, firefox and safari... Copy / Paste a word inside a sentence should not add line-breaks
@@ -49,9 +50,9 @@ html.inner-editor {
   color: inherit;
 }
 
-#innerdocbody span {
+#innerdocbody.authorColors span {
-  line-height: 125%;
+  padding-top: 3px;
-  padding: 6px 0 !important;
+  padding-bottom: 4px;
 }
 
 option {
@@ -62,8 +63,15 @@ option {
 #innerdocbody h2,
 #innerdocbody h3,
 #innerdocbody h4 {
+  line-height: 1.2;
   margin-bottom: .5em;
 }
+#innerdocbody h1 span,
+#innerdocbody h2 span,
+#innerdocbody h3 span,
+#innerdocbody h4 span {
+  padding-top: 0;
+}
 
 /* --------------------- */
 /* -- BROWSER SUPPORT -- */
@@ -87,9 +95,12 @@ body.mozilla, body.safari {
 }
 #sidediv .line-number {
   font-size: 9px;
-  padding: 0 10px;
+  padding: 0 14px 0 10px;
   font-family: monospace;
 }
+.plugin-ep_author_neat #sidedivinner.authorColors .line-number {
+  padding-right: 10px;
+}
 #sidedivinner {
   text-align: right;
   opacity: .9;

src/static/css/pad.css

@@ -14,14 +14,14 @@
 @import url("pad/form.css");
 
 html {
-  font-size: 14px;
+  font-size: 15px;
   line-height: 20px;
   color: #3e3e3e;
 }
 
 html,
 #sidedivinner > div:before {
-  font-family: Cantarell, Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
+  font-family: Roboto;
 }
 
 .clear {

src/static/css/pad/fonts.css

@@ -58,4 +58,22 @@
     src: url("../../../static/font/Roboto-Bold.ttf") format("truetype");
     font-weight: bold;
     font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Alegreya';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Alegreya Medium'), local('Alegreya-Medium'),
+       url('../../../static/font/Aleygreya-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../../../static/font/Aleygreya-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: 'Alegreya';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Alegreya ExtraBold'), local('Alegreya-ExtraBold'),
+       url('../../../static/font/Aleygreya-ExtraBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('../../../static/font/Aleygreya-ExtraBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

src/static/css/pad/form.css

@@ -23,7 +23,7 @@ select, .nice-select {
   -ms-user-select: none;
   user-select: none;
   white-space: nowrap;
-  width: 120px;
+  min-width: 100px;
   text-transform: capitalize;
 }
 .popup .nice-select {
@@ -32,11 +32,6 @@ select, .nice-select {
 .nice-select:hover {
   border-color: #dbdbdb;
 }
-.nice-select .current {
-  width: 90px;
-  display: inline-block;
-  overflow: hidden;
-}
 .nice-select:after {
   border-bottom: 2px solid #999;
   border-right: 2px solid #999;

src/static/css/timeslider.css

@@ -21,7 +21,10 @@
 }
 
 /* RIGHT TOOLBAR (export, settings, back to pad) */
-
+.editbarright {
+  flex-shrink: 0; /* prevent the back to pad button to shrink */
+  margin-top: -10px;
+}
 .editbarright ul li a {
   background-color: transparent;
   border: none;

src/static/js/ace2_inner.js

@@ -156,15 +156,6 @@ function Ace2Inner(){
 
   var scheduler = parent; // hack for opera required
 
-  var textFace = 'monospace';
-  var textSize = 12;
-
-
-  function textLineHeight()
-  {
-    return Math.round(textSize * 4 / 3);
-  }
-
   var dynamicCSS = null;
   var outerDynamicCSS = null;
   var parentDynamicCSS = null;
@@ -312,25 +303,6 @@ function Ace2Inner(){
     return ".authorColors ." + oneClassName;
   }
 
-  function setUpTrackingCSS()
-  {
-    if (dynamicCSS)
-    {
-      var backgroundHeight = lineMetricsDiv.offsetHeight;
-      var lineHeight = textLineHeight();
-      var extraBodding = 0;
-      var extraTodding = 0;
-      if (backgroundHeight < lineHeight)
-      {
-        extraBodding = Math.ceil((lineHeight - backgroundHeight) / 2);
-        extraTodding = lineHeight - backgroundHeight - extraBodding;
-      }
-      var spanStyle = dynamicCSS.selectorStyle("#innerdocbody span");
-      spanStyle.paddingTop = extraTodding + "px";
-      spanStyle.paddingBottom = extraBodding + "px";
-    }
-  }
-
   function fadeColor(colorCSS, fadeFrac)
   {
     var color = colorutils.css2triple(colorCSS);
@@ -623,26 +595,8 @@ function Ace2Inner(){
 
   function setTextFace(face)
   {
-    textFace = face;
+    root.style.fontFamily = face;
-    root.style.fontFamily = textFace;
+    lineMetricsDiv.style.fontFamily = face;
-    lineMetricsDiv.style.fontFamily = textFace;
-    scheduler.setTimeout(function()
-    {
-      setUpTrackingCSS();
-    }, 0);
-  }
-
-  function setTextSize(size)
-  {
-    textSize = size;
-    root.style.fontSize = textSize + "px";
-    root.style.lineHeight = textLineHeight() + "px";
-    sideDiv.style.lineHeight = textLineHeight() + "px";
-    lineMetricsDiv.style.fontSize = textSize + "px";
-    scheduler.setTimeout(function()
-    {
-      setUpTrackingCSS();
-    }, 0);
   }
 
   function recreateDOM()
@@ -962,7 +916,6 @@ function Ace2Inner(){
       },
       styled: setStyled,
       textface: setTextFace,
-      textsize: setTextSize,
       rtlistrue: function(value) {
         setClassPresence(root, "rtl", value)
         setClassPresence(root, "ltr", !value)
@@ -984,7 +937,6 @@ function Ace2Inner(){
   };
   editorInfo.ace_setBaseAttributedText = function(atxt, apoolJsonObj)
   {
-    setUpTrackingCSS();
     changesetTracker.setBaseAttributedText(atxt, apoolJsonObj);
   };
   editorInfo.ace_applyChangesToBase = function(c, optAuthor, apoolJsonObj)

src/static/js/broadcast_slider.js

@@ -24,6 +24,7 @@
  // Timeslider controller would probably be more appropriate.
 var _ = require('./underscore');
 var padmodals = require('./pad_modals').padmodals;
+var colorutils = require('./colorutils').colorutils;
 
 function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
 {
@@ -151,10 +152,11 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
           if (author.name)
           {
             if (numNamed !== 0) authorsList.append(', ');
-
+            var textColor = colorutils.textColorFromBackgroundColor(authorColor, clientVars.skinName)
             $('<span />')
               .text(author.name || "unnamed")
               .css('background-color', authorColor)
+              .css('color', textColor)
               .addClass('author')
               .appendTo(authorsList);
 

src/static/skins/colibris/pad.css

@@ -50,21 +50,15 @@
 
   --main-font-family: Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 
-  --editor-horizontal-padding: 55px;
+  /* Those padding like an external padding. Basic padding of 15px is always applied */
-  --editor-vertical-padding: 40px;
+  --editor-horizontal-padding: 40px;
+  --editor-vertical-padding: 25px;
 }
 
 @media (max-width:1000px) {
   :root {
-    --editor-horizontal-padding: 15px;
+    --editor-horizontal-padding: 0px;
-    --editor-vertical-padding: 15px;
+    --editor-vertical-padding: 0px;
-  }
-}
-
-@media (max-width:600px) {
-  :root {
-    --editor-horizontal-padding: 15px;
-    --editor-vertical-padding: 15px;
   }
 }
 

src/static/skins/colibris/src/general.css

@@ -1,7 +1,3 @@
-html {
-  font-size: 15px;
-}
-
 body {
   color: #485365;
   color: var(--text-color);

src/static/skins/colibris/src/layout.css

@@ -33,8 +33,8 @@
   /* Padding must be the same than editor, otherwise it creates problem */
   padding-top: 40px; /* = #innerdocbody iframe vertical padding */
   padding-bottom: 40px;
-  padding-top: var(--editor-vertical-padding);
+  padding-top: calc(var(--editor-vertical-padding) + 15px);
-  padding-bottom: var(--editor-vertical-padding);
+  padding-bottom: calc(var(--editor-vertical-padding) + 15px);
 }
 
 @media (max-width:1000px) {

src/static/skins/colibris/src/pad-editor.css

@@ -1,7 +1,4 @@
 #innerdocbody {
-  font-size: 15px;
-  line-height: 25px;
-  padding: 0;
   background: transparent;
   color: #485365;
   color: var(--text-color);

src/static/skins/colibris/src/pad-variants.css

@@ -1,7 +1,7 @@
 /* =========================== */
 /* === Super Light Toolbar === */
 /* =========================== */
-.super-light-toolbar .toolbar, .super-light-toolbar .popup-content, #pad_title  {
+.super-light-toolbar .toolbar, .super-light-toolbar .popup-content, .super-light-toolbar #pad_title  {
   --text-color: var(--super-dark-color);
   --text-soft-color: var(--dark-color);
   --border-color: #e4e6e9;
@@ -11,7 +11,7 @@
 /* ===================== */
 /* === Light Toolbar === */
 /* ===================== */
-.light-toolbar .toolbar, .light-toolbar .popup-content, #pad_title {
+.light-toolbar .toolbar, .light-toolbar .popup-content, .light-toolbar #pad_title {
   --text-color: var(--super-dark-color);
   --text-soft-color: var(--dark-color);
   --border-color: var(--middle-color);
@@ -21,7 +21,7 @@
 /* ========================== */
 /* === Super Dark Toolbar === */
 /* ========================== */
-.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content, #pad_title {
+.super-dark-toolbar .toolbar, .super-dark-toolbar .popup-content, .super-dark-toolbar #pad_title {
   --text-color: var(--super-light-color);
   --text-soft-color: var(--light-color);
   --border-color: var(--dark-color);
@@ -35,7 +35,7 @@
 /* ==================== */
 /* === Dark Toolbar === */
 /* ==================== */
-.dark-toolbar .toolbar, .dark-toolbar .popup-content, #pad_title  {
+.dark-toolbar .toolbar, .dark-toolbar .popup-content, .dark-toolbar #pad_title  {
   --text-color: var(--super-light-color);
   --text-soft-color: var(--light-color);
   --border-color: var(--super-dark-color);
@@ -189,8 +189,8 @@
   .light-editor.light-background,
   .super-dark-editor.super-dark-background,
   .dark-editor.dark-background {
-    --editor-horizontal-padding: 35px;
+    --editor-horizontal-padding: 20px;
-    --editor-vertical-padding: 20px;
+    --editor-vertical-padding: 5px;
   }
 }
 
@@ -218,8 +218,8 @@
 }
 @media (min-width: 1001px) {
   .full-width-editor {
-    --editor-horizontal-padding: 35px !important;
+    --editor-horizontal-padding: 20px !important;
-    --editor-vertical-padding: 20px !important;
+    --editor-vertical-padding: 5px !important;
   }
 }
 .full-width-editor ::-webkit-scrollbar-track,

src/static/skins/colibris/src/plugins/font_color.css

@@ -5,6 +5,9 @@
 #font-color {
   display: list-item !important;
 }
+.readonly #font-color {
+  display: none !important;
+}
 
 .color\:black,
 [data-color=black] {

src/templates/pad.html

@@ -146,10 +146,7 @@
               <label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
               <select id="viewfontmenu">
                 <option value="" data-l10n-id="pad.settings.fontType.normal">Normal</option>
-                <%= fonts = [
+                <%= fonts = ["Quicksand", "Roboto", "Alegreya", "PlayfairDisplay", "Montserrat", "OpenDyslexic", "RobotoMono"] %>
-                          "Quicksand", "Roboto", "Montserrat", "OpenDyslexic", "monospace", "RobotoMono",
-                          "Arial", "Georgia", "Times New Roman", "Verdana", "Courrier New",
-                          "Open Sans", "Lato", "Helvetica" ] %>
                 <% for(var i=0; i < fonts.length; i++) { %>
                   <option value="<%=fonts[i]%>"><%=fonts[i]%></option>
                 <% } %>

src/templates/timeslider.html

@@ -229,10 +229,7 @@
       <label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
       <select id="viewfontmenu">
         <option value="" data-l10n-id="pad.settings.fontType.normal">Normal</option>
-        <%= fonts = [
+        <%= fonts = ["Quicksand", "Roboto", "Alegreya", "PlayfairDisplay", "Montserrat", "OpenDyslexic", "RobotoMono"] %>
-                  "Quicksand", "Roboto", "Montserrat", "OpenDyslexic", "monospace", "RobotoMono",
-                  "Arial", "Georgia", "Times New Roman", "Verdana", "Courrier New",
-                  "Open Sans", "Lato", "Helvetica" ] %>
         <% for(var i=0; i < fonts.length; i++) { %>
           <option value="<%=fonts[i]%>"><%=fonts[i]%></option>
         <% } %>