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

Fixed issues with SPFx 1.11 upgrade

This commit is contained in:
Hugo Bernier 2020-09-23 22:18:48 -04:00
parent 8e63048f5d
commit 176e08dd3c
15 changed files with 130 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
samples/react-mytasks/README.md
View File

@ -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>
![MyTasks](/samples/react-mytasks/assets/MyTasks.gif)
## List of Task Cards
## List of Task Cards
![MyTasks](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/My-Tasks/samples/react-mytasks/assets/screen1.png)
## Filter Tasks
![MyTasks](https://github.com/joaojmendes/sp-dev-fx-webparts/blob/My-Tasks/samples/react-mytasks/assets/screen2.png)
</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
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![SPFx 1.11](https://img.shields.io/badge/version-1.11.0-green.svg)
## 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.**
---

2
samples/react-mytasks/config/package-solution.json
View File

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

2
samples/react-mytasks/gulpfile.js vendored
View File

@ -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({

2
samples/react-mytasks/package.json
View File

@ -1,6 +1,6 @@
{
"name": "react-my-task",
"version": "0.0.1",
"version": "1.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"

1
samples/react-mytasks/src/Controls/AddLink/AddLink.module.scss
View File

@ -0,0 +1 @@
// This file is a placeholder

1
samples/react-mytasks/src/Controls/EditLink/EditLink.module.scss
View File

@ -0,0 +1 @@
// This file is a placeholder

1
samples/react-mytasks/src/Controls/UploadFile/UploadFile.module.scss
View File

@ -0,0 +1 @@
// This file is a placeholder

1
samples/react-mytasks/src/Controls/UploadFromSharePoint/UplaodFromSharePoint.module.scss
View File

@ -0,0 +1 @@
// This file is a placeholder

8
samples/react-mytasks/src/webparts/myTasks/components/Assigns/Assigns.module.scss
View File

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

8
samples/react-mytasks/src/webparts/myTasks/components/Attachments/Attachments.module.scss
View File

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

15
samples/react-mytasks/src/webparts/myTasks/components/CheckList/CheckList.module.scss
View File

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

15
samples/react-mytasks/src/webparts/myTasks/components/EditTask/EditTask.module.scss
View File

@ -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 {

16
samples/react-mytasks/src/webparts/myTasks/components/MyTasks/MyTasks.module.scss
View File

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

5
samples/react-mytasks/src/webparts/myTasks/components/NewTask/NewTask.module.scss
View File

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

153
samples/react-mytasks/src/webparts/myTasks/components/TaskCard/TaskCard.module.scss
View File

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