Merge pull request #2923 from flowerbot/react-palette-picker
React palette picker
This commit is contained in:
Hugo Bernier
GitHub
commit
59d88592cf
|
|
@ -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.13.1",
|
||||
"image": "docker.io/m365pnp/spfx:1.13.1",
|
||||
// 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
|
||||
],
|
||||
"portsAttributes": {
|
||||
"4321": {
|
||||
"protocol": "https",
|
||||
"label": "Manifest",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
},
|
||||
// Not needed for SPFx>= 1.12.1
|
||||
// "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,33 @@
|
|||
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
|
||||
|
||||
# Convert the generated PEM certificate to a CER certificate
|
||||
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
|
||||
|
||||
# Copy the PEM ecrtificate for non-Windows hosts
|
||||
cp ~/.rushstack/rushstack-serve.pem ./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**********"
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
release
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
!dist
|
||||
config
|
||||
|
||||
gulpfile.js
|
||||
|
||||
release
|
||||
src
|
||||
temp
|
||||
|
||||
tsconfig.json
|
||||
tslint.json
|
||||
|
||||
*.log
|
||||
|
||||
.yo-rc.json
|
||||
.vscode
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"msjsdiag.debugger-for-chrome"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
/**
|
||||
* Install Chrome Debugger Extension for Visual Studio Code to debug your components with the
|
||||
* Chrome browser: https://aka.ms/spfx-debugger-extensions
|
||||
*/
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Hosted workbench",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
|
||||
"webRoot": "${workspaceRoot}",
|
||||
"sourceMaps": true,
|
||||
"sourceMapPathOverrides": {
|
||||
"webpack:///.././src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../../src/*": "${webRoot}/src/*",
|
||||
"webpack:///../../../../../src/*": "${webRoot}/src/*"
|
||||
},
|
||||
"runtimeArgs": [
|
||||
"--remote-debugging-port=9222",
|
||||
"-incognito"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// Place your settings in this file to overwrite default and user settings.
|
||||
{
|
||||
// Configure glob patterns for excluding files and folders in the file explorer.
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/bower_components": true,
|
||||
"**/coverage": true,
|
||||
"**/lib-amd": true,
|
||||
"src/**/*.scss.ts": true
|
||||
},
|
||||
"typescript.tsdk": ".\\node_modules\\typescript\\lib"
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"plusBeta": false,
|
||||
"isCreatingSolution": true,
|
||||
"environment": "spo",
|
||||
"version": "1.13.1",
|
||||
"libraryName": "palette-picker",
|
||||
"libraryId": "1c5755b8-0a69-4e68-8582-e2a30be7462f",
|
||||
"packageManager": "npm",
|
||||
"isDomainIsolated": false,
|
||||
"componentType": "webpart"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
BSD 3-Clause License
|
||||
|
||||
Copyright (c) 2022, flowerbot
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
1. Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
|
||||
2. Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
3. Neither the name of the copyright holder nor the names of its
|
||||
contributors may be used to endorse or promote products derived from
|
||||
this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
||||
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
||||
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
|
||||
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
|
||||
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
|
||||
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
|
||||
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
||||
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
# Palette Picker
|
||||
|
||||
## Summary
|
||||
|
||||
Custom Property Pane pain resolved (whew), color palette generator inspired by [Jhey](https://codepen.io/jh3y/pen/rNjbmBQ?editors=0011).
|
||||
Built it to get an understanding of [Property Pane Portal](https://www.npmjs.com/package/property-pane-portal) and cuz I want to eventually build in a dynamic palette generator/css reader for my web parts.
|
||||
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
|
||||
|
||||
> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react Palette Picker Web Part | [Linda K](https://github.com/flowerbot)
|
||||
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|August, 2022|Initial release
|
||||
|
||||
|
||||
## Prerequisites
|
||||
|
||||
<!--
|
||||
Any special pre-requisites? Include any lists, permissions, offerings to the demo gods, or whatever else needs to be done for this web part to work.
|
||||
|
||||
Please describe the steps to configure the pre-requisites. Feel free to add screen shots, but make sure that there is a text description of the steps to perform.
|
||||
|
||||
-->
|
||||
|
||||
## Minimal path to awesome
|
||||
|
||||
|
||||
* Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/REACT-PALETTE-PICKER) then unzip it)
|
||||
* From your command line, change your current directory to the directory containing this sample (`REACT-PALETTE-PICKER`, located under `samples`)
|
||||
* in the command line run:
|
||||
* `npm install`
|
||||
* `gulp serve`
|
||||
|
||||
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
Multi-parameter sliders* in property pane from [react-range](https://www.npmjs.com/package/react-range), dynamic color updating, CSS snippet generation, apply colors to MS dropdown component options.
|
||||
|
||||
*\* PnP - please consider :)*
|
||||
|
||||
This web part illustrates the following concepts:
|
||||
|
||||
* custom property pane
|
||||
* dynamic CSS in SPFx property pane
|
||||
* custom CSS color on dropdown options
|
||||
|
||||
## Help
|
||||
|
||||
We do not support samples, but 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're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
|
||||
|
||||
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20REACT-PALETTE-PICKER%22) to see if anybody else is having the same issues.
|
||||
|
||||
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=REACT-PALETTE-PICKER) and see what the community is saying.
|
||||
|
||||
If you encounter any issues 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-PALETTE-PICKER&template=bug-report.yml&sample=REACT-PALETTE-PICKER&authors=@flowerbot&title=REACT-PALETTE-PICKER%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-PALETTE-PICKER&template=question.yml&sample=REACT-PALETTE-PICKER&authors=@flowerbot&title=REACT-PALETTE-PICKER%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-PALETTE-PICKER&template=suggestion.yml&sample=REACT-PALETTE-PICKER&authors=@flowerbot&title=REACT-PALETTE-PICKER%20-%20).
|
||||
|
||||
## References
|
||||
|
||||
* [Property Pane Portal](https://blog.pathtosharepoint.com/2021/07/29/introducing-the-property-pane-portal/) (thank you Christophe!)
|
||||
* [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
* [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
|
||||
* [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
|
||||
* [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
|
||||
* [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
|
||||
|
||||
## Disclaimer
|
||||
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/REACT-PALETTE-PICKER" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
|
|
@ -0,0 +1,50 @@
|
|||
[
|
||||
{
|
||||
"name": "pnp-sp-dev-spfx-web-parts-react-palette-picker",
|
||||
"source": "pnp",
|
||||
"title": "Palette Picker",
|
||||
"shortDescription": "Custom Property Pane pain resolved (whew), color palette generator inspired by [Jhey](https://codepen.io/jh3y/pen/rNjbmBQ?editors=0011).",
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-palette-picker",
|
||||
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-palette-picker",
|
||||
"longDescription": [
|
||||
"Built it to get an understanding of [Property Pane Portal](https://www.npmjs.com/package/property-pane-portal) and cuz I want to eventually build in a dynamic palette generator/css reader for my web parts."
|
||||
],
|
||||
"creationDateTime": "2022-08-01",
|
||||
"updateDateTime": "2022-08-01",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.13.1"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-palette-picker/assets/YOUR-IMAGE-NAME-HERE",
|
||||
"alt": "Web Part Preview"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "flowerbot",
|
||||
"pictureUrl": "https://github.com/flowerbot.png",
|
||||
"name": "author"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"name": "Build your first SharePoint client-side web part",
|
||||
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"palette-picker-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/palettePicker/PalettePickerWebPart.js",
|
||||
"manifest": "./src/webparts/palettePicker/PalettePickerWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"PalettePickerWebPartStrings": "lib/webparts/palettePicker/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./release/assets/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "palette-picker",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "palette-picker-client-side-solution",
|
||||
"id": "1c5755b8-0a69-4e68-8582-e2a30be7462f",
|
||||
"version": "1.0.0.0",
|
||||
"includeClientSideAssets": true,
|
||||
"isDomainIsolated": false,
|
||||
"developer": {
|
||||
"name": "",
|
||||
"websiteUrl": "",
|
||||
"privacyUrl": "",
|
||||
"termsOfUseUrl": "",
|
||||
"mpnId": "Undefined-1.13.1"
|
||||
}
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/palette-picker.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://tweednswgovau.sharepoint.com/sites/InfrastructurePlanning/_layouts/workbench.aspx"
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
'use strict';
|
||||
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'slider-track' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'toolbar-item' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'code-toolbar' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'inline-color' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'inline-color-wrapper' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'line-numbers-rows' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'line-numbers' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'attr-value' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'class-name' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'function-name' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'attr-name' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'block-comment' is not camelCase and will not be type-safe.`);
|
||||
build.addSuppression(`Warning - [sass] The local CSS class 'slider-thumb' is not camelCase and will not be type-safe.`);
|
||||
|
||||
|
||||
|
||||
var getTasks = build.rig.getTasks;
|
||||
build.rig.getTasks = function () {
|
||||
var result = getTasks.call(build.rig);
|
||||
|
||||
result.set('serve', result.get('serve-deprecated'));
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
build.initialize(require('gulp'));
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "palette-picker",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.13.1",
|
||||
"@microsoft/sp-lodash-subset": "1.13.1",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.13.1",
|
||||
"@microsoft/sp-property-pane": "1.13.1",
|
||||
"@microsoft/sp-webpart-base": "1.13.1",
|
||||
"office-ui-fabric-react": "7.174.1",
|
||||
"property-pane-portal": "^0.3.0",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "16.13.1",
|
||||
"react-range": "^1.8.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
|
||||
"@microsoft/sp-build-web": "1.13.1",
|
||||
"@microsoft/sp-module-interfaces": "1.13.1",
|
||||
"@microsoft/sp-tslint-rules": "1.13.1",
|
||||
"@types/react": "16.9.51",
|
||||
"@types/react-dom": "16.9.8",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~4.0.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "a573d807-cd8c-46f4-b37c-8a16ed7a73c0",
|
||||
"alias": "PalettePickerWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||
"requiresCustomScript": false,
|
||||
"supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
|
||||
"supportsThemeVariants": true,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||
"group": { "default": "Other" },
|
||||
"title": { "default": "Palette Picker" },
|
||||
"description": { "default": "Palette Picker description" },
|
||||
"officeFabricIconFontName": "Color",
|
||||
"properties": {
|
||||
"description": "Palette Picker",
|
||||
"fontColor": "white",
|
||||
"fieldSetHue": [90,280],
|
||||
"fieldSetSat": [45, 75],
|
||||
"fieldSetLight": [50, 75],
|
||||
"fieldSetShades": [8]
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import * as React from 'react';
|
||||
import * as ReactDom from 'react-dom';
|
||||
import { Version } from '@microsoft/sp-core-library';
|
||||
import {
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from '@microsoft/sp-property-pane';
|
||||
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
|
||||
|
||||
import * as strings from 'PalettePickerWebPartStrings';
|
||||
import PalettePicker from './components/PalettePicker';
|
||||
import { IPalettePickerProps } from './components/IPalettePickerProps';
|
||||
|
||||
import { CustomPropertyPane } from './components/CustomPropertyPane';
|
||||
import { PropertyPaneHost } from 'property-pane-portal';
|
||||
import { update } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
export interface IPalettePickerWebPartProps {
|
||||
cssObjectText: string;
|
||||
fontColor: string;
|
||||
cssObject: any;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export default class PalettePickerWebPart extends BaseClientSideWebPart<IPalettePickerWebPartProps> {
|
||||
|
||||
|
||||
|
||||
public render(): void {
|
||||
const mainElement: React.ReactElement<IPalettePickerProps> = React.createElement(
|
||||
PalettePicker,
|
||||
|
||||
|
||||
);
|
||||
|
||||
const ppProps = {
|
||||
cssObjectText: this.properties["cssObjectText"],
|
||||
context: this.context,
|
||||
cssObject: this.properties["cssObjectText"] != undefined ? JSON.parse(this.properties["cssObjectText"]) : {},
|
||||
fontColor: this.properties.fontColor
|
||||
};
|
||||
|
||||
const customPropertyPaneProperties = {
|
||||
context: this.context,
|
||||
properties: this.properties,
|
||||
updateWebPartProperty: this.updateWebPartProperty.bind(this),
|
||||
};
|
||||
|
||||
|
||||
|
||||
ReactDom.render(
|
||||
<>
|
||||
<PalettePicker {... ppProps}/>
|
||||
<CustomPropertyPane {... customPropertyPaneProperties} />
|
||||
</>
|
||||
, this.domElement);
|
||||
}
|
||||
|
||||
|
||||
|
||||
public updateWebPartProperty(property, value) {
|
||||
update(this.properties, property, () => 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();
|
||||
|
||||
}
|
||||
|
||||
protected onDispose(): void {
|
||||
ReactDom.unmountComponentAtNode(this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse('1.0');
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
|
||||
const hostProperties = {
|
||||
context: this.context
|
||||
};
|
||||
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneHost('fieldSetHue', hostProperties),
|
||||
PropertyPaneHost('fieldSetSat', hostProperties),
|
||||
PropertyPaneHost('fieldSetLight', hostProperties),
|
||||
PropertyPaneHost('fieldSetShades', hostProperties),
|
||||
PropertyPaneTextField('fontColor', {
|
||||
label: "Font Color"
|
||||
|
||||
}),
|
||||
PropertyPaneHost('fieldSetDisplay', hostProperties),
|
||||
PropertyPaneHost('cssObjectText', hostProperties),
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import { IColorsProps } from './IColorsProps';
|
||||
|
||||
|
||||
export const Colors: React.FC<IColorsProps> = (props) => {
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
console.log("obj in colors", props.colorObject);
|
||||
|
||||
},[]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>:root {</div>
|
||||
{
|
||||
Object.keys(props.colorObject).map((key) => {
|
||||
return (
|
||||
<div style={{backgroundColor: props.colorObject[key]}} ><code style={{color:props.fontColor}}>{`${key}: ${props.colorObject[key]}`};</code></div>
|
||||
);
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
<div>}</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,389 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.CustomPropertyPane {
|
||||
|
||||
|
||||
/* PrismJS 1.23.0
|
||||
/* original inspiration used prism for formatting the css, these styles are mostly about that but unused in this solution
|
||||
https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
|
||||
/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #ccc;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 2rem;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
outline: transparent;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span.inline-color-wrapper {
|
||||
/*
|
||||
* The background image is the following SVG inline in base 64:
|
||||
*
|
||||
* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
|
||||
* <path fill="gray" d="M0 0h2v2H0z"/>
|
||||
* <path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/>
|
||||
* </svg>
|
||||
*
|
||||
* SVG-inlining explained:
|
||||
* https://stackoverflow.com/a/21626701/7595472
|
||||
*/
|
||||
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9ImdyYXkiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0wIDBoMXYxSDB6TTEgMWgxdjFIMXoiLz48L3N2Zz4=");
|
||||
/* This is to prevent visual glitches where one pixel from the repeating pattern could be seen. */
|
||||
background-position: center;
|
||||
background-size: 110%;
|
||||
|
||||
display: inline-block;
|
||||
height: 1.333ch;
|
||||
width: 1.333ch;
|
||||
margin: 0 .333ch;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid white;
|
||||
outline: 1px solid rgba(0,0,0,.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span.inline-color {
|
||||
display: block;
|
||||
/* To prevent visual glitches again */
|
||||
height: 120%;
|
||||
width: 120%;
|
||||
}
|
||||
|
||||
div.code-toolbar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar {
|
||||
position: absolute;
|
||||
top: .3em;
|
||||
right: .2em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
div.code-toolbar:hover > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Separate line b/c rules are thrown out if selector is invalid.
|
||||
IE11 and old Edge versions don't support :focus-within. */
|
||||
div.code-toolbar:focus-within > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar .toolbar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar button {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
-webkit-user-select: none; /* for button */
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a,
|
||||
div.code-toolbar > .toolbar button {
|
||||
color: #bbb;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
font-family: sans-serif;
|
||||
background: hsl(0, 0%, 25%);
|
||||
border-radius: .5em;
|
||||
outline: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a:hover,
|
||||
div.code-toolbar > .toolbar a:focus,
|
||||
div.code-toolbar > .toolbar button:hover,
|
||||
div.code-toolbar > .toolbar button:focus,
|
||||
div.code-toolbar > .toolbar span:hover,
|
||||
div.code-toolbar > .toolbar span:focus {
|
||||
background: hsl(0, 0%, 40%);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
//background: 'hsl(%s, 50%, 98%)' % var(--hue, 0);
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.scene {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
#hue,
|
||||
#saturation,
|
||||
#lightness {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
color: hsl(0, 0%, 14%);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
align-items: center;
|
||||
grid-gap: 2rem 2rem;
|
||||
width: 50%;
|
||||
max-width: 400px;
|
||||
padding: 2rem;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.result {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rem 3rem -2rem hsl(0, 0%, 10%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
transform: translate(0, -116px);
|
||||
}
|
||||
|
||||
.palette {
|
||||
display: grid;
|
||||
// grid-template-rows: repeat(var(--shades, 8), 1fr);
|
||||
height: 100%;
|
||||
// background: linear-gradient(var(--color-1), var(--bg));
|
||||
}
|
||||
|
||||
.palette__shade {
|
||||
// background: var(--color, var(--color-one));
|
||||
width: 41px;
|
||||
}
|
||||
|
||||
.slider-thumb {
|
||||
background: transparent;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// background: 'hsl(%s, 25%, 50%)' % var(--hue, 0);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
//border: '2px solid hsl(%s, 25%, 50%)' % var(--hue, 0)
|
||||
}
|
||||
|
||||
&:active {
|
||||
// border: '2px solid hsl(%s, 25%, 50%)' % var(--hue, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
background: hsl(0, 0%, 90%);
|
||||
border: 1px solid hsl(0, 0%, 70%);
|
||||
}
|
||||
|
||||
.labelContainer {
|
||||
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
import * as React from 'react';
|
||||
import { PropertyPanePortal } from 'property-pane-portal';
|
||||
import { ICustomPropertyPaneProps } from './ICustomPropertyPaneProps';
|
||||
import styles from './CustomPropertyPane.module.scss';
|
||||
import { Range } from 'react-range';
|
||||
import { composeComponentAs, TextField } from 'office-ui-fabric-react';
|
||||
import { Colors } from './Colors';
|
||||
//import { escape } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
|
||||
|
||||
|
||||
export const CustomPropertyPane: React.FunctionComponent<ICustomPropertyPaneProps> = (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;
|
||||
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);
|
||||
obj[`--color-${s + 1}`] = `hsl(${HUE}, ${SATURATION}%, ${LIGHTNESS}%)`;
|
||||
}
|
||||
} catch(ex) {console.log("obj problems"); }
|
||||
|
||||
return obj;
|
||||
};
|
||||
|
||||
const[colorObj, setColorObj] = React.useState({});
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
try {
|
||||
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
|
||||
}
|
||||
catch(ex) {
|
||||
console.log("color issues");
|
||||
}
|
||||
}, []); // empty array means useEffect only runs once (I think);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<PropertyPanePortal context={props.context}>
|
||||
<fieldset data-property="fieldSetHue" className={styles.CustomPropertyPane} >
|
||||
<div className={styles.labelContainer}>
|
||||
<label>Hue</label>
|
||||
</div>
|
||||
<Range
|
||||
step={1}
|
||||
min={0}
|
||||
max={360}
|
||||
values={ props.properties["fieldSetHue"] ? props.properties["fieldSetHue"] : [0, Math.floor(Math.random() * 360)] }
|
||||
onChange={(values) => {
|
||||
props.updateWebPartProperty("fieldSetHue", values);
|
||||
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
|
||||
props.updateWebPartProperty("cssObject", colorObj);
|
||||
}}
|
||||
renderTrack={({ props: innerProps, children }) => (
|
||||
<div
|
||||
{...innerProps}
|
||||
style={{
|
||||
...innerProps.style,
|
||||
height: '6px',
|
||||
width: '100%',
|
||||
backgroundColor: '#ccc'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
renderThumb={({ props: innerProps }) => (
|
||||
<div
|
||||
{...innerProps}
|
||||
style={{
|
||||
...innerProps.style,
|
||||
height: '30px',
|
||||
width: '30px',
|
||||
backgroundColor: '#999'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
</fieldset>
|
||||
<fieldset data-property="fieldSetSat" className={styles.CustomPropertyPane} >
|
||||
<div className={styles.labelContainer}><label>Saturation</label></div>
|
||||
<Range
|
||||
step={1}
|
||||
min={0}
|
||||
max={100}
|
||||
values={props.properties["fieldSetSat"] ? props.properties["fieldSetSat"] : [0, 100]}
|
||||
onChange={(values) => {
|
||||
props.updateWebPartProperty("fieldSetSat", values);
|
||||
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
|
||||
props.updateWebPartProperty("cssObject", colorObj);
|
||||
}
|
||||
|
||||
}
|
||||
renderTrack={({ props: innerProps, children }) => (
|
||||
<div
|
||||
{...innerProps}
|
||||
style={{
|
||||
...innerProps.style,
|
||||
height: '6px',
|
||||
width: '100%',
|
||||
backgroundColor: '#ccc'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
renderThumb={({ props: innerProps }) => (
|
||||
<div
|
||||
{...innerProps}
|
||||
style={{
|
||||
...innerProps.style,
|
||||
height: '30px',
|
||||
width: '30px',
|
||||
backgroundColor: '#999'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
</fieldset>
|
||||
<fieldset data-property="fieldSetLight" className={styles.CustomPropertyPane} >
|
||||
<div className={styles.labelContainer}>
|
||||
<label>
|
||||
Lightness
|
||||
</label>
|
||||
</div>
|
||||
<Range
|
||||
step={1}
|
||||
min={0}
|
||||
max={100}
|
||||
values={props.properties["fieldSetLight"] ? props.properties["fieldSetLight"] : [0, 100]}
|
||||
onChange={(values) => {
|
||||
props.updateWebPartProperty("fieldSetLight", values);
|
||||
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
|
||||
props.updateWebPartProperty("cssObject", colorObj);
|
||||
|
||||
|
||||
}}
|
||||
renderTrack={({ props: innerProps, children }) => (
|
||||
<div
|
||||
{...innerProps}
|
||||
style={{
|
||||
...innerProps.style,
|
||||
height: '6px',
|
||||
width: '100%',
|
||||
backgroundColor: '#ccc'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
renderThumb={({ props: innerProps }) => (
|
||||
<div
|
||||
{...innerProps}
|
||||
style={{
|
||||
...innerProps.style,
|
||||
height: '30px',
|
||||
width: '30px',
|
||||
backgroundColor: '#999'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
</fieldset>
|
||||
<fieldset data-property="fieldSetShades" className={styles.CustomPropertyPane} >
|
||||
<div className={styles.labelContainer}>
|
||||
<label>Shades</label>
|
||||
</div>
|
||||
<Range
|
||||
step={1}
|
||||
min={0}
|
||||
max={100}
|
||||
values={props.properties["fieldSetShades"] ? props.properties["fieldSetShades"] : [7]}
|
||||
onChange={(values) => {
|
||||
props.updateWebPartProperty("fieldSetShades", values);
|
||||
setColorObj(cssObject(props.properties["fieldSetHue"], props.properties["fieldSetSat"],props.properties["fieldSetLight"],props.properties["fieldSetShades"][0]));
|
||||
props.updateWebPartProperty("cssObject", colorObj);
|
||||
|
||||
}}
|
||||
renderTrack={({ props: innerProps, children }) => (
|
||||
<div
|
||||
{...innerProps}
|
||||
style={{
|
||||
...innerProps.style,
|
||||
height: '6px',
|
||||
width: '100%',
|
||||
backgroundColor: '#ccc'
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
renderThumb={({ props: innerProps }) => (
|
||||
<div
|
||||
{...innerProps}
|
||||
style={{
|
||||
...innerProps.style,
|
||||
height: '30px',
|
||||
width: '30px',
|
||||
backgroundColor: '#999'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
</fieldset>
|
||||
<fieldset data-property="cssObjectText">
|
||||
<TextField
|
||||
name="objText"
|
||||
multiline={true}
|
||||
disabled={true}
|
||||
value={props.properties.cssObjectText}
|
||||
//value= {JSON.stringify(colorObj).replace(/['"]+/g, '')}
|
||||
></TextField>
|
||||
</fieldset>
|
||||
|
||||
<fieldset data-property="fieldSetDisplay" className={styles.CustomPropertyPane} >
|
||||
<Colors
|
||||
colorObject = {colorObj}
|
||||
fontColor = {props.properties["fontColor"]}
|
||||
context = {props.context}
|
||||
></Colors>
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</PropertyPanePortal>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export interface IColorsProps {
|
||||
colorObject: any;
|
||||
fontColor: string;
|
||||
context: any;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
import { IPalettePickerWebPartProps } from "../PalettePickerWebPart";
|
||||
|
||||
export interface ICustomPropertyPaneProps {
|
||||
context: WebPartContext;
|
||||
properties: IPalettePickerWebPartProps;
|
||||
updateWebPartProperty: Function;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export interface IPalettePickerProps {
|
||||
cssObjectText;
|
||||
context;
|
||||
cssObject;
|
||||
fontColor;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.palettePicker {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
@include ms-Grid-row;
|
||||
@include ms-fontColor-white;
|
||||
/* background-color: $ms-color-themeDark; */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
@include ms-Grid-col;
|
||||
@include ms-lg10;
|
||||
@include ms-xl8;
|
||||
@include ms-xlPush2;
|
||||
@include ms-lgPush1;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ms-font-xl;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.button {
|
||||
// Our button
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
|
||||
// Primary Button
|
||||
min-width: 80px;
|
||||
background-color: $ms-color-themePrimary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
color: $ms-color-white;
|
||||
|
||||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $ms-font-size-m;
|
||||
font-weight: $ms-font-weight-regular;
|
||||
border-width: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
.label {
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
font-size: $ms-font-size-m;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import * as React from 'react';
|
||||
import styles from './PalettePicker.module.scss';
|
||||
import { IPalettePickerProps } from './IPalettePickerProps';
|
||||
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
|
||||
|
||||
|
||||
const options: IDropdownOption[] = [
|
||||
{ key: 'apple', text: 'Apple' },
|
||||
{ key: 'banana', text: 'Banana' },
|
||||
{ key: 'orange', text: 'Orange' },
|
||||
{ key: 'grape', text: 'Grape' },
|
||||
{ key: 'broccoli', text: 'Broccoli' },
|
||||
{ key: 'carrot', text: 'Carrot' },
|
||||
{ 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<IPalettePickerProps, {}> {
|
||||
|
||||
constructor(props: IPalettePickerProps) {
|
||||
super(props);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
private dropdownStyles: Partial<IDropdownStyles> = {
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public render(): React.ReactElement<IPalettePickerProps> {
|
||||
|
||||
console.log("styles:", this.dropdownStyles);
|
||||
console.log("obj", returnCss(this.props.cssObject));
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div style={this.props.cssObject} className={styles.palettePicker}>
|
||||
<div>
|
||||
<div className={styles.row} style={{ backgroundColor: this.props.cssObject["--color-1"], color: this.props.fontColor }}>
|
||||
<div className={styles.column}>
|
||||
<span className={styles.title} style={{ color: this.props.fontColor }}>Here's a Palette Picker for you!</span>
|
||||
<p className={styles.subTitle} style={{ color: this.props.fontColor }}>Allow users to select a color palette for your web part.</p>
|
||||
<div style={{ height: 'auto', minHeight: '20px', backgroundColor: this.props.fontColor }}>
|
||||
{Object.keys(this.props.cssObject).map((key, i) => {
|
||||
return <div style={{ backgroundColor: this.props.cssObject[key], height: '10px', width: '10px', display: 'inline-block', borderRadius: '50%', left: 0, top: 0 }}></div>;
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Dropdown placeholder="Select an option" label="Color your dropdown options .." options={options} styles={this.dropdownStyles} />
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<a href="https://aka.ms/spfx" className={styles.button} style={{ backgroundColor: this.props.cssObject["--color-3"], color: this.props.fontColor }}>
|
||||
<span className={styles.label} style={{ color: this.props.fontColor }}>Learn more</span>
|
||||
</a>
|
||||
<pre style={{ font: 'courier', backgroundColor: this.props.cssObject["--color-5"], color: this.props.fontColor }}> {JSON.stringify(this.props.cssObject, null, 4)}</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Palette Picker",
|
||||
"BasicGroupName": "Group",
|
||||
"DescriptionFieldLabel": "Description Field"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
declare interface IPalettePickerWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'PalettePickerWebPartStrings' {
|
||||
const strings: IPalettePickerWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 542 B |
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"skipLibCheck": true,
|
||||
"outDir": "lib",
|
||||
"inlineSources": false,
|
||||
"strictNullChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"typeRoots": [
|
||||
"./node_modules/@types",
|
||||
"./node_modules/@microsoft"
|
||||
],
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"lib": [
|
||||
"es5",
|
||||
"dom",
|
||||
"es2015.collection",
|
||||
"es2015.promise",
|
||||
"es2017.object"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue