From cf17587f776e5a03635d798809d83edb677f7543 Mon Sep 17 00:00:00 2001 From: flowerbot <4167900+flowerbot@users.noreply.github.com> Date: Thu, 30 Jun 2022 10:16:32 +1000 Subject: [PATCH] fully functioning --- .../PalettePickerWebPart.manifest.json | 4 +- .../palettePicker/PalettePickerWebPart.tsx | 32 ++++---- .../components/CustomPropertyPane.module.scss | 4 +- .../components/CustomPropertyPane.tsx | 78 ++++++------------ .../palettePicker/components/IColorsProps.ts | 1 - .../components/IPalettePickerProps.ts | 2 + .../components/PalettePicker.module.scss | 2 +- .../components/PalettePicker.tsx | 82 ++++++++++++++----- tsconfig.json | 3 +- 9 files changed, 112 insertions(+), 96 deletions(-) diff --git a/src/webparts/palettePicker/PalettePickerWebPart.manifest.json b/src/webparts/palettePicker/PalettePickerWebPart.manifest.json index aeb881281..88e8cfce8 100644 --- a/src/webparts/palettePicker/PalettePickerWebPart.manifest.json +++ b/src/webparts/palettePicker/PalettePickerWebPart.manifest.json @@ -20,14 +20,14 @@ "group": { "default": "Other" }, "title": { "default": "Palette Picker" }, "description": { "default": "Palette Picker description" }, - "officeFabricIconFontName": "Page", + "officeFabricIconFontName": "Color", "properties": { "description": "Palette Picker", "fontColor": "white", "fieldSetHue": [90,280], "fieldSetSat": [45, 75], "fieldSetLight": [50, 75], - "fieldSetShades": [5] + "fieldSetShades": [8] } }] } diff --git a/src/webparts/palettePicker/PalettePickerWebPart.tsx b/src/webparts/palettePicker/PalettePickerWebPart.tsx index d03ad9513..d557b465d 100644 --- a/src/webparts/palettePicker/PalettePickerWebPart.tsx +++ b/src/webparts/palettePicker/PalettePickerWebPart.tsx @@ -16,8 +16,9 @@ import { PropertyPaneHost } from 'property-pane-portal'; import { update } from '@microsoft/sp-lodash-subset'; export interface IPalettePickerWebPartProps { - //cssObjectText: string; - //colorObject: any; + cssObjectText: string; + fontColor: string; + cssObject: any; } @@ -25,6 +26,8 @@ export interface IPalettePickerWebPartProps { export default class PalettePickerWebPart extends BaseClientSideWebPart { + + public render(): void { const mainElement: React.ReactElement = React.createElement( PalettePicker, @@ -34,7 +37,9 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart value); - // } else { - // update(this.properties, property, () => JSON.stringify(value)); - // } + + if(property == "cssObject" && value != {}) { + // update(this.properties, "cssObjectText", () => ":root {" + Object.entries(value).map(([k, v]) => `${k}:${v}`).join('; ') + "}"); + update(this.properties, "cssObjectText", () => JSON.stringify(value)); + } + this.render(); } @@ -99,15 +105,7 @@ export default class PalettePickerWebPart extends BaseClientSideWebPart { - - let RESULT= ""; - try { - const HUE_STEP = (hue[1] - hue[0]) / shades - const LIGHT_STEP = (lightness[1] - lightness[0]) / shades - const SAT_STEP = (saturation[1] - saturation[0]) / shades - RESULT = `:root {\n` - for (let s = 0; s < shades + 1; s++) { - const HUE = Math.floor(hue[1] - s * HUE_STEP) - const LIGHTNESS = Math.floor(lightness[1] - s * LIGHT_STEP) - const SATURATION = Math.floor(saturation[1] - s * SAT_STEP) - RESULT += ` --color-${s + - 1}: hsl(${HUE}, ${SATURATION}%, ${LIGHTNESS}%);\n` - } - console.log("RESULT:", RESULT); - } - catch (ex) {} - return (RESULT += '}') - } -*/ - //MADE AN OBJECT for 'getcode' +export const CustomPropertyPane: React.FunctionComponent = (props) => { + + + //copied and modified to suit from this CodePen by Jhey https://codepen.io/jh3y/pen/rNjbmBQ?editors=0010 const cssObject = (hue, saturation, lightness, shades) => { let obj = {}; try { const HUE_STEP = (hue[1] - hue[0]) / shades const LIGHT_STEP = (lightness[1] - lightness[0]) / shades const SAT_STEP = (saturation[1] - saturation[0]) / shades - //let RESULT = `:root {\n` for (let s = 0; s < shades + 1; s++) { const HUE = Math.floor(hue[1] - s * HUE_STEP) const LIGHTNESS = Math.floor(lightness[1] - s * LIGHT_STEP) @@ -48,34 +27,20 @@ const getCode = (hue, saturation, lightness, shades) => { obj[`--color-${s + 1}`] = `hsl(${HUE}, ${SATURATION}%, ${LIGHTNESS}%)`; } } catch(ex) {console.log("obj problems"); } - // console.log("RESULT:", RESULT); - //console.log("color obj:", obj); - return obj; //, JSON.stringify(obj)];// .replace(/['"]+/g, '')]; + + return obj; } - - -export const CustomPropertyPane: React.FunctionComponent = (props) => { - - - //const[colorObj, setColorObj] = React.useState({}); const[colorObj, setColorObj] = React.useState({}); React.useEffect(() => { try { setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0])); - console.log("COBJ:",colorObj); - // props.updateWebPartProperty("cssObjectText", JSON.stringify(colorObj[0])); - // props.updateWebPartProperty("cssObjectText", JSON.stringify(colorObj)); - props.updateWebPartProperty("cssObjectText", "some text"); } catch(ex) { console.log("color issues"); } - - //.replace(/['"]+/g, '')); - // console.log(JSON.stringify(colorObj));//.replace(/['"]+/g, '')); }, []); // empty array means useEffect only runs once (I think); @@ -94,10 +59,7 @@ export const CustomPropertyPane: React.FunctionComponent { props.updateWebPartProperty("fieldSetHue", values); setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0])); - //props.updateWebPartProperty("cssObjectText", cssStyles(colorObj)); - console.log(escape(JSON.stringify(colorObj))); - props.updateWebPartProperty("cssObjectText", escape(JSON.stringify(colorObj))); //JSON.stringify(colorObj).replace(/['"]+/g, '')); - + props.updateWebPartProperty("cssObject", colorObj); }} renderTrack={({ props, children }) => (
{ props.updateWebPartProperty("fieldSetSat", values); setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0])); - // props.updateWebPartProperty("cssObjectText", cssStyles(colorObj)); - // props.updateWebPartProperty("cssObjectText", (JSON.stringify(colorObj)).replace(/['"]+/g, '')); + props.updateWebPartProperty("cssObject", colorObj); } } @@ -182,8 +143,8 @@ export const CustomPropertyPane: React.FunctionComponent { props.updateWebPartProperty("fieldSetLight", values); setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0])); - // props.updateWebPartProperty("cssObjectText", cssStyles(colorObj)); - // props.updateWebPartProperty("cssObjectText", (JSON.stringify(colorObj)).replace(/['"]+/g, '')); + props.updateWebPartProperty("cssObject", colorObj); + }} renderTrack={({ props, children }) => ( @@ -225,8 +186,8 @@ export const CustomPropertyPane: React.FunctionComponent { props.updateWebPartProperty("fieldSetShades", values); setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0])); - // props.updateWebPartProperty("cssObjectText", cssStyles(colorObj)); - // props.updateWebPartProperty("cssObjectText", (JSON.stringify(colorObj)).replace(/['"]+/g, '')); + props.updateWebPartProperty("cssObject", colorObj); + }} renderTrack={({ props, children }) => (
+
+ +
+
+ ); }; \ No newline at end of file diff --git a/src/webparts/palettePicker/components/IColorsProps.ts b/src/webparts/palettePicker/components/IColorsProps.ts index ccb59e117..50e71d40d 100644 --- a/src/webparts/palettePicker/components/IColorsProps.ts +++ b/src/webparts/palettePicker/components/IColorsProps.ts @@ -2,5 +2,4 @@ export interface IColorsProps { colorObject: any; fontColor: string; context: any; - // colorObjectString: string; } \ No newline at end of file diff --git a/src/webparts/palettePicker/components/IPalettePickerProps.ts b/src/webparts/palettePicker/components/IPalettePickerProps.ts index 12ce6ab5a..f80659a4e 100644 --- a/src/webparts/palettePicker/components/IPalettePickerProps.ts +++ b/src/webparts/palettePicker/components/IPalettePickerProps.ts @@ -1,4 +1,6 @@ export interface IPalettePickerProps { cssObjectText; context; + cssObject; + fontColor; } diff --git a/src/webparts/palettePicker/components/PalettePicker.module.scss b/src/webparts/palettePicker/components/PalettePicker.module.scss index dbe07ece2..fe1a8d456 100644 --- a/src/webparts/palettePicker/components/PalettePicker.module.scss +++ b/src/webparts/palettePicker/components/PalettePicker.module.scss @@ -10,7 +10,7 @@ .row { @include ms-Grid-row; @include ms-fontColor-white; - background-color: $ms-color-themeDark; + /* background-color: $ms-color-themeDark; */ padding: 20px; } diff --git a/src/webparts/palettePicker/components/PalettePicker.tsx b/src/webparts/palettePicker/components/PalettePicker.tsx index 320b431ba..c46dcb433 100644 --- a/src/webparts/palettePicker/components/PalettePicker.tsx +++ b/src/webparts/palettePicker/components/PalettePicker.tsx @@ -1,17 +1,9 @@ import * as React from 'react'; import styles from './PalettePicker.module.scss'; import { IPalettePickerProps } from './IPalettePickerProps'; -import { escape } from '@microsoft/sp-lodash-subset'; import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown'; -const dropdownStyles: Partial = { - - dropdown: { width: 300 - - } -}; - const options: IDropdownOption[] = [ { key: 'apple', text: 'Apple' }, { key: 'banana', text: 'Banana' }, @@ -22,31 +14,81 @@ const options: IDropdownOption[] = [ { key: 'lettuce', text: 'Lettuce' } ]; +const returnCss = (obj) => { + + let newObj = {}; + Object.keys(obj).map((key, i) => { + newObj[`.ms-Dropdown-item:nth-of-type(${i+1})`] = { "backgroundColor": obj[key] }; + }); + + return newObj; + +} + export default class PalettePicker extends React.Component { - public componentDidMount() { - // console.log("css:", JSON.parse(this.props.colorObj)); +constructor(props: IPalettePickerProps) { + super(props); + + +} + + + + + private dropdownStyles: Partial = { + root: this.props.cssObject, + label: {color: this.props.fontColor}, + /* dropdownItem: { + backgroundColor: 'pink' + }, */ + /* dropdownItemsWrapper: { + style: this.props.cssObject ? this.props.cssObject : {}, + }, */ + + dropdownItems: { + selectors: returnCss(this.props.cssObject), + dropdown: { width: 300 + } + } +} + -//console.log(props) public render(): React.ReactElement { + +console.log("styles:", this.dropdownStyles); +console.log("obj", returnCss(this.props.cssObject)); + + + return ( -
-
-
+
+ diff --git a/tsconfig.json b/tsconfig.json index f55dc0d5f..0c6f58b74 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,7 +25,8 @@ "es5", "dom", "es2015.collection", - "es2015.promise" + "es2015.promise", + "es2017.object" ] }, "include": [