From 7158c16d6a7c59ffd77e0b46821fb6cc00a9340d Mon Sep 17 00:00:00 2001 From: Ryan Schouten Date: Mon, 31 Aug 2020 20:13:51 -0700 Subject: [PATCH] Resolve theme and formatting issues from upgrade --- samples/js-display-list/package-lock.json | 15 ++++ samples/js-display-list/package.json | 1 + .../jsDisplayList/JsDisplayList.module.scss | 89 ++++++++++++++++++- .../jsDisplayList/JsDisplayListWebPart.ts | 29 +++--- 4 files changed, 118 insertions(+), 16 deletions(-) diff --git a/samples/js-display-list/package-lock.json b/samples/js-display-list/package-lock.json index 8bf0b743d..a385d85a7 100644 --- a/samples/js-display-list/package-lock.json +++ b/samples/js-display-list/package-lock.json @@ -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", diff --git a/samples/js-display-list/package.json b/samples/js-display-list/package.json index 6bb508860..ed702df97 100644 --- a/samples/js-display-list/package.json +++ b/samples/js-display-list/package.json @@ -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" diff --git a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss index 97d0b4f80..82beb2801 100644 --- a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss +++ b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayList.module.scss @@ -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 { diff --git a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts index cc7907eb7..db28cd444 100644 --- a/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts +++ b/samples/js-display-list/src/webparts/jsDisplayList/JsDisplayListWebPart.ts @@ -115,14 +115,13 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart

The selected list does not exist.

`; } else if (items.length === 0) { - html = '

The selected list is empty

'; + html = `

The selected list is empty

`; } else { - //debugger; items.forEach((item: ISPList) => { let title: string = ''; @@ -135,12 +134,12 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart -
${title}
-
+
+
${title}
+
${created.substring(0, created.length - 1).replace('T', ' ')}
-
${item['Author'].Title}
+
${item['Author'].Title}
`; }); } @@ -153,18 +152,18 @@ export default class JsDisplayListWebPart extends BaseClientSideWebPart -

- +

+

+ ${this.properties.listTitle} List

-
-
-
Title
-
Created
-
Created By
+
+
+
Title
+
Created
+
Created By