1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-27 10:32:58 +02:00

Desktop, Mobile: Fixes #2277: Fix alignment of checkboxes and other list items in rendered note

This commit is contained in:
Laurent Cozic 2020-02-08 17:15:22 +00:00
parent 1e190bbe70
commit 7fd445173d
3 changed files with 18 additions and 5 deletions

View File

@ -39,7 +39,7 @@ class ElectronAppWrapper {
createWindow() {
// Set to true to view errors if the application does not start
const debugEarlyBugs = this.env_ === 'dev' && false;
const debugEarlyBugs = this.env_ === 'dev';
const windowStateKeeper = require('electron-window-state');

View File

@ -5,8 +5,9 @@ const checkboxStyle = `
(otherwise they are too far right), but keep it for their children to allow
nested lists. Make sure this value matches the UL margin. */
#rendered-md > ul > li.md-checkbox {
margin-left: -1.7em;
.md-checkbox .checkbox-wrapper {
display: flex;
align-items: center;
}
li.md-checkbox {
@ -14,7 +15,8 @@ const checkboxStyle = `
}
li.md-checkbox input[type=checkbox] {
margin-right: 1em;
margin-left: -1.71em;
margin-right: 0.7em;
}
`;
@ -38,6 +40,10 @@ function createPrefixTokens(Token, id, checked, label, postMessageSyntax, source
return true;
`;
token = new Token('checkbox_wrapper_open', 'div', 1);
token.attrs = [['class', 'checkbox-wrapper']];
tokens.push(token);
token = new Token('checkbox_input', 'input', 0);
token.attrs = [['type', 'checkbox'], ['id', id], ['onclick', js]];
if (checked) token.attrs.push(['checked', 'true']);
@ -57,7 +63,10 @@ function createPrefixTokens(Token, id, checked, label, postMessageSyntax, source
}
function createSuffixTokens(Token) {
return [new Token('label_close', 'label', -1)];
return [
new Token('label_close', 'label', -1),
new Token('checkbox_wrapper_close', 'div', -1),
];
}
function installRule(markdownIt, mdOptions, ruleOptions, context) {

View File

@ -52,6 +52,9 @@ module.exports = function(style, options) {
}
/* Remove top padding and margin from first child so that top of rendered text is aligned to top of text editor text */
/* Disabled, because it also applies to non-direct descendants of #rendered-md and also not a very elegant solution */
/*
#rendered-md h1:first-child,
#rendered-md h2:first-child,
#rendered-md h3:first-child,
@ -65,6 +68,7 @@ module.exports = function(style, options) {
margin-top: 0;
padding-top: 0;
}
*/
p, h1, h2, h3, h4, h5, h6, ul, table {
margin-top: .6em;