self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-02-01 19:14:35 +02:00
Code Issues Releases Activity

Added the toggle feature on sidebar hearder (#3014)

Browse Source 
Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>
Co-authored-by: Rajat Dabade <rajat@Rajats-MacBook-Pro.local>
Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>
Co-authored-by: Jesús Espino <jespinog@gmail.com>
Co-authored-by: Paul Esch-Laurent <paul.esch-laurent@mattermost.com>
Co-authored-by: Miguel de la Cruz <miguel@mcrx.me>
Co-authored-by: kamre <eremchenko@gmail.com>
Co-authored-by: Varghese Jose <varghese.jose@tutanota.com>
Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: jprusch <rs@schaeferbarthold.de>
This commit is contained in:
Rajat Dabade 2022-07-12 17:00:26 +05:30 committed by GitHub
parent 573ea54153
commit e1f944c9ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 91 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
webapp/src/components/__snapshots__/workspace.test.tsx.snap
View File

@ -117,17 +117,13 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
<div
class="octo-sidebar-item category ' expanded active"
>
<button
type="button"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
</button>
<div
class="octo-sidebar-title category-title"
title="Category 1"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
Category 1
</div>
<div
@ -208,17 +204,13 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
<div
class="octo-sidebar-item category ' expanded "
>
<button
type="button"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
</button>
<div
class="octo-sidebar-title category-title"
title="Boards"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
Boards
</div>
<div
@ -1344,17 +1336,13 @@ exports[`src/components/workspace should match snapshot 1`] = `
<div
class="octo-sidebar-item category ' expanded active"
>
<button
type="button"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
</button>
<div
class="octo-sidebar-title category-title"
title="Category 1"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
Category 1
</div>
<div
@ -1435,17 +1423,13 @@ exports[`src/components/workspace should match snapshot 1`] = `
<div
class="octo-sidebar-item category ' expanded "
>
<button
type="button"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
</button>
<div
class="octo-sidebar-title category-title"
title="Boards"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
Boards
</div>
<div

22
webapp/src/components/sidebar/__snapshots__/sidebar.test.tsx.snap
View File

@ -173,18 +173,13 @@ exports[`components/sidebarSidebar sidebar hidden 1`] = `
<div
class="octo-sidebar-item category ' expanded "
>
<button
class="IconButton"
type="button"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
</button>
<div
class="octo-sidebar-title category-title"
title="Category 1"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
Category 1
</div>
<div
@ -238,18 +233,13 @@ exports[`components/sidebarSidebar sidebar hidden 1`] = `
<div
class="octo-sidebar-item category ' expanded "
>
<button
class="IconButton"
type="button"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
</button>
<div
class="octo-sidebar-title category-title"
title="Boards"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
Boards
</div>
<div

82
webapp/src/components/sidebar/__snapshots__/sidebarCategory.test.tsx.snap
View File

@ -8,18 +8,13 @@ exports[`components/sidebarCategory sidebar call hideSidebar 1`] = `
<div
class="octo-sidebar-item category ' expanded "
>
<button
class="IconButton"
type="button"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
</button>
<div
class="octo-sidebar-title category-title"
title="Category 1"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
Category 1
</div>
<div
@ -105,20 +100,15 @@ exports[`components/sidebarCategory sidebar call hideSidebar 2`] = `
class="SidebarCategory"
>
<div
class="octo-sidebar-item category ' collapsed "
class="octo-sidebar-item category ' expanded "
>
<button
class="IconButton"
type="button"
>
<i
class="CompassIcon icon-chevron-right ChevronRightIcon"
/>
</button>
<div
class="octo-sidebar-title category-title"
title="Category 1"
>
<i
class="CompassIcon icon-chevron-down ChevronDownIcon"
/>
Category 1
</div>
<div
@ -136,6 +126,64 @@ exports[`components/sidebarCategory sidebar call hideSidebar 2`] = `
</button>
</div>
</div>
<div
class="SidebarBoardItem subitem "
>
<div
class="octo-sidebar-icon"
>
i
</div>
<div
class="octo-sidebar-title"
title="board title"
>
board title
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper x"
role="button"
>
<button
class="IconButton"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
</div>
<div
class="SidebarBoardItem subitem "
>
<div
class="octo-sidebar-icon"
>
i
</div>
<div
class="octo-sidebar-title"
title="board title"
>
board title
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper x"
role="button"
>
<button
class="IconButton"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
</div>
</div>
</div>
`;

6
webapp/src/components/sidebar/sidebarCategory.scss
View File

@ -13,8 +13,11 @@
}
&:hover {
background-color: rgba(var(--sidebar-text-rgb), 0.08);
display: flex;
.octo-sidebar-title {
color: rgba(var(--sidebar-text-rgb), 1);
}
}
&.subitem {
@ -137,6 +140,7 @@
text-overflow: ellipsis;
display: flex;
align-items: baseline;
color: rgba(var(--sidebar-text-rgb), 0.6);
.octo-icon {
margin-right: 6px;

2
webapp/src/components/sidebar/sidebarCategory.test.tsx
View File

@ -89,7 +89,7 @@ describe('components/sidebarCategory', () => {
expect(container).toMatchSnapshot()
// testing collapsed state of category
const subItems = container.querySelectorAll('.category > .IconButton')
const subItems = container.querySelectorAll('.category')
expect(subItems).toBeDefined()
userEvent.click(subItems[0] as Element)
expect(container).toMatchSnapshot()

6
webapp/src/components/sidebar/sidebarCategory.tsx
View File

@ -142,14 +142,12 @@ const SidebarCategory = (props: Props) => {
<div
className={`octo-sidebar-item category ' ${collapsed ? 'collapsed' : 'expanded'} ${props.categoryBoards.id === props.activeCategoryId ? 'active' : ''}`}
>
<IconButton
icon={collapsed ? <ChevronRight/> : <ChevronDown/>}
onClick={() => setCollapsed(!collapsed)}
/>
<div
className='octo-sidebar-title category-title'
title={props.categoryBoards.name}
onClick={() => setCollapsed(!collapsed)}
>
{collapsed ? <ChevronRight/> : <ChevronDown/>}
{props.categoryBoards.name}
</div>
<MenuWrapper