From 7b8ee467a01c87cf07e3c64a5af7e6b0d1ede510 Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Tue, 29 Sep 2020 11:49:51 +0100
Subject: [PATCH] Desktop: Improved rendering of All Notes item in sidebar

---
 ElectronClient/gui/SideBar/SideBar.tsx     | 15 ++++++++-------
 ElectronClient/gui/SideBar/styles/index.ts |  9 ++++++++-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/ElectronClient/gui/SideBar/SideBar.tsx b/ElectronClient/gui/SideBar/SideBar.tsx
index b73fc77c0d..59f7558724 100644
--- a/ElectronClient/gui/SideBar/SideBar.tsx
+++ b/ElectronClient/gui/SideBar/SideBar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyledRoot, StyledAddButton, StyledHeader, StyledHeaderIcon, StyledHeaderLabel, StyledListItem, StyledListItemAnchor, StyledExpandLink, StyledNoteCount, StyledSyncReportText, StyledSyncReport, StyledSynchronizeButton } from './styles';
+import { StyledRoot, StyledAddButton, StyledHeader, StyledHeaderIcon, StyledAllNotesIcon, StyledHeaderLabel, StyledListItem, StyledListItemAnchor, StyledExpandLink, StyledNoteCount, StyledSyncReportText, StyledSyncReport, StyledSynchronizeButton } from './styles';
 import { ButtonLevel } from '../Button/Button';
 import CommandService from 'lib/services/CommandService';
 
@@ -65,6 +65,8 @@ function ExpandLink(props:any) {
 function FolderItem(props:any) {
 	const { hasChildren, isExpanded, depth, selected, folderId, folderTitle, anchorRef, noteCount, onFolderDragStart_, onFolderDragOver_, onFolderDrop_, itemContextMenu, folderItem_click, onFolderToggleClick_ } = props;
 
+	const noteCountComp = noteCount ? <StyledNoteCount>{noteCount}</StyledNoteCount> : null;
+
 	return (
 		<StyledListItem depth={depth} selected={selected} className={`list-item-container list-item-depth-${depth}`} onDragStart={onFolderDragStart_} onDragOver={onFolderDragOver_} onDrop={onFolderDrop_} draggable={true} data-folder-id={folderId}>
 			<ExpandLink themeId={props.themeId} hasChildren={hasChildren} folderId={folderId} onClick={onFolderToggleClick_} isExpanded={isExpanded}/>
@@ -83,7 +85,7 @@ function FolderItem(props:any) {
 				}}
 				onDoubleClick={onFolderToggleClick_}
 			>
-				{folderTitle} { noteCount && <StyledNoteCount>{noteCount}</StyledNoteCount>}
+				{folderTitle} {noteCountComp}
 			</StyledListItemAnchor>
 		</StyledListItem>
 	);
@@ -345,7 +347,7 @@ class SideBarComponent extends React.Component<Props, State> {
 	}
 
 	renderNoteCount(count:number) {
-		return <StyledNoteCount>{count}</StyledNoteCount>;
+		return count ? <StyledNoteCount>{count}</StyledNoteCount> : null;
 	}
 
 	renderExpandIcon(isExpanded:boolean, isVisible:boolean = true) {
@@ -359,16 +361,15 @@ class SideBarComponent extends React.Component<Props, State> {
 		return (
 			<StyledListItem key="allNotesHeader" selected={selected} className={'list-item-container list-item-depth-0'} isSpecialItem={true}>
 				<StyledExpandLink>{this.renderExpandIcon(false, false)}</StyledExpandLink>
+				<StyledAllNotesIcon className="icon-notes"/>
 				<StyledListItemAnchor
 					className="list-item"
 					isSpecialItem={true}
 					href="#"
 					selected={selected}
-					onClick={() => {
-						this.onAllNotesClick_();
-					}}
+					onClick={this.onAllNotesClick_}
 				>
-					({_('All notes')})
+					{_('All notes')}
 				</StyledListItemAnchor>
 			</StyledListItem>
 		);
diff --git a/ElectronClient/gui/SideBar/styles/index.ts b/ElectronClient/gui/SideBar/styles/index.ts
index 59395121df..5e48b2133b 100644
--- a/ElectronClient/gui/SideBar/styles/index.ts
+++ b/ElectronClient/gui/SideBar/styles/index.ts
@@ -31,6 +31,12 @@ export const StyledHeaderIcon = styled.i`
 	margin-right: 8px;
 `;
 
+export const StyledAllNotesIcon = styled(StyledHeaderIcon)`
+	font-size: ${(props:any) => props.theme.toolbarIconSize * 0.8}px;
+	color: ${(props:any) => props.theme.colorFaded2};
+	margin-right: 8px;
+`;
+
 export const StyledHeaderLabel = styled.span`
 	flex: 1;
 	color: ${(props:any) => props.theme.color2};
@@ -43,9 +49,10 @@ export const StyledListItem = styled.div`
 	height: 25px;
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 	padding-left: ${(props:any) => props.theme.mainPadding + ('depth' in props ? props.depth : 0) * 16}px;
 	background: ${(props:any) => props.selected ? props.theme.selectedColor2 : 'none'};
-	text-transform: ${(props:any) => props.isSpecialItem ? 'uppercase' : 'none'};
+	/*text-transform: ${(props:any) => props.isSpecialItem ? 'uppercase' : 'none'};*/
 	transition: 0.1s;
 
 	&:hover {