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

Add base layout

This commit is contained in:
AriGunawan 2023-07-28 23:40:18 +07:00
parent 186c747584
commit 9cd8043f94
2 changed files with 39 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.module.scss
View File

@ -1,34 +1,32 @@
@import '~@fluentui/react/dist/sass/References.scss';
.enhancedPageProperties { .enhancedPageProperties {
overflow: hidden; h2 {
padding: 1em; font-size: 20px;
color: "[theme:bodyText, default: #323130]"; font-weight: 600;
color: var(--bodyText); margin-top: 0;
&.teams { margin-bottom: 18px;
font-family: $ms-font-family-fallbacks;
} }
}
.welcome { .content {
text-align: center; display: grid;
} gap: 20px;
.welcomeImage { .item {
width: 100%; h3 {
max-width: 420px; font-size: 17px;
} font-weight: 300;
margin-top: 0;
margin-bottom: 10px;
}
.links { span {
a { background-color: #fafafa;
text-decoration: none; padding: 8px 13px;
color: "[theme:link, default:#03787c]"; display: block;
color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
&:hover { &:hover {
text-decoration: underline; background-color: #f0f0f0;
color: "[theme:linkHovered, default: #014446]"; }
color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only }
} }
} }
} }

55
samples/react-enhanced-page-properties/src/webparts/enhancedPageProperties/components/EnhancedPageProperties.tsx
View File

@ -1,43 +1,20 @@
import * as React from 'react'; import * as React from "react";
import styles from './EnhancedPageProperties.module.scss'; import styles from "./EnhancedPageProperties.module.scss";
import { IEnhancedPagePropertiesProps } from './IEnhancedPagePropertiesProps';
import { escape } from '@microsoft/sp-lodash-subset';
export default class EnhancedPageProperties extends React.Component<IEnhancedPagePropertiesProps, {}> { export default function EnhancedPageProperties(): JSX.Element {
public render(): React.ReactElement<IEnhancedPagePropertiesProps> { return (
const { <section className={styles.enhancedPageProperties}>
description, <h2>Site Scope</h2>
isDarkTheme, <div className={styles.content}>
environmentMessage, <div className={styles.item}>
hasTeamsContext, <h3>Function</h3>
userDisplayName <span>COMMUNICAITONS AND STAKEHOLDER</span>
} = this.props;
return (
<section className={`${styles.enhancedPageProperties} ${hasTeamsContext ? styles.teams : ''}`}>
<div className={styles.welcome}>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
<h2>Well done, {escape(userDisplayName)}!</h2>
<div>{environmentMessage}</div>
<div>Web part property value: <strong>{escape(description)}</strong></div>
</div> </div>
<div> <div className={styles.item}>
<h3>Welcome to SharePoint Framework!</h3> <h3>Activity</h3>
<p> <span>Advertising and Communications</span>
The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It&#39;s the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
</p>
<h4>Learn more about SPFx development:</h4>
<ul className={styles.links}>
<li><a href="https://aka.ms/spfx" target="_blank" rel="noreferrer">SharePoint Framework Overview</a></li>
<li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank" rel="noreferrer">Use Microsoft Graph in your solution</a></li>
<li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank" rel="noreferrer">Build for Microsoft Teams using SharePoint Framework</a></li>
<li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank" rel="noreferrer">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
<li><a href="https://aka.ms/spfx-yeoman-store" target="_blank" rel="noreferrer">Publish SharePoint Framework applications to the marketplace</a></li>
<li><a href="https://aka.ms/spfx-yeoman-api" target="_blank" rel="noreferrer">SharePoint Framework API reference</a></li>
<li><a href="https://aka.ms/m365pnp" target="_blank" rel="noreferrer">Microsoft 365 Developer Community</a></li>
</ul>
</div> </div>
</section> </div>
); </section>
} );
} }