Merge pull request #1311 from joelfmrodrigues/workbench-full-width

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.manifest.json

@@ -23,6 +23,7 @@
     "properties": {
       "requiresPageRefresh": false,
       "customWorkbenchStyles": true,
+      "customWorkbenchStylesFullWidth": false,
       "previewMode": true
     }
   }]

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.ts

@@ -8,6 +8,7 @@ import * as strings from 'WorkbenchCustomizerWebPartStrings';
 export interface IWorkbenchCustomizerWebPartProps {
   requiresPageRefresh: boolean;
   customWorkbenchStyles: boolean;
+  customWorkbenchStylesFullWidth: boolean;
   previewMode: boolean;
 }
 
@@ -26,6 +27,10 @@ export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IW
         await import('./styles/customWorkbenchStyles.module.scss');
       }
 
+      if (this.properties.customWorkbenchStyles && this.properties.customWorkbenchStylesFullWidth) {
+        await import('./styles/customWorkbenchStylesFullWidth.module.scss');
+      }
+
       if (this.properties.previewMode) {
         const previewBtn = document.getElementsByName("Preview")[0];
         previewBtn.click();
@@ -68,6 +73,10 @@ export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IW
                 PropertyPaneToggle('customWorkbenchStyles', {
                   label: strings.CustomWorkbenchStylesFieldLabel
                 }),
+                PropertyPaneToggle('customWorkbenchStylesFullWidth', {
+                  label: strings.customWorkbenchStylesFullWidthFieldLabel,
+                  disabled: !this.properties.customWorkbenchStyles
+                }),
                 PropertyPaneToggle('previewMode', {
                   label: strings.PreviewModeFieldLabel
                 })

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/loc/en-us.js

@@ -1,8 +1,9 @@
 define([], function() {
   return {
-    "PropertyPaneDescription": "Description",
+    "PropertyPaneDescription": "Web part that can customize the behaviour of the workbench page to work around some of the existing limitations. It's recommended that you refresh the page after changing web part properties.",
     "BasicGroupName": "Configuration",
     "CustomWorkbenchStylesFieldLabel": "Enable custom styles for Workbench",
+    "customWorkbenchStylesFullWidthFieldLabel": "Enable custom styles for full-width",
     "PreviewModeFieldLabel": "Enable Preview mode by default",
   }
 });

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/loc/mystrings.d.ts

@@ -2,6 +2,7 @@ declare interface IWorkbenchCustomizerWebPartStrings {
   PropertyPaneDescription: string;
   BasicGroupName: string;
   CustomWorkbenchStylesFieldLabel: string;
+  customWorkbenchStylesFullWidthFieldLabel: string;
   PreviewModeFieldLabel: string;
 }
 

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/styles/customWorkbenchStyles.module.scss

@@ -1,5 +1,4 @@
 :global #workbenchPageContent {
-  // max-width: 1316px;
   max-width: 100%;
   left: 0;
   right: 0;

samples/js-workbench-customizer/src/webparts/workbenchCustomizer/styles/customWorkbenchStylesFullWidth.module.scss

@@ -0,0 +1,24 @@
+:global #workbenchPageContent {
+  & > div {
+    & > div {
+      & > div {
+        .CanvasComponent {
+          .CanvasZone {
+            max-width: 100%;
+            padding-left: 0;
+            padding-right: 0;
+
+            .CanvasSection {
+              padding-left: 0;
+              padding-right: 0;
+
+              .ControlZone {
+                padding: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}