mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-24 13:43:12 +02:00
Moving some css aside the right components
This commit is contained in:
parent
bbee08b782
commit
79313ddb34
@ -1,12 +1,47 @@
|
||||
.Comment {
|
||||
.MenuWrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5px 0;
|
||||
|
||||
&:hover {
|
||||
.MenuWrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.MenuWrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 2px 4px;
|
||||
}
|
||||
|
||||
.comment-username {
|
||||
font-weight: bold;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
color: #cccccc;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
color: rgb(55, 53, 47);
|
||||
width: 100%;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
25
webapp/src/components/commentsList.scss
Normal file
25
webapp/src/components/commentsList.scss
Normal file
@ -0,0 +1,25 @@
|
||||
.CommentsList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.comment-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 2px 4px;
|
||||
}
|
||||
|
||||
.commentrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.newcomment {
|
||||
color: rgba(55, 53, 47, 0.8);
|
||||
flex-grow: 1;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
@ -11,6 +11,8 @@ import mutator from '../mutator'
|
||||
import {Editable} from './editable'
|
||||
import Comment from './comment'
|
||||
|
||||
import './commentsList.scss'
|
||||
|
||||
type Props = {
|
||||
comments: readonly IBlock[]
|
||||
cardId: string
|
||||
@ -42,7 +44,7 @@ class CommentsList extends React.Component<Props> {
|
||||
const userImageUrl = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="fill: rgb(192, 192, 192);"><rect width="100" height="100" /></svg>'
|
||||
|
||||
return (
|
||||
<div className='commentlist'>
|
||||
<div className='CommentsList'>
|
||||
{comments.map((comment) => (
|
||||
<Comment
|
||||
key={comment.id}
|
||||
|
43
webapp/src/components/dialog.scss
Normal file
43
webapp/src/components/dialog.scss
Normal file
@ -0,0 +1,43 @@
|
||||
.Dialog {
|
||||
&.dialog-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: rgba(90, 90, 90, 0.5);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: #ffffff;
|
||||
border-radius: 3px;
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
|
||||
margin: 72px auto;
|
||||
padding: 0;
|
||||
max-width: 975px;
|
||||
height: calc(100% - 144px);
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
> .toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 30px;
|
||||
margin: 10px
|
||||
}
|
||||
> .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 10px 126px 10px 126px;
|
||||
}
|
||||
> .content.fullwidth {
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
@ -6,14 +6,28 @@ import MenuWrapper from '../widgets/menuWrapper'
|
||||
|
||||
import Button from './button'
|
||||
|
||||
import './dialog.scss'
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode
|
||||
toolsMenu: React.ReactNode
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default class Dialog extends React.Component<Props> {
|
||||
keydownHandler = (e: KeyboardEvent) => {
|
||||
export default class Dialog extends React.PureComponent<Props> {
|
||||
public componentDidMount(): void {
|
||||
document.addEventListener('keydown', this.keydownHandler)
|
||||
}
|
||||
|
||||
public componentWillUnmount(): void {
|
||||
document.removeEventListener('keydown', this.keydownHandler)
|
||||
}
|
||||
|
||||
private close(): void {
|
||||
this.props.onClose()
|
||||
}
|
||||
|
||||
private keydownHandler = (e: KeyboardEvent): void => {
|
||||
if (e.target !== document.body) {
|
||||
return
|
||||
}
|
||||
@ -24,20 +38,12 @@ export default class Dialog extends React.Component<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('keydown', this.keydownHandler)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('keydown', this.keydownHandler)
|
||||
}
|
||||
|
||||
render() {
|
||||
public render(): JSX.Element {
|
||||
const {toolsMenu} = this.props
|
||||
|
||||
return (
|
||||
<div
|
||||
className='dialog-back'
|
||||
className='Dialog dialog-back'
|
||||
onMouseDown={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
this.close()
|
||||
@ -49,17 +55,13 @@ export default class Dialog extends React.Component<Props> {
|
||||
<div className='toolbar'>
|
||||
<div className='octo-spacer'/>
|
||||
<MenuWrapper>
|
||||
<Button>...</Button>
|
||||
<Button>{'...'}</Button>
|
||||
{toolsMenu}
|
||||
</MenuWrapper>
|
||||
</div>}
|
||||
{this.props.children}
|
||||
</div >
|
||||
</div >
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
close() {
|
||||
this.props.onClose()
|
||||
}
|
||||
}
|
||||
|
@ -436,53 +436,6 @@ hr {
|
||||
margin: 5px 5px;
|
||||
}
|
||||
|
||||
/*-- Dialog --*/
|
||||
|
||||
.dialog-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: rgba(90, 90, 90, 0.5);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
background-color: #ffffff;
|
||||
border-radius: 3px;
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
|
||||
margin: 72px auto;
|
||||
padding: 0;
|
||||
max-width: 975px;
|
||||
height: calc(100% - 144px);
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialog > .toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 30px;
|
||||
margin: 10px
|
||||
}
|
||||
|
||||
.dialog > .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 10px 126px 10px 126px;
|
||||
}
|
||||
|
||||
.dialog > .content.fullwidth {
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
|
||||
.octo-hovercontrols {
|
||||
@ -537,62 +490,6 @@ hr {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/*-- Comments --*/
|
||||
|
||||
.dialog .commentlist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.commentlist .commentrow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.commentlist .comment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 2px 4px;
|
||||
}
|
||||
|
||||
.comment-username {
|
||||
font-weight: bold;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
color: #cccccc;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.comment-text {
|
||||
color: rgb(55, 53, 47);
|
||||
width: 100%;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.commentlist .newcomment {
|
||||
color: rgba(55, 53, 47, 0.8);
|
||||
flex-grow: 1;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/*-- Property list --*/
|
||||
|
||||
.octo-propertylist {
|
||||
|
Loading…
Reference in New Issue
Block a user