Almost removed all the octo-button class

This commit is contained in:
Jesús Espino 2020-11-01 17:35:25 +01:00
parent f658f6654e
commit 28568db1bf
7 changed files with 43 additions and 46 deletions

View file

@ -53,10 +53,6 @@
&.narrow {
width: 220px;
}
> .octo-button {
color: #909090;
text-align: left;
}
}
.octo-board-hidden-item {

View file

@ -40,4 +40,16 @@
color: rgba(var(--main-fg), 0.4);
}
}
&.add-content {
.Button {
opacity: 0;
color: rgba(var(--main-fg), 0.6);
}
&:hover {
.Button {
opacity: 1;
}
}
}
}

View file

@ -208,38 +208,36 @@ class CardDetail extends React.Component<Props, State> {
{contentElements}
</div>
<div className='CardDetail content'>
<div className='octo-hoverpanel octo-hover-container'>
<MenuWrapper>
<div className='octo-button octo-hovercontrol octo-hover-item'>
<FormattedMessage
id='CardDetail.add-content'
defaultMessage='Add content'
/>
</div>
<Menu>
<Menu.Text
id='text'
name={intl.formatMessage({id: 'CardDetail.text', defaultMessage: 'Text'})}
onClick={() => {
const block = new MutableTextBlock()
block.parentId = card.id
block.order = cardTree.contents.length * 1000
mutator.insertBlock(block, 'add text')
}}
/>
<Menu.Text
id='image'
name={intl.formatMessage({id: 'CardDetail.image', defaultMessage: 'Image'})}
onClick={() => Utils.selectLocalFile(
(file) => mutator.createImageBlock(card.id, file, cardTree.contents.length * 1000),
'.jpg,.jpeg,.png',
)}
/>
<div className='CardDetail content add-content'>
<MenuWrapper>
<Button>
<FormattedMessage
id='CardDetail.add-content'
defaultMessage='Add content'
/>
</Button>
<Menu position='top'>
<Menu.Text
id='text'
name={intl.formatMessage({id: 'CardDetail.text', defaultMessage: 'Text'})}
onClick={() => {
const block = new MutableTextBlock()
block.parentId = card.id
block.order = cardTree.contents.length * 1000
mutator.insertBlock(block, 'add text')
}}
/>
<Menu.Text
id='image'
name={intl.formatMessage({id: 'CardDetail.image', defaultMessage: 'Image'})}
onClick={() => Utils.selectLocalFile(
(file) => mutator.createImageBlock(card.id, file, cardTree.contents.length * 1000),
'.jpg,.jpeg,.png',
)}
/>
</Menu>
</MenuWrapper>
</div>
</Menu>
</MenuWrapper>
</div>
</>
)

View file

@ -21,14 +21,6 @@
color: rgba(var(--main-fg), 0.8);
flex-grow: 1;
margin-left: 5px;
.octo-button {
display: none;
}
&:focus {
.octo-button {
display: block;
}
}
}
}

View file

@ -46,7 +46,6 @@
line-height: 17px;
}
.octo-button,
.octo-editable,
.octo-propertyvalue
{

View file

@ -1,4 +1,4 @@
.ButtonWithMenu.octo-button {
.ButtonWithMenu {
display: flex;
align-items: stretch;
text-align: center;

View file

@ -19,7 +19,7 @@ export default class ButtonWithMenu extends React.PureComponent<Props> {
return (
<div
onClick={this.props.onClick}
className='ButtonWithMenu octo-button'
className='ButtonWithMenu'
title={this.props.title}
>
<div className='button-text'>