From ade3cf6252d335c13187eb693f14f94750b6a0d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Snorre=20Magnus=20Dav=C3=B8en?= Date: Fri, 12 Oct 2018 19:13:04 +0200 Subject: [PATCH 1/5] Display avatar left of comments by default MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously avatars would be displayed on top of comments. Most comment and forum systems will display avatars to the left of comments/posts. The https://github.com/snorremd/talk-plugin-gravatar plugin currently renders avatars in the avatar slot which will render the avatar on top of the comments. This change modified the comment container to be displayed as a flex container with row direction. It also adds 10px top margin to the avatar slot which corresponds with the comment header. Signed-off-by: Snorre Magnus Davøen --- .../src/tabs/stream/components/Comment.css | 1 + client/coral-embed-stream/style/default.css | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.css b/client/coral-embed-stream/src/tabs/stream/components/Comment.css index 58ff0e731..8b7257b46 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Comment.css +++ b/client/coral-embed-stream/src/tabs/stream/components/Comment.css @@ -138,6 +138,7 @@ } .commentAvatar { + margin-top: 10px; max-width: 60px; } diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index b9330ba62..6cd9bd580 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -112,6 +112,11 @@ body { position: relative; } +.talk-stream-comment { + display: flex; + flex-direction: row; +} + /* Comment styles */ .comment { margin-bottom: 10px; From fd7114ab2ac976107319347d97177166a8e03a13 Mon Sep 17 00:00:00 2001 From: Harrison Reid Date: Thu, 18 Oct 2018 21:06:00 +1100 Subject: [PATCH 2/5] Keep question box visible when comment stream is closed --- .../src/tabs/stream/components/Stream.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js index b097f3d57..f430bd7b4 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js @@ -305,6 +305,14 @@ class Stream extends React.Component { ) : ( )} + {questionBoxEnable && ( + + + + )} )} From 130dc578b3d0a9ff5b4b8b028cd5d8172a92019a Mon Sep 17 00:00:00 2001 From: Harrison Reid Date: Thu, 18 Oct 2018 21:25:36 +1100 Subject: [PATCH 3/5] Refactor Stream component, move QuestionBox render logic into seperate fn --- .../src/tabs/stream/components/Stream.js | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js index f430bd7b4..73b4fbcfd 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js @@ -206,15 +206,30 @@ class Stream extends React.Component { ); } + renderQuestionBox() { + const { + root, + asset, + asset: { + settings: { questionBoxEnable, questionBoxContent, questionBoxIcon }, + }, + } = this.props; + const slotPassthrough = { root, asset }; + if (questionBoxEnable) { + return ( + + + + ); + } + } + render() { const { root, appendItemArray, asset, - asset: { - comment: highlightedComment, - settings: { questionBoxEnable }, - }, + asset: { comment: highlightedComment }, postComment, notify, updateItem, @@ -260,14 +275,7 @@ class Stream extends React.Component { content={asset.settings.infoBoxContent} enable={asset.settings.infoBoxEnable} /> - {questionBoxEnable && ( - - - - )} + {this.renderQuestionBox()} {!banned && temporarilySuspended && ( @@ -305,14 +313,7 @@ class Stream extends React.Component { ) : ( )} - {questionBoxEnable && ( - - - - )} + {this.renderQuestionBox()} )} From 61486caa9e7ac3c7a1bcef7f0746139144518ec0 Mon Sep 17 00:00:00 2001 From: hovoodd Date: Sat, 20 Oct 2018 19:01:01 +0300 Subject: [PATCH 4/5] Make ConfigureCard collapsible --- .../components/ConfigureCard.css | 63 ++++++----- .../components/ConfigureCard.js | 100 +++++++++++------- 2 files changed, 93 insertions(+), 70 deletions(-) diff --git a/client/coral-framework/components/ConfigureCard.css b/client/coral-framework/components/ConfigureCard.css index f72ea0c73..0ecabc6e5 100644 --- a/client/coral-framework/components/ConfigureCard.css +++ b/client/coral-framework/components/ConfigureCard.css @@ -1,49 +1,48 @@ .card { - margin-bottom: 20px; - align-items: flex-start; - min-height: 100px; max-width: 600px; + min-height: 100px; + flex-direction: row; + align-items: flex-start; + margin-bottom: 20px; overflow: visible; } +.collapsibleCard { + min-height: auto; +} + +.enabledCard { + border-left: 7px solid #00796b; +} + +.action { + flex-shrink: 0; + margin-right: 12px; +} + +.wrapper { + flex-grow: 1; +} + .header { - margin-top: 3px; - margin-bottom: 7px; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 2px; +} + +.title { font-size: 18px; font-weight: 500; } -.wrapper { - width: 100%; +.body { + margin-top: 7px; font-size: 14px; letter-spacing: 0; } -.action { - display: inline-block; - position: absolute; - top: 0; - left: 0; - padding: 20px; -} - -.content { - display: inline-block; - padding: 0px 30px; - box-sizing: border-box; -} - -.enabledSetting { - border-left-color: #00796b; - border-left-style: solid; - border-left-width: 7px; -} - -.disabledSetting { - padding-left: 22px; -} - -.disabledSettingText { +.disabledBody { color: #ccc; pointer-events: none; } diff --git a/client/coral-framework/components/ConfigureCard.js b/client/coral-framework/components/ConfigureCard.js index 7a2872318..4bc6bb967 100644 --- a/client/coral-framework/components/ConfigureCard.js +++ b/client/coral-framework/components/ConfigureCard.js @@ -1,46 +1,69 @@ -import React from 'react'; +import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; -import styles from './ConfigureCard.css'; +import classnames from 'classnames/bind'; import { Card } from 'coral-ui'; -import { Checkbox } from 'react-mdl'; -import cn from 'classnames'; +import { Checkbox, IconButton } from 'react-mdl'; -const ConfigureCard = ({ - title, - children, - className, - onCheckbox, - checked, - ...rest -}) => ( - - {checked !== undefined && ( -
- -
- )} -
-
{title}
-
this.setState({ isOpen: !this.state.isOpen }); + + render() { + const { + title, + children, + className, + onCheckbox, + checked, + collapsible, + ...rest + } = this.props; + + const { isOpen } = this.state; + + const iconName = isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'; + + return ( + - {children} -
-
- -); + {checked !== undefined && ( +
+ +
+ )} +
+
+
{title}
+ {collapsible && ( + + )} +
+ {isOpen && ( +
+ {children} +
+ )} +
+ + ); + } +} ConfigureCard.propTypes = { title: PropTypes.string, @@ -48,6 +71,7 @@ ConfigureCard.propTypes = { onCheckbox: PropTypes.func, checked: PropTypes.bool, children: PropTypes.node, + collapsible: PropTypes.bool, }; export default ConfigureCard; From 8432df15a161c69fd17e05d1252c3bf776d1f8f7 Mon Sep 17 00:00:00 2001 From: hovoodd Date: Sat, 20 Oct 2018 19:06:03 +0300 Subject: [PATCH 5/5] Add collapsible prop to banned and suspended lists in admin --- .../coral-admin/src/routes/Configure/components/Wordlist.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/coral-admin/src/routes/Configure/components/Wordlist.js b/client/coral-admin/src/routes/Configure/components/Wordlist.js index 1a5c177d0..6acc045b8 100644 --- a/client/coral-admin/src/routes/Configure/components/Wordlist.js +++ b/client/coral-admin/src/routes/Configure/components/Wordlist.js @@ -6,7 +6,7 @@ import ConfigureCard from 'coral-framework/components/ConfigureCard'; const Wordlist = ({ suspectWords, bannedWords, onChangeWordlist }) => (
- +

{t('configure.banned_word_text')}

( onChange={tags => onChangeWordlist('banned', tags)} /> - +

{t('configure.suspect_word_text')}