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

Migrating some octo-button class divs into Button objects

Browse source
This commit is contained in:
Jesús Espino 2020-11-01 16:35:49 +01:00
parent 1b19819141
commit e2b45da9d0
6 changed files with 34 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
webapp/src/components/commentsList.tsx
View file

@ -8,6 +8,8 @@ import {IBlock} from '../blocks/block'
import {Utils} from '../utils'
import mutator from '../mutator'
import Button from '../widgets/buttons/button'
import Comment from './comment'
import './commentsList.scss'
@ -84,8 +86,8 @@ class CommentsList extends React.Component<Props, State> {
/>
{this.state.newComment &&
<div
className='octo-button filled'
<Button
filled={true}
onClick={() => {
if (this.state.newComment) {
Utils.log(`Send comment: ${this.state.newComment}`)
@ -98,7 +100,7 @@ class CommentsList extends React.Component<Props, State> {
id='CommentsList.send'
defaultMessage='Send'
/>
</div>
</Button>
}
</div>
</div>

7
webapp/src/components/viewHeader.scss
View file

@ -17,4 +17,11 @@
#groupByLabel {
margin-left: 0.3em;
}
.IconButton {
background: none;
&:hover {
background: rgba(var(--main-fg), 0.1);
}
}
}

33
webapp/src/components/viewHeader.tsx
View file

@ -22,6 +22,8 @@ import OptionsIcon from '../widgets/icons/options'
import SortUpIcon from '../widgets/icons/sortUp'
import SortDownIcon from '../widgets/icons/sortDown'
import ButtonWithMenu from '../widgets/buttons/buttonWithMenu'
import IconButton from '../widgets/buttons/iconButton'
import Button from '../widgets/buttons/button'
import {Editable} from './editable'
import FilterComponent from './filterComponent'
@ -136,12 +138,7 @@ class ViewHeader extends React.Component<Props, State> {
}}
/>
<MenuWrapper>
<div
className='octo-button'
style={{color: 'rgb(var(--main-fg))', fontWeight: 600}}
>
<DropdownIcon/>
</div>
<IconButton icon={<DropdownIcon/>}/>
<ViewMenu
board={board}
boardTree={boardTree}
@ -150,12 +147,12 @@ class ViewHeader extends React.Component<Props, State> {
</MenuWrapper>
<div className='octo-spacer'/>
<MenuWrapper>
<div className={'octo-button'}>
<Button>
<FormattedMessage
id='ViewHeader.properties'
defaultMessage='Properties'
/>
</div>
</Button>
<Menu>
{boardTree.board.cardProperties.map((option: IPropertyTemplate) => (
<Menu.Switch
@ -182,10 +179,7 @@ class ViewHeader extends React.Component<Props, State> {
</MenuWrapper>
{withGroupBy &&
<MenuWrapper>
<div
className='octo-button'
id='groupByButton'
>
<Button>
<FormattedMessage
id='ViewHeader.group-by'
defaultMessage='Group by {property}'
@ -200,7 +194,7 @@ class ViewHeader extends React.Component<Props, State> {
),
}}
/>
</div>
</Button>
<Menu>
{boardTree.board.cardProperties.filter((o: IPropertyTemplate) => o.type === 'select').map((option: IPropertyTemplate) => (
<Menu.Text
@ -307,21 +301,14 @@ class ViewHeader extends React.Component<Props, State> {
}}
/>}
{!this.state.isSearching &&
<div
className='octo-button'
onClick={() => {
this.setState({isSearching: true})
}}
>
<Button onClick={() => this.setState({isSearching: true})}>
<FormattedMessage
id='ViewHeader.search'
defaultMessage='Search'
/>
</div>}
</Button>}
<MenuWrapper>
<div className='octo-button'>
<OptionsIcon/>
</div>
<IconButton icon={<OptionsIcon/>}/>
<Menu>
<Menu.Text
id='exportCsv'

9
webapp/src/styles/main.scss
View file

@ -137,15 +137,6 @@ hr {
}
}
.filled {
color: #ffffff;
background-color: rgb(var(--button-bg));
padding: 2px 10px;
&:hover {
background-color: rgb(var(--button-bg), 0.8);
}
}
/* Icons */

10
webapp/src/widgets/buttons/button.scss
View file

@ -15,6 +15,16 @@
background-color: rgba(var(--main-fg), 0.1);
}
&.filled {
color: #ffffff;
background-color: rgb(var(--button-bg));
padding: 2px 10px;
&:hover {
background-color: rgb(var(--button-bg), 0.8);
}
}
.Icon {
width: 14px;
height: 14px;

3
webapp/src/widgets/buttons/button.tsx
View file

@ -9,6 +9,7 @@ type Props = {
children?: React.ReactNode
title?: string
icon?: React.ReactNode
filled?: boolean
}
export default class Button extends React.Component<Props> {
@ -16,7 +17,7 @@ export default class Button extends React.Component<Props> {
return (
<div
onClick={this.props.onClick}
className='Button'
className={`Button ${this.props.filled ? 'filled' : ''}`}
title={this.props.title}
>
{this.props.icon}