honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Resolve theme and formatting issues from upgrade

This commit is contained in:
Ryan Schouten 2020-08-31 20:13:51 -07:00
parent 37a0a4b646
commit 7158c16d6a
4 changed files with 118 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
samples/js-display-list/package-lock.json generated
View File

@ -2421,6 +2421,16 @@
"tslib": "~1.10.0"
}
},
"@microsoft/sp-office-ui-fabric-core": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/@microsoft/sp-office-ui-fabric-core/-/sp-office-ui-fabric-core-1.11.0.tgz",
"integrity": "sha512-tc9dddjQPviaqI1AhCxnU2nMCx75zJhQHuy8vDqXCW2a6m7pjjM7SLGQcN8DRMk6/h/AKFy1TqyP2Q8o0lSQOg==",
"requires": {
"@types/webpack-env": "1.13.1",
"office-ui-fabric-core": "9.6.1-fluent2",
"tslib": "~1.10.0"
}
},
"@microsoft/sp-page-context": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/@microsoft/sp-page-context/-/sp-page-context-1.11.0.tgz",
@ -13923,6 +13933,11 @@
"has": "^1.0.3"
}
},
"office-ui-fabric-core": {
"version": "9.6.1-fluent2",
"resolved": "https://registry.npmjs.org/office-ui-fabric-core/-/office-ui-fabric-core-9.6.1-fluent2.tgz",
"integrity": "sha512-gcBs5HHr7tjkvk/+Ls10ttb3jEllRn7SvJitX/kx/gQq8BiFMSMKr1w+oNqXlh4EgkBHWUlJVPrYUu1KW/jVaQ=="
},
"office-ui-fabric-react": {
"version": "7.59.0",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.59.0.tgz",

1
samples/js-display-list/package.json
View File

@ -8,6 +8,7 @@
"main": "lib/index.js",
"dependencies": {
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "^1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@types/es6-collections": "^0.5.32"

89
samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss
View File

@ -1,3 +1,57 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
$ms-greenLight: "[theme:greenLight, default:#bad80a]";
$ms-neutralSecondaryAlt: "[theme:info, default:#767676]";
$ms-neutralLight: "[theme:infoBackground, default:#eaeaea]";
$ms-magenta: "[theme:magenta, default:#b4009e]";
$ms-magentaDark: "[theme:magentaDark, default:#5c005c]";
$ms-magentaLight: "[theme:magentaLight, default:#e3008c]";
$ms-neutralDark: "[theme:neutralDark, default:#212121]";
$ms-neutralLight: "[theme:neutralLight, default:#eaeaea]";
$ms-neutralLighter: "[theme:neutralLighter, default:#f4f4f4]";
$ms-neutralLighterAlt: "[theme:neutralLighterAlt, default:#f8f8f8]";
$ms-neutralPrimary: "[theme:neutralPrimary, default:#333333]";
$ms-neutralPrimaryAlt: "[theme:neutralPrimaryAlt, default:#3C3C3C]";
$ms-neutralQuaternary: "[theme:neutralPrimaryTranslucent50, default:#d0d0d0]";
$ms-neutralQuaternaryAlt: "[theme:neutralQuaternary, default:#dadada]";
$ms-neutralSecondary: "[theme:neutralQuaternaryAlt, default:#666666]";
$ms-neutralSecondaryAlt: "[theme:neutralSecondary, default:#767676]";
$ms-neutralTertiary: "[theme:neutralSecondaryAlt, default:#a6a6a6]";
$ms-neutralTertiaryAlt: "[theme:neutralTertiary, default:#c8c8c8]";
$ms-white: "[theme:neutralTertiaryAlt, default:#ffffff]";
$ms-orange: "[theme:orange, default:#d83b01]";
$ms-orangeLight: "[theme:orangeLight, default:#ea4300]";
$ms-orangeLighter: "[theme:orangeLighter, default:#ff8c00]";
$ms-primaryBackground: "[theme:primaryBackground, default:#0078d7]";
$ms-primaryText: "[theme:primaryText, default:#0078d7]";
$ms-purple: "[theme:purple, default:#5c2d91]";
$ms-purpleDark: "[theme:purpleDark, default:#32145a]";
$ms-purpleLight: "[theme:purpleLight, default:#b4a0ff]";
$ms-red: "[theme:red, default:#e81123]";
$ms-redDark: "[theme:redDark, default:#a80000]";
$ms-success: "[theme:success, default:#107c10]";
$ms-successBackground: "[theme:successBackground, default:#dff6dd]";
$ms-teal: "[theme:teal, default:#008272]";
$ms-tealDark: "[theme:tealDark, default:#004b50]";
$ms-tealLight: "[theme:tealLight, default:#00b294]";
$ms-themeAccent: "[theme:themeAccent, default:inherit]";
$ms-themeAccentTranslucent10: "[theme:themeAccentTranslucent10, default:inherit]";
$ms-themeDark: "[theme:themeDark, default:#005a9e]";
$ms-themeDarkAlt: "[theme:themeDarkAlt, default:#106ebe]";
$ms-themeDarker: "[theme:themeDarker, default:#004578]";
$ms-themeLight: "[theme:themeLight, default:#b3d6f2]";
$ms-themeLightAlt: "[theme:themeLightAlt, default:inherit]";
$ms-themeLighter: "[theme:themeLighter, default:#deecf9]";
$ms-themeLighterAlt: "[theme:themeLighterAlt, default:#eff6fc]";
$ms-themePrimary: "[theme:themePrimary, default:#0078d7]";
$ms-themeSecondary: "[theme:themeSecondary, default:#2488d8]";
$ms-themeTertiary: "[theme:themeTertiary, default:#69afe5]";
$ms-themeTertiaryAlt: "[theme:themeTertiaryAlt, default:#c8c8c8]";
$ms-white: "[theme:white, default:#ffffff]";
$ms-whiteTranslucent40: "[theme:whiteTranslucent40, default:rgba(255,255,255,.4)]";
$ms-yellow: "[theme:yellow, default:#ffb900]";
$ms-yellowLight: "[theme:yellowLight, default:#fff100]";
.jsDisplayList {
.container {
max-width: 700px;
@ -6,7 +60,40 @@
}
.row {
padding: 20px;
@include ms-Grid-row;
}
.grid {
@include ms-Grid;
}
.columnHeader {
@include ms-Grid-col;
@include ms-md3;
@include ms-sm5;
@include ms-lg4;
@include ms-font-m-plus;
background-color: $ms-themeLight;
}
.column {
@include ms-Grid-col;
@include ms-md3;
@include ms-sm5;
@include ms-lg4;
@include ms-font-m;
}
.fontMPlus{
@include ms-font-m-plus;
}
.semiBold {
@include ms-fontWeight-semibold;
}
.themeDark {
background-color: $ms-themeDark;
color: $ms-white;
@include ms-font-l;
}
.themeLight {
background-color: $ms-themeLight;
}
.listItem {

29
samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts
View File

@ -115,14 +115,13 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
if(!items) {
html = '<br /><p class="ms-font-m-plus">The selected list does not exist.</p>';
html = `<br /><p class="${styles.fontMPlus}">The selected list does not exist.</p>`;
} else if (items.length === 0) {
html = '<br /><p class="ms-font-m-plus">The selected list is empty</p>';
html = `<br /><p class="${styles.fontMPlus}">The selected list is empty</p>`;
} else {
//debugger;
items.forEach((item: ISPList) => {
let title: string = '';
@ -135,12 +134,12 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
let created: any = item["Created"];
html += `
<div class="${styles.row} ms-Grid-row " }>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${title}</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">
<div class="${styles.row}" }>
<div class="${styles.column}">${title}</div>
<div class="${styles.column}">
${created.substring(0, created.length - 1).replace('T', ' ')}
</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-font-m">${item['Author'].Title}</div>
<div class="${styles.column}">${item['Author'].Title}</div>
</div>`;
});
}
@ -153,18 +152,18 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart<IJsDispl
private _renderListAsync(): void {
this.domElement.innerHTML = `
<div className='wrapper'>
<p class="ms-font-l ms-bgColor-themeDark ms-fontColor-white">
<span class="ms-fontWeight-semibold">
<div class='wrapper ${styles.jsDisplayList}'>
<p class="${styles.themeDark}">
<span class="${styles.semiBold}">
${this.properties.listTitle}
</span>
List
</p>
<div class="ms-Grid ${styles.jsDisplayList}">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-bgColor-themeLight ms-font-m-plus">Title</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-bgColor-themeLight ms-font-m-plus">Created</div>
<div class="ms-Grid-col ms-u-sm5 ms-u-md3 ms-u-lg4 ms-bgColor-themeLight ms-font-m-plus">Created By</div>
<div class="${styles.grid} ${styles.jsDisplayList}">
<div class="${styles.row}">
<div class="${styles.columnHeader}">Title</div>
<div class="${styles.columnHeader}">Created</div>
<div class="${styles.columnHeader}">Created By</div>
</div>
<hr />
<div id="spListContainer"></div>