self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-13 00:10:37 +02:00
Code Issues Releases Activity

Layout and styling

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
ElectronClient/app/gui/NoteList.jsx
View File

@ -88,7 +88,7 @@ class NoteListComponent extends React.Component {
await Note.save(newNote); await Note.save(newNote);
} }
const padding = 6; const hPadding = 10;
let style = Object.assign({ width: width }, this.style().listItem); let style = Object.assign({ width: width }, this.style().listItem);
if (this.props.selectedNoteId === item.id) style = Object.assign(style, this.style().listItemSelected); 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 // 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. // but don't know how it will look in other OSes.
const checkbox = item.is_todo ? 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) }}/> <input style={{margin:0, marginBottom:1}} type="checkbox" defaultChecked={!!item.todo_completed} onClick={(event) => { onCheckboxClick(event, item) }}/>
</div> </div>
: null; : null;
let listItemTitleStyle = Object.assign({}, this.style().listItemTitle); 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); if (item.is_todo && !!item.todo_completed) listItemTitleStyle = Object.assign(listItemTitleStyle, this.style().listItemTitleCompleted);
return <div key={item.id} style={style}> return <div key={item.id} style={style}>

9
ElectronClient/app/gui/NoteText.jsx
View File

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