From 9307cad1072c6cc948a162be9194fb6b10b48053 Mon Sep 17 00:00:00 2001
From: Jonathan Weth <git@jonathanweth.de>
Date: Sun, 7 Feb 2021 16:34:35 +0100
Subject: [PATCH] Add custom template for ColorField to integrate it with
Materialize
Some JS and CSS were added, too.
---
aleksis/core/static/js/main.js | 5 +++
aleksis/core/static/style.scss | 5 +++
.../fields/colorfield_colorwidget.html | 32 +++++++++++++++++++
3 files changed, 42 insertions(+)
create mode 100644 aleksis/core/templates/material/fields/colorfield_colorwidget.html
diff --git a/aleksis/core/static/js/main.js b/aleksis/core/static/js/main.js
index 45fee5c5b..afdc39508 100644
--- a/aleksis/core/static/js/main.js
+++ b/aleksis/core/static/js/main.js
@@ -91,6 +91,11 @@ $(document).ready(function () {
// Intialize Tabs [Materialize]
$('.tabs').tabs();
+ // Sync color picker
+ $(".jscolor").change(function () {
+ $("#" + $(this).data("preview")).css("color", $(this).val());
+ });
+
$('table.datatable').each(function (index) {
$(this).DataTable({
"paging": false
diff --git a/aleksis/core/static/style.scss b/aleksis/core/static/style.scss
index 032c28953..06db64f96 100644
--- a/aleksis/core/static/style.scss
+++ b/aleksis/core/static/style.scss
@@ -686,3 +686,8 @@ main .alert p:first-child, main .alert div:first-child {
.draggable {
cursor: grab;
}
+
+.jscolor {
+ background-color: inherit !important;
+ color: inherit !important;
+}
diff --git a/aleksis/core/templates/material/fields/colorfield_colorwidget.html b/aleksis/core/templates/material/fields/colorfield_colorwidget.html
new file mode 100644
index 000000000..ab8bc7f95
--- /dev/null
+++ b/aleksis/core/templates/material/fields/colorfield_colorwidget.html
@@ -0,0 +1,32 @@
+{% load material_form material_form_internal %}
+{% part bound_field.field %}
+ <div class="row">
+ <div class="input-field col s12{% if widget.attrs.required %} required{% endif %}">
+ <i class="material-icons prefix" id="{{ bound_field.html_name }}_preview" style="color: {% firstof bound_field.value field.widget.attrs.default '' %};">color_lens</i>
+ {% part field prefix %}{% endpart %}{% part field control %}
+ <input
+ type="text"
+ id="{{ bound_field.html_name }}"
+ class="form-control colorfield_field jscolor {% if bound_field.errors %}invalid{% endif %}"
+ name="{{ bound_field.html_name }}"
+ value="{% firstof bound_field.value field.widget.attrs.default '' %}"
+ placeholder="{% firstof bound_field.value field.widget.attrs.default '' %}"
+ data-jscolor="{hash:true,width:225,height:150,format:'{{ field.widget.attrs.format }}',required:{% if field.widget.attrs.required %}true{% else %}false{% endif %},paletteCols:4,paletteHeight:28,palette:'{{ field.widget.attrs.palette|safe }}'}"
+ data-preview="{{ bound_field.html_name }}_preview"
+ {% if field.widget.attrs.required %}required{% endif %}/>
+ {% endpart %}
+ {% part field label %}
+ <label{% attrs bound_field 'label' %}
+ for="{{ bound_field.id_for_label }}"
+ {% if bound_field.value != None and bound_field.value != '' %}class="active"{% endif %}
+ {% endattrs %}>{{ bound_field.label }}</label>
+ {% endpart %}
+ {% part field help_text %}{% if field.help_text %}
+ <div class="help-block">{{ bound_field.help_text|safe }}</div>
+ {% endif %}
+ {% endpart %}{% part field errors %}
+ {% if bound_field.errors %}{% include 'material/field_errors.html' %}{% endif %}
+ {% endpart %}{{ hidden_initial }}
+ </div>
+ </div>
+{% endpart %}
--
GitLab