Merge pull request #31 from SPShire/master

Added layouts to Hub Links, theming capability to web parts, and fixed open in new window
pnp · Sep 24, 2018 · a18db4f · a18db4f
2 parents 5f5d811 + 8e2819f
commit a18db4f
Show file tree

Hide file tree

Showing 62 changed files with 1,801 additions and 393 deletions.
diff --git a/solutions/LinksAndHandlebarsTemplate/config/config.json b/solutions/LinksAndHandlebarsTemplate/config/config.json
@@ -1,51 +1,60 @@
 {
-    "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
-    "version": "2.0",
-    "bundles": {
-        "box-button-web-part-bundle": {
-            "components": [{
-                "entrypoint": "./lib/webparts/boxButtonWebPart/BoxButtonWebPartWebPart.js",
-                "manifest": "./src/webparts/boxButtonWebPart/BoxButtonWebPartWebPart.manifest.json"
-            }]
-        },
-        "featured-content-web-part-bundle": {
-            "components": [{
-                "entrypoint": "./lib/webparts/featuredContentWebPart/FeaturedContentWebPartWebPart.js",
-                "manifest": "./src/webparts/featuredContentWebPart/FeaturedContentWebPartWebPart.manifest.json"
-            }]
-        },
-        "hub-links-bundle": {
-            "components": [{
-                "entrypoint": "./lib/webparts/hubLinks/HubLinksWebPart.js",
-                "manifest": "./src/webparts/hubLinks/HubLinksWebPart.manifest.json"
-            }]
-        },
-        "handlebar-template-display-bundle": {
-            "components": [{
-                "entrypoint": "./lib/webparts/handlebarTemplateDisplay/HandlebarTemplateDisplayWebPart.js",
-                "manifest": "./src/webparts/handlebarTemplateDisplay/HandlebarTemplateDisplayWebPart.manifest.json"
-            }]
+  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "box-button-web-part-bundle": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/boxButtonWebPart/BoxButtonWebPartWebPart.js",
+          "manifest": "./src/webparts/boxButtonWebPart/BoxButtonWebPartWebPart.manifest.json"
         }
+      ]
     },
-    "localizedResources": {
-        "boxButtonWebPartStrings": "lib/webparts/boxButtonWebPart/loc/{locale}.js",
-        "featuredContentWebPartStrings": "lib/webparts/featuredContentWebPart/loc/{locale}.js",
-        "propertyFieldStrings": "lib/propertyPane/loc/{locale}.js",
-        "hubLinksStrings": "lib/webparts/hubLinks/loc/{locale}.js",
-        "handlebarTemplateDisplayStrings": "lib/webparts/handlebarTemplateDisplay/loc/{locale}.js"
+    "featured-content-web-part-bundle": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/featuredContentWebPart/FeaturedContentWebPartWebPart.js",
+          "manifest": "./src/webparts/featuredContentWebPart/FeaturedContentWebPartWebPart.manifest.json"
+        }
+      ]
+    },
+    "hub-links-bundle": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/hubLinks/HubLinksWebPart.js",
+          "manifest": "./src/webparts/hubLinks/HubLinksWebPart.manifest.json"
+        }
+      ]
     },
-    "externals": {
-        "handlebars": {
-            "path": "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js",
-            "globalName": "handlebars"
-        },
-        "file-saver": {
-            "path": "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js",
-            "globalName": "file-saver"
-        },
-        "moment": {
-            "path": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js",
-            "globalName": "moment"
+    "handlebar-template-display-bundle": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/handlebarTemplateDisplay/HandlebarTemplateDisplayWebPart.js",
+          "manifest": "./src/webparts/handlebarTemplateDisplay/HandlebarTemplateDisplayWebPart.manifest.json"
         }
+      ]
+    }
+  },
+  "localizedResources": {
+    "boxButtonWebPartStrings": "lib/webparts/boxButtonWebPart/loc/{locale}.js",
+    "featuredContentWebPartStrings": "lib/webparts/featuredContentWebPart/loc/{locale}.js",
+    "propertyFieldStrings": "lib/propertyPane/loc/{locale}.js",
+    "hubLinksStrings": "lib/webparts/hubLinks/loc/{locale}.js",
+    "handlebarTemplateDisplayStrings": "lib/webparts/handlebarTemplateDisplay/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+  },
+  "externals": {
+    "handlebars": {
+      "path": "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js",
+      "globalName": "handlebars"
+    },
+    "file-saver": {
+      "path": "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js",
+      "globalName": "file-saver"
+    },
+    "moment": {
+      "path": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js",
+      "globalName": "moment"
     }
+  }
 }
