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
commit 1904677b67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 43 additions and 19 deletions

View File

@ -17,6 +17,13 @@ export const DateBox = (props: IDateBoxProps) => {
// check if both dates are on the same day // check if both dates are on the same day
const isSameDay: boolean = startMoment.isSame(endMoment, "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) { if (isSameDay) {
return ( return (
<div className={css(styles.box, <div className={css(styles.box,
@ -26,17 +33,18 @@ export const DateBox = (props: IDateBoxProps) => {
props.themeVariant && props.themeVariant &&
{ {
// KLUDGE: It seems like the themeVariant palette doesn't expose primaryBackground // KLUDGE: It seems like the themeVariant palette doesn't expose primaryBackground
backgroundColor: props.themeVariant.palette["primaryBackground"], backgroundColor: backgroundColor,
borderColor: props.themeVariant.semanticColors.bodyDivider borderColor: borderColor,
color: textColor
}}> }}>
<div className={styles.month} <div className={styles.month}
style={ style={
props.themeVariant && props.themeVariant &&
{ color: props.themeVariant.semanticColors.bodyText }}>{startMoment.format("MMM").toUpperCase()}</div> { color: textColor }}>{startMoment.format("MMM").toUpperCase()}</div>
<div className={styles.day} <div className={styles.day}
style={ style={
props.themeVariant && props.themeVariant &&
{ color: props.themeVariant.semanticColors.bodyText }}>{startMoment.format("D")}</div> { color: textColor }}>{startMoment.format("D")}</div>
</div>); </div>);
} else { } else {
@ -48,25 +56,25 @@ export const DateBox = (props: IDateBoxProps) => {
style={ style={
props.themeVariant && props.themeVariant &&
{ {
backgroundColor: props.themeVariant.palette["primaryBackground"], backgroundColor: backgroundColor,
borderColor: props.themeVariant.semanticColors.bodyDivider borderColor: borderColor,
color: textColor
}}> }}>
<div className={styles.date} style={ <div className={styles.date} style={
props.themeVariant && 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} <hr className={styles.separator}
style={ style={
props.themeVariant && props.themeVariant &&
{ {
borderColor: props.themeVariant.semanticColors.bodyText borderColor: textColor
}} }}
/> />
<div className={styles.date} style={ <div className={styles.date} style={
props.themeVariant && props.themeVariant &&
{ color: props.themeVariant.semanticColors.bodyText }}>{endMoment.format("MMM D").toUpperCase()}</div> { color: textColor }}>{endMoment.format("MMM D").toUpperCase()}</div>
</div>); </div>);
} }
}; };

View File

@ -81,6 +81,13 @@ export const EventCard = (props: IEventCardProps) => {
window.open("data:text/calendar;charset=utf8," + encodeURIComponent(cal.toString())); window.open("data:text/calendar;charset=utf8," + encodeURIComponent(cal.toString()));
}, [event]); }, [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) { if (isNarrow) {
// Calculate the date and string format // Calculate the date and string format
@ -111,8 +118,8 @@ export const EventCard = (props: IEventCardProps) => {
/> />
</div> </div>
<div> <div>
<div className={styles.title} style={themeVariant && { color: themeVariant.semanticColors.bodyText }}>{title}</div> <div className={styles.title} style={themeVariant && { color: textColor }}>{title}</div>
<div className={styles.datetime} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext }}>{dateString}</div> <div className={styles.datetime} style={themeVariant && { color: subTextColor }}>{dateString}</div>
</div> </div>
</DocumentCard> </DocumentCard>
</div> </div>
@ -147,13 +154,13 @@ export const EventCard = (props: IEventCardProps) => {
/> />
</div> </div>
<div className={styles.detailsContainer}> <div className={styles.detailsContainer}>
<div className={styles.category} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext }}>{category}</div> <div className={styles.category} style={themeVariant && { color: subTextColor }}>{category}</div>
<div className={styles.title} style={themeVariant && { color: themeVariant.semanticColors.bodyText }}>{title}</div> <div className={styles.title} style={themeVariant && { color: textColor }}>{title}</div>
<div className={styles.datetime} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext }}>{dateString}</div> <div className={styles.datetime} style={themeVariant && { color: subTextColor }}>{dateString}</div>
<div className={styles.location} style={themeVariant && { color: themeVariant.semanticColors.bodySubtext }}>{location}</div> <div className={styles.location} style={themeVariant && { color: subTextColor }}>{location}</div>
<ActionButton <ActionButton
className={styles.addToMyCalendar} className={styles.addToMyCalendar}
style={themeVariant && { color: themeVariant.semanticColors.bodyText }} style={themeVariant && { color: textColor }}
iconProps={{ iconName: "AddEvent" }} iconProps={{ iconName: "AddEvent" }}
ariaLabel={strings.AddToCalendarAriaLabel} ariaLabel={strings.AddToCalendarAriaLabel}
onClick={_onAddToMyCalendar} onClick={_onAddToMyCalendar}

View File

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

View File

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

View File

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

View File

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