Adding sidebar collapse/expand
This commit is contained in:
Jesús Espino
parent
9081144701
commit
8afac6781d
6 changed files with 81 additions and 18 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
5
webapp/src/widgets/icons/dot.scss
Normal file
5
webapp/src/widgets/icons/dot.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.DotIcon {
|
||||
fill: rgba(var(--main-fg), 0.5);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
22
webapp/src/widgets/icons/dot.tsx
Normal file
22
webapp/src/widgets/icons/dot.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue