luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[GH-307] Increase clickable area on sidebar items (#344)

Browse source 
This moves the click handler from sidebar item titles to the sidebar items
themselves. This way, the clickable area matches with the visually highlighted
area on hover.

Fixes: #307
This commit is contained in:
Johannes Marbach 2021-04-28 16:05:43 +02:00 committed by GitHub
parent a918af6200
commit 1b5f580e44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
webapp/src/components/sidebar/sidebarBoardItem.scss
View file

@ -30,6 +30,10 @@
}
}
&:not(.no-views) {
cursor: pointer;
}
>.Icon {
stroke: rgba(var(--sidebar-fg), 0.3);
height: 14px;
@ -72,7 +76,6 @@
.octo-sidebar-title {
font-weight: 600;
cursor: pointer;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;

12
webapp/src/components/sidebar/sidebarBoardItem.tsx
View file

@ -83,16 +83,16 @@ const SidebarBoardItem = React.memo((props: Props) => {
return (
<div className='SidebarBoardItem'>
<div className={'octo-sidebar-item ' + (collapsed ? 'collapsed' : 'expanded')}>
<div
className={'octo-sidebar-item ' + (collapsed ? 'collapsed' : 'expanded')}
onClick={() => props.showBoard(board.id)}
>
<IconButton
icon={<DisclosureTriangle/>}
onClick={() => setCollapsed(!collapsed)}
/>
<div
className='octo-sidebar-title'
onClick={() => {
props.showBoard(board.id)
}}
title={displayTitle}
>
{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
@ -151,13 +151,11 @@ const SidebarBoardItem = React.memo((props: Props) => {
<div
key={view.id}
className='octo-sidebar-item subitem'
onClick={() => props.showView(view.id, board.id)}
>
{iconForViewType(view.viewType)}
<div
className='octo-sidebar-title'
onClick={() => {
props.showView(view.id, board.id)
}}
title={view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}
>
{view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}