diff --git a/solutions/LinksAndHandlebarsTemplate/config/package-solution.json b/solutions/LinksAndHandlebarsTemplate/config/package-solution.json
@@ -3,7 +3,7 @@
     "solution": {
         "name": "Sample Hub Web Parts",
         "id": "520c2090-be2a-4538-b2b0-fd3eeca0cea0",
-        "version": "2.2.3.0",
+        "version": "2.2.5.0",
         "skipFeatureDeployment": true,
         "includeClientSideAssets": true
     },

diff --git a/solutions/LinksAndHandlebarsTemplate/hub-web-parts.sppkg b/solutions/LinksAndHandlebarsTemplate/hub-web-parts.sppkg
diff --git a/solutions/LinksAndHandlebarsTemplate/package.json b/solutions/LinksAndHandlebarsTemplate/package.json
@@ -12,6 +12,7 @@
         "@microsoft/sp-lodash-subset": "~1.5.0",
         "@microsoft/sp-office-ui-fabric-core": "~1.5.0",
         "@microsoft/sp-webpart-base": "~1.5.0",
+        "@pnp/spfx-property-controls": "^1.9.0",
         "@types/react": "15.6.6",
         "@types/react-dom": "15.5.6",
         "@types/webpack-env": ">=1.12.1 <1.14.0",

