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 #2078 from fthorild/fthorild/2061 

Added static width, sorting and unique colors fixing 2061/2068
This commit is contained in:
Hugo Bernier 2021-10-31 13:53:49 -04:00 committed by GitHub
parent 3f85ca66b3 0e69acf3f1
commit a1a0beaaa8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 396 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
samples/react-mytasks/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "react-my-task",
"version": "0.0.1",
"version": "1.0.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

19
samples/react-tiles-v2/README.md
View File

@ -13,9 +13,11 @@ This is a rebuild of the awesome project created by @hugoabernier [https://githu
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
@ -37,14 +39,15 @@ react-tiles-v2 | [Omar El-Anis](https://github.com/omarelanis) @ SP Bytes www.sp
Version|Date|Comments
-------|----|--------
1.0|July 14, 2021|Initial release
1.1|October 14, 2021|Added sorting, static tile width and unique tile colour - [fthorild](https://github.com/fthorild)
## Minimal Path to Awesome
- Clone this repository
- Ensure that you are at the solution folder
- in the command-line run:
- **npm install**
- **gulp serve**
- `npm install`
- `gulp serve`
## Features
@ -75,10 +78,10 @@ This extension illustrates the following concepts:
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
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&template=bug-report.yml&sample=react-tiles-v2&authors=@omarelanis&title=react-tiles-v2%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&template=bug-report.yml&sample=react-tiles-v2&authors=fthorild%20@fthorild&title=react-tiles-v2%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%3Abug-suspected&template=question.yml&sample=react-tiles-v2&authors=@omarelanis&title=react-tiles-v2%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%3Abug-suspected&template=question.yml&sample=react-tiles-v2&authors=fthorild%20@fthorild&title=react-tiles-v2%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%3Abug-suspected&template=suggestion.yml&sample=react-tiles-v2&authors=@omarelanis&title=react-tiles-v2%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%3Abug-suspected&template=suggestion.yml&sample=react-tiles-v2&authors=fthorild%20@fthorild&title=react-tiles-v2%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-tiles-v2" />

12
samples/react-tiles-v2/assets/sample.json
View File

@ -9,7 +9,7 @@
"This solution creates a customisable Tiles Web part, it uses a stored collection from the PnP `PropertyFieldCollectionData` control and allows the user to choose the colour scheme (theme or custom) and to set the size of the tiles. By default the tiles use a fluid flex layout to use the available screen area."
],
"creationDateTime": "2021-07-14",
"updateDateTime": "2021-07-14",
"updateDateTime": "2021-10-14",
"products": [
"SharePoint",
"Office"
@ -22,6 +22,10 @@
{
"key": "SPFX-VERSION",
"value": "1.11"
},
{
"key": "PNPCONTROLS",
"value": "IconPicker, WebPartTitle, Placeholder, PropertyFieldCollectionData"
}
],
"thumbnails": [
@ -37,6 +41,12 @@
"gitHubAccount": "omarelanis",
"pictureUrl": "https://github.com/omarelanis.png",
"name": "Omar El-Anis"
},
{
"gitHubAccount": "fthorild",
"name": "Fredrik Thorild",
"company": "Sogeti Sweden",
"pictureUrl": "https://github.com/fthorild.png"
}
],
"references": [

2
samples/react-tiles-v2/config/package-solution.json
View File

@ -3,7 +3,7 @@
"solution": {
"name": "Tiles V2 Webpart - Modern",
"id": "d56958d6-9eaf-4500-934b-b421c22a7d1f",
"version": "1.0.0.0",
"version": "1.1.0.0",
"skipFeatureDeployment": true,
"includeClientSideAssets": true,
"isDomainIsolated": false,

2
samples/react-tiles-v2/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "tiles",
"version": "0.0.1",
"version": "1.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
samples/react-tiles-v2/package.json
View File

@ -1,6 +1,6 @@
{
"name": "tiles",
"version": "0.0.1",
"version": "1.1.0",
"private": true,
"main": "lib/index.js",
"engines": {

163
samples/react-tiles-v2/src/webparts/Tiles/TilesWebPart.ts
View File

@ -1,23 +1,26 @@
import * as React from 'react';
import * as ReactDom from 'react-dom';
import * as strings from 'TilesWebPartStrings';
import { BaseClientSideWebPart} from '@microsoft/sp-webpart-base';
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme} from '@microsoft/sp-component-base';
import { IPropertyPaneConfiguration} from "@microsoft/sp-property-pane";
import { PropertyPaneToggle,PropertyPaneSlider } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
import { IPropertyPaneConfiguration } from "@microsoft/sp-property-pane";
import { PropertyPaneToggle, PropertyPaneSlider, PropertyPaneDropdown } from '@microsoft/sp-property-pane';
import { Tiles, ITilesProps, ITileInfo, LinkTarget } from './components';
import { IconPicker } from '@pnp/spfx-controls-react/lib/IconPicker';
import { initializeIcons } from 'office-ui-fabric-react/lib';
import { ColorPicker, initializeIcons } from 'office-ui-fabric-react/lib';
import { SimpleColorPicker } from './components/colorpicker/SimpleColorPicker';
const ThemeColorsFromWindow: any = (window as any).__themeState__.theme;
export interface ITilesWebPartProps {
collectionData: ITileInfo[];
tileHeight: number;
tileWidth: number;
tileColour: string;
tileFont: string;
title: string;
customColour: boolean;
staticWidth: boolean;
colourMode: string;
themeVariant: IReadonlyTheme | undefined;
ThemeColorsFromWindow: IReadonlyTheme | undefined;
}
@ -34,19 +37,19 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
protected 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);
if (this.context.sdks.microsoftTeams)
initializeIcons();
initializeIcons();
return super.onInit();
}
/**
* Update the current theme variant reference and re-render.
*
@ -64,13 +67,15 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
{
title: this.properties.title,
tileHeight: this.properties.tileHeight,
tileWidth: this.properties.tileWidth,
tileColour: this.properties.tileColour,
tileFont: this.properties.tileFont,
customColour: this.properties.customColour,
staticWidth: this.properties.staticWidth,
collectionData: this.properties.collectionData,
displayMode: this.displayMode,
themeVariant: this._themeVariant,
ThemeColorsFromWindow: ThemeColorsFromWindow,
colourMode: this.properties.colourMode,
fUpdateProperty: (value: string) => {
this.properties.title = value;
},
@ -83,16 +88,16 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
//executes only before property pane is loaded.
protected async loadPropertyPaneResources(): Promise<void> {
// import additional controls/components
const { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } = await import (
const { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } = await import(
/* webpackChunkName: 'pnp-propcontrols-number' */
'@pnp/spfx-property-controls/lib/PropertyFieldColorPicker'
);
const { PropertyFieldNumber } = await import (
const { PropertyFieldNumber } = await import(
/* webpackChunkName: 'pnp-propcontrols-number' */
'@pnp/spfx-property-controls/lib/propertyFields/number'
);
const { PropertyFieldCollectionData, CustomCollectionFieldType } = await import (
const { PropertyFieldCollectionData, CustomCollectionFieldType } = await import(
/* webpackChunkName: 'pnp-propcontrols-colldata' */
'@pnp/spfx-property-controls/lib/PropertyFieldCollectionData'
);
@ -107,7 +112,9 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
let tileColourplaceholder: any = [];
let tileFontplaceholder: any = [];
if (this.properties.customColour) {
let tileStaticWidthplaceholder: any = [];
if (this.properties.colourMode === '2') {
tileColourplaceholder = this.propertyFieldColorPicker('tileColour', {
key: "tileColour",
label: strings.tileColour,
@ -120,19 +127,32 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
style: this.propertyFieldColorPickerStyle.Full,
iconName: 'Precipitation'
});
tileFontplaceholder=this.propertyFieldColorPicker('tileFont', {
key: "tileFont",
label: strings.tileFont,
selectedColor: this.properties.tileFont,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
disabled: false,
isHidden: false,
alphaSliderHidden: false,
style: this.propertyFieldColorPickerStyle.Full,
iconName: 'Precipitation'
});
}
tileFontplaceholder = this.propertyFieldColorPicker('tileFont', {
key: "tileFont",
label: strings.tileFont,
selectedColor: this.properties.tileFont,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
disabled: false,
isHidden: false,
alphaSliderHidden: false,
style: this.propertyFieldColorPickerStyle.Full,
iconName: 'Precipitation'
});
}
if (this.properties.staticWidth) {
tileStaticWidthplaceholder = PropertyPaneSlider('tileWidth', {
label: strings.widthStaticSet,
max: 1000,
min: 10,
step: 1,
showValue: true,
value: this.properties.tileHeight
});
}
return {
pages: [
{
@ -170,26 +190,64 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
required: true
},
{
id: "icon",
title: "Select Icon",
id: "sortOrder",
title: strings.sortOrder,
type: this.customCollectionFieldType.number,
required: true
},
{
id: "background",
title: strings.colorSetUniqueBg,
type: this.customCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
return (
React.createElement(IconPicker , {
React.createElement(SimpleColorPicker, {
key: itemId,
buttonLabel:"Select File",
onChange: (colour: string) => {
onUpdate(field.id, colour);
return Event;
}
})
);
}
},
{
id: "foreground",
title: strings.colorSetUniqueFg,
type: this.customCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
return (
React.createElement(SimpleColorPicker, {
key: itemId,
onChange: (colour: string) => {
onUpdate(field.id, colour);
return Event;
}
})
);
}
},
{
id: "icon",
title: strings.iconField,
type: this.customCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
return (
React.createElement(IconPicker, {
key: itemId,
buttonLabel: strings.iconSelectFile,
onChange: (iconName: string) => {
onUpdate(field.id, iconName);
return Event;
},
onSave: (iconName: string) => {
onUpdate(field.id, iconName);
return Event;
onUpdate(field.id, iconName);
return Event;
}
})
);
}
},
},
{
id: "target",
title: strings.targetField,
@ -207,24 +265,35 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
}
]
})
]},
{
groupName: "Tile Settings",
groupFields: [
]
},
{
groupName: "Tile Settings",
groupFields: [
PropertyPaneSlider('tileHeight', {
label: 'Tile Height',
label: strings.tilesHeight,
max: 300,
min: 120,
step: 1,
showValue: true,
value: this.properties.tileHeight
}),
PropertyPaneToggle('customColour', {
key: 'customColourID',
label: 'Theme or Custom colours',
onText: 'Custom Colours',
offText: 'Theme Colours',
checked: this.properties.customColour
PropertyPaneToggle('staticWidth', {
key: 'staticWidthID',
label: strings.widthAutomaticOrStatic,
onText: strings.widthStatic,
offText: strings.widthAutomatic,
checked: this.properties.staticWidth
}),
tileStaticWidthplaceholder,
PropertyPaneDropdown('colourMode', {
label: strings.colourMode,
options: [
{ key: '1', text: strings.colourModeTheme },
{ key: '2', text: strings.colourModeUniform },
{ key: '3', text: strings.colourModeUnique }
],
selectedKey: '1',
}),
tileColourplaceholder,
tileFontplaceholder

3
samples/react-tiles-v2/src/webparts/Tiles/components/ITileInfo.ts
View File

@ -4,6 +4,9 @@ export interface ITileInfo {
url: string;
icon: string;
target: LinkTarget;
sortOrder: string;
foreground: string;
background: string;
}
export enum LinkTarget {

31
samples/react-tiles-v2/src/webparts/Tiles/components/Tiles.tsx
View File

@ -1,11 +1,11 @@
import * as React from 'react';
import * as strings from 'TilesWebPartStrings';
import styles from './Tiles.module.scss';
import { ITilesProps } from '.';
import { ITileInfo, ITilesProps } from '.';
import { Tile } from './tile';
import { WebPartTitle } from '@pnp/spfx-controls-react/lib/WebPartTitle';
import { Placeholder } from '@pnp/spfx-controls-react/lib/Placeholder';
import {createstyles } from './ThemeVariantTypeStyle.styles';
import { createstyles } from './ThemeVariantTypeStyle.styles';
import { css } from "@uifabric/utilities/lib/css";
export class Tiles extends React.Component<ITilesProps, {}> {
@ -15,25 +15,34 @@ export class Tiles extends React.Component<ITilesProps, {}> {
*/
public render(): React.ReactElement<ITilesProps> {
const CustomStyles = createstyles(this.props.themeVariant);
return (
<div className={css(styles.tiles, CustomStyles.root)}>
<div className={css(styles.tiles, CustomStyles.root)
}>
<WebPartTitle displayMode={this.props.displayMode}
title={this.props.title}
updateProperty={this.props.fUpdateProperty} />
title={this.props.title}
updateProperty={this.props.fUpdateProperty} />
{
this.props.collectionData && this.props.collectionData.length > 0 ? (
<div className={styles.tilesList}>
{
this.props.collectionData.map((tile, idx) =>
<Tile key={idx}
item={tile}
this.props.collectionData
.sort((a: ITileInfo, b: ITileInfo) =>
parseInt(a.sortOrder) > parseInt(b.sortOrder) ?
1 : ((parseInt(b.sortOrder) > parseInt(a.sortOrder) ? -1 : 0)))
.map((tile, idx) =>
<Tile key={idx}
item={tile}
tileHeight={this.props.tileHeight}
tileWidth={this.props.tileWidth}
tileColour={this.props.tileColour}
tileFont={this.props.tileFont}
customColour={this.props.customColour}
staticWidth={this.props.staticWidth}
colourMode={this.props.colourMode}
themeVariant={this.props.themeVariant}
ThemeColorsFromWindow={this.props.ThemeColorsFromWindow}/>)
ThemeColorsFromWindow={this.props.ThemeColorsFromWindow} />)
}
</div>
) : (
@ -45,7 +54,7 @@ export class Tiles extends React.Component<ITilesProps, {}> {
onConfigure={this.props.fPropertyPaneOpen} />
)
}
</div>
</div >
);
}
}

3
samples/react-tiles-v2/src/webparts/Tiles/components/colorpicker/ISimpleColorPickerProps.ts Normal file
View File

@ -0,0 +1,3 @@
export interface ISimpleColorPickerProps {
onChange(iconName: any): void;
}

3
samples/react-tiles-v2/src/webparts/Tiles/components/colorpicker/ISimpleColorPickerState.ts Normal file
View File

@ -0,0 +1,3 @@
export interface ISimpleColorPickerState {
val: string;
}

28
samples/react-tiles-v2/src/webparts/Tiles/components/colorpicker/SimpleColorPicker.tsx Normal file
View File

@ -0,0 +1,28 @@
import * as React from 'react';
import { ISimpleColorPickerProps } from './ISimpleColorPickerProps';
import { ISimpleColorPickerState } from './ISimpleColorPickerState';
export class SimpleColorPicker extends React.Component<ISimpleColorPickerProps, ISimpleColorPickerState> {
constructor(props) {
super(props);
this.state = { val: '#efefef' };
}
private handleChange = event => {
const value = event.target.value;
(async () => {
await this.setState({ val: value });
this.props.onChange(this.state.val);
})();
}
public render(): React.ReactElement<ISimpleColorPickerProps> {
return (
<div>
<input
onChange={this.handleChange}
type='color'
value={this.state.val}
/>
</div>
);
}
}

3
samples/react-tiles-v2/src/webparts/Tiles/components/colorpicker/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './ISimpleColorPickerState';
export * from './ISimpleColorPickerProps';
export * from './SimpleColorPicker';

4
samples/react-tiles-v2/src/webparts/Tiles/components/tile/ITileProps.ts
View File

@ -4,9 +4,11 @@ import { IReadonlyTheme } from '@microsoft/sp-component-base';
export interface ITileProps {
item: ITileInfo;
tileHeight: number;
tileWidth: number;
tileColour: string;
tileFont: string;
customColour:boolean;
staticWidth:boolean;
colourMode:string;
themeVariant: IReadonlyTheme | undefined;
ThemeColorsFromWindow: IReadonlyTheme | undefined;
}

5
samples/react-tiles-v2/src/webparts/Tiles/components/tile/Tile.module.scss
View File

@ -4,11 +4,8 @@
@include ms-Grid-col;
// @include ms-sm6;
// @include ms-md3;
display: flex;
flex-grow: 1;
margin-bottom: 16px;
flex-basis: 120px;
min-width: 120px;
display: flex;
a {
background-color: $ms-color-themePrimary;

29
samples/react-tiles-v2/src/webparts/Tiles/components/tile/Tile.tsx
View File

@ -3,12 +3,10 @@ import styles from './Tile.module.scss';
import { ITileProps } from '.';
import { Icon } from 'office-ui-fabric-react/lib/components/Icon';
import { IReadonlyTheme } from '@microsoft/sp-component-base';
import { tilesDataLabel } from 'TilesWebPartStrings';
export class Tile extends React.Component<ITileProps, {}> {
public render(): React.ReactElement<ITileProps> {
//const { semanticColors }: IReadonlyTheme = this.props.themeVariant;
const { palette }: IReadonlyTheme = this.props.themeVariant;
const tileStyle: React.CSSProperties = {};
@ -16,19 +14,32 @@ export class Tile extends React.Component<ITileProps, {}> {
const tileFontSize: React.CSSProperties = {};
const tileInnerStyle: React.CSSProperties = {};
const fontInnerStyle: React.CSSProperties = {};
if (this.props.staticWidth) {
tileStyle.flexBasis = `${this.props.tileWidth}px`;
tileStyle.minWidth = `${this.props.tileWidth}px`;
tileStyle.flexGrow = 0;
} else {
tileStyle.flexBasis = '120px';
tileStyle.minWidth = '120px';
tileStyle.flexGrow = 1;
}
if (this.props.tileHeight) {
tileStyle.height = `${this.props.tileHeight}px`;
icoStyle.fontSize = `${Math.round(this.props.tileHeight / 2 - 18)}px`;
tileFontSize.fontSize = `${Math.round(this.props.tileHeight / 6 - 6)}px`;
}
if (this.props.customColour){
if (this.props.colourMode === '1' || this.props.colourMode === undefined) {
tileInnerStyle.backgroundColor = palette.themePrimary;
fontInnerStyle.color = palette.white;
} else if (this.props.colourMode === '2') {
if (this.props.tileColour) {
tileInnerStyle.backgroundColor = `${this.props.tileColour}`;
fontInnerStyle.color = `${this.props.tileFont}`;
}
}else{
tileInnerStyle.backgroundColor = palette.themePrimary;
fontInnerStyle.color = palette.white;
} else {
tileInnerStyle.backgroundColor = `${this.props.item.background}`;
fontInnerStyle.color = `${this.props.item.foreground}`;
}
return (
<div className={styles.tile} style={tileStyle}>
@ -36,9 +47,9 @@ export class Tile extends React.Component<ITileProps, {}> {
target={this.props.item.target}
title={this.props.item.title} style={tileInnerStyle}>
<div className={styles.tileIcon}>
<Icon iconName={this.props.item.icon} style={{...fontInnerStyle,...icoStyle}}/>
<Icon iconName={this.props.item.icon} style={{ ...fontInnerStyle, ...icoStyle }} />
</div>
<div className={styles.tileTitle} style={{...fontInnerStyle,...tileFontSize}}>
<div className={styles.tileTitle} style={{ ...fontInnerStyle, ...tileFontSize }}>
{this.props.item.title}
</div>
<div className={styles.overflow}>

19
samples/react-tiles-v2/src/webparts/Tiles/loc/de-de.js vendored
View File

@ -9,11 +9,30 @@ define([], function() {
"tilesPanelHeader": "Konfigurieren Sie Ihre Kachel",
"tilesManageBtn": "Kacheln konfigurieren",
"tilesHeight": "Tile Height",
"colourMode": "Colour Mode",
"colourModeTheme": "Theme",
"colourModeUniform": "Custom Uniform",
"colourModeUnique": "Custom Unique",
"widthAutomaticOrStatic": "Automatic or Static Width",
"widthStatic": "Static",
"widthAutomatic": "Automatic",
"widthStaticSet": "Tile static width",
"iconSelectFile": "Select Icon",
"colorSetUniqueFg": "Foreground Colour",
"colorSetUniqueBg": "Background Colour",
"titleField": "Title",
"descriptionField": "Description",
"urlField": "URL",
"iconField": "UI Fabric icon name",
"targetField": "Target",
"sortOrder": "Sortierreihenfolge",
"targetCurrent": "Aktuelles Fenster",
"targetNew": "Neuer Tab",

19
samples/react-tiles-v2/src/webparts/Tiles/loc/en-us.js vendored
View File

@ -1,4 +1,4 @@
define([], function() {
define([], function () {
return {
"PropertyPaneDescription": "This webpart displayes a group of tiles which can be set to navigate to different URLs",
"TilesListDescription": "The list for configuring the tiles can be found on the following link:",
@ -10,12 +10,29 @@ define([], function() {
"tilesDataLabel": "Set the items to be displayed in the tiles",
"tilesPanelHeader": "Configure your tiles",
"tilesManageBtn": "Configure the tiles",
"tilesHeight": "Tile Height",
"colourMode": "Colour Mode",
"colourModeTheme": "Theme",
"colourModeUniform": "Custom Uniform",
"colourModeUnique": "Custom Unique",
"widthAutomaticOrStatic": "Automatic or Static Width",
"widthStatic": "Static",
"widthAutomatic": "Automatic",
"widthStaticSet": "Tile static width",
"iconSelectFile": "Select Icon",
"colorSetUniqueFg": "Foreground Colour",
"colorSetUniqueBg": "Background Colour",
"titleField": "Title",
"descriptionField": "Description",
"urlField": "URL (add https:// for external links)",
"iconField": "UI Fabric icon name",
"targetField": "Target URL",
"sortOrder": "Sort Order",
"targetCurrent": "Current window",
"targetNew": "New tab",

18
samples/react-tiles-v2/src/webparts/Tiles/loc/es-es.js vendored
View File

@ -9,11 +9,29 @@ define([], function() {
"tilesPanelHeader": "Configure sus recuadros",
"tilesManageBtn": "Configure los recuadros",
"tilesHeight": "Tile Height",
"colourMode": "Colour Mode",
"colourModeTheme": "Theme",
"colourModeUniform": "Custom Uniform",
"colourModeUnique": "Custom Unique",
"widthAutomaticOrStatic": "Automatic or Static Width",
"widthStatic": "Static",
"widthAutomatic": "Automatic",
"widthStaticSet": "Tile static width",
"iconSelectFile": "Select Icon",
"colorSetUniqueFg": "Foreground Colour",
"colorSetUniqueBg": "Background Colour",
"titleField": "Título",
"descriptionField": "Descripción",
"urlField": "URL",
"iconField": "Nombre de icono de UI Fabric",
"targetField": "Destino",
"sortOrder": "Orden de clasificación",
"targetCurrent": "Ventana actual",
"targetNew": "Nueva ventana",

18
samples/react-tiles-v2/src/webparts/Tiles/loc/fr-fr.js vendored
View File

@ -9,11 +9,29 @@ define([], function() {
"tilesPanelHeader": "Configurez vos tuiles",
"tilesManageBtn": "Configurer les tuiles",
"tilesHeight": "Tile Height",
"colourMode": "Colour Mode",
"colourModeTheme": "Theme",
"colourModeUniform": "Custom Uniform",
"colourModeUnique": "Custom Unique",
"widthAutomaticOrStatic": "Automatic or Static Width",
"widthStatic": "Static",
"widthAutomatic": "Automatic",
"widthStaticSet": "Tile static width",
"iconSelectFile": "Select Icon",
"colorSetUniqueFg": "Foreground Colour",
"colorSetUniqueBg": "Background Colour",
"titleField": "Titre",
"descriptionField": "Description",
"urlField": "URL",
"iconField": "Nom de l'icône d'UI Fabric",
"targetField": "Cible",
"sortOrder": "Ordre de tri",
"targetCurrent": "Page fenêtre",
"targetNew": "Nouvel onglet",

24
samples/react-tiles-v2/src/webparts/Tiles/loc/mystrings.d.ts vendored
View File

@ -10,6 +10,27 @@ declare interface ITilesWebPartStrings {
tilesDataLabel: string;
tilesPanelHeader: string;
tilesManageBtn: string;
tilesHeight: string;
//Properties colour mode
colourMode: string;
colourModeTheme: string;
colourModeUniform: string;
colourModeUnique: string;
//Properties width
widthAutomaticOrStatic: string;
widthStatic: string;
widthAutomatic: string;
widthStaticSet: string;
//Propeties icon
iconSelectFile: string;
//Properties color
colorSetUniqueFg:string;
colorSetUniqueBg:string;
// Tile fields
titleField: string;
@ -17,6 +38,9 @@ declare interface ITilesWebPartStrings {
urlField: string;
iconField: string;
targetField: string;
sortOrder: string;
targetCurrent: string;
targetNew: string;

20
samples/react-tiles-v2/src/webparts/Tiles/loc/nb-no.js vendored
View File

@ -1,4 +1,4 @@
define([], function() {
define([], function () {
return {
"PropertyPaneDescription": "Flis webdel konfigurasjon",
"TilesListDescription": "Listen med fliskonfigurasjoner finnes på følgende lenke:",
@ -9,11 +9,29 @@ define([], function() {
"tilesPanelHeader": "Konfigurer dine fliser",
"tilesManageBtn": "Konfigurer flisene",
"tilesHeight": "Tile Height",
"colourMode": "Colour Mode",
"colourModeTheme": "Theme",
"colourModeUniform": "Custom Uniform",
"colourModeUnique": "Custom Unique",
"widthAutomaticOrStatic": "Automatic or Static Width",
"widthStatic": "Static",
"widthAutomatic": "Automatic",
"widthStaticSet": "Tile static width",
"iconSelectFile": "Select Icon",
"colorSetUniqueFg": "Foreground Colour",
"colorSetUniqueBg": "Background Colour",
"titleField": "Tittel",
"descriptionField": "Beskrivelse",
"urlField": "URL",
"iconField": "UI Fabric ikonnavn",
"targetField": "Mål",
"sortOrder": "Sorteringsrekkefølge",
"targetCurrent": "Gjeldende vindu",
"targetNew": "Nytt vindu",

18
samples/react-tiles-v2/src/webparts/Tiles/loc/nl-nl.js vendored
View File

@ -9,11 +9,29 @@ define([], function() {
"tilesPanelHeader": "Configureer je tegels",
"tilesManageBtn": "Configureer je tegels",
"tilesHeight": "Tile Height",
"colourMode": "Colour Mode",
"colourModeTheme": "Theme",
"colourModeUniform": "Custom Uniform",
"colourModeUnique": "Custom Unique",
"widthAutomaticOrStatic": "Automatic or Static Width",
"widthStatic": "Static",
"widthAutomatic": "Automatic",
"widthStaticSet": "Tile static width",
"iconSelectFile": "Select Icon",
"colorSetUniqueFg": "Foreground Colour",
"colorSetUniqueBg": "Background Colour",
"titleField": "Titel",
"descriptionField": "Omschrijving",
"urlField": "URL",
"iconField": "UI Fabric icoonnaam",
"targetField": "Doel",
"sortOrder":"Sorteervolgorde",
"targetCurrent": "Huidig venster",
"targetNew": "Nieuw tabblad",

18
samples/react-tiles-v2/src/webparts/Tiles/loc/sv-se.js vendored
View File

@ -9,11 +9,29 @@ define([], function() {
"tilesPanelHeader": "Konfigurera dina tiles",
"tilesManageBtn": "Konfigurera tilesen",
"tilesHeight": "Tile Height",
"colourMode": "Colour Mode",
"colourModeTheme": "Theme",
"colourModeUniform": "Custom Uniform",
"colourModeUnique": "Custom Unique",
"widthAutomaticOrStatic": "Automatic or Static Width",
"widthStatic": "Static",
"widthAutomatic": "Automatic",
"widthStaticSet": "Tile static width",
"iconSelectFile": "Select Icon",
"colorSetUniqueFg": "Foreground Colour",
"colorSetUniqueBg": "Background Colour",
"titleField": "Titel",
"descriptionField": "Beskrivning",
"urlField": "URL",
"iconField": "UI Fabric ikonnamn",
"targetField": "Mål",
"sortOrder":"Sortering",
"targetCurrent": "Aktuellt fönster",
"targetNew": "Ny flik",

18
samples/react-tiles-v2/src/webparts/Tiles/loc/tr-tr.js vendored
View File

@ -9,11 +9,29 @@ define([], function() {
"tilesPanelHeader": "Döşemelerini yapılandır",
"tilesManageBtn": "Döşemeleri yapılandırın",
"tilesHeight": "Tile Height",
"colourMode": "Colour Mode",
"colourModeTheme": "Theme",
"colourModeUniform": "Custom Uniform",
"colourModeUnique": "Custom Unique",
"widthAutomaticOrStatic": "Automatic or Static Width",
"widthStatic": "Static",
"widthAutomatic": "Automatic",
"widthStaticSet": "Tile static width",
"iconSelectFile": "Select Icon",
"colorSetUniqueFg": "Foreground Colour",
"colorSetUniqueBg": "Background Colour",
"titleField": "Başlık",
"descriptionField": "Açıklama",
"urlField": "URL",
"iconField": "UI Fabric ikon adı",
"targetField": "Hedef",
"sortOrder":"Sıralama düzeni",
"targetCurrent": "Geçerli pencere ",
"targetNew": "Yeni sekme",