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

Made calculation options hidden when empty: (#1076)

Browse source 
* Made calculation options hidden when empty:

* WIP

* Made calculation row visible on hover

* Updated tests

* Fixed issue with plugin mode

* Fixed a bug where options didn't hide after selecting an option

* Updating opacity

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
This commit is contained in:
Harshil Sharma 2021-08-30 11:43:21 +05:30 committed by GitHub
parent 08f34d2f63
commit 7f8dc816cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 203 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
webapp/src/components/calculations/__snapshots__/calculation.test.tsx.snap
View file

@ -3,7 +3,7 @@
exports[`components/calculations/Calculation should match snapshot - count 1`] = `
<div>
<div
class="Calculation count fooClass"
class="Calculation count fooClass hovered"
tabindex="0"
>
<span
@ -23,7 +23,7 @@ exports[`components/calculations/Calculation should match snapshot - count 1`] =
exports[`components/calculations/Calculation should match snapshot - countUniqueValue 1`] = `
<div>
<div
class="Calculation countUniqueValue fooClass"
class="Calculation countUniqueValue fooClass hovered"
tabindex="0"
>
<span
@ -43,7 +43,7 @@ exports[`components/calculations/Calculation should match snapshot - countUnique
exports[`components/calculations/Calculation should match snapshot - countValue 1`] = `
<div>
<div
class="Calculation countValue fooClass"
class="Calculation countValue fooClass hovered"
tabindex="0"
>
<span
@ -63,7 +63,7 @@ exports[`components/calculations/Calculation should match snapshot - countValue
exports[`components/calculations/Calculation should match snapshot - none 1`] = `
<div>
<div
class="Calculation none fooClass"
class="Calculation none fooClass hovered"
tabindex="0"
>
<span
@ -81,7 +81,7 @@ exports[`components/calculations/Calculation should match snapshot - none 1`] =
exports[`components/calculations/Calculation should match snapshot - option change 1`] = `
<div>
<div
class="Calculation none fooClass"
class="Calculation none fooClass menuOpen hovered"
tabindex="0"
>
<div>

11
webapp/src/components/calculations/calculation.scss
View file

@ -3,9 +3,10 @@
.Calculation {
cursor: pointer;
transition: opacity 0.1s ease-in;
&.none {
color: rgba(var(--body-color), 0.64);
opacity: 0;
.calculationLabel {
text-transform: capitalize;
@ -13,6 +14,14 @@
font-size: 14px;
margin-right: 0;
}
&.hovered {
opacity: 0.64;
}
&.menuOpen {
opacity: 1;
}
}
.calculationLabel {

5
webapp/src/components/calculations/calculation.test.tsx
View file

@ -34,6 +34,7 @@ describe('components/calculations/Calculation', () => {
onMenuOpen={() => {}}
onChange={() => {}}
cards={[card, card2]}
hovered={true}
property={{
id: 'property_2',
name: '',
@ -58,6 +59,7 @@ describe('components/calculations/Calculation', () => {
onMenuOpen={() => {}}
onChange={() => {}}
cards={[card, card2]}
hovered={true}
property={{
id: 'property_2',
name: '',
@ -82,6 +84,7 @@ describe('components/calculations/Calculation', () => {
onMenuOpen={() => {}}
onChange={() => {}}
cards={[card, card2]}
hovered={true}
property={{
id: 'property_3',
name: '',
@ -106,6 +109,7 @@ describe('components/calculations/Calculation', () => {
onMenuOpen={() => {}}
onChange={() => {}}
cards={[card, card2]}
hovered={true}
property={{
id: 'property_4',
name: '',
@ -134,6 +138,7 @@ describe('components/calculations/Calculation', () => {
onMenuOpen={onMenuOpen}
onChange={onChange}
cards={[card, card2]}
hovered={true}
property={{
id: 'property_2',
name: '',

3
webapp/src/components/calculations/calculation.tsx
View file

@ -23,6 +23,7 @@ type Props = {
onChange: (value: string) => void
cards: readonly Card[]
property: IPropertyTemplate
hovered: boolean
}
const Calculation = (props: Props): JSX.Element => {
@ -35,7 +36,7 @@ const Calculation = (props: Props): JSX.Element => {
// See this for more details-
// https://stackoverflow.com/questions/47308081/onblur-event-is-not-firing
<div
className={`Calculation ${value} ${props.class}`}
className={`Calculation ${value} ${props.class} ${props.menuOpen ? 'menuOpen' : ''} ${props.hovered ? 'hovered' : ''}`}
style={props.style}
onClick={() => (props.menuOpen ? props.onMenuClose() : props.onMenuOpen())}
tabIndex={0}

246
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View file

@ -333,7 +333,23 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
2
</span>
</div>
<div
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -347,7 +363,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -361,21 +377,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
/>
</div>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -727,7 +729,23 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
2
</span>
</div>
<div
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -741,7 +759,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -755,21 +773,7 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
/>
</div>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -1121,7 +1125,23 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
2
</span>
</div>
<div
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -1135,7 +1155,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -1149,21 +1169,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
/>
</div>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -1515,7 +1521,23 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
2
</span>
</div>
<div
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -1529,7 +1551,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -1543,21 +1565,7 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
/>
</div>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -1781,7 +1789,23 @@ exports[`components/table/Table should match snapshot 1`] = `
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
1
</span>
</div>
<div
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -1795,21 +1819,7 @@ exports[`components/table/Table should match snapshot 1`] = `
/>
</div>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -2005,7 +2015,23 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
1
</span>
</div>
<div
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -2019,21 +2045,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
/>
</div>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -2230,7 +2242,23 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
1
</span>
</div>
<div
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -2244,21 +2272,7 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
/>
</div>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>

72
webapp/src/components/table/calculation/__snapshots__/calculationRow.test.tsx.snap
View file

@ -6,21 +6,7 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation count octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -36,7 +22,23 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
</span>
</div>
<div
class="Calculation countValue octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
2
</span>
</div>
<div
class="Calculation countValue octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -52,7 +54,7 @@ exports[`components/table/calculation/CalculationRow should match snapshot 1`] =
</span>
</div>
<div
class="Calculation countUniqueValue octo-table-cell"
class="Calculation countUniqueValue octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -77,7 +79,23 @@ exports[`components/table/calculation/CalculationRow should render three calcula
class="CalculationRow octo-table-row"
>
<div
class="Calculation none octo-table-cell"
class="Calculation count octo-table-cell "
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Count
</span>
<span
class="calculationValue"
>
2
</span>
</div>
<div
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -91,7 +109,7 @@ exports[`components/table/calculation/CalculationRow should render three calcula
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>
@ -105,21 +123,7 @@ exports[`components/table/calculation/CalculationRow should render three calcula
/>
</div>
<div
class="Calculation none octo-table-cell"
style="width: 100px;"
tabindex="0"
>
<span
class="calculationLabel"
>
Calculate
</span>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
/>
</div>
<div
class="Calculation none octo-table-cell"
class="Calculation none octo-table-cell "
style="width: 100px;"
tabindex="0"
>

15
webapp/src/components/table/calculation/calculationRow.tsx
View file

@ -12,6 +12,7 @@ import Calculation from '../../calculations/calculation'
import {columnWidth} from '../tableRow'
import {BoardView} from '../../../blocks/boardView'
import {Card} from '../../../blocks/card'
import {Options} from '../../calculations/options'
type Props = {
board: Board
@ -40,12 +41,20 @@ const CalculationRow = (props: Props): JSX.Element => {
const selectedCalculations = props.board.fields.columnCalculations || []
const [hovered, setHovered] = useState(false)
const toggleHover = () => setHovered(!hovered)
return (
<div className='CalculationRow octo-table-row'>
<div
className={'CalculationRow octo-table-row'}
onMouseEnter={toggleHover}
onMouseLeave={toggleHover}
>
{
templates.map((template) => {
const style = {width: columnWidth(props.resizingColumn, props.activeView.fields.columnWidths, props.offset, template.id)}
const value = selectedCalculations[template.id] || 'none'
const defaultValue = template.id === Constants.titleColumnId ? Options.count.value : Options.none.value
const value = selectedCalculations[template.id] || defaultValue
return (
<Calculation
@ -62,9 +71,11 @@ const CalculationRow = (props: Props): JSX.Element => {
const newBoard = createBoard(props.board)
newBoard.fields.columnCalculations = calculations
mutator.updateBlock(newBoard, props.board, 'update_calculation')
toggleHover()
}}
cards={props.cards}
property={template}
hovered={hovered}
/>
)
})