mirror of
https://github.com/mattermost/focalboard.git
synced 2024-11-27 08:31:20 +02:00
Using more widely the Button and IconButton components
This commit is contained in:
Jesús Espino
parent
de1a9f5427
commit
1b19819141
@ -9,6 +9,8 @@ import {IBlock} from '../blocks/block'
|
||||
import Menu from '../widgets/menu'
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
import DeleteIcon from '../widgets/icons/delete'
|
||||
import OptionsIcon from '../widgets/icons/options'
|
||||
import IconButton from '../widgets/buttons/iconButton'
|
||||
|
||||
import './comment.scss'
|
||||
import {Utils} from '../utils'
|
||||
@ -36,7 +38,7 @@ const Comment: FC<Props> = (props: Props) => {
|
||||
<div className='comment-username'>{username}</div>
|
||||
<div className='comment-date'>{(new Date(comment.createAt)).toLocaleTimeString()}</div>
|
||||
<MenuWrapper>
|
||||
<div className='octo-hoverbutton square'>{'...'}</div>
|
||||
<IconButton icon={<OptionsIcon/>}/>
|
||||
<Menu position='left'>
|
||||
<Menu.Text
|
||||
icon={<DeleteIcon/>}
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
import React from 'react'
|
||||
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
import Button from '../widgets/buttons/button'
|
||||
import OptionsIcon from '../widgets/icons/options'
|
||||
import IconButton from '../widgets/buttons/iconButton'
|
||||
|
||||
import './dialog.scss'
|
||||
|
||||
@ -54,7 +55,7 @@ export default class Dialog extends React.PureComponent<Props> {
|
||||
<div className='toolbar'>
|
||||
<div className='octo-spacer'/>
|
||||
<MenuWrapper>
|
||||
<Button>{'...'}</Button>
|
||||
<IconButton icon={<OptionsIcon/>}/>
|
||||
{toolsMenu}
|
||||
</MenuWrapper>
|
||||
</div>}
|
||||
|
||||
@ -32,18 +32,24 @@
|
||||
font-weight: 600;
|
||||
padding: 3px 20px;
|
||||
margin-bottom: 5px;
|
||||
.show-button {
|
||||
.HamburgerIcon {
|
||||
.IconButton {
|
||||
background-color: var(--sidebar-bg);
|
||||
&:hover {
|
||||
background-color: rgba(var(--sidebar-fg), 0.1);
|
||||
}
|
||||
}
|
||||
&.show-button {
|
||||
.hamburger-icon {
|
||||
display: block;
|
||||
}
|
||||
.ShowSidebarIcon {
|
||||
.show-icon {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.HamburgerIcon {
|
||||
.hamburger-icon {
|
||||
display: none;
|
||||
}
|
||||
.ShowSidebarIcon {
|
||||
.show-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -70,20 +76,32 @@
|
||||
background-color: rgba(var(--sidebar-bg));
|
||||
}
|
||||
}
|
||||
.octo-button {
|
||||
|
||||
.IconButton {
|
||||
background-color: var(--sidebar-bg);
|
||||
&:hover {
|
||||
background-color: rgba(var(--sidebar-fg), 0.1);
|
||||
}
|
||||
&.expanded {
|
||||
.SubmenuTriangleIcon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.MenuWrapper {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
display: flex;
|
||||
.MenuWrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
.SubmenuTriangleIcon {
|
||||
transition: 200ms ease-in-out;
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.SubmenuTriangleIcon {
|
||||
transition: 200ms ease-in-out;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.octo-sidebar-title {
|
||||
|
||||
@ -14,8 +14,11 @@ import OptionsIcon from '../widgets/icons/options'
|
||||
import ShowSidebarIcon from '../widgets/icons/showSidebar'
|
||||
import HideSidebarIcon from '../widgets/icons/hideSidebar'
|
||||
import HamburgerIcon from '../widgets/icons/hamburger'
|
||||
import DeleteIcon from '../widgets/icons/delete'
|
||||
import SubmenuTriangleIcon from '../widgets/icons/submenuTriangle'
|
||||
import DotIcon from '../widgets/icons/dot'
|
||||
import IconButton from '../widgets/buttons/iconButton'
|
||||
import Button from '../widgets/buttons/button'
|
||||
import {WorkspaceTree} from '../viewModel/workspaceTree'
|
||||
import {BoardView} from '../blocks/boardView'
|
||||
|
||||
@ -57,13 +60,18 @@ class Sidebar extends React.Component<Props, State> {
|
||||
if (this.state.isHidden) {
|
||||
return (
|
||||
<div className='Sidebar octo-sidebar hidden'>
|
||||
<div className='octo-sidebar-header'>
|
||||
<div
|
||||
className='octo-button square show-button'
|
||||
onClick={() => this.showClicked()}
|
||||
>
|
||||
<HamburgerIcon/>
|
||||
<ShowSidebarIcon/>
|
||||
<div className='octo-sidebar-header show-button'>
|
||||
<div className='hamburger-icon'>
|
||||
<IconButton
|
||||
icon={<HamburgerIcon/>}
|
||||
onClick={() => this.showClicked()}
|
||||
/>
|
||||
</div>
|
||||
<div className='show-icon'>
|
||||
<IconButton
|
||||
icon={<ShowSidebarIcon/>}
|
||||
onClick={() => this.showClicked()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -75,10 +83,10 @@ class Sidebar extends React.Component<Props, State> {
|
||||
<div className='octo-sidebar-header octo-hover-container'>
|
||||
{'OCTO'}
|
||||
<div className='octo-spacer'/>
|
||||
<div
|
||||
className='octo-button square octo-hover-item'
|
||||
<IconButton
|
||||
onClick={() => this.hideClicked()}
|
||||
><HideSidebarIcon/></div>
|
||||
icon={<HideSidebarIcon/>}
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
boards.map((board) => {
|
||||
@ -91,17 +99,15 @@ class Sidebar extends React.Component<Props, State> {
|
||||
const boardViews = views.filter((view) => view.parentId === board.id)
|
||||
return (
|
||||
<div key={board.id}>
|
||||
<div className='octo-sidebar-item octo-hover-container'>
|
||||
<div
|
||||
className={'octo-button square ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}
|
||||
<div className={'octo-sidebar-item octo-hover-container ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
|
||||
<IconButton
|
||||
icon={<SubmenuTriangleIcon/>}
|
||||
onClick={() => {
|
||||
const newCollapsedBoards = {...this.state.collapsedBoards}
|
||||
newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]
|
||||
this.setState({collapsedBoards: newCollapsedBoards})
|
||||
}}
|
||||
>
|
||||
<SubmenuTriangleIcon/>
|
||||
</div>
|
||||
/>
|
||||
<div
|
||||
className='octo-sidebar-title'
|
||||
onClick={() => {
|
||||
@ -111,11 +117,12 @@ class Sidebar extends React.Component<Props, State> {
|
||||
{board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
|
||||
</div>
|
||||
<MenuWrapper>
|
||||
<div className='octo-button square octo-hover-item'><OptionsIcon/></div>
|
||||
<IconButton icon={<OptionsIcon/>}/>
|
||||
<Menu>
|
||||
<Menu.Text
|
||||
id='delete'
|
||||
name={intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete Board'})}
|
||||
icon={<DeleteIcon/>}
|
||||
onClick={async () => {
|
||||
const nextBoardId = boards.length > 1 ? boards.find((o) => o.id !== board.id).id : undefined
|
||||
mutator.deleteBlock(
|
||||
@ -168,27 +175,22 @@ class Sidebar extends React.Component<Props, State> {
|
||||
|
||||
<br/>
|
||||
|
||||
<div
|
||||
className='octo-button'
|
||||
onClick={() => {
|
||||
this.addBoardClicked()
|
||||
}}
|
||||
>
|
||||
<Button onClick={this.addBoardClicked}>
|
||||
<FormattedMessage
|
||||
id='Sidebar.add-board'
|
||||
defaultMessage='+ Add Board'
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
<div className='octo-spacer'/>
|
||||
|
||||
<MenuWrapper>
|
||||
<div className='octo-button'>
|
||||
<Button>
|
||||
<FormattedMessage
|
||||
id='Sidebar.settings'
|
||||
defaultMessage='Settings'
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
<Menu position='top'>
|
||||
<Menu.Text
|
||||
id='import'
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
min-width: 20px;
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
.IconButton {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 0;
|
||||
background-color: rgba(var(--main-fg), 0.1);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.Icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user