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

Merge pull request #1230 from hugoabernier/react-calendar-feed-110-2 

Fixed "strong" section colors in react-calendar-feed
This commit is contained in:
Hugo Bernier 2020-04-18 22:03:21 -04:00 committed by GitHub
parent 5b3634043a 116ae7e9d9
commit 1904677b67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
samples/react-calendar-feed/src/shared/components/DateBox/DateBox.tsx
View File

@ -17,6 +17,13 @@ export const DateBox = (props: IDateBoxProps) => {
// check if both dates are on the same day
const isSameDay: boolean = startMoment.isSame(endMoment, "day");
const { themeVariant } = props;
const backgroundColor: string = themeVariant && themeVariant.palette["primaryBackground"];
const textColor: string = themeVariant && backgroundColor != themeVariant.semanticColors.bodyText ?
themeVariant.semanticColors.bodyText : themeVariant.palette["primaryText"];
// If the background color matches the text color, it is probably a reversed section, use a different border color
const borderColor: string = themeVariant && backgroundColor != themeVariant.semanticColors.bodyText ? themeVariant.semanticColors.bodyDivider : "[theme:neutralLight, default: #eaeaea]";
if (isSameDay) {
return (
<div className={css(styles.box,
@ -26,17 +33,18 @@ export const DateBox = (props: IDateBoxProps) => {
props.themeVariant &&
{
// KLUDGE: It seems like the themeVariant palette doesn't expose primaryBackground
backgroundColor: props.themeVariant.palette["primaryBackground"],
borderColor: props.themeVariant.semanticColors.bodyDivider
backgroundColor: backgroundColor,
borderColor: borderColor,
color: textColor
}}>
<div className={styles.month}
style={
props.themeVariant &&
{ color: props.themeVariant.semanticColors.bodyText }}>{startMoment.format("MMM").toUpperCase()}</div>
{ color: textColor }}>{startMoment.format("MMM").toUpperCase()}</div>
<div className={styles.day}
style={
props.themeVariant &&
{ color: props.themeVariant.semanticColors.bodyText }}>{startMoment.format("D")}</div>
{ color: textColor }}>{startMoment.format("D")}</div>
</div>);
} else {
@ -48,25 +56,25 @@ export const DateBox = (props: IDateBoxProps) => {
style={
props.themeVariant &&
{
backgroundColor: props.themeVariant.palette["primaryBackground"],
borderColor: props.themeVariant.semanticColors.bodyDivider
backgroundColor: backgroundColor,
borderColor: borderColor,
color: textColor
}}>
<div className={styles.date} style={
props.themeVariant &&
{ color: props.themeVariant.semanticColors.bodyText }}>{startMoment.format("MMM D").toUpperCase()}</div>
{ color: textColor }}>{startMoment.format("MMM D").toUpperCase()}</div>
<hr className={styles.separator}
style={
props.themeVariant &&
{
borderColor: props.themeVariant.semanticColors.bodyText
borderColor: textColor
}}
/>
<div className={styles.date} style={
props.themeVariant &&
{ color: props.themeVariant.semanticColors.bodyText }}>{endMoment.format("MMM D").toUpperCase()}</div>
{ color: textColor }}>{endMoment.format("MMM D").toUpperCase()}</div>
</div>);
}
};

21
samples/react-calendar-feed/src/shared/components/EventCard/EventCard.tsx
View File

