From 1479eeccfa2f213e3ff55a514f34f9cc44aa0e80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Fri, 30 Oct 2020 18:31:40 +0100 Subject: [PATCH] Adding a bunch of icons --- webapp/src/components/boardComponent.tsx | 7 +++++++ webapp/src/components/cardDialog.tsx | 2 ++ webapp/src/components/comment.tsx | 4 +++- webapp/src/components/contentBlock.scss | 10 ++++++++++ webapp/src/components/contentBlock.tsx | 20 +++++++++++++++++--- webapp/src/widgets/icons/hide.scss | 6 ++++++ webapp/src/widgets/icons/hide.tsx | 20 ++++++++++++++++++++ webapp/src/widgets/icons/image.scss | 6 ++++++ webapp/src/widgets/icons/image.tsx | 20 ++++++++++++++++++++ webapp/src/widgets/icons/show.scss | 6 ++++++ webapp/src/widgets/icons/show.tsx | 20 ++++++++++++++++++++ webapp/src/widgets/icons/text.scss | 6 ++++++ webapp/src/widgets/icons/text.tsx | 20 ++++++++++++++++++++ webapp/src/widgets/menu/menu.scss | 2 +- webapp/src/widgets/menu/subMenuOption.tsx | 2 ++ 15 files changed, 146 insertions(+), 5 deletions(-) create mode 100644 webapp/src/components/contentBlock.scss create mode 100644 webapp/src/widgets/icons/hide.scss create mode 100644 webapp/src/widgets/icons/hide.tsx create mode 100644 webapp/src/widgets/icons/image.scss create mode 100644 webapp/src/widgets/icons/image.tsx create mode 100644 webapp/src/widgets/icons/show.scss create mode 100644 webapp/src/widgets/icons/show.tsx create mode 100644 webapp/src/widgets/icons/text.scss create mode 100644 webapp/src/widgets/icons/text.tsx diff --git a/webapp/src/components/boardComponent.tsx b/webapp/src/components/boardComponent.tsx index 484620a62..fb029b317 100644 --- a/webapp/src/components/boardComponent.tsx +++ b/webapp/src/components/boardComponent.tsx @@ -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 { } name={intl.formatMessage({id: 'BoardComponent.hide', defaultMessage: 'Hide'})} onClick={() => mutator.hideViewColumn(activeView, '')} /> @@ -372,11 +376,13 @@ class BoardComponent extends React.Component { } name={intl.formatMessage({id: 'BoardComponent.hide', defaultMessage: 'Hide'})} onClick={() => mutator.hideViewColumn(activeView, group.option.id)} /> } 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 { } name={intl.formatMessage({id: 'BoardComponent.show', defaultMessage: 'Show'})} onClick={() => mutator.unhideViewColumn(activeView, group.option.id)} /> diff --git a/webapp/src/components/cardDialog.tsx b/webapp/src/components/cardDialog.tsx index 3d8de40ed..8a5bec0c0 100644 --- a/webapp/src/components/cardDialog.tsx +++ b/webapp/src/components/cardDialog.tsx @@ -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 { } name='Delete' onClick={async () => { await mutator.deleteBlock(this.props.card, 'delete card') diff --git a/webapp/src/components/comment.tsx b/webapp/src/components/comment.tsx index 84e85df7d..8408532ef 100644 --- a/webapp/src/components/comment.tsx +++ b/webapp/src/components/comment.tsx @@ -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) => {
{(new Date(comment.createAt)).toLocaleTimeString()}
{'...'}
- + } id='delete' name={intl.formatMessage({id: 'Comment.delete', defaultMessage: 'Delete'})} onClick={() => mutator.deleteBlock(comment)} diff --git a/webapp/src/components/contentBlock.scss b/webapp/src/components/contentBlock.scss new file mode 100644 index 000000000..9557773f9 --- /dev/null +++ b/webapp/src/components/contentBlock.scss @@ -0,0 +1,10 @@ +.ContentBlock { + .MenuWrapper { + display: none; + } + &:hover { + .MenuWrapper { + display: flex; + } + } +} diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx index ffa2e74e0..f5936d719 100644 --- a/webapp/src/components/contentBlock.tsx +++ b/webapp/src/components/contentBlock.tsx @@ -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 { - shouldComponentUpdate() { + shouldComponentUpdate(): boolean { return true } @@ -34,15 +42,16 @@ class ContentBlock extends React.Component { } const index = cardTree.contents.indexOf(block) return ( -
+
-
+
{index > 0 && } onClick={() => { const previousBlock = cardTree.contents[index - 1] const newOrder = OctoUtils.getOrderBefore(previousBlock, cardTree.contents) @@ -54,6 +63,7 @@ class ContentBlock extends React.Component { } onClick={() => { const nextBlock = cardTree.contents[index + 1] const newOrder = OctoUtils.getOrderAfter(nextBlock, cardTree.contents) @@ -64,10 +74,12 @@ class ContentBlock extends React.Component { } > } onClick={() => { const newBlock = new MutableTextBlock() newBlock.parentId = cardId @@ -81,6 +93,7 @@ class ContentBlock extends React.Component { } onClick={() => { Utils.selectLocalFile( (file) => { @@ -91,6 +104,7 @@ class ContentBlock extends React.Component { /> } id='delete' name='Delete' onClick={() => mutator.deleteBlock(block)} diff --git a/webapp/src/widgets/icons/hide.scss b/webapp/src/widgets/icons/hide.scss new file mode 100644 index 000000000..ef7b09e30 --- /dev/null +++ b/webapp/src/widgets/icons/hide.scss @@ -0,0 +1,6 @@ +.HideIcon { + fill: rgba(var(--main-fg), 0.7); + stroke: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/hide.tsx b/webapp/src/widgets/icons/hide.tsx new file mode 100644 index 000000000..41801df8f --- /dev/null +++ b/webapp/src/widgets/icons/hide.tsx @@ -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 ( + + + + ) +} diff --git a/webapp/src/widgets/icons/image.scss b/webapp/src/widgets/icons/image.scss new file mode 100644 index 000000000..b3ef5b0f8 --- /dev/null +++ b/webapp/src/widgets/icons/image.scss @@ -0,0 +1,6 @@ +.ImageIcon { + fill: rgba(var(--main-fg), 0.7); + stroke: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/image.tsx b/webapp/src/widgets/icons/image.tsx new file mode 100644 index 000000000..fcd4ef843 --- /dev/null +++ b/webapp/src/widgets/icons/image.tsx @@ -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 ( + + + + ) +} diff --git a/webapp/src/widgets/icons/show.scss b/webapp/src/widgets/icons/show.scss new file mode 100644 index 000000000..885a157b0 --- /dev/null +++ b/webapp/src/widgets/icons/show.scss @@ -0,0 +1,6 @@ +.ShowIcon { + fill: rgba(var(--main-fg), 0.7); + stroke: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/show.tsx b/webapp/src/widgets/icons/show.tsx new file mode 100644 index 000000000..02a7eb960 --- /dev/null +++ b/webapp/src/widgets/icons/show.tsx @@ -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 ( + + + + ) +} diff --git a/webapp/src/widgets/icons/text.scss b/webapp/src/widgets/icons/text.scss new file mode 100644 index 000000000..f8118c38d --- /dev/null +++ b/webapp/src/widgets/icons/text.scss @@ -0,0 +1,6 @@ +.TextIcon { + fill: rgba(var(--main-fg), 0.7); + stroke: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/text.tsx b/webapp/src/widgets/icons/text.tsx new file mode 100644 index 000000000..5e425da79 --- /dev/null +++ b/webapp/src/widgets/icons/text.tsx @@ -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 ( + + + + ) +} diff --git a/webapp/src/widgets/menu/menu.scss b/webapp/src/widgets/menu/menu.scss index 303deaad5..2181b768c 100644 --- a/webapp/src/widgets/menu/menu.scss +++ b/webapp/src/widgets/menu/menu.scss @@ -50,7 +50,7 @@ .Icon { width: 16px; height: 16px; - margin-right: 3px; + margin-right: 5px; } } } diff --git a/webapp/src/widgets/menu/subMenuOption.tsx b/webapp/src/widgets/menu/subMenuOption.tsx index e1b6f912f..84aff128a 100644 --- a/webapp/src/widgets/menu/subMenuOption.tsx +++ b/webapp/src/widgets/menu/subMenuOption.tsx @@ -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 + {this.props.icon}
{this.props.name}
{this.state.isOpen &&