From 879ee67a913521f2b1943c6b081960ec3cc06472 Mon Sep 17 00:00:00 2001 From: Hugo Bernier Date: Mon, 6 Apr 2020 02:36:48 -0400 Subject: [PATCH] Made styles unique to web part --- samples/react-securitygrid/gulpfile.js | 5 ++- samples/react-securitygrid/package-lock.json | 34 ++++++++++----- .../components/SpSecurity.module.scss | 43 ++++++++++++++++--- .../spSecurity/components/SpSecurity.scss | 24 ----------- .../spSecurity/components/SpSecurity.tsx | 10 ++--- 5 files changed, 70 insertions(+), 46 deletions(-) delete mode 100644 samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.scss diff --git a/samples/react-securitygrid/gulpfile.js b/samples/react-securitygrid/gulpfile.js index 7958fd5d8..ad9bfe171 100644 --- a/samples/react-securitygrid/gulpfile.js +++ b/samples/react-securitygrid/gulpfile.js @@ -3,5 +3,8 @@ const gulp = require('gulp'); const build = require('@microsoft/sp-build-web'); build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); - +build.addSuppression(`Warning - [sass] The local CSS class 'ms-DetailsHeader' is not camelCase and will not be type-safe.`); +build.addSuppression(`Warning - [sass] The local CSS class 'ms-DetailsHeader-cell' is not camelCase and will not be type-safe.`); +build.addSuppression(`Warning - [sass] The local CSS class 'ms-List-cell' is not camelCase and will not be type-safe.`); +build.addSuppression(`Warning - [sass] The local CSS class 'ms-DetailsRow' is not camelCase and will not be type-safe.`); build.initialize(gulp); diff --git a/samples/react-securitygrid/package-lock.json b/samples/react-securitygrid/package-lock.json index f0ae5b87d..b31f8e335 100644 --- a/samples/react-securitygrid/package-lock.json +++ b/samples/react-securitygrid/package-lock.json @@ -5525,11 +5525,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5542,15 +5544,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5653,7 +5658,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5663,6 +5669,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5675,17 +5682,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5702,6 +5712,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5774,7 +5785,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5784,6 +5796,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5889,6 +5902,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9647,9 +9661,9 @@ } }, "lodash": { - "version": "4.17.10", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz", - "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==" + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "lodash._baseassign": { "version": "3.2.0", diff --git a/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.module.scss b/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.module.scss index 6b2836147..3ccfc5496 100644 --- a/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.module.scss +++ b/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.module.scss @@ -1,9 +1,42 @@ -.spSecurity { +@import "~office-ui-fabric-react/dist/sass/References.scss"; +.spSecurity { } -.themecolor{ - color: "[theme:themePrimary, default:#ff0000]" +.themecolor { + color: $ms-color-themePrimary; } -.nonbrandeddocumentcolor{ - color: "#00FF00" +.nonbrandeddocumentcolor { + color: "#00FF00"; +} + +//*Set the Header are to 140px so it can hold the rotated headers +.SPFXSecurityGrid { + :global(.ms-DetailsHeader) { + //* when adjusting line hieight also need to adjust second parameter to transform:translate below + height: 140px; + white-space: nowrap; + } + + :global(.ms-DetailsHeader-cell) { + vertical-align: bottom; + + span { + overflow: visible; + } + } + + :global(.ms-DetailsHeader-cellTitle) { + margin-top:-8px; + } + + //*Set the wrappers around the headers to display at 45degree angles + .rotatedColumnHeader { + transform: translate(25px, 40px) /*/Change second parameter when adjusting line height*/ rotate(315deg); + padding-bottom: 90px; + width: 40px !important; + } + + :global(.ms-List-cell):nth-child(even) :global(.ms-DetailsRow) { + background: $ms-color-neutralLight; + } } diff --git a/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.scss b/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.scss deleted file mode 100644 index 0c9bcd3a4..000000000 --- a/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import 'node_modules/office-ui-fabric-react/dist/sass/Fabric.scss'; -//*Set the Header are to 140px so it can hold the rotated headers -.SPFXSecurityGrid .ms-DetailsHeader { //* when adjusting line hieight also need to adjust second parameter to transform:translate below - height: 140px; - white-space: nowrap; -} -//*Set the wrappers around the headers to display at 45degree angles -.ms-DetailsHeader-cell.rotatedColumnHeader{ - transform: translate(25px,40px ) //*Change second parameter when adjusting line height - rotate(315deg); - padding-bottom: 90px; - width: 36px !important; - - -} -.ms-DetailsHeader-cell{ - vertical-align: bottom; -} -.ms-DetailsHeader-cell span { - overflow: visible; - } - .ms-List-cell:nth-child(even) .ms-DetailsRow { - background: #EEE; - } \ No newline at end of file diff --git a/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.tsx b/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.tsx index 860bc8881..d827047a9 100644 --- a/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.tsx +++ b/samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.tsx @@ -21,7 +21,7 @@ import { EnvironmentType } from '@microsoft/sp-core-library'; /* tslint:disable */ -require('./spSecurity.css'); // loads the SpSecurity,css with unmodified names + export default class SpSecurity extends React.Component { private svc: SPSecurityService = new SPSecurityService("ss"); private userSelection = new Selection(); @@ -125,7 +125,7 @@ export default class SpSecurity extends React.Component { - // add them to the list after the parent + // add them to the list after the parent let position: number = findIndex(this.state.securityInfo.lists, (stateitem) => { return stateitem.id === item.id; @@ -313,8 +313,7 @@ export default class SpSecurity extends React.Component