diff --git a/...ropertyPane/propertyFieldCamlQueryFieldMapping/PropertyFieldCamlQueryFieldMappingHost.tsx b/...ropertyPane/propertyFieldCamlQueryFieldMapping/PropertyFieldCamlQueryFieldMappingHost.tsx
@@ -213,7 +213,7 @@ export default class PropertyFieldCamlQueryFieldMappingHost extends React.Compon
         response.map((field: ISPField) => {
           const option = {
             internalName: field.InternalName,
-            name: field.Title,
+            name: field.Title+" - "+field.InternalName,
             kind: this.getKindForType(field.TypeAsString)
           };
           fields.Add(option);

diff --git a/...tions/LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/BoxButtonWebPartWebPart.ts b/...tions/LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/BoxButtonWebPartWebPart.ts
@@ -33,7 +33,6 @@ export default class BoxButtonWebPartWebPart extends BaseClientSideWebPart<IBoxB
     super();
 
     SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
-    SPComponentLoader.loadScript('https://thehubcdnvz.azureedge.net/hub-web-parts/polyfill.closest.min.js');
   }
 
   public onInit(): Promise<void> {
@@ -74,13 +73,13 @@ export default class BoxButtonWebPartWebPart extends BaseClientSideWebPart<IBoxB
     if(!this.properties.data && this.properties.name){
       this.properties.data = [{
         name: this.properties.name,
-        isBlue: this.properties.isBlue,
+        isBlue: this.properties.isThemed,
         icon: this.properties.fontAwesomeIcon,
         url: this.properties.url,
         openNew: this.properties.newTab
       }];
       this.properties.name = undefined;
-      this.properties.isBlue = undefined;
+      this.properties.isThemed = undefined;
       this.properties.fontAwesomeIcon = undefined;
       this.properties.url = undefined;
       this.properties.newTab = undefined;
@@ -94,7 +93,7 @@ export default class BoxButtonWebPartWebPart extends BaseClientSideWebPart<IBoxB
       BoxButtonWebPart,
       {
         name: this.properties.name,
-        isBlue: this.properties.isBlue,
+        isThemed: this.properties.isThemed,
         fontAwesomeIcon: this.properties.fontAwesomeIcon,
         url: this.properties.url,
         newTab: this.properties.newTab,

diff --git a/...LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/IBoxButtonWebPartWebPartProps.ts b/...LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/IBoxButtonWebPartWebPartProps.ts
@@ -4,7 +4,7 @@ export interface IBoxButtonWebPartWebPartProps {
   name:string;
   fontAwesomeIcon:string;
   url: string;
-  isBlue: boolean;
+  isThemed: boolean;
   newTab: boolean;
   data: IBoxButton[];
   title:string;

diff --git a/...dHandlebarsTemplate/src/webparts/boxButtonWebPart/components/BoxButtonWebPart.module.scss b/...dHandlebarsTemplate/src/webparts/boxButtonWebPart/components/BoxButtonWebPart.module.scss
@@ -18,11 +18,11 @@
         font-weight: inherit;
         line-height: inherit;
         text-align: inherit;
-        color: #333333;
+        color: "[theme:primaryText, default: #000000]";
         height: 40px;
     }
     & .view {
-        color: #333333;
+        color: "[theme:primaryText, default: #000000]";
     }
 }
 
@@ -35,19 +35,22 @@
         margin: 0;
     }
     & .box-button {
-        border: 1px solid #006699;
-        color: #006699;
-        background-color: #FFFFFF;
+        border: 1px solid "[theme: primaryBackground, default: #FFFFFF]";
+        color: "[theme: themePrimary, default: #007cc5]";
+        background-color: "[theme: primaryBackground, default: #FFFFFF]";
         padding: 10px 20px;
         text-align: center;
         text-transform: uppercase;
         position: relative;
         cursor: pointer;
         font-weight: bold;
         font-size: 18px;
-        &.blue {
-            color: #FFFFFF;
-            background-color: #006699;
+        & a {
+            text-decoration: none;
+        }
+        &.themed {
+            color: "[theme: primaryBackground, default: #FFFFFF]";
+            background-color: "[theme: themePrimary, default: #007cc5]";
         }
         & i {
             margin-right: 10px;
@@ -69,7 +72,7 @@
             line-height: 100%;
             vertical-align: middle;
             color: #FFFFFF;
-            background-color: #006699;
+            background-color: "[theme: themePrimary, default: #007cc5]";
         }
     }
     &:hover {
@@ -133,13 +136,13 @@
 
 @media (max-width: 992px) {
     .box-button {
-        width: calc(100% - 20px);
+        width: calc(100% - 40px);
     }
 }
 
 @media (max-width: 767px) {
     .box-button {
         display: block;
-        width: 100%;
+        width: calc(100% - 40px);
     }
 }
diff --git a/.../LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/components/BoxButtonWebPart.tsx b/.../LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/components/BoxButtonWebPart.tsx
@@ -2,9 +2,7 @@ import * as React from 'react';
 
 import {
   DefaultButton,
-  PrimaryButton,
-  CommandButton,
-  IButtonProps
+  CommandButton
 } from 'office-ui-fabric-react/lib/Button';
 import { IBoxButtonWebPartProps } from './IBoxButtonWebPartProps';
 import { IBoxButtonState } from './IBoxButtonState';
@@ -17,15 +15,10 @@ import ElemUtil from "../../../utilities/element/elemUtil";
 
 const urlField = "URL";
 const iconField = "Font Awesome Icon";
-const isBlueField = "Has Blue Background";
+const isThemedField = "Has Blue Background";
 const openNewTabField = "Open Link in New Tab";
 
 export default class BoxButtonWebPart extends React.Component<IBoxButtonWebPartProps,IBoxButtonState> {
-
-  constructor(){
-    super();
-  }
-
   private linkPickerPanel: LinkPickerPanel;
 
   private _dragElement : any;
@@ -189,12 +182,22 @@ export default class BoxButtonWebPart extends React.Component<IBoxButtonWebPartP
   public renderBasicDefaultLayout(item: IBoxButton): JSX.Element{
     return(
       <div className={styles["box-link"]} role="link" id={"item-"+this.props.data.indexOf(item)} key={"item-"+this.props.data.indexOf(item)} draggable={this.props.isEdit} onDragStart={this.startDrag.bind(this)} onMouseDown={this.mouseDragDown.bind(this)} onDragEnter={this.moveItem.bind(this)} onDragEnd={this.endDrag.bind(this)} data-index={this.props.data.indexOf(item)}>
-        <a href={item.url} target={item.openNew ? "_blank" : ""}>
-          <div className={styles["box-button"]+" "+(item.isBlue ? styles["blue"] : "")+" "+(this.props.isEdit ? styles["edit"] : "")}>
-            <i className={item.icon ? "fa "+item.icon : ""}></i>
-            {item.name}
-          </div>
-        </a>
+        {item.openNew &&
+          <a href={item.url} target="blank" data-interception="off">
+            <div className={styles["box-button"]+" "+(item.isBlue ? styles["themed"] : "")+" "+(this.props.isEdit ? styles["edit"] : "")}>
+              <i className={item.icon ? "fa "+item.icon : ""}></i>
+              {item.name}
+            </div>
+          </a>
+        }
+        {!item.openNew &&
+          <a href={item.url}>
+            <div className={styles["box-button"]+" "+(item.isBlue ? styles["themed"] : "")+" "+(this.props.isEdit ? styles["edit"] : "")}>
+              <i className={item.icon ? "fa "+item.icon : ""}></i>
+              {item.name}
+            </div>
+          </a>
+        }
         {this.props.isEdit && 
           <div className={styles["edit-controls"]}>
               <DefaultButton iconProps={{iconName:"Clear"}} onClick={this.deleteBox.bind(this)}/>
@@ -223,12 +226,22 @@ export default class BoxButtonWebPart extends React.Component<IBoxButtonWebPartP
   public renderAdvancedDefaultLayout(item: any): JSX.Element{
     return(
       <div className={styles["box-link"]} role="link" key={"item-"+this.props.links.indexOf(item)}>
-        <a href={item[urlField]} target={item[openNewTabField] ? "_blank" : ""}>
-          <div className={styles["box-button"]+" "+(item[isBlueField] ? styles["blue"] : "")}>
-            <i className={item[iconField] ? "fa "+item[iconField] : ""}></i>
-            {item[urlField+"_text"]}
-          </div>
-        </a>   
+        {item[openNewTabField] &&
+          <a href={item[urlField]} target="blank" data-interception="off">
+            <div className={styles["box-button"]+" "+(item[isThemedField] ? styles["themed"] : "")}>
+              <i className={item[iconField] ? "fa "+item[iconField] : ""}></i>
+              {item[urlField+"_text"]}
+            </div>
+          </a>
+        }
+        {!item[openNewTabField] &&
+          <a href={item[urlField]}>
+            <div className={styles["box-button"]+" "+(item[isThemedField] ? styles["themed"] : "")}>
+              <i className={item[iconField] ? "fa "+item[iconField] : ""}></i>
+              {item[urlField+"_text"]}
+            </div>
+          </a>
+        }
       </div>
     );
   }

diff --git a/...ns/LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/components/IBoxButtonState.ts b/...ns/LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/components/IBoxButtonState.ts
@@ -1,3 +1,2 @@
 export interface IBoxButtonState{
-
 }
diff --git a/...sAndHandlebarsTemplate/src/webparts/boxButtonWebPart/components/IBoxButtonWebPartProps.ts b/...sAndHandlebarsTemplate/src/webparts/boxButtonWebPart/components/IBoxButtonWebPartProps.ts
@@ -5,7 +5,7 @@ export interface IBoxButtonWebPartProps {
   name:string;
   fontAwesomeIcon:string;
   url: string;
-  isBlue:boolean;
+  isThemed:boolean;
   newTab:boolean;
   data: IBoxButton[];
   isEdit: boolean;

diff --git a/solutions/LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/loc/en-us.js b/solutions/LinksAndHandlebarsTemplate/src/webparts/boxButtonWebPart/loc/en-us.js
@@ -3,12 +3,12 @@ define([], function() {
         "PropertyPaneBaseDescription": "There are no web part level properties for this web part.",
         "PropertyGroupName": "Properties",
         "NameFieldLabel": "Display Text",
-        "ColorFieldLabel": "Blue or White Button?",
+        "ColorFieldLabel": "Themed or White Button?",
         "UrlFieldLabel": "Link URL",
         "IconFieldLabel": "Font Awesome Icon Class",
         "NewTabFieldLabel": "Open Link in New Tab",
         "WhiteColorLabel": "White",
-        "BlueColorLabel": "Blue",
+        "ThemedColorLabel": "Themed",
         "TitlePlaceholder": "Buttons",
         "AddNewButtonText": "Add Box Button",
         "PlaceholderButtonText": "Add a link",
@@ -27,7 +27,7 @@ define([], function() {
         "EditItemIconEntryPlaceholder": "Example: fa-link",
         "EditItemIconEntryLinkText": "View all icons available",
         "EditItemColorLabel": "Color",
-        "EditItemColorFieldLabel": "Enable blue background?",
+        "EditItemColorFieldLabel": "Enable themed background?",
         "EditItemColorOnLabel": "Yes",
         "EditItemColorOffLabel": "No",
         "EditItemGuidanceLabel": "Guidance",