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

46
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;
.item {
h3 {
font-size: 17px;
font-weight: 300;
margin-top: 0;
margin-bottom: 10px;
} }
.welcomeImage { span {
width: 100%; background-color: #fafafa;
max-width: 420px; padding: 8px 13px;
} display: block;
.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 { &: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 }
} }
} }
} }

49
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, {}> {
public render(): React.ReactElement<IEnhancedPagePropertiesProps> {
const {
description,
isDarkTheme,
environmentMessage,
hasTeamsContext,
userDisplayName
} = this.props;
export default function EnhancedPageProperties(): JSX.Element {
return ( return (
<section className={`${styles.enhancedPageProperties} ${hasTeamsContext ? styles.teams : ''}`}> <section className={styles.enhancedPageProperties}>
<div className={styles.welcome}> <h2>Site Scope</h2>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} /> <div className={styles.content}>
<h2>Well done, {escape(userDisplayName)}!</h2> <div className={styles.item}>
<div>{environmentMessage}</div> <h3>Function</h3>
<div>Web part property value: <strong>{escape(description)}</strong></div> <span>COMMUNICAITONS AND STAKEHOLDER</span>
</div>
<div className={styles.item}>
<h3>Activity</h3>
<span>Advertising and Communications</span>
</div> </div>
<div>
<h3>Welcome to SharePoint Framework!</h3>
<p>
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> </section>
); );
} }
}