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

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

@ -1,43 +1,20 @@
import * as React from 'react';
import styles from './EnhancedPageProperties.module.scss';
import { IEnhancedPagePropertiesProps } from './IEnhancedPagePropertiesProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as React from "react";
import styles from "./EnhancedPageProperties.module.scss";
export default class EnhancedPageProperties extends React.Component<IEnhancedPagePropertiesProps, {}> {
public render(): React.ReactElement<IEnhancedPagePropertiesProps> {
const {
description,
isDarkTheme,
environmentMessage,
hasTeamsContext,
userDisplayName
} = 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>
export default function EnhancedPageProperties(): JSX.Element {
return (
<section className={styles.enhancedPageProperties}>
<h2>Site Scope</h2>
<div className={styles.content}>
<div className={styles.item}>
<h3>Function</h3>
<span>COMMUNICAITONS AND STAKEHOLDER</span>
</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 className={styles.item}>
<h3>Activity</h3>
<span>Advertising and Communications</span>
</div>
</section>
);
}
</div>
</section>
);
}