Update workbench customizer sample (#852)
* add solution * Update web part * remove duplicated sample with wrong name... * Switch to Preview mode by default
This commit is contained in:
Joel Rodrigues
Vesa Juvonen
parent
c280ec990f
commit
ca0450c9c0
File diff suppressed because it is too large
Load Diff
|
|
@ -21,10 +21,8 @@
|
|||
"officeFabricIconFontName": "DeveloperTools",
|
||||
"properties": {
|
||||
"requiresPageRefresh": false,
|
||||
"maxWidth": true,
|
||||
"centerCanvas": true,
|
||||
"overflow": true,
|
||||
"padding": true
|
||||
"customWorkbenchStyles": true,
|
||||
"previewMode": true
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,16 +5,13 @@ import {
|
|||
PropertyPaneToggle
|
||||
} from '@microsoft/sp-webpart-base';
|
||||
import styles from './WorkbenchCustomizerWebPart.module.scss';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
import * as strings from 'WorkbenchCustomizerWebPartStrings';
|
||||
|
||||
export interface IWorkbenchCustomizerWebPartProps {
|
||||
requiresPageRefresh: boolean;
|
||||
maxWidth: boolean;
|
||||
centerCanvas: boolean;
|
||||
overflow: boolean;
|
||||
padding: boolean;
|
||||
customWorkbenchStyles: boolean;
|
||||
previewMode: boolean;
|
||||
}
|
||||
|
||||
export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IWorkbenchCustomizerWebPartProps> {
|
||||
|
|
@ -26,30 +23,26 @@ export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IW
|
|||
|
||||
public async render(): Promise<void> {
|
||||
|
||||
if (this.properties.maxWidth) {
|
||||
await import('./styles/maxWidth.module.scss');
|
||||
}
|
||||
if (this.properties.centerCanvas) {
|
||||
await import('./styles/centerCanvas.module.scss');
|
||||
}
|
||||
if (this.properties.overflow) {
|
||||
await import('./styles/overflow.module.scss');
|
||||
}
|
||||
if (this.properties.padding) {
|
||||
await import('./styles/padding.module.scss');
|
||||
}
|
||||
if (!this.renderedOnce) {
|
||||
|
||||
this.domElement.innerHTML = `
|
||||
if (this.properties.customWorkbenchStyles) {
|
||||
await import('./styles/customWorkbenchStyles.module.scss');
|
||||
}
|
||||
|
||||
if (this.properties.previewMode) {
|
||||
const previewBtn = document.getElementsByName("Preview")[0];
|
||||
previewBtn.click();
|
||||
}
|
||||
|
||||
this.domElement.innerHTML = `
|
||||
<div class="${styles.workbenchCustomizer}">
|
||||
${this.properties.requiresPageRefresh
|
||||
? `<div class="${styles.redMessage}">Please refresh the page to update workbench styles</div>`
|
||||
: ''
|
||||
}
|
||||
<div>Max width enabled: ${this.properties.maxWidth}</div>
|
||||
<div>Center canvas zone: ${this.properties.centerCanvas}</div>
|
||||
<div>Custom overflow enabled: ${this.properties.overflow}</div>
|
||||
<div>Custom padding enabled: ${this.properties.padding}</div>
|
||||
? `<div class="${styles.redMessage}">Please refresh the page to remove custom workbench styles</div>`
|
||||
: ''
|
||||
}
|
||||
*** Workbench Customizer web part ***
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
public onPropertyPaneFieldChanged(path: string, oldValue: any, newValue: any): void {
|
||||
|
|
@ -75,17 +68,11 @@ export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IW
|
|||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneToggle('maxWidth', {
|
||||
label: strings.MaxWidthFieldLabel
|
||||
PropertyPaneToggle('customWorkbenchStyles', {
|
||||
label: strings.CustomWorkbenchStylesFieldLabel
|
||||
}),
|
||||
PropertyPaneToggle('centerCanvas', {
|
||||
label: strings.CenterCanvasFieldLabel
|
||||
}),
|
||||
PropertyPaneToggle('overflow', {
|
||||
label: strings.OverflowFieldLabel
|
||||
}),
|
||||
PropertyPaneToggle('padding', {
|
||||
label: strings.PaddingFieldLabel
|
||||
PropertyPaneToggle('previewMode', {
|
||||
label: strings.PreviewModeFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,7 @@ define([], function() {
|
|||
return {
|
||||
"PropertyPaneDescription": "Description",
|
||||
"BasicGroupName": "Configuration",
|
||||
"MaxWidthFieldLabel": "Enable custom max width",
|
||||
"CenterCanvasFieldLabel": "Center canvas",
|
||||
"OverflowFieldLabel": "Enable custom overflow",
|
||||
"PaddingFieldLabel": "Enable custom padding"
|
||||
"CustomWorkbenchStylesFieldLabel": "Enable custom styles for Workbench",
|
||||
"PreviewModeFieldLabel": "Enable Preview mode by default",
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
declare interface IWorkbenchCustomizerWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
MaxWidthFieldLabel: string;
|
||||
CenterCanvasFieldLabel: string;
|
||||
OverflowFieldLabel: string;
|
||||
PaddingFieldLabel: string;
|
||||
CustomWorkbenchStylesFieldLabel: string;
|
||||
PreviewModeFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'WorkbenchCustomizerWebPartStrings' {
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
:global #workbenchPageContent {
|
||||
.CanvasComponent {
|
||||
.CanvasZoneContainer {
|
||||
.CanvasZone {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
:global #workbenchPageContent {
|
||||
// max-width: 1316px;
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
&>div {
|
||||
&>div {
|
||||
overflow: visible;
|
||||
|
||||
&>div {
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
|
||||
.CanvasComponent {
|
||||
|
||||
.CanvasZone {
|
||||
margin: auto;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.CanvasZone--noMargin {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
:global #workbenchPageContent {
|
||||
// max-width: 1316px;
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
:global #workbenchPageContent {
|
||||
&>div {
|
||||
&>div {
|
||||
overflow: visible;
|
||||
&>div {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
:global #workbenchPageContent {
|
||||
&>div {
|
||||
&>div {
|
||||
&>div {
|
||||
padding: 0;
|
||||
.CanvasComponent {
|
||||
.CanvasZoneContainer {
|
||||
.CanvasZone {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue