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:
parent
769df5b818
commit
f543015714
@ -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}>
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user