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

Merge branch 'feature/work-on-toggleables' into develop

Browse Source
This commit is contained in:
Flavio Copes
2015-08-07 19:15:15 +02:00
parent 5f3903229e 6dd80cb06d
commit c546cfa242
9 changed files with 186 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
classes/controller.php
View File

@@ -16,6 +16,7 @@ use Grav\Common\Backup\ZipBackup;
use Grav\Common\Markdown\Parsedown;
use Grav\Common\Markdown\ParsedownExtra;
use RocketTheme\Toolbox\File\JsonFile;
use Symfony\Component\Yaml\Yaml;
class AdminController
{
@@ -1164,12 +1165,27 @@ class AdminController
if (isset($input['header'])) {
$header = $input['header'];
foreach($header as $key => $value) {
if ($key == 'metadata') {
foreach($header['metadata'] as $key2 => $value2) {
if (isset($input['toggleable_header']['metadata'][$key2]) && !$input['toggleable_header']['metadata'][$key2]) {
$header['metadata'][$key2] = '';
}
}
} else {
if (isset($input['toggleable_header'][$key]) && !$input['toggleable_header'][$key]) {
$header[$key] = '';
}
}
}
if ($clean_header) {
$header = Utils::arrayFilterRecursive($header, function($k, $v) {
return !(is_null($v) || $v === '');
});
}
$page->header((object) $header);
$page->frontmatter(Yaml::dump((array) $page->header()));
}
// Fill content last because it also renders the output.
if (isset($input['content'])) {

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

@@ -445,7 +445,7 @@ hr {
*/
.switch-grav {
background-color: #fff;
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
border-radius: 4px;
/* Selected ON switch-light
*/ }
@@ -574,7 +574,7 @@ form .selectize-control.multi .selectize-input {
border-radius: 2px;
line-height: 1.5; }
form .selectize-control.multi .selectize-input > div.active {
background: #d4d4d4; }
background: #d5d5d5; }
form .selectize-control.single .selectize-input:after {
right: 27px; }
form .selectize-control.single .selectize-input.dropdown-active:after {
@@ -593,7 +593,7 @@ form .large {
height: 10rem; }
form select {
width: 100%;
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
background: #fff;
-webkit-appearance: none;
-moz-appearance: none;
@@ -603,17 +603,17 @@ form select {
margin: 0; }
form input[type=text], form input[type=password], form input[type=email] {
width: 100%;
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
background: #fff; }
form input[readonly=readonly] {
background: #f2f2f2;
font-weight: bold; }
form textarea {
width: 100%;
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
background: #fff; }
form .form-frontmatter-wrapper {
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
border-radius: 4px; }
form .switch-toggle.medium {
width: 100%;
@@ -662,7 +662,7 @@ form .checkboxes {
margin-right: 10px;
position: absolute;
background: #fff;
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
border-radius: 4px; }
form .checkboxes input[type=checkbox] {
display: none; }
@@ -679,7 +679,7 @@ form .checkboxes {
margin-bottom: 3rem; }
.form-frontmatter-wrapper .dragbar {
height: 4px;
background: #d4d4d4;
background: #d5d5d5;
cursor: row-resize; }
#frontmatter + .CodeMirror {
@@ -694,7 +694,7 @@ form .checkboxes {
.form-order-wrapper ul#ordering li {
padding: 0.2rem 1rem;
border-radius: 4px;
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
background: #f8f8f8;
color: #8d959a;
margin: 3px 0;
@@ -718,7 +718,7 @@ form .checkboxes {
cursor: move;
padding: 1rem;
border-radius: 4px;
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
background: #f8f8f8;
color: #8d959a;
margin: 3px 0;
@@ -817,16 +817,16 @@ tr {
background: #54c5b0;
color: #fff; }
.button.dropdown-toggle {
border-left: 1px solid #3aab97; }
border-left: 1px solid #3bab97; }
.button.secondary {
background: #29796b;
background: #2a7a6b;
color: rgba(255, 255, 255, 0.85);
border-radius: 4px; }
.button.secondary:hover {
background: #2f8c7c;
background: #318d7c;
color: #fff; }
.button.secondary.dropdown-toggle {
border-left: 1px solid #2f8c7c; }
border-left: 1px solid #318d7c; }
.button-group {
position: relative;
@@ -868,7 +868,7 @@ tr {
background-color: #41bea8;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #3aab97;
border: 1px solid #3bab97;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
@@ -926,7 +926,7 @@ tr {
#admin-login .form-data {
padding-right: 0; }
#admin-login h1 {
background: #20333e url(../images/logo.png) 50% 50% no-repeat;
background: #21333e url(../images/logo.png) 50% 50% no-repeat;
font-size: 0;
color: transparent;
height: 216px;
@@ -942,15 +942,15 @@ tr {
text-align: center;
font-weight: 300;
-webkit-font-smoothing: auto;
border: 1px solid #1d2e38; }
border: 1px solid #1e2e39; }
#admin-login form input::-webkit-input-placeholder {
color: #83949c; }
color: #83949d; }
#admin-login form input::-moz-placeholder {
color: #83949c; }
color: #83949d; }
#admin-login form input:-moz-placeholder {
color: #83949c; }
color: #83949d; }
#admin-login form input:-ms-input-placeholder {
color: #83949c; }
color: #83949d; }
#admin-login form .form-actions {
text-align: center;
margin: 0 -3rem -3rem -3rem;
@@ -974,7 +974,7 @@ tr {
color: #fff; }
#admin-logo {
background: #20333e;
background: #21333e;
height: 4.2rem; }
#admin-logo h3 {
text-transform: uppercase;
@@ -988,7 +988,7 @@ tr {
#admin-user-details {
padding: 2rem;
border-bottom: 1px solid #20333e;
border-bottom: 1px solid #21333e;
overflow: hidden; }
#admin-user-details img {
-webkit-transition: all 0.5s ease;
@@ -1023,7 +1023,7 @@ tr {
#admin-menu li .badges .badge {
display: inline-block;
margin-right: -5px;
color: #e5e5e5; }
color: #e6e6e6; }
#admin-menu li .badges .count {
background-color: #365569; }
#admin-menu li .badges .updates {
@@ -1052,7 +1052,7 @@ tr {
color: #afc7d5;
margin-right: 8px; }
#admin-menu li a:hover {
background: #20333e;
background: #21333e;
color: #fff; }
#admin-menu li a:hover i {
font-size: 1.2rem; }
@@ -1468,6 +1468,12 @@ tr {
.depth-9 .row {
padding-left: 30rem; }
.hidden {
display: none !important; }
.switch-toggle input[type="radio"] {
display: none !important; }
/*
* Remodal - v0.2.0
* Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.
@@ -1714,7 +1720,7 @@ body.remodal_active .remodal {
border-radius: 0; }
.grav-mdeditor-navbar {
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background: #fbfbfb; }
@@ -1733,8 +1739,8 @@ body.remodal_active .remodal {
.grav-mdeditor-navbar ul .mdeditor-active a {
background: white;
cursor: auto;
border-left: 1px solid #d4d4d4;
border-right: 1px solid #d4d4d4; }
border-left: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5; }
.grav-mdeditor-navbar ul .mdeditor-active a:hover {
background: #fff; }
.grav-mdeditor-navbar ul a {
@@ -1757,7 +1763,7 @@ body.remodal_active .remodal {
border-top-right-radius: 4px; }
.grav-mdeditor-content {
border: 1px solid #d4d4d4;
border: 1px solid #d5d5d5;
border-top: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; }
@@ -1801,7 +1807,7 @@ body.remodal_active .remodal {
[data-mode=split] .grav-mdeditor-button-code, [data-mode=split] .grav-mdeditor-button-preview {
display: none; }
[data-mode=split] .grav-mdeditor-code {
border-right: 1px solid #d4d4d4; }
border-right: 1px solid #d5d5d5; }
[data-mode=split] .grav-mdeditor-code, [data-mode=split] .grav-mdeditor-code .grav-mdeditor-preview {
float: left;
width: 50%; }
@@ -1897,7 +1903,7 @@ body.remodal_active .remodal {
.dropzone {
position: relative;
border: 1px #d4d4d4 solid;
border: 1px #d5d5d5 solid;
border-radius: 4px;
min-height: 4rem;
background: #fff; }

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

File diff suppressed because one or more lines are too long

29
themes/grav/js/admin-all.js
View File

@@ -398,6 +398,35 @@ $(function () {
});
});
// enable the toggleable checkbox when typing in the corresponding textarea/input element
jQuery(document).on('input propertychange click', '.form-data textarea, .form-data input, .form-data label, .form-data .selectize-input', function() {
var item = this;
var checkbox = $(item).parents('.form-field').find('.toggleable input[type="checkbox"]');
if (checkbox.length > 0) {
checkbox.prop('checked', true);
}
$(this).css('opacity', 1);
$(this).parents('.form-data').css('opacity', 1);
checkbox.css('opacity', 1);
checkbox.prop('checked', true);
checkbox.prop('value', 1);
checkbox.siblings('label').css('opacity', 1);
checkbox.parent().siblings('label').css('opacity', 1);
});
// when clicking the label, click the corresponding checkbox automatically
jQuery(document).on('click', 'label.toggleable', function() {
var input = $(this).siblings('.checkboxes.toggleable').find('input');
var on = !input.is(':checked');
input.prop('checked', on);
input.prop('value', on ? 1 : 0);
$(this).css('opacity', on ? 1 : 0.7);
});
// Thems Switcher Warning
$(document).on('mousedown', '[data-remodal-target="theme-switch-warn"]', function(e){
var name = $(e.target).closest('[data-gpm-theme]').find('.gpm-name a').text(),

2
themes/grav/js/datepicker/init.js
View File

@@ -34,6 +34,8 @@ $(document).ready(function(){
// Reset when user manually types in invalid date
$input.on('change', function () {
$input.css('opacity', 1);
$input.parents('.form-data').css('opacity', 1);
var kWidget = $input.data('kendoDateTimePicker');
if (kWidget && kWidget.value() === null && $input.val()) {
kWidget.value($input.data('kendo-previous') || "");

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

@@ -30,6 +30,80 @@
var el = $(this),
type = el.data(form.dataIndicator);
if (type == 'textarea' || type == 'toggleable' || type == 'datetime') {
var processSpan = function processSpan(element, toggleable) {
var on = true;
if (!toggleable) {
on = $(element).find('input').is(':checked');
}
$(element).find('label').css('opacity', on ? 1 : 0.7);
$(element).siblings('label').css('opacity', on ? 1 : 0.7);
if (!on) {
$(element).find('input').attr('checked', false).prop('value', 0);
} else {
$(element).find('input').attr('checked', true).prop('value', 1);
}
var form_data = $(element).parent().siblings('.form-data');
if (on) {
form_data.addClass('checked');
} else {
form_data.removeClass('checked');
}
form_data.css('opacity', on ? 1 : 0.6);
form_data.find('textarea').css('opacity', on ? 1 : 0.6);
form_data.find('input').css('opacity', on ? 1 : 0.6);
};
var processToggleables = function processToggleables(element) {
var elType = $(element)[0].tagName.toLowerCase();
if (elType == 'checkbox') {
var on = $(element).is(':checked');
$(element).siblings('label').css('opacity', on ? 1 : 0.7);
$(element).parent().siblings('label').css('opacity', on ? 1 : 0.7);
if (!on) {
$(element).attr('checked', false).prop('value', 0);
} else {
$(element).attr('checked', true).prop('value', 1);
}
var form_data = $(element).parent().parent().siblings('.form-data')
form_data.css('opacity', on ? 1 : 0.6);
form_data.find('textarea').css('opacity', on ? 1 : 0.6);
form_data.find('input').css('opacity', on ? 1 : 0.6);
}
if (elType == 'span') {
processSpan(element);
}
};
el.on('change input propertychange', function() {
processToggleables(this);
});
el.find('input').on('change', function() {
processToggleables(this);
});
if ($(el)[0].className == 'checkboxes toggleable') {
var toggles = $(el).parent().siblings('.form-data').find('label');
toggles.on('click', function() {
processSpan(el, true);
});
}
processToggleables(this);
}
if (form.types[type]) {
var factory = form.factories[form.types[type]],
element = new factory(el, form),
@@ -69,15 +143,20 @@
toggleable.siblings('label').css('opacity', on ? 1 : 0.7);
element.disabled(!on);
if (!on) {
element.reset();
element.el.attr('checked', false).prop('value', 0);
} else {
element.el.attr('checked', true).prop('value', 1);
}
});
var on = toggleable.find('input').is(':checked');
toggleable.siblings('label').css('opacity', on ? 1 : 0.7);
element.disabled(!on);
if (!on) {
element.reset();
element.el.attr('checked', false).prop('value', 0);
} else {
element.el.attr('checked', true).prop('value', 1);
}
}

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

@@ -203,3 +203,11 @@
padding-left: 3rem * ($i + 1);
}
}
.hidden {
display: none!important;
}
.switch-toggle input[type="radio"] {
display: none!important;
}

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

@@ -10,9 +10,9 @@
<span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ field.name|fieldName }}">
<input type="checkbox"
id="toggleable_{{ field.name }}"
value="1"
{% if originalValue is not null and originalValue is not empty %}value="1"{% endif %}
name="toggleable_{{ (scope ~ field.name)|fieldName }}"
{% if originalValue is not null %}checked="checked"{% endif %}
{% if originalValue is not null and originalValue is not empty %}checked="checked"{% endif %}
>
<label for="toggleable_{{ field.name }}"></label>
</span>

10
themes/grav/templates/forms/fields/toggle/toggle.html.twig
View File

@@ -3,15 +3,24 @@
{% set value = (value is null ? field.default : value) %}
{% set value = (value is same as(false) ? 0 : value) %}
{% set has_hidden = false %}
{% for key, text in field.options %}
{% if key is empty %}
{% set has_hidden = true %}
{% endif %}
{% endfor %}
{% block global_attributes %}
{{ parent() }}
data-grav-field-name="{{ field.name|fieldName }}"
{% endblock %}
{% block input %}
<div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }}">
{% for key, text in field.options %}
{% set id = "toggle_" ~ field.name ~ key %}
<input type="radio"
value="{{ key }}"
id="{{ id }}"
@@ -20,6 +29,7 @@
class="{{ field.highlight == '' ~ key ? 'highlight' : '' }}"
{% endif %}
{% if '' ~ key == '' ~ value %}checked="checked" {% endif %}
{% if value is defined and (key == 1 or key == '1') %}checked="checked" {% endif %}
{% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
/>
<label for="{{ id }}">{{ text }}</label>