1
0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00

Adding sidebar collapse/expand

This commit is contained in:
Jesús Espino 2020-10-28 08:50:22 +01:00
parent 9081144701
commit 8afac6781d
6 changed files with 81 additions and 18 deletions

View File

@ -35,6 +35,7 @@
"Sidebar.import-archive": "Import Archive",
"Sidebar.light-theme": "Light Theme",
"Sidebar.mattermost-theme": "Mattermost Theme",
"Sidebar.no-views-in-board": "No pages inside",
"Sidebar.set-language": "Set Language",
"Sidebar.set-theme": "Set Theme",
"Sidebar.settings": "Settings",
@ -68,4 +69,4 @@
"ViewTitle.random-icon": "Random",
"ViewTitle.remove-icon": "Remove Icon",
"ViewTitle.untitled-board": "Untitled Board"
}
}

View File

@ -35,6 +35,7 @@
"Sidebar.import-archive": "Importar Archivo",
"Sidebar.light-theme": "Apariencia Clara",
"Sidebar.mattermost-theme": "Aparencia Mattermost",
"Sidebar.no-views-in-board": "No hay páginas dentro",
"Sidebar.set-language": "Establecer idioma",
"Sidebar.set-theme": "Establecer apariencia",
"Sidebar.settings": "Configuración",

View File

@ -56,26 +56,38 @@
font-weight: 500;
padding: 3px 20px;
&:hover {
background-color: rgba(var(--sidebar-fg), 0.05);
}
&.subitem {
color: rgba(var(--sidebar-fg), 0.6);
font-weight: 400;
margin-left: 20px;
}
&.no-views {
color: rgba(var(--sidebar-fg), 0.4);
&:hover {
background-color: rgba(var(--sidebar-bg));
}
}
.octo-button {
&:hover {
background-color: rgba(var(--sidebar-fg), 0.1);
}
&.expanded {
.SubmenuTriangleIcon {
transform: rotate(90deg);
}
}
.SubmenuTriangleIcon {
transition: 200ms ease-in-out;
transform: rotate(0deg);
}
}
}
.octo-sidebar-title {
cursor: pointer;
flex-grow: 1;
}
.octo-sidebar-item {
&:hover {
background-color: rgba(var(--sidebar-fg), 0.05);
}
.octo-button {
&:hover {
background-color: rgba(var(--sidebar-fg), 0.1);
}
}
}
}

View File

@ -14,6 +14,8 @@ import OptionsIcon from '../widgets/icons/options'
import ShowSidebarIcon from '../widgets/icons/showSidebar'
import HideSidebarIcon from '../widgets/icons/hideSidebar'
import HamburgerIcon from '../widgets/icons/hamburger'
import SubmenuTriangleIcon from '../widgets/icons/submenuTriangle'
import DotIcon from '../widgets/icons/dot'
import {WorkspaceTree} from '../viewModel/workspaceTree'
import {BoardView} from '../blocks/boardView'
@ -30,12 +32,13 @@ type Props = {
type State = {
isHidden: boolean
collapsedBoards: {[key: string]: boolean}
}
class Sidebar extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {isHidden: false}
this.state = {isHidden: false, collapsedBoards: {}}
}
shouldComponentUpdate(): boolean {
@ -49,6 +52,7 @@ class Sidebar extends React.Component<Props, State> {
}
const {boards, views} = workspaceTree
const {collapsedBoards} = this.state
if (this.state.isHidden) {
return (
@ -88,6 +92,16 @@ class Sidebar extends React.Component<Props, State> {
return (
<div key={board.id}>
<div className='octo-sidebar-item octo-hover-container'>
<div
className={'octo-button square ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}
onClick={() => {
const newCollapsedBoards = {...this.state.collapsedBoards}
newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]
this.setState({collapsedBoards: newCollapsedBoards})
}}
>
<SubmenuTriangleIcon/>
</div>
<div
className='octo-sidebar-title'
onClick={() => {
@ -119,11 +133,19 @@ class Sidebar extends React.Component<Props, State> {
</Menu>
</MenuWrapper>
</div>
{boardViews.map((view) => {
return (<div
{!collapsedBoards[board.id] && boardViews.length === 0 &&
<div className='octo-sidebar-item subitem no-views'>
<FormattedMessage
id='Sidebar.no-views-in-board'
defaultMessage='No pages inside'
/>
</div>}
{!collapsedBoards[board.id] && boardViews.map((view) => (
<div
key={view.id}
className='octo-sidebar-item subitem octo-hover-container'
>
>
<DotIcon/>
<div
className='octo-sidebar-title'
onClick={() => {
@ -137,8 +159,8 @@ class Sidebar extends React.Component<Props, State> {
/>
)}
</div>
</div>)
})}
</div>
))}
</div>
)
})

View File

@ -0,0 +1,5 @@
.DotIcon {
fill: rgba(var(--main-fg), 0.5);
width: 24px;
height: 24px;
}

View File

@ -0,0 +1,22 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import './dot.scss'
export default function DotIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='DotIcon Icon'
viewBox='0 0 100 100'
>
<circle
cx='50'
cy='50'
r='5'
/>
</svg>
)
}