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

Use different icons for random and Pick Icon (Closes: #3899) (#3924)

Browse Source
This commit is contained in:
Vivek K J 2022-10-11 20:49:25 +05:30 committed by GitHub
parent 3335ccd364
commit 100b457911
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
webapp/package-lock.json generated
View File

@ -15,7 +15,7 @@
"@fullcalendar/daygrid": "^5.10.1",
"@fullcalendar/interaction": "^5.10.1",
"@fullcalendar/react": "^5.10.1",
"@mattermost/compass-icons": "^0.1.22",
"@mattermost/compass-icons": "^0.1.28",
"@reduxjs/toolkit": "^1.8.0",
"@tippyjs/react": "4.2.6",
"color": "^4.2.1",
@ -1713,9 +1713,9 @@
}
},
"node_modules/@mattermost/compass-icons": {
"version": "0.1.24",
"resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.24.tgz",
"integrity": "sha512-UhLFbRPrgHvt2+lUwUq17Ecs6ag+NUtIH0T/zX6agYngvt+tUJZJ3Y2hTu+Dj4/3zeCTKCHkIhacWv6qGleU/A==",
"version": "0.1.28",
"resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.28.tgz",
"integrity": "sha512-pcb//GGAZWZjC+oaLRPBpB+6FS6ixMDsmbLimMcJ6D7SqxtyhPDx6+JRi3umAtrHR/Ab5GBAz8+BzQDwYVuC7g==",
"dependencies": {
"esm": "3.2.25",
"fontello-batch-cli": "4.0.0",
@ -17316,9 +17316,9 @@
}
},
"@mattermost/compass-icons": {
"version": "0.1.24",
"resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.24.tgz",
"integrity": "sha512-UhLFbRPrgHvt2+lUwUq17Ecs6ag+NUtIH0T/zX6agYngvt+tUJZJ3Y2hTu+Dj4/3zeCTKCHkIhacWv6qGleU/A==",
"version": "0.1.28",
"resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.28.tgz",
"integrity": "sha512-pcb//GGAZWZjC+oaLRPBpB+6FS6ixMDsmbLimMcJ6D7SqxtyhPDx6+JRi3umAtrHR/Ab5GBAz8+BzQDwYVuC7g==",
"requires": {
"esm": "3.2.25",
"fontello-batch-cli": "4.0.0",

2
webapp/package.json
View File

@ -31,7 +31,7 @@
"@fullcalendar/daygrid": "^5.10.1",
"@fullcalendar/interaction": "^5.10.1",
"@fullcalendar/react": "^5.10.1",
"@mattermost/compass-icons": "^0.1.22",
"@mattermost/compass-icons": "^0.1.28",
"@reduxjs/toolkit": "^1.8.0",
"@tippyjs/react": "4.2.6",
"color": "^4.2.1",

12
webapp/src/components/__snapshots__/blockIconSelector.test.tsx.snap
View File

@ -60,15 +60,9 @@ exports[`components/blockIconSelector return menu on click 1`] = `
<div
class="menu-option__icon"
>
<svg
class="EmojiIcon Icon"
viewBox="0 0 496 512"
xmlns="http://www.w3.org/2000/svg"
>
<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>
<i
class="CompassIcon icon-shuffle-variant"
/>
</div>
</div>
<div

49
webapp/src/components/iconSelector.tsx
View File

@ -3,6 +3,7 @@
import React from 'react'
import {useIntl} from 'react-intl'
import RandomIcon from '../widgets/icons/random'
import EmojiPicker from '../widgets/emojiPicker'
import DeleteIcon from '../widgets/icons/delete'
import EmojiIcon from '../widgets/icons/emoji'
@ -25,30 +26,30 @@ const IconSelector = React.memo((props: Props) => {
<div className='IconSelector'>
{props.readonly && props.iconElement}
{!props.readonly &&
<MenuWrapper>
{props.iconElement}
<Menu>
<Menu.Text
id='random'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
onClick={props.onAddRandomIcon}
/>
<Menu.SubMenu
id='pick'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick icon'})}
>
<EmojiPicker onSelect={props.onSelectEmoji}/>
</Menu.SubMenu>
<Menu.Text
id='remove'
icon={<DeleteIcon/>}
name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove icon'})}
onClick={props.onRemoveIcon}
/>
</Menu>
</MenuWrapper>
<MenuWrapper>
{props.iconElement}
<Menu>
<Menu.Text
id='random'
icon={<RandomIcon/>}
name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
onClick={props.onAddRandomIcon}
/>
<Menu.SubMenu
id='pick'
icon={<EmojiIcon/>}
name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick icon'})}
>
<EmojiPicker onSelect={props.onSelectEmoji}/>
</Menu.SubMenu>
<Menu.Text
id='remove'
icon={<DeleteIcon/>}
name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove icon'})}
onClick={props.onRemoveIcon}
/>
</Menu>
</MenuWrapper>
}
</div>
)

14
webapp/src/widgets/icons/random.tsx Normal file
View File

@ -0,0 +1,14 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import CompassIcon from './compassIcon'
export default function RandomIcon(): JSX.Element {
return (
<CompassIcon
icon='shuffle-variant'
/>
)
}