maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix for color fields in settings (#10984)

Browse source 
* form fix

* color pickers and description
This commit is contained in:
ludwiczakpawel 2020-10-22 11:06:57 +02:00 • committed by GitHub
parent 5457f0c0b7
commit 4caad99584
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
app/views/users/_profile.html.erb
View file

@ -55,12 +55,23 @@
<label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
<%= field.label %>
</label>
<% elsif field["input_type"] == "color_field" %>
<label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
<%= field.label %>
</label>
<div class="flex items-center w-100 m:w-50">
<%= f.public_send("text_field", "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], class: "crayons-textfield js-color-field") %>
<%= f.public_send(field["input_type"], "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], class: "crayons-color-selector js-color-field ml-2") %>
</div>
<% else %>
<label class="crayons-field__label" for="<%= "profile[#{field.attribute_name}]" %>">
<%= field.label %>
</label>
<%= f.public_send(field["input_type"], "profile[#{field.attribute_name}]", value: @user.profile.data[field.attribute_name], class: "crayons-textfield") %>
<% end %>
<% if field.description.present? %>
<p class="crayons-field__description"><%= field.description %></p>
<% end %>
</div>
<% end %>
</div>
@ -70,3 +81,23 @@
<button type="submit" class="crayons-btn">Save Profile Information</button>
</div>
<% end %>
<script>
var pickers = document.querySelectorAll('.js-color-field');
function colorValueChange(e) {
var field = e.target;
var sibling = '';
if (field.nextElementSibling) {
sibling = field.nextElementSibling;
} else {
sibling = field.previousElementSibling;
}
sibling.value = field.value;
}
pickers.forEach(function(picker) {
picker.addEventListener('change', colorValueChange);
});
</script>