Updated CSS

samples/react-office-add-in-save-email-to-sharepoint/.gitignore

@@ -9,9 +9,9 @@ node_modules
 # Build generated files
 dist
 lib
-solution
+#solution
 temp
-*.sppkg
+#*.sppkg
 
 # Coverage directory used by tools like istanbul
 coverage

samples/react-office-add-in-save-email-to-sharepoint/src/webparts/saveEmailToSharePoint/components/SaveEmailToSharePoint.module.scss

@@ -3,63 +3,32 @@
 .saveEmailToSharePoint {
   .container {
     @include ms-Grid;
-    max-width: 700px;
-    margin: 0px auto;
-    margin-left: 5px;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  .errMsg {
-    @include ms-Grid-col;
-    margin-top: 5px !important;
   }
 
+  .errMsg,
   .successMsg {
     @include ms-Grid-col;
     margin-top: 5px !important;
+    right: 2px;
   }
 
   .iconStyle {
-    @include ms-Grid-col;
-    @include ms-sm1;
-  }
-
-  .labelStyle {
-    @include ms-Grid-col;
-    @include ms-sm4;
-    margin-top: -4px;
+    margin-right: 8px;
   }
 
   .row {
-    @include ms-Grid-row;
-    @include ms-fontColor-white;
-    background-color: $ms-color-themeDark;
-    padding: 20px;
+    margin-left: 5px;
   }
 
   .column {
     @include ms-Grid-col;
+    padding-left: 0px;
     @include ms-lg10;
     @include ms-xl8;
     @include ms-xlPush2;
     @include ms-lgPush1;
   }
 
-  .title {
-    @include ms-font-xl;
-    @include ms-fontColor-white;
-  }
-
-  .subTitle {
-    @include ms-font-l;
-    @include ms-fontColor-white;
-  }
-
-  .description {
-    @include ms-font-l;
-    @include ms-fontColor-white;
-  }
-
   .button {
     // Our button
     text-decoration: none;
@@ -105,4 +74,8 @@
     margin-top: 5px;
     margin-left: 5px;
   }
+
+  .ms-Dropdown-caretDownWrapper {
+    right: 16px;
+  }
 }

samples/react-office-add-in-save-email-to-sharepoint/src/webparts/saveEmailToSharePoint/components/SaveEmailToSharePoint.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styles from './SaveEmailToSharePoint.module.scss';
 import { ISaveEmailToSharePointProps } from './ISaveEmailToSharePointProps';
 import { SearchResults } from "@pnp/sp/search";
-import { Icon, Dropdown, IDropdownOption, IDropdownStyles, PrimaryButton, Label, IDropdownProps, Link, MessageBar, MessageBarType } from 'office-ui-fabric-react';
+import { Icon, Dropdown, IDropdownOption, IDropdownStyles, PrimaryButton, Label, IDropdownProps, Link, MessageBar, MessageBarType, MessageBarButton } from 'office-ui-fabric-react';
 import Services from './Services/Services';
 import * as strings from 'SaveEmailToSharePointWebPartStrings';
 
@@ -29,7 +29,7 @@ export default class SaveEmailToSharePoint extends React.Component<ISaveEmailToS
       savedLink: '',
       rootURL: '',
       errMsg: ''
-    }
+    };
   }
   public componentWillMount() {
     this.getAllSites();
@@ -48,11 +48,13 @@ export default class SaveEmailToSharePoint extends React.Component<ISaveEmailToS
     this.services.saveFileToSP(this.state.selectedSite.key, this.state.selectedLibrary.key, filename, file).then((result) => {
       console.log(result.data.ServerRelativeUrl);
       this.setState({
-        savedLink: this.state.rootURL + result.data.ServerRelativeUrl + "?web=1"
+        savedLink: this.state.rootURL + result.data.ServerRelativeUrl + "?web=1",
+        errMsg:''
       });
     }).catch((err) => {
       this.setState({
-        errMsg: err.message
+        errMsg: this.parseErr(err.message),
+        savedLink:''
       });
     });
   }
@@ -75,10 +77,14 @@ export default class SaveEmailToSharePoint extends React.Component<ISaveEmailToS
       this.saveToLibrary(response);
     }).catch((err) => {
       this.setState({
-        errMsg: "Graph API error: " + err.message
+        errMsg: "Graph API error: " + this.parseErr(err.message),
+        savedLink:''
       });
     });
   }
+  public parseErr(msg:string){
+    return JSON.parse(msg.substring(msg.indexOf('"message"')+10,msg.length-2)).value;
+  }
   public OnSelectSite = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption) => {
     this.services.getAllDocumentLibary(item.key.toString()).then((libraries) => {
       if (libraries.length) {
@@ -94,8 +100,8 @@ export default class SaveEmailToSharePoint extends React.Component<ISaveEmailToS
       } else {
         this.setState({
           selectedSite: item,
-          savedLink:'',
-          errMsg:''
+          savedLink: '',
+          errMsg: ''
         });
       }
     });
@@ -109,7 +115,7 @@ export default class SaveEmailToSharePoint extends React.Component<ISaveEmailToS
   }
   public render(): React.ReactElement<ISaveEmailToSharePointProps> {
     return (
-      <div className={styles.container} >
+      <div className={styles.saveEmailToSharePoint} >
         <div className={styles.row}>
           {this.state.allSites ? <Dropdown
             label={strings.SiteLabel}
@@ -150,24 +156,27 @@ export default class SaveEmailToSharePoint extends React.Component<ISaveEmailToS
           {this.state.savedLink.length ?
             <MessageBar
               messageBarType={MessageBarType.success}
-              isMultiline={false}
+              isMultiline={true}
               onDismiss={null}
               className={styles.successMsg}
-              dismissButtonAriaLabel="Close">
-              <Link href={this.state.savedLink} target='_blank' className="ms-fadeIn500">
-                {strings.PreviewMessage}
-              </Link>
+              dismissButtonAriaLabel="Close"
+              actions={
+                <div>
+                  <MessageBarButton onClick={()=>window.open(this.state.savedLink,'_blank')}>OK</MessageBarButton>
+                </div>
+              }>
+                {strings.PreviewMessage.replace("{libName}", this.state.selectedLibrary.text)}
             </MessageBar>
             : null}
-         {this.state.errMsg.length? <MessageBar
+          {this.state.errMsg.length ? <MessageBar
             messageBarType={MessageBarType.error}
-            isMultiline={false}
+            isMultiline={true}
             onDismiss={null}
             className={styles.errMsg}
             dismissButtonAriaLabel="Close">
             {this.state.errMsg}
           </MessageBar>
-          :null}
+            : null}
         </div>
       </div>
     );
@@ -176,7 +185,7 @@ export default class SaveEmailToSharePoint extends React.Component<ISaveEmailToS
     return (
       <React.Fragment>
         <Icon iconName="DocLibrary" className={styles.iconStyle} />
-        <Label className={styles.labelStyle}>{props.label}</Label>
+        <span >{props.label}</span>
       </React.Fragment>
     );
   }
@@ -184,7 +193,7 @@ export default class SaveEmailToSharePoint extends React.Component<ISaveEmailToS
     return (
       <React.Fragment>
         <Icon iconName="Website" className={styles.iconStyle} />
-        <Label className={styles.labelStyle}>{props.label}</Label>
+        <span >{props.label}</span>
       </React.Fragment>
     );
   }

samples/react-office-add-in-save-email-to-sharepoint/src/webparts/saveEmailToSharePoint/loc/en-us.js

@@ -7,7 +7,7 @@ define([], function () {
     "SitePlaceHolder": "Select a site",
     "LibraryLabel": "Select a Library",
     "LibraryPlaceHolder": "Select a Library",
-    "PreviewMessage":"Select to preview the saved email",
+    "PreviewMessage":"The selected email is saved in the {libName} Library. Select 'OK' to preview the saved email.",
     "Save": "Save",
     "Cancel": "Cancel"
   }