self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-11 18:13:52 +02:00
Code Issues Releases Activity

Hide / show sidebar

Browse Source
This commit is contained in:
Chen-I Lim 2020-10-22 09:34:10 -07:00
parent c1fe8c3c0d
commit 84529f9c00
5 changed files with 110 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/src/app.tsx
View File

@ -12,14 +12,10 @@ import {
import LoginPage from './pages/loginPage'
import BoardPage from './pages/boardPage'
export default function App() {
export default function App(): JSX.Element {
return (
<Router>
<div id='frame'>
<div className='page-header'>
<a href='/'>OCTO</a>
</div>
<div id='main'>
<Switch>
<Route path='/login'>

18
webapp/src/components/pageHeader.tsx
View File

@ -1,18 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
type Props = {
}
class PageHeader extends React.Component<Props> {
render() {
return (
<div className='page-header'>
<a href='/'>OCTO</a>
</div>
)
}
}
export {PageHeader}

68
webapp/src/components/sidebar.tsx
View File

@ -1,6 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import React, {ReactNode} from 'react'
import {Archiver} from '../archiver'
import {Board, MutableBoard} from '../blocks/board'
@ -18,8 +18,21 @@ type Props = {
boardTree?: BoardTree
}
class Sidebar extends React.Component<Props> {
render() {
type State = {
isHidden: boolean
}
class Sidebar extends React.Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {isHidden: false}
}
shouldComponentUpdate(): boolean {
return true
}
render(): ReactNode {
const {workspaceTree} = this.props
if (!workspaceTree) {
return <div/>
@ -27,8 +40,41 @@ class Sidebar extends React.Component<Props> {
const {boards, views} = workspaceTree
if (this.state.isHidden) {
const hamburgerRef = React.createRef<HTMLDivElement>()
return (
<div className='octo-sidebar hidden'>
<div className='octo-sidebar-header'>
<div
className='octo-button square'
onClick={() => this.showClicked()}
>
<div
ref={hamburgerRef}
className='imageHamburger'
onMouseOver={() => {
hamburgerRef.current.className = 'imageShowSidebar'
}}
onMouseOut={() => {
hamburgerRef.current.className = 'imageHamburger'
}}
/>
</div>
</div>
</div>
)
}
return (
<div className='octo-sidebar'>
<div className='octo-sidebar-header octo-hover-container'>
{'OCTO'}
<div className='octo-spacer'/>
<div
className='octo-button square octo-hover-item'
onClick={() => this.hideClicked()}
><div className='imageHideSidebar'/></div>
</div>
{
boards.map((board) => {
const displayTitle = board.title || '(Untitled Board)'
@ -72,7 +118,7 @@ class Sidebar extends React.Component<Props> {
return (<div
key={view.id}
className='octo-sidebar-item subitem octo-hover-container'
>
>
<div
className='octo-sidebar-title'
onClick={() => {
@ -120,15 +166,15 @@ class Sidebar extends React.Component<Props> {
)
}
private boardClicked(board: Board) {
private boardClicked(board: Board): void {
this.props.showBoard(board.id)
}
private viewClicked(board: Board, view: BoardView) {
private viewClicked(board: Board, view: BoardView): void {
this.props.showView(view.id, board.id)
}
async addBoardClicked() {
async addBoardClicked(): Promise<void> {
const {boardTree, showBoard} = this.props
const oldBoardId = boardTree?.board?.id
@ -147,6 +193,14 @@ class Sidebar extends React.Component<Props> {
await mutator.insertBlock(board)
}
private hideClicked() {
this.setState({isHidden: true})
}
private showClicked() {
this.setState({isHidden: false})
}
}
export {Sidebar}

21
webapp/static/images.css
View File

@ -48,3 +48,24 @@
min-width: 24px;
min-height: 24px;
}
.imageHideSidebar {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:6;" fill="none" stroke-opacity="50%"><polyline points="80,20 50,50 80,80" /><polyline points="50,20 20,50, 50,80" /></svg>');
background-size: 100% 100%;
min-width: 24px;
min-height: 24px;
}
.imageShowSidebar {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:6;" fill="none" stroke-opacity="50%"><polyline points="20,20 50,50 20,80" /><polyline points="50,20 80,50, 50,80" /></svg>');
background-size: 100% 100%;
min-width: 24px;
min-height: 24px;
}
.imageHamburger {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="stroke:black;stroke-width:6;" fill="none" stroke-opacity="50%"><polyline points="20,25 80,25" /><polyline points="20,50 80,50" /><polyline points="20,75 80,75" /></svg>');
background-size: 100% 100%;
min-width: 24px;
min-height: 24px;
}

40
webapp/static/main.css
View File

@ -40,18 +40,6 @@ hr {
margin-bottom: 8px;
}
.page-header {
font-size: 18px;
font-weight: bold;
background-color: #eeeeee;
border-bottom: solid 1px #909090;
padding: 10px 20px;
}
.page-header a {
color: #505050;
}
.page-loading {
margin: 50px auto;
}
@ -99,7 +87,33 @@ hr {
min-height: 100%;
background-color: rgb(247, 246, 243);
padding: 20px 0;
padding: 10px 0;
}
.octo-sidebar.hidden {
position: absolute;
top: 0;
left: 0;
z-index: 15;
min-height: 0;
height: 50px;
width: 50px;
background: none;
padding: 0;
}
.octo-sidebar.hidden > div {
padding: 0;
margin: auto;
}
.octo-sidebar-header {
display: flex;
flex-direction: row;
font-weight: 600;
padding: 3px 20px;
margin-bottom: 5px;
}
.octo-sidebar-item {