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 board columns

Browse Source
This commit is contained in:
Chen-I Lim 2020-10-23 15:16:15 -07:00
parent c0c696b448
commit 93bbc1343a
5 changed files with 70 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
webapp/src/components/boardComponent.tsx
View File

@ -104,6 +104,8 @@ class BoardComponent extends React.Component<Props, State> {
const visiblePropertyTemplates = board.cardProperties.filter((template) => activeView.visiblePropertyIds.includes(template.id))
const hasFilter = activeView.filter && activeView.filter.filters?.length > 0
const hasSort = activeView.sortOptions.length > 0
const visibleGroups = boardTree.groups.filter(group => !group.isHidden)
const hiddenGroups = boardTree.groups.filter(group => group.isHidden)
return (
<div
@ -281,7 +283,9 @@ class BoardComponent extends React.Component<Props, State> {
><div className='imageAdd'/></Button>
</div>
{boardTree.groups.map((group) =>
{/* Visible column headers */}
{visibleGroups.map((group) =>
(<div
key={group.option.id}
className='octo-board-header-cell'
@ -319,11 +323,11 @@ class BoardComponent extends React.Component<Props, State> {
<MenuWrapper>
<Button><div className='imageOptions'/></Button>
<Menu>
{/* <Menu.Text
<Menu.Text
id='hide'
name='Hide'
onClick={() => mutator.hideViewColumn(activeView, group.option.id)}
/> */}
/>
<Menu.Text
id='delete'
name='Delete'
@ -348,7 +352,15 @@ class BoardComponent extends React.Component<Props, State> {
</div>),
)}
<div className='octo-board-header-cell'>
{/* Hidden column header */}
{(() => {
if (hiddenGroups.length > 0) {
return <div className='octo-board-header-cell narrow'>Hidden columns</div>
}
})()}
<div className='octo-board-header-cell narrow'>
<Button
onClick={(e) => {
this.addGroupClicked()
@ -397,7 +409,7 @@ class BoardComponent extends React.Component<Props, State> {
{/* Columns */}
{boardTree.groups.map((group) =>
{visibleGroups.map((group) =>
(<BoardColumn
onDrop={(e) => {
this.onDropToColumn(group.option)
@ -428,6 +440,35 @@ class BoardComponent extends React.Component<Props, State> {
>+ New</Button>
</BoardColumn>),
)}
{/* Hidden columns */}
{(() => {
if (hiddenGroups.length > 0) {
return(
<div className='octo-board-column narrow'>
{hiddenGroups.map((group) =>
<MenuWrapper key={group.option.id}>
<div
key={group.option.id}
className={`octo-label ${group.option.color}`}
>
{group.option.value}
</div>
<Menu>
<Menu.Text
id='show'
name='Show'
onClick={() => mutator.unhideViewColumn(activeView, group.option.id)}
/>
</Menu>
</MenuWrapper>
)}
</div>
)
}
})()}
</div>
</div>
</div>

16
webapp/src/viewModel/boardTree.ts
View File

@ -9,7 +9,11 @@ import {IBlock, IMutableBlock} from '../blocks/block'
import {OctoUtils} from '../octoUtils'
import {Utils} from '../utils'
type Group = { option: IPropertyOption, cards: Card[] }
type Group = {
option: IPropertyOption
cards: Card[]
isHidden: boolean
}
interface BoardTree {
readonly board: Board
@ -58,13 +62,13 @@ class MutableBoardTree implements BoardTree {
this.ensureMinimumSchema()
}
private async ensureMinimumSchema() {
private ensureMinimumSchema(): boolean {
const {board} = this
let didChange = false
// At least one select property
const selectProperties = board.cardProperties.find((o) => o.type === 'select')
const selectProperties = board?.cardProperties.find((o) => o.type === 'select')
if (!selectProperties) {
const newBoard = new MutableBoard(board)
const property: IPropertyTemplate = {
@ -81,8 +85,8 @@ class MutableBoardTree implements BoardTree {
// At least one view
if (this.views.length < 1) {
const view = new MutableBoardView()
view.parentId = board.id
view.groupById = board.cardProperties.find((o) => o.type === 'select')?.id
view.parentId = board?.id
view.groupById = board?.cardProperties.find((o) => o.type === 'select')?.id
this.views.push(view)
didChange = true
}
@ -218,9 +222,11 @@ class MutableBoardTree implements BoardTree {
return optionId && optionId === option.id
})
const isHidden = this.activeView.hiddenColumnIds.includes(option.id)
const group: Group = {
option,
cards,
isHidden
}
this.groups.push(group)

3
webapp/src/widgets/menuWrapper.scss Normal file
View File

@ -0,0 +1,3 @@
.MenuWrapper {
cursor: pointer;
}

2
webapp/src/widgets/menuWrapper.tsx
View File

@ -3,6 +3,8 @@
import React from 'react'
import './menuWrapper.scss'
type Props = {
children?: React.ReactNode;
onToggle?: (open: boolean) => void;

8
webapp/static/main.css
View File

@ -204,6 +204,10 @@ hr {
vertical-align: middle;
}
.octo-board-header-cell.narrow {
width: 220px;
}
.octo-board-header-cell > div {
margin-right: 5px;
}
@ -225,6 +229,10 @@ hr {
margin-right: 15px;
}
.octo-board-column.narrow {
width: 220px;
}
.dragover {
background-color: rgba(128, 192, 255, 0.4);
}