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

Adding a bunch of icons

Browse source
This commit is contained in:
Jesús Espino 2020-10-30 18:31:40 +01:00
parent e3e5d1d610
commit 1479eeccfa
15 changed files with 146 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
webapp/src/components/boardComponent.tsx
View file

@ -16,6 +16,9 @@ import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import OptionsIcon from '../widgets/icons/options'
import AddIcon from '../widgets/icons/add'
import HideIcon from '../widgets/icons/hide'
import ShowIcon from '../widgets/icons/show'
import DeleteIcon from '../widgets/icons/delete'
import Button from '../widgets/buttons/button'
import BoardCard from './boardCard'
@ -309,6 +312,7 @@ class BoardComponent extends React.Component<Props, State> {
<Menu>
<Menu.Text
id='hide'
icon={<HideIcon/>}
name={intl.formatMessage({id: 'BoardComponent.hide', defaultMessage: 'Hide'})}
onClick={() => mutator.hideViewColumn(activeView, '')}
/>
@ -372,11 +376,13 @@ class BoardComponent extends React.Component<Props, State> {
<Menu>
<Menu.Text
id='hide'
icon={<HideIcon/>}
name={intl.formatMessage({id: 'BoardComponent.hide', defaultMessage: 'Hide'})}
onClick={() => mutator.hideViewColumn(activeView, group.option.id)}
/>
<Menu.Text
id='delete'
icon={<DeleteIcon/>}
name={intl.formatMessage({id: 'BoardComponent.delete', defaultMessage: 'Delete'})}
onClick={() => mutator.deletePropertyOption(boardTree, boardTree.groupByProperty, group.option)}
/>
@ -450,6 +456,7 @@ class BoardComponent extends React.Component<Props, State> {
<Menu>
<Menu.Text
id='show'
icon={<ShowIcon/>}
name={intl.formatMessage({id: 'BoardComponent.show', defaultMessage: 'Show'})}
onClick={() => mutator.unhideViewColumn(activeView, group.option.id)}
/>

2
webapp/src/components/cardDialog.tsx
View file

@ -6,6 +6,7 @@ import {Card} from '../blocks/card'
import {BoardTree} from '../viewModel/boardTree'
import mutator from '../mutator'
import Menu from '../widgets/menu'
import DeleteIcon from '../widgets/icons/delete'
import CardDetail from './cardDetail'
import Dialog from './dialog'
@ -22,6 +23,7 @@ class CardDialog extends React.Component<Props> {
<Menu position='left'>
<Menu.Text
id='delete'
icon={<DeleteIcon/>}
name='Delete'
onClick={async () => {
await mutator.deleteBlock(this.props.card, 'delete card')

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

@ -8,6 +8,7 @@ import {IBlock} from '../blocks/block'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import DeleteIcon from '../widgets/icons/delete'
import './comment.scss'
import {Utils} from '../utils'
@ -36,8 +37,9 @@ const Comment: FC<Props> = (props: Props) => {
<div className='comment-date'>{(new Date(comment.createAt)).toLocaleTimeString()}</div>
<MenuWrapper>
<div className='octo-hoverbutton square'>{'...'}</div>
<Menu>
<Menu position='left'>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name={intl.formatMessage({id: 'Comment.delete', defaultMessage: 'Delete'})}
onClick={() => mutator.deleteBlock(comment)}

10
webapp/src/components/contentBlock.scss Normal file
View file

@ -0,0 +1,10 @@
.ContentBlock {
.MenuWrapper {
display: none;
}
&:hover {
.MenuWrapper {
display: flex;
}
}
}

20
webapp/src/components/contentBlock.tsx
View file

@ -13,9 +13,17 @@ import {MutableTextBlock} from '../blocks/textBlock'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import OptionsIcon from '../widgets/icons/options'
import SortUpIcon from '../widgets/icons/sortUp'
import SortDownIcon from '../widgets/icons/sortDown'
import DeleteIcon from '../widgets/icons/delete'
import AddIcon from '../widgets/icons/add'
import TextIcon from '../widgets/icons/text'
import ImageIcon from '../widgets/icons/image'
import {MarkdownEditor} from './markdownEditor'
import './contentBlock.scss'
type Props = {
block: IOrderedBlock
cardId: string
@ -23,7 +31,7 @@ type Props = {
}
class ContentBlock extends React.Component<Props> {
shouldComponentUpdate() {
shouldComponentUpdate(): boolean {
return true
}
@ -34,15 +42,16 @@ class ContentBlock extends React.Component<Props> {
}
const index = cardTree.contents.indexOf(block)
return (
<div className='octo-block octo-hover-container'>
<div className='ContentBlock octo-block'>
<div className='octo-block-margin'>
<MenuWrapper>
<div className='octo-button octo-hovercontrol square octo-hover-item'><OptionsIcon/></div>
<div className='octo-button octo-hovercontrol square '><OptionsIcon/></div>
<Menu>
{index > 0 &&
<Menu.Text
id='moveUp'
name='Move up'
icon={<SortUpIcon/>}
onClick={() => {
const previousBlock = cardTree.contents[index - 1]
const newOrder = OctoUtils.getOrderBefore(previousBlock, cardTree.contents)
@ -54,6 +63,7 @@ class ContentBlock extends React.Component<Props> {
<Menu.Text
id='moveDown'
name='Move down'
icon={<SortDownIcon/>}
onClick={() => {
const nextBlock = cardTree.contents[index + 1]
const newOrder = OctoUtils.getOrderAfter(nextBlock, cardTree.contents)
@ -64,10 +74,12 @@ class ContentBlock extends React.Component<Props> {
<Menu.SubMenu
id='insertAbove'
name='Insert above'
icon={<AddIcon/>}
>
<Menu.Text
id='text'
name='Text'
icon={<TextIcon/>}
onClick={() => {
const newBlock = new MutableTextBlock()
newBlock.parentId = cardId
@ -81,6 +93,7 @@ class ContentBlock extends React.Component<Props> {
<Menu.Text
id='image'
name='Image'
icon={<ImageIcon/>}
onClick={() => {
Utils.selectLocalFile(
(file) => {
@ -91,6 +104,7 @@ class ContentBlock extends React.Component<Props> {
/>
</Menu.SubMenu>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'
name='Delete'
onClick={() => mutator.deleteBlock(block)}

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

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

20
webapp/src/widgets/icons/hide.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 './hide.scss'
export default function HideIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='HideIcon Icon'
viewBox='0 0 640 512'
>
<path
d='M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z'
/>
</svg>
)
}

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

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

20
webapp/src/widgets/icons/image.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 './image.scss'
export default function ImageIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='ImageIcon Icon'
viewBox='0 0 512 512'
>
<path
d='M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z'
/>
</svg>
)
}

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

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

20
webapp/src/widgets/icons/show.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 './show.scss'
export default function ShowIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='ShowIcon Icon'
viewBox='0 0 576 512'
>
<path
d='M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z'
/>
</svg>
)
}

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

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

20
webapp/src/widgets/icons/text.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 './text.scss'
export default function TextIcon(): JSX.Element {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
className='TextIcon Icon'
viewBox='0 0 448 512'
>
<path
d='M432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z'
/>
</svg>
)
}

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

@ -50,7 +50,7 @@
.Icon {
width: 16px;
height: 16px;
margin-right: 3px;
margin-right: 5px;
}
}
}

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

@ -10,6 +10,7 @@ import './subMenuOption.scss'
type SubMenuOptionProps = MenuOptionProps & {
position?: 'bottom' | 'top'
icon?: React.ReactNode
}
type SubMenuState = {
@ -36,6 +37,7 @@ export default class SubMenuOption extends React.PureComponent<SubMenuOptionProp
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.close}
>
{this.props.icon}
<div className='menu-name'>{this.props.name}</div>
<SubmenuTriangleIcon/>
{this.state.isOpen &&