libretic
/
etherpad-lite
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Various UI improvement (#4017)

This commit is contained in:
Sebastian Castro 2020-06-02 11:25:43 +02:00 committed by GitHub
parent f45d85f615
commit 7aa7e02e27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 66 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/static/css/iframe_editor.css
View File

@ -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 {
line-height: 125%;
padding: 6px 0 !important;
#innerdocbody.authorColors span {
padding-top: 3px;
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;

4
src/static/css/pad.css
View File

@ -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 {

18
src/static/css/pad/fonts.css
View File

@ -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+ */
}

7
src/static/css/pad/form.css
View File

@ -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;

5
src/static/css/timeslider.css
View File

@ -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;

BIN
src/static/font/Aleygreya-ExtraBold.woff Normal file
View File

Binary file not shown.

BIN
src/static/font/Aleygreya-ExtraBold.woff2 Normal file
View File

Binary file not shown.

BIN
src/static/font/Aleygreya-Medium.woff Normal file
View File

Binary file not shown.

BIN
src/static/font/Aleygreya-Medium.woff2 Normal file
View File

Binary file not shown.

52
src/static/js/ace2_inner.js
View File

@ -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 = textFace;
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);
root.style.fontFamily = face;
lineMetricsDiv.style.fontFamily = face;
}
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)

4
src/static/js/broadcast_slider.js
View File

@ -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);

16
src/static/skins/colibris/pad.css
View File

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

4
src/static/skins/colibris/src/general.css
View File

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

4
src/static/skins/colibris/src/layout.css
View File

@ -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-bottom: var(--editor-vertical-padding);
padding-top: calc(var(--editor-vertical-padding) + 15px);
padding-bottom: calc(var(--editor-vertical-padding) + 15px);
}
@media (max-width:1000px) {

3
src/static/skins/colibris/src/pad-editor.css
View File

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

16
src/static/skins/colibris/src/pad-variants.css
View File

@ -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-vertical-padding: 20px;
--editor-horizontal-padding: 20px;
--editor-vertical-padding: 5px;
}
}
@ -218,8 +218,8 @@
}
@media (min-width: 1001px) {
.full-width-editor {
--editor-horizontal-padding: 35px !important;
--editor-vertical-padding: 20px !important;
--editor-horizontal-padding: 20px !important;
--editor-vertical-padding: 5px !important;
}
}
.full-width-editor ::-webkit-scrollbar-track,

3
src/static/skins/colibris/src/plugins/font_color.css
View File

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

5
src/templates/pad.html
View File

@ -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 = [
"Quicksand", "Roboto", "Montserrat", "OpenDyslexic", "monospace", "RobotoMono",
"Arial", "Georgia", "Times New Roman", "Verdana", "Courrier New",
"Open Sans", "Lato", "Helvetica" ] %>
<%= fonts = ["Quicksand", "Roboto", "Alegreya", "PlayfairDisplay", "Montserrat", "OpenDyslexic", "RobotoMono"] %>
<% for(var i=0; i < fonts.length; i++) { %>
<option value="<%=fonts[i]%>"><%=fonts[i]%></option>
<% } %>

5
src/templates/timeslider.html
View File

@ -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 = [
"Quicksand", "Roboto", "Montserrat", "OpenDyslexic", "monospace", "RobotoMono",
"Arial", "Georgia", "Times New Roman", "Verdana", "Courrier New",
"Open Sans", "Lato", "Helvetica" ] %>
<%= fonts = ["Quicksand", "Roboto", "Alegreya", "PlayfairDisplay", "Montserrat", "OpenDyslexic", "RobotoMono"] %>
<% for(var i=0; i < fonts.length; i++) { %>
<option value="<%=fonts[i]%>"><%=fonts[i]%></option>
<% } %>