@ -81,6 +81,13 @@ export const EventCard = (props: IEventCardProps) => {
window.open("data:text/calendar;charset=utf8," + encodeURIComponent(cal.toString()));
}, [event]);
//Unfortunately, themes don't always populate all the palette/semantic colors.
//Detect if background color is the same as the foreground and find default
const backgroundColor: string = themeVariant && (isNarrow ? themeVariant.semanticColors.bodyBackground : themeVariant.palette["primaryBackground"]);
const textColor: string = themeVariant && backgroundColor != themeVariant.semanticColors.bodyText ?
themeVariant.semanticColors.bodyText : themeVariant.palette["primaryText"];
const subTextColor: string = themeVariant && themeVariant.semanticColors.bodySubtext && backgroundColor != themeVariant.semanticColors.bodySubtext ? themeVariant.semanticColors.bodySubtext : textColor;
if (isNarrow) {
// Calculate the date and string format
@ -111,8 +118,8 @@ export const EventCard = (props: IEventCardProps) => {
/>
</div>
<div>
<div className={styles.title} style={themeVariant && { color: themeVariant.semanticColors.bodyText }}>{title}</div>
<div className={styles.datetime} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext }}>{dateString}</div>
<div className={styles.title} style={themeVariant && { color: textColor }}>{title}</div>
<div className={styles.datetime} style={themeVariant && { color: subTextColor }}>{dateString}</div>
</div>
</DocumentCard>
</div>
@ -147,13 +154,13 @@ export const EventCard = (props: IEventCardProps) => {
/>
</div>
<div className={styles.detailsContainer}>
<div className={styles.category} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext }}>{category}</div>
<div className={styles.title} style={themeVariant && { color: themeVariant.semanticColors.bodyText }}>{title}</div>
<div className={styles.datetime} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext }}>{dateString}</div>
<div className={styles.location} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext }}>{location}</div>
<div className={styles.category} style={themeVariant && { color: subTextColor }}>{category}</div>
<div className={styles.title} style={themeVariant && { color: textColor }}>{title}</div>
<div className={styles.datetime} style={themeVariant && { color: subTextColor }}>{dateString}</div>
<div className={styles.location} style={themeVariant && { color: subTextColor }}>{location}</div>
<ActionButton
className={styles.addToMyCalendar}
style={themeVariant && { color: themeVariant.semanticColors.bodyText }}
style={themeVariant && { color: textColor }}
iconProps={{ iconName: "AddEvent" }}
ariaLabel={strings.AddToCalendarAriaLabel}
onClick={_onAddToMyCalendar}

2
samples/react-calendar-feed/src/shared/components/Pagination/IPagingProps.ts
View File

@ -1,3 +1,5 @@
import { IReadonlyTheme } from '@microsoft/sp-component-base';
export interface IPaginationProps {
currentPage: number;
totalItems: number;

5
samples/react-calendar-feed/src/shared/components/Pagination/Pagination.module.scss
View File

@ -15,6 +15,10 @@
border: none;
}
.nogo {
color: $ms-color-neutralTertiary!important;
}
button {
font-size: 14px;
font-weight: 400;
@ -30,6 +34,7 @@
&:hover, &:active {
color: "[theme:buttonTextCheckedHovered, default: #000]"
}
}
&.noPageNum {

4
samples/react-calendar-feed/src/shared/components/Pagination/Pagination.tsx
View File

@ -43,7 +43,7 @@ export const Pagination = (props: IPaginationProps) => {
return (
<div className={css(styles.Pagination, props.showPageNum ? null : styles.noPageNum)}>
<ActionButton className={styles.prev}
<ActionButton className={css(styles.prev, prevDisabled && styles.nogo)}
onRenderIcon={(_props: IButtonProps) => {
// we use the render custom icon method to render the icon consistently with the right icon
return (
@ -57,7 +57,7 @@ export const Pagination = (props: IPaginationProps) => {
{strings.PrevButtonLabel}
</ActionButton>
{/* NOT IMPLEMENTED: Page numbers aren't shown here, but we'll need them if we want this control to be reusable */}
<ActionButton className={styles.next}
<ActionButton className={css(styles.next, nextDisabled && styles.nogo)}
data-automation-id="nextPage"
disabled={nextDisabled}
onRenderMenuIcon={(_props: IButtonProps) => {

2
samples/react-calendar-feed/src/shared/components/filmstripLayout/FilmstripLayout.tsx
View File

@ -60,6 +60,8 @@ export const FilmstripLayout = (props: { children: any; clientWidth: number; the
respondTo: "slider",
};
console.log("Theme", props.themeVariant);
return (
<>
{/*