From 79313ddb34072ab19629f6ed87a4b6a3bc81fa46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Sun, 25 Oct 2020 19:23:23 +0100 Subject: [PATCH] Moving some css aside the right components --- webapp/src/components/comment.scss | 45 +++++++++-- webapp/src/components/commentsList.scss | 25 ++++++ webapp/src/components/commentsList.tsx | 4 +- webapp/src/components/dialog.scss | 43 ++++++++++ webapp/src/components/dialog.tsx | 40 ++++----- webapp/static/main.css | 103 ------------------------ 6 files changed, 132 insertions(+), 128 deletions(-) create mode 100644 webapp/src/components/commentsList.scss create mode 100644 webapp/src/components/dialog.scss diff --git a/webapp/src/components/comment.scss b/webapp/src/components/comment.scss index 7689e6738..3264b2d6a 100644 --- a/webapp/src/components/comment.scss +++ b/webapp/src/components/comment.scss @@ -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; + } } diff --git a/webapp/src/components/commentsList.scss b/webapp/src/components/commentsList.scss new file mode 100644 index 000000000..e8c922200 --- /dev/null +++ b/webapp/src/components/commentsList.scss @@ -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; + } +} + diff --git a/webapp/src/components/commentsList.tsx b/webapp/src/components/commentsList.tsx index f18ef4fc9..5bd3263f9 100644 --- a/webapp/src/components/commentsList.tsx +++ b/webapp/src/components/commentsList.tsx @@ -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 { const userImageUrl = 'data:image/svg+xml,' return ( -
+
{comments.map((comment) => ( .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; + } + } +} diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx index bc18c822b..e0bdd8716 100644 --- a/webapp/src/components/dialog.tsx +++ b/webapp/src/components/dialog.tsx @@ -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 { - keydownHandler = (e: KeyboardEvent) => { +export default class Dialog extends React.PureComponent { + 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 { } } - componentDidMount() { - document.addEventListener('keydown', this.keydownHandler) - } - - componentWillUnmount() { - document.removeEventListener('keydown', this.keydownHandler) - } - - render() { + public render(): JSX.Element { const {toolsMenu} = this.props return (
{ if (e.target === e.currentTarget) { this.close() @@ -49,17 +55,13 @@ export default class Dialog extends React.Component {
- + {toolsMenu}
} {this.props.children} -
-
+
+
) } - - close() { - this.props.onClose() - } } diff --git a/webapp/static/main.css b/webapp/static/main.css index 343baf027..1b8d709ac 100644 --- a/webapp/static/main.css +++ b/webapp/static/main.css @@ -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 {