Using more widely the Button and IconButton components

This commit is contained in:
Jesús Espino 2020-10-31 17:30:56 +01:00
parent de1a9f5427
commit 1b19819141
6 changed files with 69 additions and 42 deletions

View file

@ -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/>}

View file

@ -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>}

View file

@ -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 {

View file

@ -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'

View file

@ -2,6 +2,7 @@
display: flex;
align-items: center;
text-align: center;
justify-content: center;
border-radius: 5px;
padding: 0 5px;
min-width: 20px;

View file

@ -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;
}
}