self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-30 10:36:35 +02:00
Code Issues Releases Activity

More styling

Browse Source
This commit is contained in:
Laurent Cozic 2017-11-08 22:48:19 +00:00
parent 26deb2ceb4
commit e6f9e2663d
2 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
ElectronClient/app/gui/SideBar.jsx
View File

@ -16,14 +16,36 @@ class SideBarComponent extends React.Component {
style() {
const theme = themeStyle(this.props.theme);
const itemHeight = 20;
const itemHeight = 25;
let style = {
root: {},
root: {
backgroundColor: theme.backgroundColor2,
},
listItem: {
display: 'block',
cursor: 'pointer',
height: itemHeight,
fontFamily: theme.fontFamily,
fontSize: theme.fontSize,
textDecoration: 'none',
boxSizing: 'border-box',
color: theme.color2,
paddingLeft: 14,
display: 'flex',
alignItems: 'center',
},
listItemSelected: {
backgroundColor: theme.selectedColor2,
},
header: {
height: itemHeight * 1.8,
fontFamily: theme.fontFamily,
fontSize: theme.fontSize * 1.3,
textDecoration: 'none',
boxSizing: 'border-box',
color: theme.color2,
paddingLeft: 8,
display: 'flex',
alignItems: 'center',
},
};
@ -78,23 +100,27 @@ class SideBarComponent extends React.Component {
}
folderItem(folder, selected) {
const style = Object.assign({}, this.style().listItem, {
fontWeight: selected ? 'bold' : 'normal',
});
let style = Object.assign({}, this.style().listItem);
if (selected) style = Object.assign(style, this.style().listItemSelected);
return <a href="#" data-id={folder.id} data-type={BaseModel.TYPE_FOLDER} onContextMenu={(event) => this.itemContextMenu(event)} key={folder.id} style={style} onClick={() => {this.folderItem_click(folder)}}>{folder.title}</a>
}
tagItem(tag, selected) {
const style = Object.assign({}, this.style().listItem, {
fontWeight: selected ? 'bold' : 'normal',
});
return <a href="#" data-id={tag.id} data-type={BaseModel.TYPE_TAG} onContextMenu={(event) => this.itemContextMenu(event)} key={tag.id} style={style} onClick={() => {this.tagItem_click(tag)}}>Tag: {tag.title}</a>
let style = Object.assign({}, this.style().listItem);
if (selected) style = Object.assign(style, this.style().listItemSelected);
return <a href="#" data-id={tag.id} data-type={BaseModel.TYPE_TAG} onContextMenu={(event) => this.itemContextMenu(event)} key={tag.id} style={style} onClick={() => {this.tagItem_click(tag)}}>{tag.title}</a>
}
makeDivider(key) {
return <div style={{height:2, backgroundColor:'blue' }} key={key}></div>
}
makeHeader(key, label, iconName) {
const style = this.style().header;
const icon = <i style={{fontSize: style.fontSize * 1.2, marginRight: 5}} className={"icon " + iconName}></i>
return <div style={style} key={key}>{icon}{label}</div>
}
synchronizeButton(label) {
return <a href="#" key="sync_button" onClick={() => {this.sync_click()}}>{label}</a>
}
@ -105,18 +131,19 @@ class SideBarComponent extends React.Component {
let items = [];
items.push(this.makeHeader('folderHeader', _('Notebooks'), 'ion-android-folder'));
if (this.props.folders.length) {
const folderItems = shared.renderFolders(this.props, this.folderItem.bind(this));
items = items.concat(folderItems);
if (items.length) items.push(this.makeDivider('divider_1'));
}
items.push(this.makeHeader('tagHeader', _('Tags'), 'ion-pricetags'));
if (this.props.tags.length) {
const tagItems = shared.renderTags(this.props, this.tagItem.bind(this));
items.push(<div className="tags" key="tag_items">{tagItems}</div>);
if (tagItems.length) items.push(this.makeDivider('divider_2'));
}
let lines = Synchronizer.reportToLines(this.props.syncReport);

4
ElectronClient/app/theme.js
View File

@ -20,6 +20,10 @@ const globalStyle = {
buttonMinHeight: 30,
textAreaLineHeight: 17,
backgroundColor2: "#3B314E",
color2: "#ffffff",
selectedColor2: "#4F416A",
headerHeight: 35,
headerButtonHPadding: 6,