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

Moving some css aside the right components

Browse source
This commit is contained in:
Jesús Espino 2020-10-25 19:23:23 +01:00
parent bbee08b782
commit 79313ddb34
6 changed files with 132 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
webapp/src/components/comment.scss
View file

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

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

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

40
webapp/src/components/dialog.tsx
View file

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

103
webapp/static/main.css
View file

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