Add readme and other bits of docs
Fix FluentUI 9 with Overrides
This commit is contained in:
Nick Brown
parent
ccb6486d00
commit
d76e3e2ccf
|
|
@ -2,9 +2,11 @@
|
|||
|
||||
## Summary
|
||||
|
||||
Short summary on functionality and used technologies.
|
||||
Displays a list of Teams Webinars you are an organizer of, allows you to sync those webinars to a SharePoint list, to share within a Team and cross check pending registrants against membership of a team.
|
||||
|
||||
[picture of the solution in action, if possible]
|
||||
|
||||
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
|
@ -17,22 +19,33 @@ Short summary on functionality and used technologies.
|
|||
|
||||
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||
|
||||
## Prerequisites
|
||||
## Compatibility
|
||||
|
||||
> Any special pre-requisites?
|
||||
⚠️ Currently an override is needed for FluentUI 9 + SPFX
|
||||
|
||||
| :warning: Important |
|
||||
|:---------------------------|
|
||||
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|
||||
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Solution
|
||||
|
||||
| Solution | Author(s) |
|
||||
| ----------- | ------------------------------------------------------- |
|
||||
| folder name | Author details (name, company, twitter alias with link) |
|
||||
| Solution | Author(s) |
|
||||
| ----------------------- | ------------------------------------------------------- |
|
||||
| react-teams-mm-webinars | [Nick Brown](https://github.com/techienickb) |
|
||||
|
||||
## Version history
|
||||
|
||||
| Version | Date | Comments |
|
||||
| ------- | ---------------- | --------------- |
|
||||
| 1.1 | March 10, 2021 | Update comment |
|
||||
| 1.0 | January 29, 2021 | Initial release |
|
||||
| Version | Date | Comments |
|
||||
| ------- | ----------------- | --------------- |
|
||||
| 1.0 | December 25, 2024 | Initial release |
|
||||
|
||||
## Disclaimer
|
||||
|
||||
|
|
@ -48,17 +61,17 @@ Short summary on functionality and used technologies.
|
|||
- **npm install**
|
||||
- **gulp serve**
|
||||
|
||||
> Include any additional steps as needed.
|
||||
|
||||
## Features
|
||||
|
||||
Description of the extension that expands upon high-level summary above.
|
||||
|
||||
This extension illustrates the following concepts:
|
||||
|
||||
- topic 1
|
||||
- topic 2
|
||||
- topic 3
|
||||
- Using SPFX + Fluent Ui 9
|
||||
- Using Graph and the Webinars API
|
||||
- Using PnP components for site/list navigation
|
||||
- Using MonacoEditor
|
||||
- Using Graph to add items to a list
|
||||
|
||||
> Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance.
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
|
|
@ -12,9 +12,10 @@
|
|||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fluentui/react": "^8.112.9",
|
||||
"@fluentui/react-components": "^9.42.0",
|
||||
"@fluentui/react-migration-v8-v9": "^9.4.37",
|
||||
"@fluentui/react-components": "9.42.0",
|
||||
"@fluentui/react-migration-v8-v9": "^9.4.41",
|
||||
"@fluentui/react-popover": "9.8.23",
|
||||
"@fluentui/react-positioning": "9.10.2",
|
||||
"@microsoft/microsoft-graph-types": "^2.40.0",
|
||||
"@microsoft/microsoft-graph-types-beta": "^0.42.0-preview",
|
||||
"@microsoft/sp-component-base": "1.18.2",
|
||||
|
|
@ -43,5 +44,12 @@
|
|||
"eslint-plugin-react-hooks": "4.3.0",
|
||||
"gulp": "4.0.2",
|
||||
"typescript": "4.7.4"
|
||||
},
|
||||
"overrides": {
|
||||
"@fluentui/react-positioning@>9.10.2": "9.10.2",
|
||||
"@fluentui/react-combobox": "9.5.35",
|
||||
"@fluentui/react-popover": "9.8.23",
|
||||
"@fluentui/react-menu": "9.12.37",
|
||||
"@fluentui/react-tooltip": "9.4.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "26c11d2f-c74a-4d93-91ed-054bdea6aad8",
|
||||
"id": "1adde89a-07fd-403f-9067-4d44b40a4892",
|
||||
"alias": "MyTeamsVirtualEventsWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
@import '~@fluentui/react/dist/sass/References.scss';
|
||||
|
||||
.myTeamsVirualEvents {
|
||||
overflow: hidden;
|
||||
padding: 1em;
|
||||
color: "[theme:bodyText, default: #323130]";
|
||||
color: var(--bodyText);
|
||||
&.teams {
|
||||
|
|
@ -10,25 +8,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcomeImage {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.links {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: "[theme:link, default:#03787c]";
|
||||
color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: "[theme:linkHovered, default: #014446]";
|
||||
color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
|
||||
}
|
||||
}
|
||||
//Overrides the drawer's z-index
|
||||
:global(.fui-FluentProvider):has(> .myTeamsVirualEventsDrawer) {
|
||||
z-index: 100000;
|
||||
}
|
||||
|
|
@ -128,7 +128,7 @@ export default function MyTeamsVirtualEvents(props: IMyTeamsVirtualEventsProps):
|
|||
</Skeleton>
|
||||
</div>
|
||||
</div>}
|
||||
<OverlayDrawer size='medium' open={drawState !== DrawState.Closed} onOpenChange={(_, { open }) => !open && setDrawState(DrawState.Closed)}>
|
||||
<OverlayDrawer className={styles.myTeamsVirualEventsDrawer} size='medium' open={drawState !== DrawState.Closed} onOpenChange={(_, { open }) => !open && setDrawState(DrawState.Closed)}>
|
||||
<DrawerHeader>
|
||||
<DrawerHeaderTitle action={<Button appearance="subtle" aria-label={strings.Close} icon={<DismissIcon />} onClick={() => setDrawState(DrawState.Closed)} />}>
|
||||
{drawState === DrawState.OpenSync ? strings.DrawHeaderSync : strings.DrawHeaderApprove}
|
||||
|
|
|
|||
Loading…
Reference in New Issue