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

Made styles unique to web part

This commit is contained in:
Hugo Bernier 2020-04-06 02:36:48 -04:00
parent 16592f216c
commit 879ee67a91
5 changed files with 70 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/react-securitygrid/gulpfile.js vendored
View File

@ -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);

34
samples/react-securitygrid/package-lock.json generated
View File

@ -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",

43
samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.module.scss
View File

@ -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;
}
}

24
samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.scss
View File

@ -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;
}

8
samples/react-securitygrid/src/webparts/spSecurity/components/SpSecurity.tsx
View File

@ -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<ISpSecurityProps, ISpSecurityState> {
private svc: SPSecurityService = new SPSecurityService("ss");
private userSelection = new Selection();
@ -313,8 +313,7 @@ export default class SpSecurity extends React.Component<ISpSecurityProps, ISpSec
minWidth: 20,
maxWidth: 20,
onRender: this.renderUserItem,
headerClassName: "rotatedColumnHeader",
headerClassName: styles.rotatedColumnHeader,
});
}
}
@ -528,8 +527,7 @@ export default class SpSecurity extends React.Component<ISpSecurityProps, ISpSec
items={displayItems}
columns={displayColumns}
selectionMode={SelectionMode.none}
className="SPFXSecurityGrid"
className={styles.SPFXSecurityGrid}
/>
<Panel
isBlocking={false}