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

Added support for unique colors

This commit is contained in:
fthorild 2021-10-14 17:37:11 +02:00
parent 4cace547fb
commit f8f3404c83
21 changed files with 266 additions and 34 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": {

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

@ -37,7 +37,7 @@ 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 3, 2021|Added sorting and static tile width - @fthorild
1.1|October 14, 2021|Added sorting, static tile width and unique tile colour - [fthorild](https://github.com/fthorild)
## Minimal Path to Awesome

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": {

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

@ -4,10 +4,11 @@ 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;
@ -18,8 +19,8 @@ export interface ITilesWebPartProps {
tileColour: string;
tileFont: string;
title: string;
customColour: boolean;
staticWidth: boolean;
colourMode: string;
themeVariant: IReadonlyTheme | undefined;
ThemeColorsFromWindow: IReadonlyTheme | undefined;
}
@ -69,12 +70,12 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
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;
},
@ -113,7 +114,7 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
let tileFontplaceholder: any = [];
let tileStaticWidthplaceholder: any = [];
if (this.properties.customColour) {
if (this.properties.colourMode === '2') {
tileColourplaceholder = this.propertyFieldColorPicker('tileColour', {
key: "tileColour",
label: strings.tileColour,
@ -143,7 +144,7 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
if (this.properties.staticWidth) {
tileStaticWidthplaceholder = PropertyPaneSlider('tileWidth', {
label: 'Tile static width',
label: strings.widthStaticSet,
max: 1000,
min: 10,
step: 1,
@ -194,15 +195,47 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
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;
@ -238,7 +271,7 @@ 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,
@ -247,18 +280,20 @@ export default class TilesWebPart extends BaseClientSideWebPart<ITilesWebPartPro
}),
PropertyPaneToggle('staticWidth', {
key: 'staticWidthID',
label: 'Automatic or Static width',
onText: 'Static width',
offText: 'Automatic width',
checked: this.properties.customColour
label: strings.widthAutomaticOrStatic,
onText: strings.widthStatic,
offText: strings.widthAutomatic,
checked: this.properties.staticWidth
}),
tileStaticWidthplaceholder,
PropertyPaneToggle('customColour', {
key: 'customColourID',
label: 'Theme or Custom colours',
onText: 'Custom Colours',
offText: 'Theme Colours',
checked: this.properties.customColour
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
samples/react-tiles-v2/src/webparts/Tiles/components/ITileInfo.ts
View File

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

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

@ -39,8 +39,8 @@ export class Tiles extends React.Component<ITilesProps, {}> {
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} />)
}

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' };
}
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'

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

@ -7,8 +7,8 @@ export interface ITileProps {
tileWidth: number;
tileColour: string;
tileFont: string;
customColour:boolean;
staticWidth:boolean;
colourMode:string;
themeVariant: IReadonlyTheme | undefined;
ThemeColorsFromWindow: IReadonlyTheme | undefined;
}

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

@ -5,11 +5,8 @@ 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 = {};
@ -18,7 +15,7 @@ export class Tile extends React.Component<ITileProps, {}> {
const tileInnerStyle: React.CSSProperties = {};
const fontInnerStyle: React.CSSProperties = {};
if (this.props.tileWidth) {
if (this.props.staticWidth) {
tileStyle.flexBasis = `${this.props.tileWidth}px`;
tileStyle.minWidth = `${this.props.tileWidth}px`;
tileStyle.flexGrow = 0;
@ -32,14 +29,17 @@ export class Tile extends React.Component<ITileProps, {}> {
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}>

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

@ -9,6 +9,23 @@ 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",

20
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,13 +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",
"sortOrder": "Sort Order",
"targetCurrent": "Current window",
"targetNew": "New tab",

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

@ -9,6 +9,23 @@ 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",

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

@ -9,6 +9,23 @@ 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",

23
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;
@ -19,6 +40,8 @@ declare interface ITilesWebPartStrings {
targetField: string;
sortOrder: string;
targetCurrent: string;
targetNew: string;

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

@ -9,6 +9,23 @@ 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",

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

@ -9,6 +9,23 @@ 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",

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

@ -9,6 +9,23 @@ 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",

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

@ -9,6 +9,23 @@ 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",