1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-30 10:36:35 +02:00

Layout and styling

This commit is contained in:
Laurent Cozic 2017-11-10 21:04:53 +00:00
parent 769df5b818
commit f543015714
2 changed files with 10 additions and 5 deletions

View File

@ -88,7 +88,7 @@ class NoteListComponent extends React.Component {
await Note.save(newNote);
}
const padding = 6;
const hPadding = 10;
let style = Object.assign({ width: width }, this.style().listItem);
if (this.props.selectedNoteId === item.id) style = Object.assign(style, this.style().listItemSelected);
@ -96,13 +96,13 @@ class NoteListComponent extends React.Component {
// Setting marginBottom = 1 because it makes the checkbox looks more centered, at least on Windows
// but don't know how it will look in other OSes.
const checkbox = item.is_todo ?
<div style={{display: 'flex', height: style.height, alignItems: 'center', paddingLeft: padding}}>
<div style={{display: 'flex', height: style.height, alignItems: 'center', paddingLeft: hPadding}}>
<input style={{margin:0, marginBottom:1}} type="checkbox" defaultChecked={!!item.todo_completed} onClick={(event) => { onCheckboxClick(event, item) }}/>
</div>
: null;
let listItemTitleStyle = Object.assign({}, this.style().listItemTitle);
listItemTitleStyle.paddingLeft = checkbox ? padding : 4;
listItemTitleStyle.paddingLeft = !checkbox ? hPadding : 4;
if (item.is_todo && !!item.todo_completed) listItemTitleStyle = Object.assign(listItemTitleStyle, this.style().listItemTitleCompleted);
return <div key={item.id} style={style}>

View File

@ -329,7 +329,6 @@ class NoteTextComponent extends React.Component {
overflow: 'hidden',
float: 'left',
verticalAlign: 'top',
borderLeft: '1px solid ' + theme.dividerColor,
boxSizing: 'border-box',
};
@ -351,7 +350,6 @@ class NoteTextComponent extends React.Component {
// to this bug: https://github.com/electron/electron/issues/8277
// So instead setting the width 0.
viewerStyle.width = 0;
viewerStyle.borderLeft = 'none';
editorStyle.width = innerWidth;
}
@ -360,6 +358,12 @@ class NoteTextComponent extends React.Component {
viewerStyle.width = innerWidth;
}
if (visiblePanes.indexOf('viewer') >= 0 && visiblePanes.indexOf('editor') >= 0) {
viewerStyle.borderLeft = '1px solid ' + theme.dividerColor;
} else {
viewerStyle.borderLeft = 'none';
}
if (this.state.webviewReady) {
const mdOptions = {
onResourceLoaded: () => {
@ -404,6 +408,7 @@ class NoteTextComponent extends React.Component {
onScroll={(event) => { this.editor_scroll(); }}
ref={(elem) => { this.editor_ref(elem); } }
onChange={(body) => { this.aceEditor_change(body) }}
showPrintMargin={false}
// Disable warning: "Automatically scrolling cursor into view after
// selection change this will be disabled in the next version set