luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Removing general hover classes and moving them into each component css

Browse source
This commit is contained in:
Jesús Espino 2020-11-02 10:46:28 +01:00
parent c53ab6423f
commit a71f7d6b13
10 changed files with 44 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webapp/src/components/boardCard.scss
View file

@ -50,4 +50,13 @@
margin-right: 5px;
}
}
.IconButton {
border-radius: 3px;
margin-right: 6px;
padding: 0;
background: rgb(var(--main-fg), 0.1);
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
height: 24px;
width: 24px;
}
}

5
webapp/src/components/boardCard.tsx
View file

@ -13,6 +13,7 @@ import Menu from '../widgets/menu'
import OptionsIcon from '../widgets/icons/options'
import DeleteIcon from '../widgets/icons/delete'
import DuplicateIcon from '../widgets/icons/duplicate'
import IconButton from '../widgets/buttons/iconButton'
import PropertyValueElement from './propertyValueElement'
@ -88,8 +89,8 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
className='optionsMenu'
stopPropagationOnToggle={true}
>
<div className='octo-hoverbutton square'><OptionsIcon/></div>
<Menu>
<IconButton icon={<OptionsIcon/>}/>
<Menu position='left'>
<Menu.Text
icon={<DeleteIcon/>}
id='delete'

10
webapp/src/components/cardDetail.scss
View file

@ -3,13 +3,19 @@
width: 100%;
}
.octo-hovercontrols {
.add-buttons {
display: flex;
flex-direction: column;
min-height: 30px;
color:rgba(var(--main-fg), 0.4);
width: 100%;
align-items: flex-start;
.Button {
display: none;
}
&:hover {
.Button {
display: block;
display: flex;
}
}
}

4
webapp/src/components/cardDetail.tsx
View file

@ -99,7 +99,7 @@ class CardDetail extends React.Component<Props, State> {
</div>)
} else {
contentElements = (<div className='octo-content'>
<div className='octo-block octo-hover-container'>
<div className='octo-block'>
<div className='octo-block-margin'/>
<MarkdownEditor
text=''
@ -126,7 +126,7 @@ class CardDetail extends React.Component<Props, State> {
size='l'
/>
{!icon &&
<div className='octo-hovercontrols'>
<div className='add-buttons'>
<Button
onClick={() => {
const newIcon = BlockIcons.shared.randomIcon()

6
webapp/src/components/sidebar.tsx
View file

@ -80,7 +80,7 @@ class Sidebar extends React.Component<Props, State> {
return (
<div className='Sidebar octo-sidebar'>
<div className='octo-sidebar-header octo-hover-container'>
<div className='octo-sidebar-header'>
{'OCTO'}
<div className='octo-spacer'/>
<IconButton
@ -99,7 +99,7 @@ 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 ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
<div className={'octo-sidebar-item ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
<IconButton
icon={<SubmenuTriangleIcon/>}
onClick={() => {
@ -150,7 +150,7 @@ class Sidebar extends React.Component<Props, State> {
{!collapsedBoards[board.id] && boardViews.map((view) => (
<div
key={view.id}
className='octo-sidebar-item subitem octo-hover-container'
className='octo-sidebar-item subitem'
>
<DotIcon/>
<div

4
webapp/src/components/tableRow.scss
View file

@ -1,6 +1,10 @@
.TableRow {
.open-button {
display: none;
.Button {
background-color: rgba(var(--main-fg), 0.1);
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
}
}
&:hover {
.open-button {

18
webapp/src/components/tableRow.tsx
View file

@ -8,6 +8,7 @@ import {Card} from '../blocks/card'
import mutator from '../mutator'
import Editable from '../widgets/editable'
import Button from '../widgets/buttons/button'
import PropertyValueElement from './propertyValueElement'
import {CardDialog} from './cardDialog'
@ -80,16 +81,13 @@ class TableRow extends React.Component<Props, State> {
/>
</div>
<div
className='octo-hoverbutton open-button'
onClick={() => {
this.setState({showCard: true})
}}
>
<FormattedMessage
id='TableRow.open'
defaultMessage='Open'
/>
<div className='open-button'>
<Button onClick={() => this.setState({showCard: true})}>
<FormattedMessage
id='TableRow.open'
defaultMessage='Open'
/>
</Button>
</div>
{this.state.showCard &&
<RootPortal>

7
webapp/src/components/viewTitle.scss
View file

@ -4,7 +4,12 @@
flex-direction: row;
align-items: center;
&.octo-hovercontrols {
&.add-buttons {
flex-direction: column;
min-height: 30px;
color:rgba(var(--main-fg), 0.4);
width: 100%;
align-items: flex-start;
.Button {
display: none;
}

2
webapp/src/components/viewTitle.tsx
View file

@ -39,7 +39,7 @@ class ViewTitle extends React.Component<Props, State> {
return (
<>
<div className={'ViewTitle octo-hovercontrols ' + (board.icon ? '' : 'add-visible')}>
<div className={'ViewTitle add-buttons ' + (board.icon ? '' : 'add-visible')}>
<Button
onClick={() => {
const newIcon = BlockIcons.shared.randomIcon()

57
webapp/src/styles/main.scss
View file

@ -121,16 +121,6 @@ hr {
/* Icons */
.octo-hovercontrols {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 30px;
width: 100%;
color:rgba(var(--main-fg), 0.4);
}
.octo-icon {
font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
line-height: 1.5em;
@ -182,59 +172,12 @@ hr {
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
}
.octo-hoverbutton {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 3px;
position: absolute;
right: 6px;
top: 4px;
cursor: pointer;
background: rgb(var(--main-fg), 0.1);
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
padding: 0 5px;
&.square {
height: 24px;
width: 24px;
padding: 0;
}
}
/* Hover panel */
.octo-hoverpanel {
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 30px;
width: 100%;
color:rgba(var(--main-fg), 0.4);
}
.octo-block img {
max-width: 500px;
max-height: 500px;
margin: 5px 0;
}
/* This needs to be declared after other co-classes */
.octo-hover-container {
position: relative;
}
.octo-hover-item {
display: none;
}
.octo-hover-container:hover .octo-hover-item {
display: flex;
}
.octo-content {
width: 100%;
margin-right: 50px;