wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-05 13:45:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Icon List for Question Box

Browse Source
This commit is contained in:
Belen Curcio
2017-08-24 16:32:07 -03:00
parent 7991188f8d
commit 5cb71eaee8
13 changed files with 195 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/coral-configure/components/ConfigureCommentStream.css
+1 -5
View File
@@ -12,10 +12,6 @@
padding: 0;
}
.wrapper ul ul {
padding-left: 20px
}
.checkbox {
vertical-align: top;
margin: 12px 12px 12px 0;
@@ -36,4 +32,4 @@
.hidden {
display: none;
}
}
client/coral-configure/components/ConfigureCommentStream.js
+9 -10
View File
@@ -1,5 +1,6 @@
import React from 'react';
import {Button, Checkbox, TextField} from 'coral-ui';
import {Button, Checkbox} from 'coral-ui';
import QuestionBoxBuilder from './QuestionBoxBuilder';
import styles from './ConfigureCommentStream.css';
@@ -55,15 +56,13 @@ export default ({handleChange, handleApply, changed, ...props}) => (
title: t('configure.enable_questionbox'),
description: t('configure.enable_questionbox_description')
}} />
<div className={`${props.questionBoxEnable ? null : styles.hidden}`} >
<TextField
id="qboxcontent"
onChange={handleChange}
rows={3}
value={props.questionBoxContent}
label={t('configure.include_question_here')}
/>
</div>
{
props.questionBoxEnable && <QuestionBoxBuilder
questionBoxIcon={props.questionBoxIcon}
questionBoxContent={props.questionBoxContent}
handleChange={handleChange}
/>
}
</li>
</ul>
</div>
client/coral-configure/components/DefaultIcon.css
+27
View File
@@ -0,0 +1,27 @@
.iconBubble{
position: absolute;
top: 8px;
left: 10px;
color: #9E9E9E;
font-size: 24px;
z-index: 0;
}
.iconPerson{
z-index: 2;
top: 12px;
left: 12px;
position: absolute;
font-size: 33px;
color: #262626;
}
.qbIconContainer {
position: relative;
border: 0;
color: white;
display: inline-block;
padding: 5px 20px;
vertical-align: middle;
width: 10px;
}
client/coral-configure/components/DefaultIcon.js
+13
View File
@@ -0,0 +1,13 @@
import React from 'react';
import cn from 'classnames';
import styles from './DefaultIcon.css';
import {Icon} from 'coral-ui';
const DefaultIcon = ({className}) => (
<div className={cn(styles.qbIconContainer, className)}>
<Icon name="chat_bubble" className={cn(styles.iconBubble)} />
<Icon name="person" className={cn(styles.iconPerson)} />
</div>
);
export default DefaultIcon;
client/coral-configure/components/QuestionBoxBuilder.css
+39
View File
@@ -0,0 +1,39 @@
.qbBuilder {
margin-left: 50px;
}
.qbItemIconList {
padding: 0;
margin: 10px 0;
}
.qbItemIcon {
background: #F0F0F0;
width: 45px;
height: 45px;
font-size: 24px;
text-align: center;
line-height: 45px;
color: #252525;
border-radius: 3px;
display: inline-block;
overflow: hidden;
margin-right: 10px;
position: relative;
}
.qbItemIcon:hover {
cursor: pointer;
}
.qbItemIconActive {
border: solid 2px #00796B;
}
.defaultIcon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
client/coral-configure/components/QuestionBoxBuilder.js
+73
View File
@@ -0,0 +1,73 @@
import React from 'react';
import QuestionBox from 'talk-plugin-questionbox/QuestionBox';
import {Icon, TextField} from 'coral-ui';
import DefaultIcon from './DefaultIcon';
import cn from 'classnames';
import styles from './QuestionBoxBuilder.css';
class QuestionBoxBuilder extends React.Component {
render() {
const {handleChange, questionBoxIcon, questionBoxContent} = this.props;
return (
<div className={styles.qbBuilder}>
<h4>Include an Icon</h4>
<ul className={styles.qbItemIconList}>
<li className={cn(
styles.qbItemIcon,
{[styles.qbItemIconActive]: questionBoxIcon === 'default'}
)}
id="qboxicon"
onClick={handleChange}
data-icon="default" >
<DefaultIcon className={styles.defaultIcon} />
</li>
<li className={cn(
styles.qbItemIcon,
{[styles.qbItemIconActive]: questionBoxIcon === 'forum'}
)}
id="qboxicon"
onClick={handleChange}
data-icon="forum" >
<Icon name="forum" />
</li>
<li className={cn(
styles.qbItemIcon,
{[styles.qbItemIconActive]: questionBoxIcon === 'build'}
)}
id="qboxicon"
onClick={handleChange}
data-icon="build" >
<Icon name="build" />
</li>
<li className={cn(
styles.qbItemIcon,
{[styles.qbItemIconActive]: questionBoxIcon === 'format_quote'}
)}
id="qboxicon"
onClick={handleChange}
data-icon="format_quote" >
<Icon name="format_quote" />
</li>
</ul>
<QuestionBox
enable={true}
icon={questionBoxIcon}
content={questionBoxContent}
/>
<TextField
id="qboxcontent"
onChange={handleChange}
rows={3}
value={questionBoxContent}
onChange={handleChange}
/>
</div>
);
}
}
export default QuestionBoxBuilder;
client/coral-configure/containers/ConfigureStreamContainer.js
+6
View File
@@ -27,6 +27,7 @@ class ConfigureStreamContainer extends Component {
handleApply (e) {
e.preventDefault();
const {elements} = e.target;
const {questionBoxIcon} = this.state.dirtySettings;
const premod = elements.premod.checked;
const questionBoxEnable = elements.qboxenable.checked;
const questionBoxContent = elements.qboxcontent.value;
@@ -38,6 +39,7 @@ class ConfigureStreamContainer extends Component {
moderation: premod ? 'PRE' : 'POST',
questionBoxEnable,
questionBoxContent,
questionBoxIcon,
premodLinksEnable
};
@@ -60,6 +62,9 @@ class ConfigureStreamContainer extends Component {
if (e.target && e.target.id === 'qboxcontent') {
changes.questionBoxContent = e.target.value;
}
if (e.currentTarget && e.currentTarget.id === 'qboxicon') {
changes.questionBoxIcon = e.currentTarget.dataset.icon;
}
if (e.target && e.target.id === 'plinksenable') {
changes.premodLinksEnable = e.target.value;
}
@@ -105,6 +110,7 @@ class ConfigureStreamContainer extends Component {
changed={this.state.changed}
premodLinksEnable={dirtySettings.premodLinksEnable}
premod={premod}
questionBoxIcon={dirtySettings.questionBoxIcon}
questionBoxEnable={dirtySettings.questionBoxEnable}
questionBoxContent={dirtySettings.questionBoxContent}
/>
client/coral-embed-stream/src/components/Stream.js
+1
View File
@@ -129,6 +129,7 @@ class Stream extends React.Component {
<QuestionBox
content={asset.settings.questionBoxContent}
enable={asset.settings.questionBoxEnable}
icon={asset.settings.questionBoxIcon}
/>
{!banned &&
temporarilySuspended &&
client/coral-embed-stream/src/containers/Stream.js
+1
View File
@@ -247,6 +247,7 @@ const fragments = {
premodLinksEnable
questionBoxEnable
questionBoxContent
questionBoxIcon
closeTimeout
closedMessage
charCountEnable
client/talk-plugin-questionbox/QuestionBox.css
+10 -1
View File
@@ -14,6 +14,15 @@
display: flex;
}
.icon {
z-index: 2;
top: 12px;
left: 12px;
position: absolute;
font-size: 33px;
color: #262626;
}
.iconBubble{
position: absolute;
top: 8px;
@@ -32,7 +41,7 @@
color: #262626;
}
.qbBox {
.qbIconContainer {
position: relative;
border: 0;
color: white;
client/talk-plugin-questionbox/QuestionBox.js
+13 -6
View File
@@ -5,13 +5,20 @@ import {Icon} from 'coral-ui';
import Slot from 'coral-framework/components/Slot';
const QuestionBox = ({content, enable}) => (
const QuestionBox = ({content, enable, icon = ''}) => (
<div className={cn(styles.qbInfo, {[styles.hidden]: !enable}, 'questionbox-info')}>
<div className={cn(styles.qbBox, 'questionbox-box')}>
<Icon name="chat_bubble" className={cn(styles.iconBubble)} />
<Icon name="person" className={cn(styles.iconPerson)} />
</div>
{
icon === 'default' ? (
<div className={cn(styles.qbIconContainer)}>
<Icon name="chat_bubble" className={cn(styles.iconBubble)} />
<Icon name="person" className={cn(styles.iconPerson)} />
</div>
) : (
<div className={cn(styles.qbIconContainer)}>
<Icon name={icon} className={cn(styles.icon)} />
</div>
)
}
<div className={cn(styles.qbContent, 'questionbox-content')}>
{content}
</div>
graph/typeDefs.graphql
+1
View File
@@ -545,6 +545,7 @@ type Settings {
premodLinksEnable: Boolean
questionBoxEnable: Boolean
questionBoxContent: String
questionBoxIcon: String
closeTimeout: Int
closedMessage: String
charCountEnable: Boolean
models/setting.js
+1 -1
View File
@@ -35,7 +35,7 @@ const SettingSchema = new Schema({
},
questionBoxIcon: {
type: String,
default: ''
default: 'default'
},
questionBoxContent: {
type: String,