Skip to content

Commit 0fb0fa7

Browse files
authored
Merge pull request #385 from eweintraub/custom-color-swatch
Custom color swatch in Rich Text Control
2 parents fcadf4f + 1d76beb commit 0fb0fa7

9 files changed

+36
-9
lines changed

src/controls/richText/RichText.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
107107

108108
constructor(props: IRichTextProps) {
109109
super(props);
110-
111110
telemetry.track('ReactRichText', {
112111
className: !!props.className
113112
});
@@ -579,7 +578,8 @@ id="DropDownStyles"
579578
editor={this.getEditor()}
580579
isOpen={this.state.morePaneVisible}
581580
onClose={this.handleClosePanel}
582-
onLink={this.showInsertLinkDialog} />
581+
onLink={this.showInsertLinkDialog}
582+
customColors={this.props.customColors}/>
583583

584584
{
585585
this.renderLinkDialog()

src/controls/richText/RichText.types.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ISwatchColor } from './SwatchColorPickerGroup.types';
12
export interface IRichTextProps {
23
/**
34
* CSS class to apply to the rich text editor.
@@ -27,6 +28,11 @@ export interface IRichTextProps {
2728
*/
2829
styleOptions?: StyleOptions;
2930

31+
/**
32+
* Additional colors to include in swatch
33+
*/
34+
customColors?: ISwatchColor[];
35+
3036
/**
3137
* Callback issued when the rich text changes.
3238
* Returns the text that will be inserted in the rich text control.

src/controls/richText/RichTextPropertyPane.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -317,14 +317,19 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
317317
private renderColorStylesGroup = (): JSX.Element => {
318318
const color: string = this.state.formats.color || ThemeColorHelper.GetThemeColor(styles.NeutralPrimary);
319319
const backgroundColor: string = this.state.formats.background || "rgba(0, 0, 0, 0)";
320+
321+
/**
322+
* Add custom colors if passed as a property
323+
*/
324+
let fontColorGroups = ["themeColors","standardColors"];
325+
if(this.props.customColors) fontColorGroups.push('customColors');
326+
320327
return (
321328
<div className={styles.propertyPaneGroupField}>
322329
<div className="ms-CustomFieldHost">
323330
<div className={styles.controlsInOneRow}>
324-
<RteColorPicker colorPickerGroups={[
325-
"themeColors",
326-
"standardColors"
327-
]}
331+
<RteColorPicker colorPickerGroups={fontColorGroups} // changed to variable
332+
customColors={this.props.customColors}
328333
buttonLabel={strings.FontColorLabel}
329334
id="fontColor-propertyPaneButton"
330335
defaultButtonLabel={strings.AutomaticFontColor}

src/controls/richText/RichTextPropertyPane.types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { Quill } from 'react-quill';
2+
import { ISwatchColor } from './SwatchColorPickerGroup.types';
23

34
export interface IRichTextPropertyPaneProps {
45
className?: string;
56
editor: Quill;
67
isOpen: boolean;
8+
customColors?: ISwatchColor[];
79
onClose: () => void;
810
onLink: () => void;
911
}

src/controls/richText/RteColorPicker.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
2626
*/
2727
public render(): React.ReactElement<IRteColorPickerProps> {
2828
const { buttonLabel, defaultButtonLabel, fillThemeColor, id, previewColor } = this.props;
29-
3029
return (
3130
<div>
3231
<div ref={(ref) => this.wrapperRef = ref}>
@@ -36,7 +35,8 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
3635
<DefaultButton className={styles.colorPickerButton}
3736
aria-describedby={id}
3837
onClick={() => this.handleColorChanged(previewColor)}>
39-
<svg className={`${styles.previewSvg} ${previewColor === "rgba(0, 0, 0, 0)" ? styles.border : ""}`}
38+
{/* Added border to white */}
39+
<svg className={`${styles.previewSvg} ${(previewColor === "rgba(0, 0, 0, 0)" || previewColor === "#ffffff") ? styles.border : ""}`}
4040
fill={previewColor}
4141
viewBox="0 0 20 20">
4242
<rect className={styles.previewRectangle}
@@ -110,6 +110,12 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
110110
case "highlightColors":
111111
groupName = strings.HighlightColorsGroupName;
112112
break;
113+
case "standardColors":
114+
groupName = strings.StandardColorsGroupName;
115+
break;
116+
case "customColors":
117+
groupName = strings.CustomColorsGroupName;
118+
break;
113119
default:
114120
groupName = strings.HighlightColorsGroupName;
115121
break;
@@ -241,6 +247,9 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
241247
}
242248
];
243249
break;
250+
case 'customColors':
251+
groupColors = this.props.customColors;
252+
break;
244253
default:
245254
groupColors = [
246255
{

src/controls/richText/RteColorPicker.types.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ISwatchColor } from './SwatchColorPickerGroup.types';
2+
13
export interface IRteColorPickerProps {
24
id: string;
35
buttonLabel: string;
@@ -8,6 +10,7 @@ export interface IRteColorPickerProps {
810
previewColor: string;
911
selectedColor: string;
1012
switchToDefaultColor: () => void;
13+
customColors?: ISwatchColor[];
1114
}
1215

1316
export interface IRteColorPickerState {

src/controls/richText/SwatchColorPickerGroup.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { chunk } from '@microsoft/sp-lodash-subset';
99
export default class SwatchColorPickerGroup extends React.Component<ISwatchColorPickerGroupProps, ISwatchColorPickerGroupState> {
1010
public render(): React.ReactElement<ISwatchColorPickerGroupProps> {
1111
const colorRows = chunk(this.props.groupColors, 5);
12-
1312
return (
1413
<div>
1514
<Label htmlFor={this.props.groupText}

src/loc/en-us.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ define([], () => {
128128
ThemeColorsGroupName: "Theme colors",
129129
HighlightColorsGroupName: "Highlight colors",
130130
StandardColorsGroupName: "Standard colors",
131+
CustomColorsGroupName: "Custom Colors",
131132
ThemeColorDarker: "Theme darker",
132133
ThemeColorDark: "Theme dark",
133134
ThemeColorDarkAlt: "Theme dark alternate",

src/loc/mystrings.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ declare interface IControlStrings {
100100
ThemeColorsGroupName: string;
101101
HighlightColorsGroupName: string;
102102
StandardColorsGroupName: string;
103+
CustomColorsGroupName: string;
104+
ColorsGroupName: string;
103105
ThemeColorDarker: string;
104106
ThemeColorDark: string;
105107
ThemeColorDarkAlt: string;

0 commit comments

Comments
 (0)