Giter Club home page Giter Club logo

wagtailcolourpicker's Introduction

Wagtail Colour Picker

A colour picker for Wagtail's DraftJS editor.

Installation

pip install wagtailcolourpicker

Setup

Add to installed app:

INSTALLED_APPS = [
   ...
   'wagtailcolourpicker',
   ...
]

Settings

# picker icon
WAGTAILCOLOURPICKER_ICON = ['...']
# Add your colours
WAGTAILCOLOURPICKER_COLOURS = {
   'black': '#000000',
   'white': '#ffffff'
}

Documentation

Can be found on readthedocs.

Screenshots

Picker

Selected Text

Example site with docker

Clone the repo

$ git clone https://github.com/AccentDesign/wagtailcolourpicker.git

Run the docker container

$ cd wagtailcolourpicker
$ docker-compose up

Create yourself a superuser

$ docker-compose exec app bash
$ python manage.py createsuperuser

Go to http://127.0.0.1:8000/cms and add a new basic page

Testing

TODO

wagtailcolourpicker's People

Contributors

bigmassa avatar stuartaccent avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

wagtailcolourpicker's Issues

Downgrades django and wagtail

Does this not work with newer versions of Django and Wagtail? I've never had an app downgrade my other apps before.

Error When Saving Page

The error below happens when saving a page using WagTail 2.4, wagtailcolourpicker 0.0.6 and Django 2.0.13. It seems to happen when picking any color.

Traceback (most recent call last):
File "/usr/local/lib/python3.6/site-packages/django/contrib/staticfiles/handlers.py", line 66, in call
return self.application(environ, start_response)
File "/usr/local/lib/python3.6/site-packages/django/core/handlers/wsgi.py", line 146, in call
response = self.get_response(request)
File "/usr/local/lib/python3.6/site-packages/django/core/handlers/base.py", line 81, in get_response
response = self._middleware_chain(request)
File "/usr/local/lib/python3.6/site-packages/django/core/handlers/exception.py", line 37, in inner
response = response_for_exception(request, exc)
File "/usr/local/lib/python3.6/site-packages/django/core/handlers/exception.py", line 87, in response_for_exception
response = handle_uncaught_exception(request, get_resolver(get_urlconf()), sys.exc_info())
File "/usr/local/lib/python3.6/site-packages/django/core/handlers/exception.py", line 122, in handle_uncaught_exception
return debug.technical_500_response(request, *exc_info)
File "/usr/local/lib/python3.6/site-packages/django_extensions/management/technical_response.py", line 37, in null_technical_500_response
six.reraise(exc_type, exc_value, tb)
File "/usr/local/lib/python3.6/site-packages/six.py", line 692, in reraise
raise value.with_traceback(tb)
File "/usr/local/lib/python3.6/site-packages/django/core/handlers/exception.py", line 35, in inner
response = get_response(request)
File "/usr/local/lib/python3.6/site-packages/django/core/handlers/base.py", line 119, in _get_response
response = middleware_method(request, callback, callback_args, callback_kwargs)
File "/var/www/learn/src/py/learn/middleware.py", line 83, in process_view
return view_func(request, *view_args, **view_kwargs)
File "/usr/local/lib/python3.6/site-packages/django/views/decorators/cache.py", line 44, in _wrapped_view_func
response = view_func(request, *args, **kwargs)
File "/usr/local/lib/python3.6/site-packages/wagtail/admin/urls/init.py", line 102, in wrapper
return view_func(request, *args, **kwargs)
File "/usr/local/lib/python3.6/site-packages/wagtail/admin/decorators.py", line 34, in decorated_view
return view_func(request, *args, **kwargs)
File "/usr/local/lib/python3.6/site-packages/wagtail/admin/views/pages.py", line 344, in edit
if form.is_valid() and not page.locked:
File "/usr/local/lib/python3.6/site-packages/modelcluster/forms.py", line 312, in is_valid
form_is_valid = super(ClusterForm, self).is_valid()
File "/usr/local/lib/python3.6/site-packages/django/forms/forms.py", line 179, in is_valid
return self.is_bound and not self.errors
File "/usr/local/lib/python3.6/site-packages/django/forms/forms.py", line 174, in errors
self.full_clean()
File "/usr/local/lib/python3.6/site-packages/django/forms/forms.py", line 376, in full_clean
self.clean_fields()
File "/usr/local/lib/python3.6/site-packages/django/forms/forms.py", line 388, in clean_fields
value = field.widget.value_from_datadict(self.data, self.files, self.add_prefix(name))
File "/usr/local/lib/python3.6/site-packages/wagtail/core/blocks/base.py", line 512, in value_from_datadict
return self.block_def.value_from_datadict(data, files, name)
File "/usr/local/lib/python3.6/site-packages/wagtail/core/blocks/stream_block.py", line 168, in value_from_datadict
child_block.value_from_datadict(data, files, '%s-%d-value' % (prefix, i)),
File "/usr/local/lib/python3.6/site-packages/wagtail/core/blocks/struct_block.py", line 113, in value_from_datadict
for name, block in self.child_blocks.items()
File "/usr/local/lib/python3.6/site-packages/wagtail/core/blocks/struct_block.py", line 113, in
for name, block in self.child_blocks.items()
File "/usr/local/lib/python3.6/site-packages/wagtail/core/blocks/field_block.py", line 69, in value_from_datadict
return self.value_from_form(self.field.widget.value_from_datadict(data, files, prefix))
File "/usr/local/lib/python3.6/site-packages/wagtail/admin/rich_text/editors/draftail/init.py", line 70, in value_from_datadict
return self.converter.to_database_format(original_value)
File "/usr/local/lib/python3.6/site-packages/wagtail/admin/rich_text/converters/contentstate.py", line 90, in to_database_format
return self.exporter.render(json.loads(contentstate_json))
File "/usr/local/lib/python3.6/site-packages/draftjs_exporter/html.py", line 46, in render
elt = self.render_block(block, entity_map, wrapper_state)
File "/usr/local/lib/python3.6/site-packages/draftjs_exporter/html.py", line 78, in render_block
styled_node = style_state.render_styles(decorated_node, block, wrapper_state.blocks)
File "/usr/local/lib/python3.6/site-packages/draftjs_exporter/style_state.py", line 31, in render_styles
opt = Options.for_style(self.style_map, style)
File "/usr/local/lib/python3.6/site-packages/draftjs_exporter/options.py", line 59, in for_style
return Options.for_kind(style_map, type
, INLINE_STYLES.FALLBACK)
File "/usr/local/lib/python3.6/site-packages/draftjs_exporter/options.py", line 37, in for_kind
raise ConfigException('"%s" is not in the config and has no fallback' % type
)
draftjs_exporter.error.ConfigException: "COLOUR_RED" is not in the config and has no fallback

TODO

  • Make sure only colours can be added not random guff
  • See if we can avoid overriding the RickTextBlock for the cached property
  • Remove the add new colour field in the form via a setting. So that colours can be fixed per site
  • Add picker urls via cms hook

Archiving this repo

@thisdarktao, @timaccent, @daveaccent, Hi guys, I've given this some more thought and am not prepared to publicly support this for the following reasons.

The whole idea of being able to add styles for colours while the site is running goes against every aspect of what happens from when wagtail first starts when pulling in the features into the editor to serving that editor in the form, validating the form when you try to save it, previewing that once you add a colour, and finally serving the page. Nothing helps it on any level. Which makes adding these colours in this way a total hack and will without a doubt cause issues. As I already know there are several outside of the above.

It is not something i want to say to the wider community "Hey look what we've done, it's pants but enjoy the issues you'll have :)".

At best I would be willing to make the colours a fixed list which can be defined up front in the sites settings. This at least we know cannot change while the site is running and design decisions can be left to those in the best place to make them. Meaning all the hacks would be gone too.

I might do this again in another repo and release that leaving this one in a readonly state so it can still be used if we REALLY need to. But I cannot stress enough we shouldn't use it and there will be issues which will be beyond our control.

Whats are your thoughts
Stu

Adding more detail to colours

Can the labels be wider, to incorporate more details? It would be greta to be able to add more details, so colours can be named.
Having 4 colours in a row would be great.

screen shot 2018-06-25 at 11 49 40

I changed the styles of form #id_colour li label, updating width and height to width: 140px; height: 40px;.
I also increased margin-bottom to 10px on form #id_colour li.
This would be a great enhancement and allow more details in there for the colours.
Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.