Fixed issues with SPFx 1.11 upgrade
This commit is contained in:
Hugo Bernier
parent
8e63048f5d
commit
176e08dd3c
|
|
@ -2,29 +2,18 @@
|
|||
|
||||
## Summary
|
||||
|
||||
|
||||
This web part allows user to manage planner tasks in SharePoint Site. The UI was inspired on Planner UI, it is full implemented with Office-UI-Fabric Components. Use MSGraph API's and PnPjs to data access.
|
||||
|
||||
The user can search task by name, can filter by progress status, all data are dynamic updated on change.
|
||||
|
||||
|
||||
</br>
|
||||
</br>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## List of Task Cards
|
||||
|
||||
|
||||
## List of Task Cards
|
||||
|
||||
|
||||
|
||||
## Filter Tasks
|
||||
|
||||
|
||||
|
||||
|
||||
</br>
|
||||
|
|
@ -128,7 +117,7 @@ The user can search task by name, can filter by progress status, all data are dy
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -143,6 +132,7 @@ WebPart Title| Text| no|
|
|||
|
||||
|
||||
## Solution
|
||||
|
||||
The Web Part Use PnPjs library, Office-ui-fabric-react components and MSGraph API's
|
||||
|
||||
Solution|Author(s)
|
||||
|
|
@ -154,8 +144,10 @@ My Tasks |João Mendes
|
|||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0.0|November 17, 2019|Initial release
|
||||
1.0.1|September 9, 2020|Upgraded to SPFx 1.11.
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"solution": {
|
||||
"name": "react-my-task-client-side-solution",
|
||||
"id": "7cd3a77c-8a8d-4742-9585-e17ca19bfe5d",
|
||||
"version": "1.0.0.0",
|
||||
"version": "1.0.1.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false,
|
||||
|
|
|
|||
|
|
@ -55,8 +55,6 @@ const stylelint = require('gulp-stylelint');
|
|||
/* Stylelinter sub task */
|
||||
let styleLintSubTask = build.subTask('stylelint', (gulp) => {
|
||||
|
||||
console.log('[stylelint]: By default style lint errors will not break your build. If you want to change this behaviour, modify failAfterError parameter in gulpfile.js.');
|
||||
|
||||
return gulp
|
||||
.src('src/**/*.scss')
|
||||
.pipe(stylelint({
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-my-task",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
// This file is a placeholder
|
||||
|
|
@ -0,0 +1 @@
|
|||
// This file is a placeholder
|
||||
|
|
@ -0,0 +1 @@
|
|||
// This file is a placeholder
|
||||
|
|
@ -0,0 +1 @@
|
|||
// This file is a placeholder
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
@import "~office-ui-fabric-react/dist/sass/References.scss";
|
||||
|
||||
.renderMemberItem {
|
||||
display: flex;
|
||||
|
|
@ -6,23 +6,23 @@
|
|||
padding-right: 10px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
width: '100%';
|
||||
width: "100%";
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.renderMemberItem:hover {
|
||||
background-color: $ms-color-neutralLight;
|
||||
|
||||
}
|
||||
|
||||
.calloutContent {
|
||||
height: 300px;
|
||||
padding: 0px 10px 10px 10px;
|
||||
padding: 0 10px 10px 10px;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.calloutHeader {
|
||||
padding: 10px 10px 15px 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
@import "~office-ui-fabric-react/dist/sass/References.scss";
|
||||
|
||||
.renderMemberItem {
|
||||
display: flex;
|
||||
|
|
@ -6,23 +6,23 @@
|
|||
padding-right: 10px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
width: '100%';
|
||||
width: "100%";
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.renderMemberItem:hover {
|
||||
background-color: $ms-color-neutralLight;
|
||||
|
||||
}
|
||||
|
||||
.calloutContent {
|
||||
height: 300px;
|
||||
padding: 0px 10px 10px 10px;
|
||||
padding: 0 10px 10px 10px;
|
||||
margin-bottom: 10px;
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.calloutHeader {
|
||||
padding: 10px 10px 15px 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
@import "~office-ui-fabric-react/dist/sass/References.scss";
|
||||
|
||||
.checkListItem {
|
||||
display: flex;
|
||||
justify-Content:start;
|
||||
align-Items:center;
|
||||
margin-Top:0px;
|
||||
max-Width:100%;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.textField:hover {
|
||||
background-color: $ms-color-neutralLighter;
|
||||
background-color: $ms-color-neutralLighter;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
.selectPlanContainer{
|
||||
@import "~office-ui-fabric-react/dist/sass/References.scss";
|
||||
|
||||
.selectPlanContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkListItem {
|
||||
display: flex;
|
||||
justify-Content:start;
|
||||
align-Items:center;
|
||||
margin-Top:0px;
|
||||
max-Width:100%;
|
||||
margin-bottom: 0px;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
max-width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.checkListItem:hover {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
@import "~office-ui-fabric-react/dist/sass/References.scss";
|
||||
|
||||
.myTasks {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -20,15 +20,18 @@
|
|||
padding-right: 15px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.noTaskLabel {
|
||||
display: flex;
|
||||
margin-bottom: 25px;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include ms-Grid-row;
|
||||
@include ms-fontColor-white;
|
||||
|
||||
background-color: $ms-color-themeDark;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -70,7 +73,14 @@
|
|||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: 'Segoe UI WestEuropean', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
|
||||
font-family:
|
||||
"Segoe UI WestEuropean",
|
||||
"Segoe UI",
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $ms-font-size-m;
|
||||
font-weight: $ms-font-weight-regular;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
.selectPlanContainer{
|
||||
@import "~office-ui-fabric-react/dist/sass/References.scss";
|
||||
|
||||
.selectPlanContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,50 +1,50 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
// Import all mixins and variables.
|
||||
|
||||
.buttonIconStatusInProgressNotStarted
|
||||
{ background-Color: white;
|
||||
position: absolute;
|
||||
top:22px;
|
||||
right: 15px;
|
||||
border-radius: 50%;
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
border-color:#afb8bd;;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color:#a6a6a6;
|
||||
margin-right: 15px;
|
||||
@import "~office-ui-fabric-react/dist/sass/References.scss";
|
||||
|
||||
// Import all mixins and variables.
|
||||
|
||||
.buttonIconStatusInProgressNotStarted {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 15px;
|
||||
border-radius: 50%;
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
border-color: #afb8bd;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #a6a6a6;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.buttonIconStatusCompleted
|
||||
{ background-Color: white;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 15px;
|
||||
border-radius: 50%;
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
border-color:#afb8bd;;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color:#a6a6a6;
|
||||
margin-right: 15px;
|
||||
|
||||
.buttonIconStatusCompleted {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: 15px;
|
||||
border-radius: 50%;
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
border-color: #afb8bd;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #a6a6a6;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.buttonIconStatusInProgressNotStarted:hover {
|
||||
background-Color: green;
|
||||
background-color: green;
|
||||
color: $ms-color-white;
|
||||
}
|
||||
|
||||
.buttonIconStatusCompleted:hover {
|
||||
|
||||
border-color: $ms-color-neutralPrimary;
|
||||
}
|
||||
|
||||
.documentCard {
|
||||
max-width: 282px;
|
||||
min-width:282px;
|
||||
min-width: 282px;
|
||||
min-height: 345px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
@ -56,14 +56,15 @@
|
|||
|
||||
.documentCard:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.documentCardCompleted:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.documentCardCompleted:focus {
|
||||
outline: none;
|
||||
}
|
||||
.documentCardCompleted {
|
||||
max-width: 282px;
|
||||
min-width:282px;
|
||||
min-width: 282px;
|
||||
min-height: 345px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
@ -73,44 +74,45 @@
|
|||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.documentCardTitleStyle {
|
||||
.documentCardTitleStyle {
|
||||
height: 100%;
|
||||
font-Weight: 'bold'
|
||||
font-weight: "bold";
|
||||
}
|
||||
|
||||
.documentCardTitle {
|
||||
display: flex;
|
||||
width: 235px;
|
||||
height: 30 ;
|
||||
width: 235px;
|
||||
height: 30;
|
||||
margin-left: 15px;
|
||||
margin-top: 10px;
|
||||
justify-content: left;
|
||||
|
||||
}
|
||||
|
||||
.iconBottomDiv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.taskDetails {
|
||||
// display: inline-block;
|
||||
// padding: 5px;
|
||||
// display: inline-block;
|
||||
// padding: 5px;
|
||||
@include ms-fontSize-sPlus;
|
||||
}
|
||||
.dueDate{
|
||||
|
||||
.dueDate {
|
||||
//display: "inline-block";
|
||||
padding: 5px;
|
||||
|
||||
@include ms-fontSize-sPlus;
|
||||
|
||||
margin-left: 10px;
|
||||
background-color: "red";
|
||||
color: "white",
|
||||
color: "white";
|
||||
}
|
||||
|
||||
.progressIcon {
|
||||
font-size: 22px;
|
||||
height: 22x;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
margin-left: 15px;
|
||||
margin-right: 10px;
|
||||
|
|
@ -119,15 +121,17 @@
|
|||
color: green;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.progress{
|
||||
// color: $ms-color-themePrimary;
|
||||
|
||||
.progress {
|
||||
// color: $ms-color-themePrimary;
|
||||
font-size: 16px;
|
||||
// @include ms-fontSize-l;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.iconClass{
|
||||
|
||||
.iconClass {
|
||||
font-size: 14px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
|
|
@ -137,7 +141,8 @@
|
|||
vertical-align: "middle";
|
||||
color: $ms-color-themePrimary;
|
||||
}
|
||||
.iconClassDue{
|
||||
|
||||
.iconClassDue {
|
||||
font-size: 14px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
|
|
@ -147,37 +152,37 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.taskTitleCompleted{
|
||||
.taskTitleCompleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.statusIconStyleInProgressNotStarted{
|
||||
.statusIconStyleInProgressNotStarted {
|
||||
font-size: 25;
|
||||
padding: 0;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.statusIconStyleCompleted{
|
||||
font-size: 12px;
|
||||
padding: 0px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
align-items: center;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
margin-left: 1px;
|
||||
margin-right: 0px;
|
||||
.statusIconStyleCompleted {
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
align-items: center;
|
||||
vertical-align: top;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
margin-left: 1px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.textStyles{
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 0px;
|
||||
|
||||
.textStyles {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue