shel/neos-colorpicker

Last activity 18 days ago
  • 8
  • 3
  • 9282
composer require shel/neos-colorpicker

A plugin for Neos CMS which provides a colorpicker editor

1.3.2

A plugin for Neos CMS which provides a colorpicker editor

Version
1.3.2
Type
neos-plugin
Release Date
18.12.2020 18:26:12
Source
git
Distribution
zip
Requires
Requires (dev)
None
Suggest
None
Provides
None
Conflicts
None
Replaces
None
GPL-3.0
  • #flow
  • #editor
  • #neos
  • #colorpicker
  • #neoscms
069ca1d111ffadaf307d80e749bb5d0991b147d6

Color Picker Editor for Neos CMS

Latest Stable Version Total Downloads License

Introduction

This package provides a Color Picker Editor which can be used in Neos CMS with the Neos.Ui 2+.

This editor is based on the example in https://github.com/neos/neos-ui-extensibility-examples but has some modifications in regards to styling, supports the alpha channel and has a reset button to unset a value.

Example

See it in action.

Colorpicker in Neos CMS sidebar

Installation

Run this in your site package

composer require --no-update shel/neos-colorpicker

Then run composer update in your project directory.

How to use

Add a property of type string and configure the editor as seen in this example:

'My.Site:Content.Text':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: 'My text content'
  properties:    
    textColor:
      type: string
      ui:
        label: 'Text color'
        reloadIfChanged: true
        inspector:
          group: 'text'
          editor: 'Shel.Neos.ColorPicker/ColorPickerEditor'
          editorOptions:
            # `mode` can be one of "rgba", "hsla", "hex"
            mode: 'rgba'
            # Show saturation/hue/alpha (optional), boolean, default: true
            picker: true
            # Show hex/rgba fields (optional), boolean, default: true
            fields: true
            # Show preset colors (optional), array of colors or boolean (to disable)
            presetColors: ['#ff0000', '#0000ff', '#ffff00', ...]

Customization

The editor allows some customization options via your Settings.yaml file:

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        'Shel.Neos:ColorPickerEditor':
          # `mode` can be one of "rgba", "hsla", "hex"
          mode: 'rgba'
          # Colors which are available for quick selection
          presetColors: ['#D0021B', '#F5A623', ...]

mode allows you to store the selected color values in a different format if needed. This can be helpful, when the hsl format is needed to get the individual components.

presetColors lets you customize the list of color squares that are available for quick selection.

Contributions

Contributions are very welcome!

Please create detailed issues and PRs.

The content of the readme is provided by Github
The same vendor provides 18 package(s).