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
GitHub
commit
a1a0beaaa8
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "react-my-task",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -13,9 +13,11 @@ This is a rebuild of the awesome project created by @hugoabernier [https://githu
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## 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" />
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "tiles",
|
||||
"version": "0.0.1",
|
||||
"version": "1.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "tiles",
|
||||
"version": "0.0.1",
|
||||
"version": "1.1.0",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -4,20 +4,23 @@ 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 { 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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
},
|
||||
|
|
@ -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,
|
||||
|
|
@ -132,7 +139,20 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
|
|||
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: [
|
||||
{
|
||||
|
|
@ -169,15 +189,53 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
|
|||
type: this.customCollectionFieldType.string,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
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(SimpleColorPicker, {
|
||||
key: itemId,
|
||||
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: "Select Icon",
|
||||
title: strings.iconField,
|
||||
type: this.customCollectionFieldType.custom,
|
||||
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
|
||||
return (
|
||||
React.createElement(IconPicker, {
|
||||
key: itemId,
|
||||
buttonLabel:"Select File",
|
||||
buttonLabel: strings.iconSelectFile,
|
||||
onChange: (iconName: string) => {
|
||||
onUpdate(field.id, iconName);
|
||||
return Event;
|
||||
|
|
@ -207,24 +265,35 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
|
|||
}
|
||||
]
|
||||
})
|
||||
]},
|
||||
]
|
||||
},
|
||||
{
|
||||
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
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ export interface ITileInfo {
|
|||
url: string;
|
||||
icon: string;
|
||||
target: LinkTarget;
|
||||
sortOrder: string;
|
||||
foreground: string;
|
||||
background: string;
|
||||
}
|
||||
|
||||
export enum LinkTarget {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
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';
|
||||
|
|
@ -15,23 +15,32 @@ 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} />
|
||||
|
||||
{
|
||||
this.props.collectionData && this.props.collectionData.length > 0 ? (
|
||||
|
||||
<div className={styles.tilesList}>
|
||||
{
|
||||
this.props.collectionData.map((tile, idx) =>
|
||||
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} />)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
export interface ISimpleColorPickerProps {
|
||||
onChange(iconName: any): void;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export interface ISimpleColorPickerState {
|
||||
val: string;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export * from './ISimpleColorPickerState';
|
||||
export * from './ISimpleColorPickerProps';
|
||||
export * from './SimpleColorPicker';
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
tileInnerStyle.backgroundColor = `${this.props.item.background}`;
|
||||
fontInnerStyle.color = `${this.props.item.foreground}`;
|
||||
}
|
||||
return (
|
||||
<div className={styles.tile} style={tileStyle}>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue