From 0724894d165ca75c244598ec1ed073cd7fbc1c40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Mendes?= Date: Tue, 9 Mar 2021 23:00:10 +0000 Subject: [PATCH] commit changes on staff directory --- samples/react-staffdirectory/package.json | 2 +- .../src/common/TeamsContrastTheme.json | 24 +++++++ .../src/common/TeamsDarkTheme.json | 24 +++++++ .../src/common/TeamsDefaultTheme.json | 24 +++++++ .../src/common/themeColors.module.scss | 17 +++++ .../StaffDirectory/StaffDirectory.tsx | 26 +++---- .../src/components/UserCard/UserCard.tsx | 28 +++++--- .../StaffDirectoryWebPart.manifest.json | 2 +- .../staffDirectory/StaffDirectoryWebPart.ts | 69 ++++++++++++++++--- 9 files changed, 183 insertions(+), 33 deletions(-) create mode 100644 samples/react-staffdirectory/src/common/TeamsContrastTheme.json create mode 100644 samples/react-staffdirectory/src/common/TeamsDarkTheme.json create mode 100644 samples/react-staffdirectory/src/common/TeamsDefaultTheme.json create mode 100644 samples/react-staffdirectory/src/common/themeColors.module.scss diff --git a/samples/react-staffdirectory/package.json b/samples/react-staffdirectory/package.json index 4243e95b3..7161d32bc 100644 --- a/samples/react-staffdirectory/package.json +++ b/samples/react-staffdirectory/package.json @@ -49,7 +49,7 @@ "jest": "^23.6.0", "jest-junit": "^10.0.0", "lodash": "^4.17.15", - "spfx-uifabric-themes": "^0.8.0", + "spfx-uifabric-themes": "^0.8.5", "typescript": "~3.7.x" }, "jest-junit": { diff --git a/samples/react-staffdirectory/src/common/TeamsContrastTheme.json b/samples/react-staffdirectory/src/common/TeamsContrastTheme.json new file mode 100644 index 000000000..004889481 --- /dev/null +++ b/samples/react-staffdirectory/src/common/TeamsContrastTheme.json @@ -0,0 +1,24 @@ +{ + "themePrimary": "#6264a7", + "themeLighterAlt": "#f7f7fb", + "themeLighter": "#e1e1f1", + "themeLight": "#c8c9e4", + "themeTertiary": "#989ac9", + "themeSecondary": "#7173b0", + "themeDarkAlt": "#585a95", + "themeDark": "#4a4c7e", + "themeDarker": "#37385d", + "neutralLighterAlt": "#0b0b0b", + "neutralLighter": "#151515", + "neutralLight": "#252525", + "neutralQuaternaryAlt": "#2f2f2f", + "neutralQuaternary": "#373737", + "neutralTertiaryAlt": "#595959", + "neutralTertiary": "#c8c8c8", + "neutralSecondary": "#d0d0d0", + "neutralPrimaryAlt": "#dadada", + "neutralPrimary": "#ffffff", + "neutralDark": "#f4f4f4", + "black": "#f8f8f8", + "white": "#000000" +} diff --git a/samples/react-staffdirectory/src/common/TeamsDarkTheme.json b/samples/react-staffdirectory/src/common/TeamsDarkTheme.json new file mode 100644 index 000000000..7dc1849f4 --- /dev/null +++ b/samples/react-staffdirectory/src/common/TeamsDarkTheme.json @@ -0,0 +1,24 @@ +{ + "themePrimary": "#6264a7", + "themeLighterAlt": "#f7f7fb", + "themeLighter": "#e1e1f1", + "themeLight": "#c8c9e4", + "themeTertiary": "#989ac9", + "themeSecondary": "#7173b0", + "themeDarkAlt": "#585a95", + "themeDark": "#4a4c7e", + "themeDarker": "#37385d", + "neutralLighterAlt": "#2d2c2c", + "neutralLighter": "#2c2b2b", + "neutralLight": "#2a2929", + "neutralQuaternaryAlt": "#272626", + "neutralQuaternary": "#252525", + "neutralTertiaryAlt": "#242323", + "neutralTertiary": "#c8c8c8", + "neutralSecondary": "#d0d0d0", + "neutralPrimaryAlt": "#dadada", + "neutralPrimary": "#ffffff", + "neutralDark": "#f4f4f4", + "black": "#f8f8f8", + "white": "#2d2c2c" +} diff --git a/samples/react-staffdirectory/src/common/TeamsDefaultTheme.json b/samples/react-staffdirectory/src/common/TeamsDefaultTheme.json new file mode 100644 index 000000000..e43d81d7c --- /dev/null +++ b/samples/react-staffdirectory/src/common/TeamsDefaultTheme.json @@ -0,0 +1,24 @@ +{ + "themePrimary": "#6264a7", + "themeLighterAlt": "#f7f7fb", + "themeLighter": "#e1e1f1", + "themeLight": "#c8c9e4", + "themeTertiary": "#989ac9", + "themeSecondary": "#7173b0", + "themeDarkAlt": "#585a95", + "themeDark": "#4a4c7e", + "themeDarker": "#37385d", + "neutralLighterAlt": "#ecebe9", + "neutralLighter": "#e8e7e6", + "neutralLight": "#dedddc", + "neutralQuaternaryAlt": "#cfcecd", + "neutralQuaternary": "#c6c5c4", + "neutralTertiaryAlt": "#bebdbc", + "neutralTertiary": "#b5b4b2", + "neutralSecondary": "#9d9c9a", + "neutralPrimaryAlt": "#868482", + "neutralPrimary": "#252423", + "neutralDark": "#565453", + "black": "#3e3d3b", + "white": "#f3f2f1" +} diff --git a/samples/react-staffdirectory/src/common/themeColors.module.scss b/samples/react-staffdirectory/src/common/themeColors.module.scss new file mode 100644 index 000000000..2d73c24a4 --- /dev/null +++ b/samples/react-staffdirectory/src/common/themeColors.module.scss @@ -0,0 +1,17 @@ +$default-background: #f3f2f1; +$default-color: #252423; +$default-button-background: #6264a7; +$default-Button-color: #f3f2f1; + +// dark theme +$dark-background: #2d2c2c; +$dark-color: #ffffff; +$dark-button-background: #6264a7; +$dark-button-color: #2d2c2c; + +// contrast theme +$contrast-background: #000000; +$contrast-color: #ffffff; +$contrast-button-background: #b5c01c; +$contrast-Button-color: #000000; + diff --git a/samples/react-staffdirectory/src/components/StaffDirectory/StaffDirectory.tsx b/samples/react-staffdirectory/src/components/StaffDirectory/StaffDirectory.tsx index 884c4847a..0d6440f9c 100644 --- a/samples/react-staffdirectory/src/components/StaffDirectory/StaffDirectory.tsx +++ b/samples/react-staffdirectory/src/components/StaffDirectory/StaffDirectory.tsx @@ -46,7 +46,7 @@ import { AppContext } from "../../common/AppContext"; import { UserCard } from "../UserCard/UserCard"; import { useRef } from "react"; import strings from "StaffDirectoryWebPartStrings"; - +import {Theme} from 'spfx-uifabric-themes'; const imageNoData: string = require("../../../assets/Nodatarafiki.svg"); @@ -73,7 +73,7 @@ export const StaffDirectory: React.FunctionComponent = ( props: IStaffDirectoryProps ) => { const { showBox, maxHeight } = props; - + const _theme = window.__themeState__.theme; const styleClasses = mergeStyleSets({ webPartTitle: { marginBottom: 20, @@ -85,7 +85,7 @@ export const StaffDirectory: React.FunctionComponent = ( margin: 20, borderBottomStyle: "solid", borderWidth: 1, - borderBottomColor: props.themeVariant.palette.themeLighter, + borderBottomColor: props.themeVariant?.palette?.themeLighter ?? _theme.themeLighter, }, styleIcon: { @@ -93,7 +93,7 @@ export const StaffDirectory: React.FunctionComponent = ( minWidth: 44, minHeight: 30, height: 30, - borderColor: props.themeVariant.palette.themePrimary, + borderColor: props.themeVariant?.palette?.themePrimary ?? _theme.themePrimary, borderRightWidth: 0, borderRightStyle: "none", borderLeftWidth: 1, @@ -123,24 +123,24 @@ export const StaffDirectory: React.FunctionComponent = ( width: "100%", maxHeight: 32, minHeight: 32, - borderColor: props.themeVariant.palette.themePrimary, + borderColor: props.themeVariant?.palette?.themePrimary ?? _theme.themePrimary, }, itemsWrapper: { - borderColor: props.themeVariant.palette.themePrimary, + borderColor: props.themeVariant?.palette?.themePrimary ?? _theme.themePrimary, }, text: { borderLeftWidth: 0, minHeight: 32, - borderColor: props.themeVariant.palette.themePrimary, + borderColor: props.themeVariant?.palette?.themePrimary ?? _theme.themePrimary, selectors: { ":focus": { - borderColor: props.themeVariant.palette.themePrimary, + borderColor:props.themeVariant?.palette?.themePrimary ?? _theme.themePrimary, }, ":hover": { - borderColor: props.themeVariant.palette.themePrimary, + borderColor: props.themeVariant?.palette?.themePrimary ?? _theme.themePrimary, }, "::after": { - borderColor: props.themeVariant.palette.themePrimary, + borderColor: props.themeVariant?.palette?.themePrimary ?? _theme.themePrimary, borderWidth: 1, borderLeftWidth: 0, }, @@ -151,7 +151,7 @@ export const StaffDirectory: React.FunctionComponent = ( const nextPageStyle: ILinkStyles = { root: { fontWeight: 600, - fontSize: props.themeVariant.fonts.mediumPlus.fontSize, + fontSize: props.themeVariant?.fonts?.mediumPlus?.fontSize ?? window.__themeState__.theme["ms-font-mediumPlus-fontSize"], selectors: { ":hover": { textDecoration: "underline" } }, }, }; @@ -383,8 +383,8 @@ export const StaffDirectory: React.FunctionComponent = ( iconName="Search" style={{ verticalAlign: "center", - fontSize: props.themeVariant.fonts.mediumPlus.fontSize, - color: props.themeVariant.palette.themePrimary, + fontSize: props.themeVariant?.fonts?.mediumPlus?.fontSize ?? window.__themeState__.theme["ms-font-mediumPlus-fontSize"], + color: props.themeVariant?.palette.themePrimary ?? _theme.themePrimary, }} /> diff --git a/samples/react-staffdirectory/src/components/UserCard/UserCard.tsx b/samples/react-staffdirectory/src/components/UserCard/UserCard.tsx index 15a4b76a8..fb59fcd2c 100644 --- a/samples/react-staffdirectory/src/components/UserCard/UserCard.tsx +++ b/samples/react-staffdirectory/src/components/UserCard/UserCard.tsx @@ -10,6 +10,7 @@ import { Link, ITextFieldStyles, IPersonaProps, + loadTheme, } from "office-ui-fabric-react"; import { presenceStatus, IPresenceStatus } from "../../common/PresenceStatus"; import { AppContext } from "../../common/AppContext"; @@ -18,14 +19,19 @@ import { IUserExtended } from "../../entites/IUserExtended"; import { IAppContext } from "../../common/IAppContext"; import { IUserCardProps } from "./IUserCardProps"; + +const teamsDefaultTheme = require("../../common/TeamsDefaultTheme.json"); +const teamsDarkTheme = require("../../common/TeamsDarkTheme.json"); +const teamsContrastTheme = require("../../common/TeamsContrastTheme.json"); + export const UserCard = (props: IUserCardProps) => { const { userData, updateUsersPresence } = props; const _context: IAppContext = React.useContext(AppContext); const [expandIcon, setExpandIcon] = React.useState("ChevronDownSmall"); const [isDetailsOpen, setIsDetailsOpen] = React.useState(false); - - + const _Theme = window.__themeState__.theme; + const styleClasses = mergeStyleSets({ separator: { marginLeft: 20, @@ -33,31 +39,32 @@ export const UserCard = (props: IUserCardProps) => { marginTop: 15, borderBottomStyle: "solid", borderWidth: 1, - borderBottomColor: _context.themeVariant.palette.neutralLighterAlt, + borderBottomColor: _context.themeVariant?.palette?.themeLighter ?? _Theme.themeLighter, }, stylContainerDetails: { marginTop: 25, display: "grid", justifyContent: "stretch", alignItems: "center", - backgroundColor: _context.themeVariant.palette.themeLighter, + backgroundColor: _context.themeVariant?.palette?.neutralLighterAlt ?? _Theme.neutralLighterAlt, gridTemplateColumns: "repeat( auto-fit, minmax(280px, 1fr) )", gridTemplateRows: "auto", }, styleIconDetails: { fontSize: 16, - color: _context.themeVariant.palette.themePrimary, + color: _context.themeVariant?.palette?.themePrimary ?? _Theme.themePrimary, }, styleFieldLabel: { fontSize: 12, fontWeight: 400, paddingLeft: 3, + color: _Theme.inputText }, styleField: { paddingTop: 15, - + color: _context.themeVariant?.palette?.themePrimary ?? _Theme.themePrimary, }, }); @@ -127,12 +134,12 @@ export const UserCard = (props: IUserCardProps) => { root: { height: 21, width: 26, - color: _context.themeVariant.palette.themePrimary, + color: _context.themeVariant?.palette?.themeSecondary ?? _Theme.themeSecondary, }, }} iconProps={{ iconName: "CannedChat", - color: _context.themeVariant.palette.themePrimary, + color: _context.themeVariant?.palette?.themeSecondary ??_Theme.themeSecondary, }} allowDisabledFocus={true} disabled={false} @@ -156,12 +163,13 @@ export const UserCard = (props: IUserCardProps) => { root: { height: 21, width: 26, - color: _context.themeVariant.palette.themePrimary, + }, }} iconProps={{ iconName: expandIcon, - color: _context.themeVariant.palette.themePrimary, + color: _Theme.themeSecondary + }} allowDisabledFocus={true} disabled={false} diff --git a/samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.manifest.json b/samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.manifest.json index a8c03defc..c1c75504f 100644 --- a/samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.manifest.json +++ b/samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.manifest.json @@ -13,7 +13,7 @@ // Components that allow authors to embed arbitrary script code should set this to true. // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f "requiresCustomScript": false, - "supportedHosts": ["SharePointWebPart"], + "supportedHosts": ["SharePointWebPart","TeamsTab","TeamsPersonalApp"], "preconfiguredEntries": [{ "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other diff --git a/samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.ts b/samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.ts index bfb95d0b8..07c1c1149 100644 --- a/samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.ts +++ b/samples/react-staffdirectory/src/webparts/staffDirectory/StaffDirectoryWebPart.ts @@ -6,16 +6,19 @@ import { PropertyPaneTextField, PropertyPaneSlider, PropertyPaneToggle, - PropertyPaneHorizontalRule + PropertyPaneHorizontalRule, + PropertyPaneLabel, + PopupWindowPosition } from '@microsoft/sp-property-pane'; -import { BaseClientSideWebPart, PropertyPaneLabel } from '@microsoft/sp-webpart-base'; +import { BaseClientSideWebPart, } from '@microsoft/sp-webpart-base'; import * as strings from 'StaffDirectoryWebPartStrings'; import {StaffDirectory} from '../../components/StaffDirectory/StaffDirectory'; import { IStaffDirectoryProps } from '../../components/StaffDirectory/IStaffDirectoryProps'; import { PropertyFieldMultiSelect } from '@pnp/spfx-property-controls/lib/PropertyFieldMultiSelect'; - +import {Theme} from 'spfx-uifabric-themes'; import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base'; +import { loadTheme } from 'office-ui-fabric-react'; export interface IStaffDirectoryWebPartProps { title: string; maxHeight: number; @@ -28,27 +31,77 @@ export interface IStaffDirectoryWebPartProps { pageSize:number; } +const teamsDefaultTheme = require("../../common/TeamsDefaultTheme.json"); +const teamsDarkTheme = require("../../common/TeamsDarkTheme.json"); +const teamsContrastTheme = require("../../common/TeamsContrastTheme.json"); export default class StaffDirectoryWebPart extends BaseClientSideWebPart { private _themeProvider: ThemeProvider; private _themeVariant: IReadonlyTheme | undefined; + + protected async onInit(): Promise { - window.sessionStorage.clear(); - this._themeProvider = this.context.serviceScope.consume(ThemeProvider.serviceKey); + + + + this._themeProvider = this.context.serviceScope.consume( + ThemeProvider.serviceKey + ); // If it exists, get the theme variant this._themeVariant = this._themeProvider.tryGetTheme(); - // Register a handler to be notified if the theme variant changes - this._themeProvider.themeChangedEvent.add(this, this._handleThemeChangedEvent); + this._themeProvider.themeChangedEvent.add( + this, + this._handleThemeChangedEvent + ); + + if (this.context.sdks.microsoftTeams) { + // in teams ? + const context = this.context.sdks.microsoftTeams!.context; + this._applyTheme(context.theme || "default"); + this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler( + this._applyTheme + ); + } return Promise.resolve(); } + /** + * Update the current theme variant reference and re-render. + * + * @param args The new theme + */ private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void { this._themeVariant = args.theme; this.render(); } + // Apply btheme id in Teams + private _applyTheme = (theme: string): void => { + this.context.domElement.setAttribute("data-theme", theme); + document.body.setAttribute("data-theme", theme); + + if (theme == "dark") { + loadTheme({ + palette: teamsDarkTheme, + }); + } + + if (theme == "default") { + loadTheme({ + palette: teamsDefaultTheme, + }); + } + + if (theme == "contrast") { + loadTheme({ + palette: teamsContrastTheme, + }); + } + this.render(); + } + public render(): void { const element: React.ReactElement = React.createElement( @@ -58,7 +111,7 @@ export default class StaffDirectoryWebPart extends BaseClientSideWebPart { this.properties.title = value;