self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-11 18:24:43 +02:00
Code Issues Releases Activity

Desktop: Remove colour gradient from sidebar and replaced expand icons with chrevrons

Browse Source
This commit is contained in:
Laurent Cozic 2020-05-02 17:17:15 +01:00
parent d738fa54ad
commit f51873d877
1 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ElectronClient/gui/SideBar.jsx
View File

@ -102,7 +102,7 @@ class SideBarComponent extends React.Component {
};
}
style(depth) {
style() {
const theme = themeStyle(this.props.theme);
const itemHeight = 25;
@ -114,11 +114,8 @@ class SideBarComponent extends React.Component {
listItemContainer: {
boxSizing: 'border-box',
height: itemHeight,
// paddingLeft: 14,
display: 'flex',
alignItems: 'stretch',
// Allow 3 levels of color depth
backgroundColor: theme.depthColor.replace('OPACITY', Math.min(depth * 0.1, 0.3)),
flexDirection: 'row',
},
listItem: {
fontFamily: theme.fontFamily,
@ -140,12 +137,12 @@ class SideBarComponent extends React.Component {
color: theme.color2,
cursor: 'default',
opacity: 0.8,
// fontFamily: theme.fontFamily,
fontSize: theme.fontSize,
textDecoration: 'none',
paddingRight: 5,
display: 'flex',
alignItems: 'center',
width: 12,
},
conflictFolder: {
color: theme.colorError2,
@ -460,16 +457,17 @@ class SideBarComponent extends React.Component {
const itemTitle = Folder.displayTitle(folder);
let containerStyle = Object.assign({}, this.style(depth).listItemContainer);
let containerStyle = Object.assign({}, this.style().listItemContainer);
if (selected) containerStyle = Object.assign(containerStyle, this.style().listItemSelected);
containerStyle.paddingLeft = 8 + depth * 15;
const expandLinkStyle = Object.assign({}, this.style().listItemExpandIcon);
const expandIconStyle = {
visibility: hasChildren ? 'visible' : 'hidden',
paddingLeft: 8 + depth * 10,
};
const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-plus-square' : 'fa-minus-square';
const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-chevron-right' : 'fa-chevron-down';
const expandIcon = <i style={expandIconStyle} className={`fa ${iconName}`}></i>;
const expandLink = hasChildren ? (
<a style={expandLinkStyle} href="#" folderid={folder.id} onClick={this.onFolderToggleClick_}>
@ -483,7 +481,7 @@ class SideBarComponent extends React.Component {
const noteCount = folder.note_count ? this.noteCountElement(folder.note_count) : '';
return (
<div className="list-item-container" style={containerStyle} key={folder.id} onDragStart={this.onFolderDragStart_} onDragOver={this.onFolderDragOver_} onDrop={this.onFolderDrop_} draggable={true} folderid={folder.id}>
<div className={`list-item-container list-item-depth-${depth}`} style={containerStyle} key={folder.id} onDragStart={this.onFolderDragStart_} onDragOver={this.onFolderDragOver_} onDrop={this.onFolderDrop_} draggable={true} folderid={folder.id}>
{expandLink}
<a
ref={anchorRef}