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

Added "Selected emoji background color" selector

This commit is contained in:
thejason40 2022-11-22 16:21:13 +00:00 committed by Hugo Bernier
parent 519a7bd9b6
commit 13a8bd9d02
3 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/IReactEmojiReactionRatingProps.ts
View File

@ -7,6 +7,7 @@ export interface IReactEmojiReactionRatingProps {
enableComments: boolean; enableComments: boolean;
enableCount: boolean; enableCount: boolean;
selectedColor: string; selectedColor: string;
selectedEmojiColor: string;
listName: string; listName: string;
displayMode: any; displayMode: any;
listMessage: string; listMessage: string;

2
samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/ReactEmojiReactionRating.module.scss
View File

@ -35,7 +35,7 @@
} }
.selectedEmoji { .selectedEmoji {
background-color: firebrick !important; /* background-color: #96d5de !important; */
border-radius: 14px !important; border-radius: 14px !important;
cursor: pointer !important; cursor: pointer !important;
} }

10
samples/react-emoji-ratings/src/webparts/reactEmojiReactionRating/components/ReactEmojiReactionRating.tsx
View File

@ -11,6 +11,8 @@ import Badge from '@material-ui/core/Badge/Badge';
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder"; import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react'; import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react';
export default class ReactEmojiReactionRating extends React.Component<IReactEmojiReactionRatingProps, IReactEmojiReactionRatingState> { export default class ReactEmojiReactionRating extends React.Component<IReactEmojiReactionRatingProps, IReactEmojiReactionRatingState> {
private _spService: spService = null; private _spService: spService = null;
private _message = null; private _message = null;
@ -356,6 +358,7 @@ public componentDidMount() {
} */ } */
return !(this.state.configLoaded) ? ( return !(this.state.configLoaded) ? (
<Placeholder iconName='Edit' <Placeholder iconName='Edit'
iconText='Configure your web part' iconText='Configure your web part'
description='Please configure the web part.' description='Please configure the web part.'
@ -363,9 +366,12 @@ public componentDidMount() {
hideButton={this.props.displayMode === DisplayMode.Read} hideButton={this.props.displayMode === DisplayMode.Read}
onConfigure={this._onConfigure} /> onConfigure={this._onConfigure} />
) : (this.props.listMessage ? ( ) : (this.props.listMessage ? (
<div>{this.props.listMessage}</div> <div>{this.props.listMessage}</div>
) : ) :
( (
<div className={styles.reactEmojiReactionRating} style={{ <div className={styles.reactEmojiReactionRating} style={{
backgroundColor: `${this.props.selectedColor backgroundColor: `${this.props.selectedColor
}` }`
@ -386,6 +392,7 @@ public componentDidMount() {
<Badge color="secondary" overlap="circular" badgeContent={this.state[tabIndex]}> <Badge color="secondary" overlap="circular" badgeContent={this.state[tabIndex]}>
<img src={ratingItem.ImageUrl} <img src={ratingItem.ImageUrl}
className={this.state.selectedRatingIndex == tabIndex ? styles.selectedEmoji : styles.stackImage} className={this.state.selectedRatingIndex == tabIndex ? styles.selectedEmoji : styles.stackImage}
style={this.state.selectedRatingIndex == tabIndex ? {backgroundColor: `${this.props.selectedEmojiColor}`} : {backgroundColor: 'rgba(0, 0, 0, 0)'}}
title={ratingItem.Title} title={ratingItem.Title}
tabIndex={tabIndex} tabIndex={tabIndex}
id={tabIndex.toString()} id={tabIndex.toString()}
@ -402,7 +409,8 @@ public componentDidMount() {
tabIndex={tabIndex} tabIndex={tabIndex}
id={tabIndex.toString()} id={tabIndex.toString()}
alt={ratingItem.Title} alt={ratingItem.Title}
onClick={this.selectedRating} /> onClick={this.selectedRating}
/>
<Label className={styles.labelClass}>{ratingItem.Title}</Label> <Label className={styles.labelClass}>{ratingItem.Title}</Label>
</> </>
) )