honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated pic and small adjustments on the code.

This commit is contained in:
Vesa Juvonen 2016-10-28 15:46:57 +03:00
parent 354704dca4
commit 590fd08b0c
6 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
samples/react-bot-framework/assets/bot-framework-webpart-preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

13
samples/react-bot-framework/package.json
View File

@ -6,16 +6,17 @@
"node": ">=0.10.0" "node": ">=0.10.0"
}, },
"dependencies": { "dependencies": {
"@microsoft/sp-client-base": "~0.3.0", "@microsoft/sp-client-base": "~0.4.0",
"@microsoft/sp-client-preview": "~0.4.0", "@microsoft/sp-client-preview": "~0.5.0",
"office-ui-fabric-react": "0.36.0", "office-ui-fabric-react": "0.36.0",
"react": "0.14.8", "react": "0.14.8",
"react-dom": "0.14.8" "react-dom": "0.14.8",
"swagger-client": "^2.1.23"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/sp-build-web": "~0.6.0", "@microsoft/sp-build-web": "~0.7.0",
"@microsoft/sp-module-interfaces": "~0.3.0", "@microsoft/sp-module-interfaces": "~0.4.0",
"@microsoft/sp-webpart-workbench": "~0.4.0", "@microsoft/sp-webpart-workbench": "~0.5.0",
"gulp": "~3.9.1" "gulp": "~3.9.1"
}, },
"scripts": { "scripts": {

BIN
samples/react-bot-framework/screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

3
samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChat.module.scss
View File

@ -7,8 +7,7 @@
.chatHeader { .chatHeader {
padding:10px; padding:10px;
background-color: #c7e0f4; background-color: #c7e0f4;
color: #000; color: #fff;
font-weight: bold;
} }
.messagesRow { .messagesRow {

4
samples/react-bot-framework/src/webparts/botFrameworkChat/BotFrameworkChatWebPart.manifest.json
View File

@ -17,8 +17,8 @@
"placeholderText": "Your message", "placeholderText": "Your message",
"title": "Chat", "title": "Chat",
"directLineSecret": "", "directLineSecret": "",
"titleBarBackgroundColor": "c7e0f4", "titleBarBackgroundColor": "3C3C3C",
"botMessagesBackgroundColor": "c8c8c8", "botMessagesBackgroundColor": "f4f4f4",
"botMessagesForegroundColor": "000000", "botMessagesForegroundColor": "000000",
"userMessagesBackgroundColor": "c7e0f4", "userMessagesBackgroundColor": "c7e0f4",
"userMessagesForegroundColor": "000000" "userMessagesForegroundColor": "000000"

16
samples/react-bot-framework/src/webparts/botFrameworkChat/components/BotFrameworkChat.tsx
View File

@ -21,23 +21,24 @@ export default class BotFrameworkChat extends React.Component<IBotFrameworkChatP
return ( return (
<div className={styles.botFrameworkChat}> <div className={styles.botFrameworkChat}>
<div className={styles.container}> <div className={styles.container}>
<div className={css('ms-Grid-row ms-font-xl', styles.chatHeader) } style={{ backgroundColor: '#' + this.props.titleBarBackgroundColor }} > <div className={css('ms-Grid-row ms-font-xl', styles.chatHeader)} style={{ backgroundColor: '#' + this.props.titleBarBackgroundColor }} >
{ this.props.title } {this.props.title}
</div> </div>
<div className={css('ms-Grid-row', styles.messagesRow) } > <div className={css('ms-Grid-row', styles.messagesRow)} >
<div className='ms-Grid-col ms-u-sm12' ref='messageHistoryDiv' dangerouslySetInnerHTML={{ __html: this.getMessagesHtml() }}> <div className='ms-Grid-col ms-u-sm12' ref='messageHistoryDiv' dangerouslySetInnerHTML={{ __html: this.getMessagesHtml() }}>
</div> </div>
</div> </div>
<div className={css('ms-Grid-row') }> <div className={css('ms-Grid-row')}>
<TextField id='MessageBox' onKeyUp={ (e) => this.tbKeyUp(e) } onKeyDown={ (e) => this.tbKeyDown(e) } <TextField id='MessageBox' onKeyUp={(e) => this.tbKeyUp(e)} onKeyDown={(e) => this.tbKeyDown(e)}
value={this.currentMessageText} placeholder={ this.props.placeholderText } className={ css('ms-fontSize-m', styles.messageBox) } /> value={this.currentMessageText} placeholder={this.props.placeholderText} className={css('ms-fontSize-m', styles.messageBox)} />
</div> </div>
</div> </div>
</div> </div>
); );
} }
public componentDidMount(): void { public componentDidUpdate(prevProps: IBotFrameworkChatWebPartProps, prevState: {}, prevContext: any): void {
if (this.props.directLineSecret !== prevProps.directLineSecret) {
if (this.props.directLineSecret) { if (this.props.directLineSecret) {
var Swagger = require('swagger-client'); var Swagger = require('swagger-client');
var directLineSpec = require('./directline-swagger.json'); var directLineSpec = require('./directline-swagger.json');
@ -69,6 +70,7 @@ export default class BotFrameworkChat extends React.Component<IBotFrameworkChatP
this.printMessage = this.printMessage.bind(this); this.printMessage = this.printMessage.bind(this);
} }
} }
}
public getMessagesHtml() { public getMessagesHtml() {
return this.messagesHtml; return this.messagesHtml;