self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00
Code Issues Releases Activity

Adding emoji icon

Browse Source
This commit is contained in:
Jesús Espino 2020-10-31 15:41:03 +01:00
parent 57ac32b33a
commit e620ab89ad
5 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/src/components/viewTitle.scss
View File

@ -5,7 +5,7 @@
}
&.add-visible:hover {
.Button {
display: block;
display: flex;
}
}
}

6
webapp/src/components/viewTitle.tsx
View File

@ -11,6 +11,8 @@ import MenuWrapper from '../widgets/menuWrapper'
import Editable from '../widgets/editable'
import EmojiPicker from '../widgets/emojiPicker'
import Button from '../widgets/buttons/button'
import EmojiIcon from '../widgets/icons/emoji'
import DeleteIcon from '../widgets/icons/delete'
import './viewTitle.scss'
@ -53,6 +55,7 @@ class ViewTitle extends React.Component<Props, State> {
mutator.changeIcon(board, newIcon)
}}
>
<EmojiIcon/>
<FormattedMessage
id='TableComponent.add-icon'
defaultMessage='Add Icon'
@ -67,17 +70,20 @@ class ViewTitle extends React.Component<Props, State> {
<Menu>
<Menu.Text
id='random'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
/>
<Menu.SubMenu
id='pick'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick Icon'})}
>
<EmojiPicker onSelect={this.onSelectEmoji}/>
</Menu.SubMenu>
<Menu.Text
id='remove'
icon={<DeleteIcon/>}
name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove Icon'})}
onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
/>

8
webapp/src/widgets/buttons/button.scss
View File

@ -1,4 +1,6 @@
.Button {
display: flex;
align-items: center;
text-align: center;
border-radius: 5px;
padding: 0 5px;
@ -14,4 +16,10 @@
.octo-hovercontrol {
background: rgb(239, 239, 238);
}
.Icon {
width: 14px;
height: 14px;
margin-right: 5px;
}
}

6
webapp/src/widgets/icons/emoji.scss Normal file
View File

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

20
webapp/src/widgets/icons/emoji.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 './emoji.scss'
export default function EmojiIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='EmojiIcon Icon'
viewBox='0 0 496 512'
>
<path
d='M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z'
/>
</svg>
)
}