Resolve theme and formatting issues from upgrade
This commit is contained in:
Ryan Schouten
parent
37a0a4b646
commit
7158c16d6a
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue