self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-24 13:43:12 +02:00
Code Issues Releases Activity

Show add content button on hover or focus of content block (#876)

Browse Source 
* Show add content button on hover or focus of content block

* Updating UI to make the overlay textarea to be consitent

Co-authored-by: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
This commit is contained in:
Jesús Espino 2021-08-04 16:12:58 +02:00 committed by GitHub
parent caedc771b4
commit fb75ad2789
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
webapp/src/components/cardDetail/cardDetail.scss
View File

@ -55,15 +55,20 @@
}
}
&.add-content {
.Button {
opacity: 0;
color: rgba(var(--body-color), 0.6);
}
&:hover {
&.content-blocks {
&:hover, &:focus-within {
.CardDetailContentsMenu {
.Button {
opacity: 1;
}
}
}
.CardDetailContentsMenu {
margin-left: 48px;
.Button {
opacity: 0;
color: rgba(var(--body-color), 0.6);
}
}
}
}

5
webapp/src/components/cardDetail/cardDetail.tsx
View File

@ -139,17 +139,16 @@ const CardDetail = (props: Props): JSX.Element|null => {
{/* Content blocks */}
<div className='CardDetail content fullwidth'>
<div className='CardDetail content fullwidth content-blocks'>
<CardDetailContents
card={props.card}
contents={props.contents}
readonly={props.readonly}
/>
</div>
{!props.readonly &&
<CardDetailContentsMenu card={props.card}/>
}
</div>
</>
)
}

2
webapp/src/components/cardDetail/cardDetailContents.tsx
View File

@ -209,7 +209,7 @@ const CardDetailContents = React.memo((props: Props) => {
)
}
return (
<div className='octo-content'>
<div className='octo-content CardDetailContents'>
<div className='octo-block'>
<div className='octo-block-margin'/>
{!props.readonly &&

2
webapp/src/components/cardDetail/cardDetailContentsMenu.tsx
View File

@ -55,7 +55,7 @@ type Props = {
const CardDetailContentsMenu = React.memo((props: Props) => {
const intl = useIntl()
return (
<div className='CardDetail content add-content'>
<div className='CardDetailContentsMenu content add-content'>
<MenuWrapper>
<Button>
<FormattedMessage

1
webapp/src/components/contentBlock.scss
View File

@ -16,6 +16,7 @@
> * {
flex: 1 1 auto;
max-width: 100%;
min-height: 32px;
}
> .octo-block-margin {
flex: 0 0 auto;

8
webapp/src/components/markdownEditor.scss
View File

@ -16,6 +16,14 @@
word-break: break-word;
}
.CodeMirror-code {
line-height: 24px;
}
.CodeMirror-lines {
padding: 0;
}
.CodeMirror,
.CodeMirror-scroll {
flex: 1;