Added icon dropdown to Mail To Wizard

solutions/ColumnFormatter/CHANGELOG.md

@@ -1,5 +1,5 @@
 # Releases
-## [1.2.0] - 2018-03-07
+## [1.2.0] - 2018-03-15
 ### Added
 - French (fr-fr) localization (thanks [PooLP](https://github.com/PooLP)!)
   - Added targeted styling for fr-fr locale to accomodate long strings
@@ -19,6 +19,7 @@
 - Moved Editor Theme options to property pane
   - Cleans up UI
   - Ensures theme selection is remembered
+- Added Icon dropdown to the Mail To Wizard
 
 ### Removed
 - Dependency on sp-pnp-js (through CDN)

solutions/ColumnFormatter/src/webparts/columnFormatter/components/ColumnFormatterWelcome.tsx

@@ -95,7 +95,7 @@ class ColumnFormatterWelcome_ extends React.Component<IColumnFormatterWelcomePro
     //this.props.launchEditor(undefined,columnTypes.text);
     //this.props.launchEditor('Data Bars', columnTypes.number);
     //this.props.launchEditor('Severity', columnTypes.text);
-    this.props.launchEditor('Start Flow', columnTypes.text);
+    //this.props.launchEditor('Start Flow', columnTypes.text);
 
     return (
       <div className={styles.welcome} style={{height: this.props.uiHeight + 'px'}}>

solutions/ColumnFormatter/src/webparts/columnFormatter/components/Wizards/Controls/IconsDropdown.tsx

@@ -8,7 +8,7 @@ import { DropdownSort } from '../../../helpers/Utilities';
 export interface IIconsDropdownProps {
 	label: string;
 	selectedKey?: string;
-	color: string;
+	color?: string;
 	onChanged: (color:string) => void;
 }
 
@@ -1433,7 +1433,7 @@ export class IconsDropdown extends React.Component<IIconsDropdownProps, IIconsDr
 		  return (
 			<div>
 				<Icon
-				 style={{marginRight:'6px',color:this.props.color}}
+				 style={{marginRight:'6px',color:this.props.color?this.props.color:'inherit'}}
 				 iconName={option.key.toString()}
 				 aria-hidden={true}
 				 title={option.text}/>

solutions/ColumnFormatter/src/webparts/columnFormatter/components/Wizards/WizardMailTo.tsx

@@ -7,6 +7,7 @@ import * as React from 'react';
 import { columnTypes, IDataColumn, IPersonFieldValue, IUserContext } from '../../state/State';
 import { generatePerson, generateRowValue } from '../../state/ValueGeneration';
 import styles from '../ColumnFormatter.module.scss';
+import { IconsDropdown } from './Controls/IconsDropdown';
 import { IWizard, standardWizardStartingColumns } from './WizardCommon';
 
 /*
@@ -20,7 +21,8 @@ export interface IWizardMailToPanelProps {
 	body?: string;
 	bcc?: string;
 	cc?: string;
-	updateValues:(displayValue:string, iconLink:boolean, subject:string, body:string, cc:string, bcc:string) => void;
+	iconName: string;
+	updateValues:(displayValue:string, iconLink:boolean, subject:string, body:string, cc:string, bcc:string, iconName:string) => void;
 }
 
 export interface IWizardMailToPanelState {
@@ -30,6 +32,7 @@ export interface IWizardMailToPanelState {
 	body: string;
 	bcc: string;
 	cc: string;
+	iconName: string;
 }
 
 export class WizardMailToPanel extends React.Component<IWizardMailToPanelProps, IWizardMailToPanelState> {
@@ -43,7 +46,8 @@ export class WizardMailToPanel extends React.Component<IWizardMailToPanelProps,
 			subject: props.subject || '',
 			body: props.body || '',
 			bcc: props.bcc || '',
-			cc: props.cc || ''
+			cc: props.cc || '',
+			iconName: props.iconName
 		};
 	}
 
@@ -59,7 +63,7 @@ export class WizardMailToPanel extends React.Component<IWizardMailToPanelProps,
 				 label={strings.WizardMailToBody + ':'}
 				 value={this.state.body}
 				 multiline
-				 rows={4}
+				 rows={3}
 				 onChanged={this.onBodyChanged}/>
 				<TextField
 				 label={strings.WizardMailToCC + ':'}
@@ -77,6 +81,10 @@ export class WizardMailToPanel extends React.Component<IWizardMailToPanelProps,
 				 label={strings.WizardMailToDisplayValue + ':'}
 				 value={this.state.displayValue}
 				 onChanged={this.onDisplayValueChanged}/>
+				<IconsDropdown
+				 label={strings.WizardMailToIconName}
+				 onChanged={this.onIconNameChanged}
+				 selectedKey={this.state.iconName}/>
 				<Toggle
 				 checked={this.state.iconLink}
 				 onChanged={this.onIconLinkChanged}
@@ -92,47 +100,55 @@ export class WizardMailToPanel extends React.Component<IWizardMailToPanelProps,
 		this.setState({
 			subject: text
 		});
-		this.props.updateValues(this.state.displayValue, this.state.iconLink, text, this.state.body, this.state.cc, this.state.bcc);
+		this.props.updateValues(this.state.displayValue, this.state.iconLink, text, this.state.body, this.state.cc, this.state.bcc, this.state.iconName);
 	}
 
 	@autobind
 	private onBodyChanged(text: string) {
 		this.setState({
 			body: text
 		});
-		this.props.updateValues(this.state.displayValue, this.state.iconLink, this.state.subject, text, this.state.cc, this.state.bcc);
+		this.props.updateValues(this.state.displayValue, this.state.iconLink, this.state.subject, text, this.state.cc, this.state.bcc, this.state.iconName);
 	}
 
 	@autobind
 	private onCCChanged(text: string) {
 		this.setState({
 			cc: text
 		});
-		this.props.updateValues(this.state.displayValue, this.state.iconLink, this.state.subject, this.state.body, text, this.state.bcc);
+		this.props.updateValues(this.state.displayValue, this.state.iconLink, this.state.subject, this.state.body, text, this.state.bcc, this.state.iconName);
 	}
 
 	@autobind
 	private onBCCChanged(text: string) {
 		this.setState({
 			bcc: text
 		});
-		this.props.updateValues(this.state.displayValue, this.state.iconLink, this.state.subject, this.state.body, this.state.cc, text);
+		this.props.updateValues(this.state.displayValue, this.state.iconLink, this.state.subject, this.state.body, this.state.cc, text, this.state.iconName);
 	}
 
 	@autobind
 	private onDisplayValueChanged(text: string) {
 		this.setState({
 			displayValue: text
 		});
-		this.props.updateValues(text, this.state.iconLink, this.state.subject, this.state.body, this.state.cc, this.state.bcc);
+		this.props.updateValues(text, this.state.iconLink, this.state.subject, this.state.body, this.state.cc, this.state.bcc, this.state.iconName);
+	}
+
+	@autobind
+	private onIconNameChanged(text: string) {
+		this.setState({
+			iconName: text
+		});
+		this.props.updateValues(this.state.displayValue, this.state.iconLink, this.state.subject, this.state.body, this.state.cc, this.state.bcc, text);
 	}
 
 	@autobind
 	private onIconLinkChanged(checked: boolean): void {
 		this.setState({ 
 			iconLink: checked!
 		});
-		this.props.updateValues(this.state.displayValue, checked!, this.state.subject, this.state.body, this.state.cc, this.state.bcc);
+		this.props.updateValues(this.state.displayValue, checked!, this.state.subject, this.state.body, this.state.cc, this.state.bcc, this.state.iconName);
 	}
 }
 
@@ -141,7 +157,7 @@ export class WizardMailToPanel extends React.Component<IWizardMailToPanelProps,
 	Wizard Definition
 */
 
-const calculateCode = (colType:columnTypes, displayValue:string, iconLink:boolean, subject:string, body:string, cc:string, bcc:string): string => {
+const calculateCode = (colType:columnTypes, displayValue:string, iconLink:boolean, subject:string, body:string, cc:string, bcc:string, iconName:string): string => {
 	let toAddress = '@currentField.email';
 	if(colType == columnTypes.link) {
 		toAddress = '@currentField';
@@ -194,7 +210,7 @@ const calculateCode = (colType:columnTypes, displayValue:string, iconLink:boolea
 	]);
 	if(iconLink) {
 		children.push(...[
-			'        "iconName": "Mail",',
+			'        "iconName": "' + iconName + '",',
 			'        "class": "sp-field-quickActions"',
 			'      }',
 			'    }',
@@ -256,7 +272,7 @@ export const WizardMailTo: IWizard = {
 		];
 	},
 	startingCode: (colType:columnTypes): string => {
-		return calculateCode(colType, (colType == columnTypes.person ? '@currentField.title' : 'Send Mail'), true, 'Hello There!', 'Yo, what up?\r\nWelp, talk to you later!','','');
+		return calculateCode(colType, (colType == columnTypes.person ? '@currentField.title' : 'Send Mail'), true, 'Hello There!', 'Yo, what up?\r\nWelp, talk to you later!', '', '', 'Mail');
 	},
 	onWizardRender: (updateEditorString:(editorString:string) => void, colType:columnTypes): JSX.Element => {
 		return (
@@ -265,8 +281,9 @@ export const WizardMailTo: IWizard = {
 			 iconLink={true}
 			 subject='Hello There!'
 			 body='Yo, what up?\r\nWelp, talk to you later!'
-			 updateValues={(displayValue:string, iconLink:boolean, subject:string, body:string, cc:string, bcc:string) => {
-				updateEditorString(calculateCode(colType, displayValue, iconLink, subject, body, cc, bcc));
+			 iconName='Mail'
+			 updateValues={(displayValue:string, iconLink:boolean, subject:string, body:string, cc:string, bcc:string, iconName:string) => {
+				updateEditorString(calculateCode(colType, displayValue, iconLink, subject, body, cc, bcc, iconName));
 			 }}/>
 		);
 	}

solutions/ColumnFormatter/src/webparts/columnFormatter/loc/en-us.js

@@ -350,6 +350,7 @@ define([], function() {
     WizardMailToBody: 'Body',
     WizardMailToBCC: 'bcc',
     WizardMailToCC: 'cc',
+    WizardMailToIconName: 'Icon',
     WizardMailToIconLink: 'Icon Link',
     WizardMailToTextLink: 'Text Link',
 

solutions/ColumnFormatter/src/webparts/columnFormatter/loc/mystrings.d.ts

@@ -349,6 +349,7 @@ declare interface IColumnFormatterWebPartStrings {
   WizardMailToBody: string;
   WizardMailToBCC: string;
   WizardMailToCC: string;
+  WizardMailToIconName: string;
   WizardMailToIconLink: string;
   WizardMailToTextLink: string;