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

Desktop: Improved rendering of All Notes item in sidebar

Browse Source
This commit is contained in:
Laurent Cozic 2020-09-29 11:49:51 +01:00
parent 99a496d684
commit 7b8ee467a0
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ElectronClient/gui/SideBar/SideBar.tsx
View File

@ -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>
);

9
ElectronClient/gui/SideBar/styles/index.ts
View File

@ -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 {