├── .gitignore ├── README.md ├── extension.json ├── index.html ├── package.json └── sample.png /.gitignore: -------------------------------------------------------------------------------- 1 | .env 2 | .vscode 3 | /node_modules 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Colour picker UI Extension 2 | 3 | [https://www.contentful.com](Contentful) is a content management platform for web applications, mobile apps and connected devices. It allows you to create, edit & manage content in the cloud and publish it anywhere via powerful API. Contentful offers tools for managing editorial teams and enabling cooperation between organizations. 4 | 5 | The **colour picker UI** extension offers a colour picker tool for short text fields, returning the hex value. 6 | 7 | ![Colour Picker UI Extension](./sample.png "Colour Picker") 8 | 9 | ## Installation and usage 10 | [Ensure Contentful CLI is installed[(https://github.com/contentful/contentful-cli). 11 | 12 | Install the dependencies needed with `npm install`. 13 | 14 | To use first export CMA token, followed by creating the extension. 15 | 16 | ```bash 17 | export CONTENTFUL_MANAGEMENT_ACCESS_TOKEN= 18 | contentful extension create --space-id $SPACE_ID 19 | ``` 20 | 21 | ## Update the extension 22 | 23 | If you want to update the extension without updating the versioning, run: 24 | 25 | ```bash 26 | contentful extension update --space-id $SPACE_ID --force 27 | ``` 28 | 29 | ## Using the extension in the Contentful web app 30 | 31 | Enable the extension in the Contentful web app for a "Short text" field by opening the _Settings_ for a field and selecting the extension in the _appearance_ tab. 32 | -------------------------------------------------------------------------------- /extension.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "colourpicker", 3 | "name": "Colour picker", 4 | "srcdoc": "index.html", 5 | "fieldTypes": ["Symbol", "Text"] 6 | } 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 | 14 | 15 |

16 | 17 | 18 | 19 | 20 | 30 | 31 | 32 | 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "colourpicker", 3 | "version": "1.0.0", 4 | "description": "Colour picker UI extension for Contentful's web app.", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "create": "contentful-extension create --space-id $SPACE_ID", 8 | "update": "contentful-extension update --space-id $SPACE_ID --force", 9 | "dev": "contentful-extension update --space-id $SPACE_ID --force --src 'http://localhost:3030/index.html'" 10 | }, 11 | "author": "josh@condoculture.ca", 12 | "license": "MIT", 13 | "devDependencies": { 14 | "contentful-extension-cli": "^2.0.0" 15 | }, 16 | "dependencies": { 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbendercode/contentful-ui-ext-colour-picker/30c151be564de2d6416783696d494f1c9428336c/sample.png --------------------------------------------------------------------------------