Merge pull request #3663 from djsladi/Layout-modernization
This commit is contained in:
Hugo Bernier
GitHub
commit
089162f740
|
|
@ -0,0 +1,39 @@
|
|||
// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
|
||||
{
|
||||
"name": "SPFx 1.11.0",
|
||||
"image": "docker.io/m365pnp/spfx:1.11.0",
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {},
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint"
|
||||
],
|
||||
// Use 'forwardPorts' to make a list of ports inside the container available locally.
|
||||
"forwardPorts": [
|
||||
4321,
|
||||
35729,
|
||||
5432
|
||||
],
|
||||
"portsAttributes": {
|
||||
"4321": {
|
||||
"protocol": "https",
|
||||
"label": "Manifest",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
},
|
||||
"5432": {
|
||||
"protocol": "https",
|
||||
"label": "Workbench",
|
||||
"onAutoForward": "silent"
|
||||
},
|
||||
"35729": {
|
||||
"protocol": "https",
|
||||
"label": "LiveReload",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
}
|
||||
},
|
||||
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
|
||||
"remoteUser": "node"
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
echo
|
||||
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
|
||||
npm install
|
||||
|
||||
## commands to create dev certificate and copy it to the root folder of the project
|
||||
echo
|
||||
echo -e "\e[1;94mGenerating dev certificate\e[0m"
|
||||
gulp trust-dev-cert
|
||||
|
||||
|
||||
cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer
|
||||
cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem
|
||||
|
||||
## add *.cer to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.cer' ./.gitignore
|
||||
then
|
||||
echo "# .CER Certificates" >> .gitignore
|
||||
echo "*.cer" >> .gitignore
|
||||
fi
|
||||
|
||||
## add *.pem to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.pem' ./.gitignore
|
||||
then
|
||||
echo "# .PEM Certificates" >> .gitignore
|
||||
echo "*.pem" >> .gitignore
|
||||
fi
|
||||
|
||||
echo
|
||||
echo -e "\e[1;92mReady!\e[0m"
|
||||
|
||||
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
## Summary
|
||||
|
||||
A RSS Reader original based on work completed by Olivier Carpentier's from: https://github.com/OlivierCC/spfx-40-fantastics/tree/master/src/webparts/rssReader
|
||||
Root project: https://github.com/OlivierCC/spfx-40-fantastics
|
||||
A RSS Reader original based [on work by Olivier Carpentier](https://github.com/OlivierCC/spfx-40-fantastics/tree/master/src/webparts/rssReader), part of the [SPFx Fantastic 40 Web Parts](https://github.com/OlivierCC/spfx-40-fantastics)
|
||||
|
||||
React RSS Reader utilizes SharePoint Framework v1.11.0 with no dependency on jQuery or a RSS Feed library. This project does utilize https://sharepoint.github.io/sp-dev-fx-property-controls/, and Moment React for date manipulation. Handlebar template option derived from React Search Refiners (PnP Modern Search): https://microsoft-search.github.io/pnp-modern-search/. Use NodeJS version 10 to compile or rebuild the SPFx solution.
|
||||
This RSS Reader utilizes SharePoint Framework v1.11.0 with no dependency on jQuery or a RSS Feed library. This project does utilize [
|
||||
@pnp/spfx-property-controls](https://sharepoint.github.io/sp-dev-fx-property-controls/), and Moment React for date manipulation. Handlebar template option derived from React Search Refiners ([PnP Modern Search](https://microsoft-search.github.io/pnp-modern-search/)) . Use NodeJS version 10 to compile or rebuild the SPFx solution.
|
||||
|
||||
Main features include:
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ Main features include:
|
|||
- Optional View All link in header to point to custom feed source
|
||||
- Embedded feed rendering with optional parameters
|
||||
-- Feed result layout options including optional display of item publish date and description
|
||||
-- Demostration of color picker property for color control of certain aspects of web part
|
||||
-- Demonstration of color picker property for color control of certain aspects of web part
|
||||
- Custom feed rendering using local or remote handlebar template
|
||||
|
||||
|
||||
|
|
@ -46,6 +46,7 @@ Main features include:
|
|||
|
||||
* [Eric Overfield](https://github.com/eoverfield)
|
||||
* [Abderahman Moujahid](https://github.com/Abderahman88)
|
||||
* [Kalle Mansikkaniemi](https://github.com/djsladi)
|
||||
|
||||
## Version history
|
||||
|
||||
|
|
@ -54,6 +55,7 @@ Version|Date|Comments
|
|||
1.0.0 | Jan 21, 2019 | Initial release
|
||||
1.0.1 | Nov 22, 2020 | Upgraded to SPFx 1.11
|
||||
1.0.2 | April 6, 2023 | Fix bug in Direct request retrieval service
|
||||
1.0.3 | April 21, 2023 | Added theme awareness
|
||||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
|
|
@ -66,7 +68,7 @@ Version|Date|Comments
|
|||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
- To bundle and package the installable .sppkg, run:
|
||||
- To bundle and package the installable *.sppkg*, run:
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
|
||||
|
|
@ -81,7 +83,7 @@ Version|Date|Comments
|
|||
Setting | Description
|
||||
-------|----
|
||||
Feed Url | The url of the RSS Feed for readers. Normally will url will return XML
|
||||
Feed Retrieval Service | The service to use to retrieve the feed. **Direct** = Make a direct call from the web part to the feed. Note, may have issues with CORS depending on the feed owner. **Feed2Json** = Retrieve a JSON version of feed via feed2json.org. Note, not for production, and may have issues with CORS. For production use, host your own feed2json service. Learn more at https://github.com/appsattic/feed2json.org. **Rss2Json** = CORS safe method to retieve a feed response. Note, subject to limitations with paid options available.
|
||||
Feed Retrieval Service | The service to use to retrieve the feed. **Direct** = Make a direct call from the web part to the feed. Note, may have issues with CORS depending on the feed owner. **Feed2Json** = Retrieve a JSON version of feed via feed2json.org. Note, not for production, and may have issues with CORS. For production use, host your own feed2json service. Learn more at https://github.com/appsattic/feed2json.org. **Rss2Json** = CORS safe method to retrieve a feed response. Note, subject to limitations with paid options available.
|
||||
Feed Service Url | If using Feed2Json, the url of the feed2json service. Host your own service, learn more at https://github.com/appsattic/feed2json.org
|
||||
Feed Service API Key | If using rss2json, an optional API key for paid services
|
||||
Max Count | The maximum results to return, default: 10
|
||||
|
|
@ -104,7 +106,7 @@ Disable CORS | Set request header mode to "no-cors", thus not requesting CORS re
|
|||
|View All Link Label | An optional label for the View All Link|
|
||||
|
||||
|
||||
**Default layout options**
|
||||
##### Default layout options
|
||||
|Setting | Description|
|
||||
-------|----
|
||||
Show Publication Date | Display the publication date
|
||||
|
|
@ -135,11 +137,11 @@ You can try looking at [issues related to this sample](https://github.com/pnp/sp
|
|||
|
||||
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-rss-reader) and see what the community is saying.
|
||||
|
||||
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-rss-reader&template=bug-report.yml&sample=react-rss-reader&authors=@Abderahman88%20@eoverfield&title=react-rss-reader%20-%20).
|
||||
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-rss-reader&template=bug-report.yml&sample=react-rss-reader&authors=@Abderahman88%20@eoverfield%20@djsladi&title=react-rss-reader%20-%20).
|
||||
|
||||
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-rss-reader&template=question.yml&sample=react-rss-reader&authors=@Abderahman88%20@eoverfield&title=react-rss-reader%20-%20).
|
||||
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-rss-reader&template=question.yml&sample=react-rss-reader&authors=@Abderahman88%20@eoverfield%20@djsladi&title=react-rss-reader%20-%20).
|
||||
|
||||
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-rss-reader&template=question.yml&sample=react-rss-reader&authors=@Abderahman88%20@eoverfield&title=react-rss-reader%20-%20).
|
||||
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-rss-reader&template=question.yml&sample=react-rss-reader&authors=@Abderahman88%20@eoverfield%20@djsladi&title=react-rss-reader%20-%20).
|
||||
|
||||
## Disclaimer
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"A RSS Reader original based on work completed by Olivier Carpentier\u0027s"
|
||||
],
|
||||
"creationDateTime": "2020-11-22",
|
||||
"updateDateTime": "2020-11-22",
|
||||
"updateDateTime": "2023-04-21",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
|
|
@ -40,23 +40,25 @@
|
|||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "eoverfield",
|
||||
"company": "PixelMill",
|
||||
"pictureUrl": "https://github.com/eoverfield.png",
|
||||
"name": "Eric Overfield",
|
||||
"twitter": "EricOverfield"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "AbhishekGarg",
|
||||
"company": "Atos",
|
||||
"pictureUrl": "https://avatars.githubusercontent.com/u/5449154?s=400\u0026v=4",
|
||||
"name": "Abhishek Garg",
|
||||
"twitter": "abhig89"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "Abderahman88",
|
||||
"company": "",
|
||||
"pictureUrl": "https://avatars.githubusercontent.com/u/36161889?s=460\u0026u=afdd5f6681bc375ee3811482dec79824c12d8170\u0026v=4",
|
||||
"name": "Abderahman Moujahid"
|
||||
},
|
||||
{
|
||||
"gitHubAccount": "djsladi",
|
||||
"pictureUrl": "https://github.com/djsladi.png",
|
||||
"name": "Kalle Mansikkaniemi"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -22,7 +22,7 @@
|
|||
"@microsoft/sp-webpart-base": "1.11.0",
|
||||
"@pnp/common": "1.2.6",
|
||||
"@pnp/logging": "1.2.6",
|
||||
"@pnp/spfx-controls-react": "1.10.0",
|
||||
"@pnp/spfx-controls-react": "^2.10.0",
|
||||
"@pnp/spfx-property-controls": "1.12.0",
|
||||
"@types/handlebars": "4.0.39",
|
||||
"common-tags": "1.8.0",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
|
|
@ -4,6 +4,8 @@
|
|||
"alias": "RssReaderWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
"supportsThemeVariants": true,
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
|
|
|||
|
|
@ -34,6 +34,12 @@ import {
|
|||
MockTemplateService } from '../../services/TemplateService';
|
||||
import { FeedLayoutOption, FeedServiceOption } from '../../models';
|
||||
|
||||
import {
|
||||
ThemeProvider,
|
||||
ThemeChangedEventArgs,
|
||||
IReadonlyTheme
|
||||
} from '@microsoft/sp-component-base';
|
||||
|
||||
export interface IRssReaderWebPartProps {
|
||||
title: string;
|
||||
|
||||
|
|
@ -72,11 +78,15 @@ export interface IRssReaderWebPartProps {
|
|||
dateFormatLang: string;
|
||||
backgroundColor: string;
|
||||
fontColor: string;
|
||||
useThemeFontColor: boolean;
|
||||
useThemeBackgroundColor: boolean;
|
||||
}
|
||||
|
||||
export default class RssReaderWebPart extends BaseClientSideWebPart<IRssReaderWebPartProps> {
|
||||
private _templateService: BaseTemplateService;
|
||||
private _propertyPage = null;
|
||||
private _themeProvider: ThemeProvider;
|
||||
private _themeVariant: IReadonlyTheme | undefined;
|
||||
|
||||
/**
|
||||
* The template to display at render time
|
||||
|
|
@ -85,6 +95,15 @@ export default class RssReaderWebPart extends BaseClientSideWebPart<IRssReaderWe
|
|||
|
||||
public onInit(): Promise<void> {
|
||||
|
||||
// Consume the new ThemeProvider service
|
||||
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);
|
||||
|
||||
//Initialize a redux store that uses our custom Reducer & state
|
||||
RssHttpClientService.init(this.context);
|
||||
|
||||
|
|
@ -141,6 +160,8 @@ export default class RssReaderWebPart extends BaseClientSideWebPart<IRssReaderWe
|
|||
|
||||
backgroundColor: this.properties.backgroundColor,
|
||||
fontColor: this.properties.fontColor,
|
||||
useThemeFontColor: this.properties.useThemeFontColor,
|
||||
useThemeBackgroundColor: this.properties.useThemeBackgroundColor,
|
||||
|
||||
propertyPane: this.context.propertyPane,
|
||||
|
||||
|
|
@ -152,7 +173,9 @@ export default class RssReaderWebPart extends BaseClientSideWebPart<IRssReaderWe
|
|||
|
||||
updateProperty: (value: string) => {
|
||||
this.properties.title = value;
|
||||
}
|
||||
},
|
||||
|
||||
themeVariant: this._themeVariant
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -516,6 +539,11 @@ export default class RssReaderWebPart extends BaseClientSideWebPart<IRssReaderWe
|
|||
iconName: 'Precipitation',
|
||||
key: 'rssReaderFontColorField'
|
||||
}));
|
||||
|
||||
layoutFields.push(PropertyPaneToggle('useThemeFontColor', {
|
||||
label: strings.UseThemeFontColor
|
||||
}));
|
||||
|
||||
layoutFields.push(PropertyFieldColorPicker('backgroundColor', {
|
||||
label: strings.BackgroundColorLabel,
|
||||
selectedColor: this.properties.backgroundColor,
|
||||
|
|
@ -528,6 +556,10 @@ export default class RssReaderWebPart extends BaseClientSideWebPart<IRssReaderWe
|
|||
key: 'rssReaderBgColorField'
|
||||
}));
|
||||
|
||||
layoutFields.push(PropertyPaneToggle('useThemeBackgroundColor', {
|
||||
label: strings.UseThemeBackgroundColor
|
||||
}));
|
||||
|
||||
/*
|
||||
dateFormatLang: string;
|
||||
*/
|
||||
|
|
@ -604,4 +636,14 @@ export default class RssReaderWebPart extends BaseClientSideWebPart<IRssReaderWe
|
|||
|
||||
this._templateContentToDisplay = templateContent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import { FeedServiceOption, FeedLayoutOption } from '../../../../models';
|
|||
|
||||
import { BaseTemplateService } from '../../../../services/TemplateService';
|
||||
|
||||
import { IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||
|
||||
export interface IRssReaderProps {
|
||||
feedUrl: string;
|
||||
feedService: FeedServiceOption;
|
||||
|
|
@ -38,6 +40,8 @@ export interface IRssReaderProps {
|
|||
|
||||
backgroundColor: string;
|
||||
fontColor: string;
|
||||
useThemeBackgroundColor: boolean;
|
||||
useThemeFontColor: boolean;
|
||||
|
||||
propertyPane?: IPropertyPaneAccessor;
|
||||
|
||||
|
|
@ -55,4 +59,9 @@ export interface IRssReaderProps {
|
|||
templateContent: string;
|
||||
|
||||
updateProperty: (value: string) => void;
|
||||
|
||||
/**
|
||||
* Theme awareness
|
||||
*/
|
||||
themeVariant: IReadonlyTheme | undefined;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,6 @@
|
|||
.rssReader {
|
||||
.rssReaderHeader {
|
||||
position: relative;
|
||||
|
||||
.rssReaderListViewAll {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 0px;
|
||||
|
||||
padding: 0px;
|
||||
|
||||
A {
|
||||
color: $ms-color-themePrimary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rssReaderList {
|
||||
|
|
@ -59,7 +47,6 @@
|
|||
|
||||
.itemDate {
|
||||
font-size:11px;
|
||||
color:$ms-color-neutralDark;
|
||||
}
|
||||
|
||||
.itemContent {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,8 @@ import {
|
|||
IRssReaderRequest,
|
||||
FeedLayoutOption } from '../../../../models';
|
||||
|
||||
import { IReadonlyTheme } from '@microsoft/sp-component-base';
|
||||
|
||||
export default class RssReader extends React.Component<IRssReaderProps, IRssReaderState> {
|
||||
|
||||
private viewAllLinkLabel: string = strings.DefaultFeedViewAllLinkLabel;
|
||||
|
|
@ -51,18 +53,17 @@ export default class RssReader extends React.Component<IRssReaderProps, IRssRead
|
|||
}
|
||||
|
||||
public render(): React.ReactElement<IRssReaderProps> {
|
||||
const { semanticColors }: IReadonlyTheme = this.props.themeVariant;
|
||||
return (
|
||||
<div className={ styles.rssReader }>
|
||||
<div className={ styles.rssReader } style={{backgroundColor: semanticColors.bodyBackground}}>
|
||||
<div className={styles.rssReaderHeader}>
|
||||
<WebPartTitle displayMode={this.props.displayMode}
|
||||
title={this.props.title}
|
||||
updateProperty={this.props.updateProperty} />
|
||||
|
||||
{this.state.rssFeedReady && this.state.rssFeed && this.props.feedViewAllLink && this.props.feedViewAllLink.length > 0 && (
|
||||
<div className={styles.rssReaderListViewAll}>
|
||||
<a href={this.props.feedViewAllLink}>{this.viewAllLinkLabel}</a>
|
||||
</div>
|
||||
)}
|
||||
updateProperty={this.props.updateProperty}
|
||||
themeVariant={this.props.themeVariant}
|
||||
moreLink={this.state.rssFeedReady && this.state.rssFeed && this.props.feedViewAllLink && this.props.feedViewAllLink.length > 0 && (
|
||||
<Link style={{color: semanticColors.link}} href={this.props.feedViewAllLink}>{this.viewAllLinkLabel}</Link>
|
||||
)}/>
|
||||
</div>
|
||||
|
||||
{!this.props.feedUrl || this.props.feedUrl.length < 1 ? (
|
||||
|
|
@ -97,7 +98,7 @@ export default class RssReader extends React.Component<IRssReaderProps, IRssRead
|
|||
className={styles.rssReaderList + (this.props.backgroundColor ? " " + styles.rssReaderListPadding : "")}
|
||||
items={this.state.rssFeed.query.results.rss}
|
||||
onRenderCell={this._onRenderListRow}
|
||||
style={this.props.backgroundColor ? {backgroundColor: this.props.backgroundColor} : {}}
|
||||
style={this.props.useThemeBackgroundColor ? {backgroundColor: semanticColors.bodyBackground} : this.props.backgroundColor ? {backgroundColor: this.props.backgroundColor} : {}}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -154,7 +155,10 @@ export default class RssReader extends React.Component<IRssReaderProps, IRssRead
|
|||
this.props.titleLinkTarget != nextProps.titleLinkTarget ||
|
||||
this.props.dateFormat != nextProps.dateFormat ||
|
||||
this.props.backgroundColor != nextProps.backgroundColor ||
|
||||
this.props.fontColor != nextProps.fontColor
|
||||
this.props.useThemeBackgroundColor != nextProps.useThemeBackgroundColor ||
|
||||
this.props.useThemeFontColor != nextProps.useThemeFontColor ||
|
||||
this.props.fontColor != nextProps.fontColor ||
|
||||
this.props.themeVariant != nextProps.themeVariant
|
||||
) {
|
||||
this.loadRssFeed();
|
||||
}
|
||||
|
|
@ -190,6 +194,7 @@ export default class RssReader extends React.Component<IRssReaderProps, IRssRead
|
|||
let div = document.createElement("div");
|
||||
div.innerHTML = displayDesc;
|
||||
displayDesc = (div.textContent || div.innerText || "").replace(/\ /ig, "").trim();
|
||||
const { semanticColors }: IReadonlyTheme = this.props.themeVariant;
|
||||
|
||||
return (
|
||||
<div className={styles.rssReaderListItem} data-is-focusable={true}>
|
||||
|
|
@ -197,7 +202,7 @@ export default class RssReader extends React.Component<IRssReaderProps, IRssRead
|
|||
<Link
|
||||
href={thisItem.link}
|
||||
target={this.props.titleLinkTarget ? this.props.titleLinkTarget : "_self"}
|
||||
style={this.props.fontColor ? {color: this.props.fontColor} : {}}
|
||||
style={this.props.useThemeFontColor ? {color: semanticColors.link} : this.props.fontColor ? {color: this.props.fontColor} : {}}
|
||||
>
|
||||
{this.decodeHtml(thisItem.title)}
|
||||
</Link>
|
||||
|
|
@ -205,7 +210,7 @@ export default class RssReader extends React.Component<IRssReaderProps, IRssRead
|
|||
</div>
|
||||
|
||||
{this.props.showPubDate && (
|
||||
<div className={styles.itemDate}>
|
||||
<div className={styles.itemDate} style={{color: semanticColors.bodySubtext}}>
|
||||
{this.props.dateFormat && this.props.dateFormat.length > 0 ? (
|
||||
<Moment
|
||||
format={this.props.dateFormat}
|
||||
|
|
@ -218,7 +223,7 @@ export default class RssReader extends React.Component<IRssReaderProps, IRssRead
|
|||
)}
|
||||
|
||||
{this.props.showDesc && (
|
||||
<div className={styles.itemContent}>
|
||||
<div className={styles.itemContent} style={{color: semanticColors.bodyText}}>
|
||||
{this.props.descCharacterLimit && (displayDesc.length > this.props.descCharacterLimit) ? (
|
||||
<div>
|
||||
{displayDesc.substring(0, this.props.descCharacterLimit) + '...'}
|
||||
|
|
|
|||
|
|
@ -46,6 +46,8 @@ define([], function() {
|
|||
"DateFormatLabel": "Date Format",
|
||||
"BackgroundColorLabel": "Background Color",
|
||||
"FontColorLabel": "Title Color",
|
||||
"UseThemeBackgroundColor": "Use background color from theme",
|
||||
"UseThemeFontColor": "Use title color from theme",
|
||||
|
||||
|
||||
//feed service options
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@ declare interface IRssReaderWebPartStrings {
|
|||
DateFormatLabel: string;
|
||||
BackgroundColorLabel: string;
|
||||
FontColorLabel: string;
|
||||
|
||||
UseThemeBackgroundColor: string;
|
||||
UseThemeFontColor: string;
|
||||
|
||||
|
||||
//feed service options
|
||||
|
|
|
|||
Loading…
Reference in New Issue