luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added empty states

Browse source
This commit is contained in:
Harshil Sharma 2023-01-20 09:47:44 +05:30
parent f3d4477245
commit 6922539159
4 changed files with 97 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/i18n/en.json
View file

@ -446,6 +446,8 @@
"tutorial_tip.out": "Opt out of these tips.",
"tutorial_tip.seen": "Seen this before?",
"statusProperty.configDialog.title": "Edit Statuses",
"statusProperty.configDialog.inProgress.emptyText": "Drag statuses here to consider tasks with these statuses “in progress”",
"statusProperty.configDialog.complete.emptyText": "Drag statuses here to consider tasks with these statuses ”Done”",
"statusProperty.configDialog.subTitle": "Categorise your status values to represent what each value represents",
"generic.cancel": "Cancel",
"generic.save": "Save"

36
webapp/src/components/shareBoard/shareBoardButton.tsx
View file

@ -16,6 +16,10 @@ import {BoardTypeOpen} from '../../blocks/board'
import './shareBoardButton.scss'
import ClockOutline from '../../widgets/icons/clockOutline'
import CheckIcon from '../../widgets/icons/check'
import ShareBoardDialog from './shareBoard'
type Props = {
@ -41,6 +45,11 @@ const ShareBoardButton = (props: Props) => {
{id: '1', value: 'TODO', color: 'propColorYellow'},
{id: '1', value: 'Pending Specs', color: 'propColorGray'},
],
emptyState: {
icon: (<div/>),
color: '#FF0000',
text: (<span>{'Hello world'}</span>),
},
},
{
id: '2',
@ -63,15 +72,36 @@ const ShareBoardButton = (props: Props) => {
{id: '1', value: 'Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick', color: 'propColorOrange'},
{id: '1', value: 'Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick', color: 'propColorOrange'},
],
emptyState: {
icon: (<ClockOutline/>),
color: '--away-indicator-rgb',
text: (
<FormattedMessage
id='statusProperty.configDialog.inProgress.emptyText'
defaultMessage='Drag statuses here to consider tasks with these statuses “in progress”'
/>
),
},
},
{
id: '3',
title: 'Completed',
options: [
{id: '1', value: 'Done', color: 'propColorPink'},
{id: '1', value: 'Branch Cut', color: 'propColorGreen'},
{id: '1', value: 'Released', color: 'propColorDefault'},
// {id: '1', value: 'Done', color: 'propColorPink'},
// {id: '1', value: 'Branch Cut', color: 'propColorGreen'},
// {id: '1', value: 'Released', color: 'propColorDefault'},
],
emptyState: {
icon: (<CheckIcon/>),
color: '--online-indicator-rgb',
text: (
<FormattedMessage
id='statusProperty.configDialog.complete.emptyText'
defaultMessage='Drag statuses here to consider tasks with these statuses ”Done”'
/>
),
},
},
]

29
webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss
View file

@ -81,6 +81,33 @@
margin-top: 3px;
}
}
.emptyColumnPlaceholder {
margin: 0 16px;
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
padding: 6px 0;
.icon-wrapper {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 auto;
padding-top: 7px;
.CompassIcon {
font-size: 18px;
opacity: 1;
display: block;
height: 18px;
}
}
}
}
}
}
}

35
webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
View file

@ -14,10 +14,17 @@ import Label from '../../../widgets/label'
import {IPropertyOption} from '../../../blocks/board'
import DragHandle from '../../../widgets/icons/dragHandle'
export type StatusCategoryEmptyState = {
icon: JSX.Element
color: string
text: JSX.Element
}
export type StatusCategory = {
id: string
title: string
options: IPropertyOption[]
emptyState: StatusCategoryEmptyState
}
type Props = {
@ -53,6 +60,25 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
)
}
const generateEmptyColumnPlaceholder = (categoryEmptyState: StatusCategoryEmptyState): JSX.Element => {
return (
<div className='emptyColumnPlaceholder'>
<div
className='icon-wrapper'
style={{
backgroundColor: `rgba(var(${categoryEmptyState.color}), 0.2)`,
color: `rgba(var(${categoryEmptyState.color}), 1)`,
}}
>
{categoryEmptyState.icon}
</div>
<div className='placeholderText text-75'>
{categoryEmptyState.text}
</div>
</div>
)
}
return (
<ActionDialog
onClose={props.onClose}
@ -82,7 +108,14 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
</div>
<div className='categorySwimlane_ValueArea'>
<div className='overflowWrapper'>
{valueCategory.options.map((option) => generateValueRow(option))}
{
valueCategory.options.length === 0 &&
generateEmptyColumnPlaceholder(valueCategory.emptyState)
}
{
valueCategory.options.length > 0 &&
valueCategory.options.map((option) => generateValueRow(option))
}
</div>
</div>
</div>