Merge pull request #1230 from hugoabernier/react-calendar-feed-110-2
Fixed "strong" section colors in react-calendar-feed
This commit is contained in:
commit
1904677b67
|
@ -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>);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -60,6 +60,8 @@ export const FilmstripLayout = (props: { children: any; clientWidth: number; the
|
||||||
respondTo: "slider",
|
respondTo: "slider",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
console.log("Theme", props.themeVariant);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/*
|
{/*
|
||||||
|
|
Loading…
Reference in New Issue