From a783d318aac0d0961505949da3a76ffbe8842533 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Tue, 27 Oct 2020 12:53:14 +0100 Subject: [PATCH] Moving icons into components and make them aware of the theme --- webapp/src/components/boardCard.tsx | 3 +- webapp/src/components/boardComponent.tsx | 10 ++- webapp/src/components/contentBlock.tsx | 3 +- webapp/src/components/sidebar.scss | 16 ++++ webapp/src/components/sidebar.tsx | 23 +++--- webapp/src/components/viewHeader.tsx | 10 ++- webapp/src/styles/images.scss | 73 ------------------- webapp/src/styles/main.scss | 2 + webapp/src/widgets/icons/add.scss | 7 ++ webapp/src/widgets/icons/add.tsx | 19 +++++ webapp/src/widgets/icons/check.scss | 7 ++ webapp/src/widgets/icons/check.tsx | 18 +++++ webapp/src/widgets/icons/dropdown.scss | 7 ++ webapp/src/widgets/icons/dropdown.tsx | 20 +++++ webapp/src/widgets/icons/hamburger.scss | 7 ++ webapp/src/widgets/icons/hamburger.tsx | 20 +++++ webapp/src/widgets/icons/hideSidebar.scss | 7 ++ webapp/src/widgets/icons/hideSidebar.tsx | 19 +++++ webapp/src/widgets/icons/options.scss | 5 ++ webapp/src/widgets/icons/options.tsx | 32 ++++++++ webapp/src/widgets/icons/showSidebar.scss | 7 ++ webapp/src/widgets/icons/showSidebar.tsx | 19 +++++ webapp/src/widgets/icons/sortDown.scss | 7 ++ webapp/src/widgets/icons/sortDown.tsx | 19 +++++ webapp/src/widgets/icons/sortUp.scss | 7 ++ webapp/src/widgets/icons/sortUp.tsx | 19 +++++ webapp/src/widgets/icons/submenuTriangle.scss | 6 ++ webapp/src/widgets/icons/submenuTriangle.tsx | 18 +++++ webapp/src/widgets/menu/colorOption.tsx | 4 +- webapp/src/widgets/menu/subMenuOption.scss | 5 ++ webapp/src/widgets/menu/subMenuOption.tsx | 8 +- webapp/src/widgets/menu/switchOption.tsx | 4 +- webapp/src/widgets/menu/textOption.tsx | 14 +--- 33 files changed, 329 insertions(+), 116 deletions(-) delete mode 100644 webapp/src/styles/images.scss create mode 100644 webapp/src/widgets/icons/add.scss create mode 100644 webapp/src/widgets/icons/add.tsx create mode 100644 webapp/src/widgets/icons/check.scss create mode 100644 webapp/src/widgets/icons/check.tsx create mode 100644 webapp/src/widgets/icons/dropdown.scss create mode 100644 webapp/src/widgets/icons/dropdown.tsx create mode 100644 webapp/src/widgets/icons/hamburger.scss create mode 100644 webapp/src/widgets/icons/hamburger.tsx create mode 100644 webapp/src/widgets/icons/hideSidebar.scss create mode 100644 webapp/src/widgets/icons/hideSidebar.tsx create mode 100644 webapp/src/widgets/icons/options.scss create mode 100644 webapp/src/widgets/icons/options.tsx create mode 100644 webapp/src/widgets/icons/showSidebar.scss create mode 100644 webapp/src/widgets/icons/showSidebar.tsx create mode 100644 webapp/src/widgets/icons/sortDown.scss create mode 100644 webapp/src/widgets/icons/sortDown.tsx create mode 100644 webapp/src/widgets/icons/sortUp.scss create mode 100644 webapp/src/widgets/icons/sortUp.tsx create mode 100644 webapp/src/widgets/icons/submenuTriangle.scss create mode 100644 webapp/src/widgets/icons/submenuTriangle.tsx create mode 100644 webapp/src/widgets/menu/subMenuOption.scss diff --git a/webapp/src/components/boardCard.tsx b/webapp/src/components/boardCard.tsx index 1c0f34616..06e38fc38 100644 --- a/webapp/src/components/boardCard.tsx +++ b/webapp/src/components/boardCard.tsx @@ -10,6 +10,7 @@ import {Card} from '../blocks/card' import mutator from '../mutator' import MenuWrapper from '../widgets/menuWrapper' import Menu from '../widgets/menu' +import OptionsIcon from '../widgets/icons/options' import PropertyValueElement from './propertyValueElement' @@ -60,7 +61,7 @@ class BoardCard extends React.Component { }} > -
+
{
- + { onClick={() => { this.addCard(undefined) }} - >
+ >
) } @@ -347,7 +349,7 @@ class BoardComponent extends React.Component {
- + { onClick={() => { this.addCard(group.option.id) }} - >
+ >
) } diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx index d534d37fd..026b4d2a6 100644 --- a/webapp/src/components/contentBlock.tsx +++ b/webapp/src/components/contentBlock.tsx @@ -12,6 +12,7 @@ import {MutableTextBlock} from '../blocks/textBlock' import Menu from '../widgets/menu' import MenuWrapper from '../widgets/menuWrapper' +import OptionsIcon from '../widgets/icons/options' import {MarkdownEditor} from './markdownEditor' @@ -36,7 +37,7 @@ class ContentBlock extends React.Component {
-
+
{index > 0 && { const {boards, views} = workspaceTree if (this.state.isHidden) { - const hamburgerRef = React.createRef() return (
this.showClicked()} > -
{ - hamburgerRef.current.className = 'imageShowSidebar' - }} - onMouseOut={() => { - hamburgerRef.current.className = 'imageHamburger' - }} - /> + +
@@ -78,7 +73,7 @@ class Sidebar extends React.Component {
this.hideClicked()} - >
+ >
{ boards.map((board) => { @@ -101,7 +96,7 @@ class Sidebar extends React.Component { {board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
-
+
{ className='octo-button' style={{color: 'rgb(var(--main-fg))', fontWeight: 600}} > -
+
{ key={option.id} id={option.id} name={option.name} - icon={(activeView.sortOptions[0]?.propertyId === option.id) ? activeView.sortOptions[0].reversed ? 'sortUp' : 'sortDown' : undefined} + icon={(activeView.sortOptions[0]?.propertyId === option.id) ? activeView.sortOptions[0].reversed ? : : undefined} onClick={(propertyId: string) => { let newSortOptions: ISortOption[] = [] if (activeView.sortOptions[0] && activeView.sortOptions[0].propertyId === propertyId) { @@ -289,7 +293,7 @@ class ViewHeader extends React.Component { />
} -
+ '); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -.imageAdd { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -.imageOptions { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -/*-- Menu images --*/ - -.imageSubmenuTriangle { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -.imageMenuCheck { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -.imageMenuSortUp { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -.imageMenuSortDown { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -.imageHideSidebar { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -/*-- Sidebar images --*/ - -.imageShowSidebar { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} - -.imageHamburger { - background-image: url('data:image/svg+xml,'); - background-size: 100% 100%; - min-width: 24px; - min-height: 24px; -} diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss index e045ed645..8c345ddb7 100644 --- a/webapp/src/styles/main.scss +++ b/webapp/src/styles/main.scss @@ -121,6 +121,8 @@ hr { .octo-clickable, .octo-button { + display: flex; + justify-content: center; text-align: center; border-radius: 5px; padding: 0 5px; diff --git a/webapp/src/widgets/icons/add.scss b/webapp/src/widgets/icons/add.scss new file mode 100644 index 000000000..18d8be3ff --- /dev/null +++ b/webapp/src/widgets/icons/add.scss @@ -0,0 +1,7 @@ +.AddIcon { + stroke: rgb(var(--main-fg), 0.5); + stroke-width: 4px; + fill: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/add.tsx b/webapp/src/widgets/icons/add.tsx new file mode 100644 index 000000000..0fd2b1314 --- /dev/null +++ b/webapp/src/widgets/icons/add.tsx @@ -0,0 +1,19 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import './add.scss' + +export default function AddIcon(): JSX.Element { + return ( + + + + + ) +} diff --git a/webapp/src/widgets/icons/check.scss b/webapp/src/widgets/icons/check.scss new file mode 100644 index 000000000..15f1724c1 --- /dev/null +++ b/webapp/src/widgets/icons/check.scss @@ -0,0 +1,7 @@ +.CheckIcon { + stroke: rgba(var(--main-fg), 0.5); + stroke-width: 8px; + fill: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/check.tsx b/webapp/src/widgets/icons/check.tsx new file mode 100644 index 000000000..f72d01156 --- /dev/null +++ b/webapp/src/widgets/icons/check.tsx @@ -0,0 +1,18 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import './check.scss' + +export default function CheckIcon(): JSX.Element { + return ( + + + + ) +} diff --git a/webapp/src/widgets/icons/dropdown.scss b/webapp/src/widgets/icons/dropdown.scss new file mode 100644 index 000000000..22e567a73 --- /dev/null +++ b/webapp/src/widgets/icons/dropdown.scss @@ -0,0 +1,7 @@ +.DropdownIcon { + fill: none; + stroke: rgb(var(--main-fg)); + stroke-width: 4px; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/dropdown.tsx b/webapp/src/widgets/icons/dropdown.tsx new file mode 100644 index 000000000..9d2d5c859 --- /dev/null +++ b/webapp/src/widgets/icons/dropdown.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 './dropdown.scss' + +export default function DropdownIcon(): JSX.Element { + return ( + + + + ) +} diff --git a/webapp/src/widgets/icons/hamburger.scss b/webapp/src/widgets/icons/hamburger.scss new file mode 100644 index 000000000..4eb0622d4 --- /dev/null +++ b/webapp/src/widgets/icons/hamburger.scss @@ -0,0 +1,7 @@ +.HamburgerIcon { + stroke: rgba(var(--main-fg), 0.5); + stroke-width: 6px; + fill: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/hamburger.tsx b/webapp/src/widgets/icons/hamburger.tsx new file mode 100644 index 000000000..90e099179 --- /dev/null +++ b/webapp/src/widgets/icons/hamburger.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 './hamburger.scss' + +export default function HamburgerIcon(): JSX.Element { + return ( + + + + + + ) +} diff --git a/webapp/src/widgets/icons/hideSidebar.scss b/webapp/src/widgets/icons/hideSidebar.scss new file mode 100644 index 000000000..079966d3d --- /dev/null +++ b/webapp/src/widgets/icons/hideSidebar.scss @@ -0,0 +1,7 @@ +.HideSidebarIcon { + stroke: rgba(var(--main-fg), 0.5); + stroke-width: 6px; + fill: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/hideSidebar.tsx b/webapp/src/widgets/icons/hideSidebar.tsx new file mode 100644 index 000000000..23abcfd7e --- /dev/null +++ b/webapp/src/widgets/icons/hideSidebar.tsx @@ -0,0 +1,19 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import './hideSidebar.scss' + +export default function HideSidebarIcon(): JSX.Element { + return ( + + + + + ) +} diff --git a/webapp/src/widgets/icons/options.scss b/webapp/src/widgets/icons/options.scss new file mode 100644 index 000000000..061640024 --- /dev/null +++ b/webapp/src/widgets/icons/options.scss @@ -0,0 +1,5 @@ +.OptionsIcon { + fill: rgba(var(--main-fg), 0.5); + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/options.tsx b/webapp/src/widgets/icons/options.tsx new file mode 100644 index 000000000..2c6f95af8 --- /dev/null +++ b/webapp/src/widgets/icons/options.tsx @@ -0,0 +1,32 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import './options.scss' + +export default function OptionsIcon(): JSX.Element { + return ( + + + + + + ) +} diff --git a/webapp/src/widgets/icons/showSidebar.scss b/webapp/src/widgets/icons/showSidebar.scss new file mode 100644 index 000000000..07e5dc4c7 --- /dev/null +++ b/webapp/src/widgets/icons/showSidebar.scss @@ -0,0 +1,7 @@ +.ShowSidebarIcon { + stroke: rgba(var(--main-fg), 0.5); + stroke-width: 6px; + fill: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/showSidebar.tsx b/webapp/src/widgets/icons/showSidebar.tsx new file mode 100644 index 000000000..7f4ba0efe --- /dev/null +++ b/webapp/src/widgets/icons/showSidebar.tsx @@ -0,0 +1,19 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import './showSidebar.scss' + +export default function ShowSidebarIcon(): JSX.Element { + return ( + + + + + ) +} diff --git a/webapp/src/widgets/icons/sortDown.scss b/webapp/src/widgets/icons/sortDown.scss new file mode 100644 index 000000000..e1ba1de0f --- /dev/null +++ b/webapp/src/widgets/icons/sortDown.scss @@ -0,0 +1,7 @@ +.SortDownIcon { + stroke: rgba(var(--main-fg), 0.5); + stroke-width: 8px; + fill: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/sortDown.tsx b/webapp/src/widgets/icons/sortDown.tsx new file mode 100644 index 000000000..baf302c3c --- /dev/null +++ b/webapp/src/widgets/icons/sortDown.tsx @@ -0,0 +1,19 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import './sortDown.scss' + +export default function SortDownIcon(): JSX.Element { + return ( + + + + + ) +} diff --git a/webapp/src/widgets/icons/sortUp.scss b/webapp/src/widgets/icons/sortUp.scss new file mode 100644 index 000000000..ec215f57e --- /dev/null +++ b/webapp/src/widgets/icons/sortUp.scss @@ -0,0 +1,7 @@ +.SortUpIcon { + stroke: rgba(var(--main-fg), 0.5); + stroke-width: 8px; + fill: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/sortUp.tsx b/webapp/src/widgets/icons/sortUp.tsx new file mode 100644 index 000000000..7859c5c67 --- /dev/null +++ b/webapp/src/widgets/icons/sortUp.tsx @@ -0,0 +1,19 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import './sortUp.scss' + +export default function SortUpIcon(): JSX.Element { + return ( + + + + + ) +} diff --git a/webapp/src/widgets/icons/submenuTriangle.scss b/webapp/src/widgets/icons/submenuTriangle.scss new file mode 100644 index 000000000..1f5f5d696 --- /dev/null +++ b/webapp/src/widgets/icons/submenuTriangle.scss @@ -0,0 +1,6 @@ +.SubmenuTriangleIcon { + fill: rgba(var(--main-fg), 0.7); + stroke: none; + width: 24px; + height: 24px; +} diff --git a/webapp/src/widgets/icons/submenuTriangle.tsx b/webapp/src/widgets/icons/submenuTriangle.tsx new file mode 100644 index 000000000..fa59f3ff9 --- /dev/null +++ b/webapp/src/widgets/icons/submenuTriangle.tsx @@ -0,0 +1,18 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import './submenuTriangle.scss' + +export default function SubmenuTriangleIcon(): JSX.Element { + return ( + + + + ) +} diff --git a/webapp/src/widgets/menu/colorOption.tsx b/webapp/src/widgets/menu/colorOption.tsx index 10ad7d0cd..174cc5880 100644 --- a/webapp/src/widgets/menu/colorOption.tsx +++ b/webapp/src/widgets/menu/colorOption.tsx @@ -7,7 +7,7 @@ import {MenuOptionProps} from './menuItem' import './colorOption.scss' type ColorOptionProps = MenuOptionProps & { - icon?: 'checked' | 'sortUp' | 'sortDown' | undefined, + icon?: React.ReactNode } export default class ColorOption extends React.PureComponent { @@ -23,7 +23,7 @@ export default class ColorOption extends React.PureComponent { onClick={this.handleOnClick} >
{name}
- {icon &&
} + {icon}
) diff --git a/webapp/src/widgets/menu/subMenuOption.scss b/webapp/src/widgets/menu/subMenuOption.scss new file mode 100644 index 000000000..5cde2c706 --- /dev/null +++ b/webapp/src/widgets/menu/subMenuOption.scss @@ -0,0 +1,5 @@ +.SubMenuOption { + .SubmenuTriangleIcon { + float: 'right' + } +} diff --git a/webapp/src/widgets/menu/subMenuOption.tsx b/webapp/src/widgets/menu/subMenuOption.tsx index be971a9fa..8af6adef0 100644 --- a/webapp/src/widgets/menu/subMenuOption.tsx +++ b/webapp/src/widgets/menu/subMenuOption.tsx @@ -3,6 +3,9 @@ import React from 'react' import {MenuOptionProps} from './menuItem' +import SubmenuTriangleIcon from '../icons/submenuTriangle' + +import './subMenuOption.scss' type SubMenuOptionProps = MenuOptionProps & { position?: 'bottom | top' @@ -33,10 +36,7 @@ export default class SubMenuOption extends React.PureComponent
{this.props.name}
-
+ {this.state.isOpen &&
diff --git a/webapp/src/widgets/menu/switchOption.tsx b/webapp/src/widgets/menu/switchOption.tsx index 8cc74434b..503cd5f80 100644 --- a/webapp/src/widgets/menu/switchOption.tsx +++ b/webapp/src/widgets/menu/switchOption.tsx @@ -8,7 +8,7 @@ import {MenuOptionProps} from './menuItem' type SwitchOptionProps = MenuOptionProps & { isOn: boolean, - icon?: 'checked' | 'sortUp' | 'sortDown' | undefined, + icon?: React.ReactNode, } export default class SwitchOption extends React.PureComponent { @@ -24,7 +24,7 @@ export default class SwitchOption extends React.PureComponent onClick={this.handleOnClick} >
{name}
- {icon &&
} + {icon} {}} diff --git a/webapp/src/widgets/menu/textOption.tsx b/webapp/src/widgets/menu/textOption.tsx index d13028a8a..80784b32f 100644 --- a/webapp/src/widgets/menu/textOption.tsx +++ b/webapp/src/widgets/menu/textOption.tsx @@ -1,12 +1,11 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React from 'react' -import { Utils } from '../../utils' import {MenuOptionProps} from './menuItem' type TextOptionProps = MenuOptionProps & { - icon?: 'checked' | 'sortUp' | 'sortDown' | undefined, + icon?: React.ReactNode, } export default class TextOption extends React.PureComponent { @@ -22,17 +21,8 @@ export default class TextOption extends React.PureComponent { onClick={this.handleOnClick} >
{name}
- {icon &&
} + {icon}
) } - - private iconCssClass(name: 'checked' | 'sortUp' | 'sortDown') { - switch (name) { - case 'checked': return 'imageMenuCheck' - case 'sortUp': return 'imageMenuSortUp' - case 'sortDown': return 'imageMenuSortDown' - default: Utils.assertFailure(`Invalid menu icon: ${name}`) - } - } }