Nemcio/Grav-Admin-Plugin
1
0
Fork 0
mirror of https://github.com/getgrav/grav-plugin-admin.git synced 2025-11-14 01:06:03 +01:00
Code Issues Packages Projects Releases Activity

switch toggle to checkbox for overrides

Browse Source
This commit is contained in:
Gert
2015-06-08 15:03:36 +02:00
parent e5b171057b
commit 720f403851
6 changed files with 42 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
themes/grav/css-compiled/template.css
View File

@@ -491,6 +491,8 @@ form label {
padding: 5px 0;
font-weight: 400;
margin: 0; }
form label.toggleable {
display: inline; }
form input, form select, form textarea, form button, form .selectize-input {
font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-size: 1rem;
@@ -631,6 +633,8 @@ form .checkboxes {
font-size: 1.2rem;
line-height: 1.5rem;
text-align: center; }
form .checkboxes.toggleable label {
margin-right: 0; }
.form-frontmatter-wrapper {
margin-bottom: 3rem; }

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

File diff suppressed because one or more lines are too long

1
themes/grav/js/forms/fields/checkboxes.js
View File

@@ -28,6 +28,7 @@
CheckboxesField.prototype.disabled = function(state) {
if (typeof state !== 'undefined') {
this._disabled = state ? true : false;
this.el.css('opacity', state ? 0.6 : 1);
}
return this._disabled;

23
themes/grav/js/forms/form.js
View File

@@ -57,21 +57,28 @@
function linkToggle (element, toggleable) {
element.onChange(function (value) {
toggleable.find('input').prop('checked', false).filter('[value=1]').prop('checked', true);
toggleable.find('input').prop('checked', true);
toggleable.siblings('label').css('opacity', 1);
element.disabled(false);
});
toggleable.find('input').on('change', function () {
var el = $(this);
if (el.is(':checked')) {
var on = el.val() == '1' ? true : false;
var el = $(this),
on = el.is(':checked');
element.disabled(!on);
if (!on) {
element.reset();
}
toggleable.siblings('label').css('opacity', on ? 1 : 0.7);
element.disabled(!on);
if (!on) {
element.reset();
}
});
var on = toggleable.is(':checked');
toggleable.siblings('label').css('opacity', on ? 1 : 0.7);
element.disabled(!on);
if (!on) {
element.reset();
}
}
var Form = function (el, options) {

8
themes/grav/scss/template/_forms.scss
View File

@@ -83,6 +83,10 @@ form {
padding: 5px 0;
font-weight: 400;
margin:0;
&.toggleable {
display: inline;
}
}
input, select, textarea, button, .selectize-input {
@@ -333,6 +337,10 @@ form {
line-height: 1.5rem;
text-align: center;
}
&.toggleable label{
margin-right: 0;
}
}
}

36
themes/grav/templates/forms/field.html.twig
View File

@@ -4,9 +4,21 @@
{% block field %}
<div class="form-field grid">
{% block contents %}
<div class="form-label block size-1-3">
<label>
{% if field.toggleable %}
<span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
<input type="checkbox"
id="toggleable_{{ field.name }}"
value="1"
name="toggleable_{{ (scope ~ field.name)|fieldName }}"
{% if originalValue is not null %}checked="checked"{% endif %}
>
<label for="toggleable_{{ field.name }}"></label>
</span>
{% endif %}
<label class="{{ field.toggleable ? 'toggleable' : '' }}">
{% block label %}
{% if field.help %}
<span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
@@ -43,28 +55,6 @@
{% endblock %}
{% endblock %}
</div>
{% if field.toggleable %}
<div class="block size-1-6">
<div class="switch-toggle switch-grav switch-2" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
<input
type="radio" value="1"
id="toggleable_{{ field.name }}_1"
class="highlight"
name="toggleable_{{ (scope ~ field.name)|fieldName }}"
{% if originalValue is not null %}checked="checked"{% endif %}
/>
<label for="toggleable_{{ field.name }}_1">On</label>
<input
type="radio" value="0"
id="toggleable_{{ field.name }}_0"
name="toggleable_{{ (scope ~ field.name)|fieldName }}"
{% if originalValue is null %}checked="checked"{% endif %}
/>
<label for="toggleable_{{ field.name }}_0">Off</label>
<a></a>
</div>
</div>
{% endif %}
{% endblock %}
</div>
{% endblock %}