mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-21 16:06:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 26

css: refactor element positioning

Browse source 
No more javascript to change css properties
Remove a number of useless tables
Try to stop positioning elements with absolute, but use flex-boxes instead

Adds comment to pad template, and move popups and chatbox inside editorcontainerbox (so absolute positioning is straightforward)

Make the design more consistent: always use base color, font-family and font-size. USe relative font size if necessary (.9rem instead of 11px for example)

Remove two columns in the popups, just use one column

Remove css meant to support old browser (like -webkit-box-shadow, -moz-box-shadow). Those css rules are quite common now, and If we want to support very old browser, we should use clean-css or other tools to add them automatically
This commit is contained in:
Sebastian Castro 2020-04-02 14:36:49 +02:00 • committed by muxator
parent 0603bf8097
commit 5fd6aeeea6
20 changed files with 839 additions and 1224 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/static/js/ace.js
View file

@ -225,7 +225,7 @@ function Ace2Editor()
var iframeHTML = [];
iframeHTML.push(doctype);
iframeHTML.push("<html><head>");
iframeHTML.push("<html class='inner-editor'><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><head>']
var outerHTML = [doctype, '<html class="inner-editor outerdoc"><head>']
var includedCSS = [];
var $$INCLUDE_CSS = function(filename) {includedCSS.push(filename)};

78
src/static/js/ace2_inner.js
View file

@ -69,12 +69,6 @@ function Ace2Inner(){
var THE_TAB = ' '; //4
var MAX_LIST_LEVEL = 16;
var LINE_NUMBER_PADDING_RIGHT = 4;
var LINE_NUMBER_PADDING_LEFT = 4;
var MIN_LINEDIV_WIDTH = 20;
var EDIT_BODY_PADDING_TOP = 8;
var EDIT_BODY_PADDING_LEFT = 8;
var FORMATTING_STYLES = ['bold', 'italic', 'underline', 'strikethrough'];
var SELECT_BUTTON_CLASS = 'selected';
@ -127,12 +121,6 @@ function Ace2Inner(){
var hasLineNumbers = true;
var isStyled = true;
// space around the innermost iframe element
var iframePadLeft = MIN_LINEDIV_WIDTH + LINE_NUMBER_PADDING_RIGHT + EDIT_BODY_PADDING_LEFT;
var iframePadTop = EDIT_BODY_PADDING_TOP;
var iframePadBottom = 0,
iframePadRight = 0;
var console = (DEBUG && window.console);
var documentAttributeManager;
@ -4766,70 +4754,7 @@ function Ace2Inner(){
return;
}
function setIfNecessary(obj, prop, value)
{
if (obj[prop] != value)
{
obj[prop] = value;
}
}
var lineNumberWidth = sideDiv.firstChild.offsetWidth;
var newSideDivWidth = lineNumberWidth + LINE_NUMBER_PADDING_LEFT;
if (newSideDivWidth < MIN_LINEDIV_WIDTH) newSideDivWidth = MIN_LINEDIV_WIDTH;
iframePadLeft = EDIT_BODY_PADDING_LEFT;
if (hasLineNumbers) iframePadLeft += newSideDivWidth + LINE_NUMBER_PADDING_RIGHT;
setIfNecessary(iframe.style, "left", iframePadLeft + "px");
setIfNecessary(sideDiv.style, "width", newSideDivWidth + "px");
for (var i = 0; i < 2; i++)
{
var newHeight = root.clientHeight;
var newWidth = (browser.msie ? root.createTextRange().boundingWidth : root.clientWidth);
var viewHeight = getInnerHeight() - iframePadBottom - iframePadTop;
var viewWidth = getInnerWidth() - iframePadLeft - iframePadRight;
if (newHeight < viewHeight)
{
newHeight = viewHeight;
if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'auto');
}
else
{
if (browser.msie) setIfNecessary(outerWin.document.documentElement.style, 'overflowY', 'scroll');
}
if (doesWrap)
{
newWidth = viewWidth;
}
else
{
if (newWidth < viewWidth) newWidth = viewWidth;
}
setIfNecessary(iframe.style, "height", newHeight + "px");
setIfNecessary(iframe.style, "width", newWidth + "px");
setIfNecessary(sideDiv.style, "height", newHeight + "px");
}
if (browser.firefox)
{
if (!doesWrap)
{
// the body:display:table-cell hack makes mozilla do scrolling
// correctly by shrinking the <body> to fit around its content,
// but mozilla won't act on clicks below the body. We keep the
// style.height property set to the viewport height (editor height
// not including scrollbar), so it will never shrink so that part of
// the editor isn't clickable.
var body = root;
var styleHeight = viewHeight + "px";
setIfNecessary(body.style, "height", styleHeight);
}
else
{
setIfNecessary(root.style, "height", "");
}
}
var win = outerWin;
var r = 20;
enforceEditability();
@ -5160,7 +5085,6 @@ function Ace2Inner(){
{
var win = outerWin;
var odoc = outerWin.document;
pixelX += iframePadLeft;
var distInsideLeft = pixelX - win.scrollX;
var distInsideRight = win.scrollX + getInnerWidth() - pixelX;
if (distInsideLeft < 0)
@ -5358,7 +5282,7 @@ function Ace2Inner(){
function initLineNumbers()
{
lineNumbersShown = 1;
sideDiv.innerHTML = '<table border="0" cellpadding="0" cellspacing="0" align="right"><tr><td id="sidedivinner" class="sidedivinner"><div>1</div></td></tr></table>';
sideDiv.innerHTML = '<div id="sidedivinner" class="sidedivinner"><div>1</div></div>';
sideDivInner = outerWin.document.getElementById("sidedivinner");
$(sideDiv).addClass("sidediv");
}

34
src/static/js/chat.js
View file

@ -31,7 +31,7 @@ var chat = (function()
show: function ()
{
$("#chaticon").hide();
$("#chatbox").show();
$("#chatbox").css('display', 'flex');
$("#gritter-notice-wrapper").hide();
self.scrollDown();
chatMentions = 0;
@ -46,42 +46,28 @@ var chat = (function()
stickToScreen: function(fromInitialCall) // Make chat stick to right hand side of screen
{
chat.show();
if(!isStuck || fromInitialCall) { // Stick it to
padcookie.setPref("chatAlwaysVisible", true);
$('#chatbox').addClass("stickyChat");
$('#titlesticky').hide();
$('#editorcontainer').css({"right":"192px"});
$('.stickyChat').css("top",$('#editorcontainer').offset().top+"px");
isStuck = true;
} else { // Unstick it
padcookie.setPref("chatAlwaysVisible", false);
$('.stickyChat').css("top", "auto");
$('#chatbox').removeClass("stickyChat");
$('#titlesticky').show();
$('#editorcontainer').css({"right":"0px"});
isStuck = false;
}
isStuck = (!isStuck || fromInitialCall);
$('#chatbox, .sticky-container').toggleClass("stickyChat", isStuck);
padcookie.setPref("chatAlwaysVisible", isStuck);
$('#options-stickychat').prop('checked', isStuck);
},
chatAndUsers: function(fromInitialCall)
{
var toEnable = $('#options-chatandusers').is(":checked");
if(toEnable || !userAndChat || fromInitialCall){
padcookie.setPref("chatAndUsers", true);
chat.stickToScreen(true);
$('#options-stickychat').prop('checked', true)
$('#options-chatandusers').prop('checked', true)
$('#options-stickychat').prop("disabled", "disabled");
$('#users').addClass("chatAndUsers");
$("#chatbox").addClass("chatAndUsersChat");
// redraw
userAndChat = true;
padeditbar.redrawHeight()
}else{
padcookie.setPref("chatAndUsers", false);
$('#options-stickychat').prop("disabled", false);
$('#users').removeClass("chatAndUsers");
$("#chatbox").removeClass("chatAndUsersChat");
userAndChat = false;
}
padcookie.setPref("chatAndUsers", userAndChat);
$('#users, .sticky-container').toggleClass("chatAndUsers stickyUsers", userAndChat);
$("#chatbox").toggleClass("chatAndUsersChat", userAndChat);
},
hide: function ()
{

2
src/static/js/pad.js
View file

@ -73,7 +73,7 @@ function randomString()
// callback: the function to call when all above succeeds, `val` is the value supplied by the user
var getParameters = [
{ name: "noColors", checkVal: "true", callback: function(val) { settings.noColors = true; $('#clearAuthorship').hide(); } },
{ name: "showControls", checkVal: "false", callback: function(val) { $('#editbar').addClass('hideControlsEditbar'); $('#editorcontainer').addClass('hideControlsEditor'); } },
{ name: "showControls", checkVal: "true", callback: function(val) { $('#editbar').css('display', 'flex') } },
{ name: "showChat", checkVal: "true", callback: function(val) { $('#chaticon').show(); } },
{ name: "showLineNumbers", checkVal: "false", callback: function(val) { settings.LineNumbersDisabled = true; } },
{ name: "useMonospaceFont", checkVal: "true", callback: function(val) { settings.useMonospaceFontGlobal = true; } },

64
src/static/js/pad_editbar.js
View file

@ -141,11 +141,6 @@ var padeditbar = (function()
init: function() {
var self = this;
self.dropdowns = [];
// Listen for resize events (sucks but needed as iFrame ace_inner has to be position absolute
// A CSS fix for this would be nice but I'm not sure how we'd do it.
$(window).resize(function(){
self.redrawHeight();
});
$("#editbar .editbarbutton").attr("unselectable", "on"); // for IE
$("#editbar").removeClass("disabledtoolbar").addClass("enabledtoolbar");
@ -160,10 +155,6 @@ var padeditbar = (function()
bodyKeyEvent(evt);
});
$('#editbar').show();
this.redrawHeight();
registerDefaultCommands(self);
hooks.callAll("postToolbarInit", {
@ -173,7 +164,6 @@ var padeditbar = (function()
},
isEnabled: function()
{
// return !$("#editbar").hasClass('disabledtoolbar');
return true;
},
disable: function()
@ -185,55 +175,6 @@ var padeditbar = (function()
this.commands[cmd] = callback;
return this;
},
calculateEditbarHeight: function() {
// if we're on timeslider, there is nothing on editbar, so we just use zero
var onTimeslider = $('.menu_left').length === 0;
if (onTimeslider) return 0;
// if editbar has both menu left and right, its height must be
// the max between the height of these two parts
var leftMenuPosition = $('.menu_left').offset().top;
var rightMenuPosition = $('.menu_right').offset().top;
var editbarHasMenuLeftAndRight = (leftMenuPosition === rightMenuPosition);
var height;
if (editbarHasMenuLeftAndRight) {
height = Math.max($('.menu_left').height(), $('.menu_right').height());
}
else {
height = $('.menu_left').height();
}
return height;
},
redrawHeight: function(){
var minimunEditbarHeight = self.calculateEditbarHeight();
var editbarHeight = minimunEditbarHeight + 1 + "px";
var containerTop = minimunEditbarHeight + 6 + "px";
$('#editbar').css("height", editbarHeight);
$('#editorcontainer').css("top", containerTop);
// make sure pop ups are in the right place
if($('#editorcontainer').offset()){
$('.popup').css("top", $('#editorcontainer').offset().top + "px");
}
// If sticky chat is enabled..
if($('#options-stickychat').is(":checked")){
if($('#editorcontainer').offset()){
$('#chatbox').css("top", $('#editorcontainer').offset().top + "px");
}
};
// If chat and Users is enabled..
if($('#options-chatandusers').is(":checked")){
if($('#editorcontainer').offset()){
$('#users').css("top", $('#editorcontainer').offset().top + "px");
}
}
},
registerDropdownCommand: function (cmd, dropdown) {
dropdown = dropdown || cmd;
self.dropdowns.push(dropdown)
@ -256,6 +197,11 @@ var padeditbar = (function()
},
toggleDropDown: function(moduleName, cb)
{
// do nothing if users are sticked
if (moduleName === "users" && $('#users').hasClass('stickyUsers')) {
return;
}
// hide all modules and remove highlighting of all buttons
if(moduleName == "none")
{

4
src/static/js/pad_modals.js
View file

@ -44,10 +44,10 @@ var padmodals = (function()
});
},
showOverlay: function() {
$("#overlay").show();
$("#toolbar-overlay").show();
},
hideOverlay: function() {
$("#overlay").hide();
$("#toolbar-overlay").hide();
}
};
return self;