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

Adding delete/duplicate icons to the boardCard menu

Browse source
This commit is contained in:
Jesús Espino 2020-10-30 16:49:19 +01:00
parent 4543f32435
commit e3e5d1d610
7 changed files with 62 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webapp/src/components/boardCard.tsx
View file

@ -11,6 +11,8 @@ import mutator from '../mutator'
import MenuWrapper from '../widgets/menuWrapper'
import Menu from '../widgets/menu'
import OptionsIcon from '../widgets/icons/options'
import DeleteIcon from '../widgets/icons/delete'
import DuplicateIcon from '../widgets/icons/duplicate'
import PropertyValueElement from './propertyValueElement'
@ -89,11 +91,13 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
<div className='octo-hoverbutton square'><OptionsIcon/></div>
<Menu>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'BoardCard.delete', defaultMessage: 'Delete'})}
onClick={() => mutator.deleteBlock(card, 'delete card')}
/>
<Menu.Text
icon={<DuplicateIcon/>}
id='duplicate'
name={intl.formatMessage({id: 'BoardCard.duplicate', defaultMessage: 'Duplicate'})}
onClick={() => mutator.insertBlock(MutableBlock.duplicate(card), 'duplicate card')}

6
webapp/src/widgets/icons/delete.scss Normal file
View file

@ -0,0 +1,6 @@
.DeleteIcon {
fill: rgba(var(--main-fg), 0.7);
stroke: none;
width: 24px;
height: 24px;
}

20
webapp/src/widgets/icons/delete.tsx Normal file
View file

@ -0,0 +1,20 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import './delete.scss'
export default function DeleteIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='DeleteIcon Icon'
viewBox='0 0 448 512'
>
<path
d='M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z'
/>
</svg>
)
}

6
webapp/src/widgets/icons/duplicate.scss Normal file
View file

@ -0,0 +1,6 @@
.DuplicateIcon {
fill: rgba(var(--main-fg), 0.7);
stroke: none;
width: 24px;
height: 24px;
}

20
webapp/src/widgets/icons/duplicate.tsx Normal file
View file

@ -0,0 +1,20 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import './duplicate.scss'
export default function DuplicateIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='DuplicateIcon Icon'
viewBox='0 0 512 512'
>
<path
d='M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z'
/>
</svg>
)
}

5
webapp/src/widgets/menu/menu.scss
View file

@ -47,5 +47,10 @@
.SubmenuTriangleIcon {
fill: rgba(var(--main-fg), 0.7);
}
.Icon {
width: 16px;
height: 16px;
margin-right: 3px;
}
}
}

2
webapp/src/widgets/menu/textOption.tsx
View file

@ -20,8 +20,8 @@ export default class TextOption extends React.PureComponent<TextOptionProps> {
className='MenuOption TextOption menu-option'
onClick={this.handleOnClick}
>
<div className='menu-name'>{name}</div>
{icon}
<div className='menu-name'>{name}</div>
</div>
)
}