Nemcio/Grav-Admin-Plugin
1
0
Fork 0
mirror of https://github.com/getgrav/grav-plugin-admin.git synced 2026-05-07 00:57:25 +02:00
Code Issues Packages Projects Releases Activity

Added new Colorpicker field

Browse Source
This commit is contained in:
Djamil Legato
2016-03-15 13:13:54 -07:00
parent a0b40d9416
commit 75e0ea629b
4 changed files with 50 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/grav/css-compiled/template.css vendored
View File

File diff suppressed because one or more lines are too long

2
themes/grav/css-compiled/template.css.map
View File

File diff suppressed because one or more lines are too long

13
themes/grav/scss/template/modules/_colorpicker.scss
View File

@@ -11,11 +11,22 @@
i {
position: absolute;
top: 10px;
top: 15px;
right: 10px;
z-index: 2;
}
.g-colorpicker-preview {
cursor: default;
position: absolute;
top: 0;
right: 0;
width: 43px;
height: 43px;
border-radius: 0 3px 3px 0;
border: 1px solid rgba(0, 0, 0, 0.2);
}
&.light-text {
input, i {
color: $white;

36
themes/grav/templates/forms/fields/colorpicker/colorpicker.html.twig Normal file
View File

@@ -0,0 +1,36 @@
{% extends "forms/field.html.twig" %}
{% set originalValue = originalValue is defined ? originalValue : value %}
{% set value = (value is null ? field.default : value) %}
{% set pattern = '^#([a-fA-F0-9]{6})|(rgba\\(\\s*(0|[1-9]\\d?|1\\d\\d?|2[0-4]\\d|25[0-5])\\s*,\\s*(0|[1-9]\\d?|1\\d\\d?|2[0-4]\\d|25[0-5])\\s*,\\s*(0|[1-9]\\d?|1\\d\\d?|2[0-4]\\d|25[0-5])\\s*,\\s*((0.[0-9]+)|[01])\\s*\\))$' %}
{% block input %}
<div class="form-list-wrapper {{ field.size }}" data-type="collection">
<div class="g-colorpicker">
<input
data-grav-colorpicker="{{ {update: '.g-colorpicker-preview'}|json_encode|e('html_attr') }}"
{# required attribute structures #}
name="{{ (scope ~ field.name)|fieldName }}"
value="{{ value|e('html_attr')|join(', ') }}"
type="text"
{# input attribute structures #}
{% block input_attributes %}
{% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
{% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
{% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
{% if field.disabled %}disabled="disabled"{% endif %}
{% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
{% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
{% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
{% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
{% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
{% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
pattern="{{ field.validate.pattern|default(pattern)|raw }}"
{% if field.validate.message %}title="{{ field.validate.message|e|t }}"
{% elseif field.title is defined %}title="{{ field.title|e|t }}" {% endif %}
{% endblock %}
/>
<div class="g-colorpicker-preview" style="background-color: {{ value|e }}"></div>
</div>
</div>
{% endblock %}