Settings, improve in UI

This commit is contained in:
Diego Najar 2018-11-05 23:55:17 -03:00
parent 16e86486ee
commit d531358810
1 changed files with 71 additions and 121 deletions

View File

@ -1,33 +1,27 @@
<?php <?php defined('BLUDIT') or die('Bludit CMS.'); ?>
echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog')); <?php echo Bootstrap::formOpen(array('id'=>'jsform', 'class'=>'tab-content')); ?>
?> <div class="align-middle">
<div class="float-right mt-1">
<button type="submit" class="btn btn-primary btn-sm" name="save"><?php $L->p('Save') ?></button>
<a class="btn btn-secondary btn-sm" href="<?php echo HTML_PATH_ADMIN_ROOT.'dashboard' ?>" role="button"><?php $L->p('Cancel') ?></a>
</div>
<?php echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog')); ?>
</div>
<!-- TABS --> <!-- TABS -->
<ul class="nav nav-tabs" id="dynamicTab" role="tablist"> <nav class="mb-3">
<li class="nav-item"> <div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-link active" id="general-tab" data-toggle="tab" href="#general" role="tab" aria-controls="general" aria-selected="true"><?php $L->p('Site') ?></a> <a class="nav-item nav-link active" id="nav-general-tab" data-toggle="tab" href="#general" role="tab" aria-controls="nav-general" aria-selected="false"><?php $L->p('General') ?></a>
</li> <a class="nav-item nav-link" id="nav-advanced-tab" data-toggle="tab" href="#advanced" role="tab" aria-controls="nav-advanced" aria-selected="false"><?php $L->p('Advanced') ?></a>
<li class="nav-item"> <a class="nav-item nav-link" id="nav-seo-tab" data-toggle="tab" href="#seo" role="tab" aria-controls="nav-seo" aria-selected="false"><?php $L->p('SEO') ?></a>
<a class="nav-link " id="advanced-tab" data-toggle="tab" href="#advanced" role="tab" aria-controls="advanced" aria-selected="false"><?php $L->p('Advanced') ?></a> <a class="nav-item nav-link" id="nav-social-tab" data-toggle="tab" href="#social" role="tab" aria-controls="nav-social" aria-selected="false"><?php $L->p('Social Networks') ?></a>
</li> <a class="nav-item nav-link" id="nav-language-tab" data-toggle="tab" href="#language" role="tab" aria-controls="nav-language" aria-selected="false"><?php $L->p('Language') ?></a>
<li class="nav-item"> </div>
<a class="nav-link " id="seo-tab" data-toggle="tab" href="#seo" role="tab" aria-controls="seo" aria-selected="false"><?php $L->p('SEO') ?></a> </nav>
</li>
<li class="nav-item">
<a class="nav-link " id="social-tab" data-toggle="tab" href="#social" role="tab" aria-controls="social" aria-selected="false"><?php $L->p('Social Networks') ?></a>
</li>
<li class="nav-item">
<a class="nav-link" id="language-tab" data-toggle="tab" href="#language" role="tab" aria-controls="language" aria-selected="false"><?php $L->p('Language') ?></a>
</li>
</ul>
<?php
echo Bootstrap::formOpen(array(
'id'=>'dynamicTabContent',
'class'=>'tab-content mt-4'
));
<?php
// Token CSRF // Token CSRF
echo Bootstrap::formInputHidden(array( echo Bootstrap::formInputHidden(array(
'name'=>'tokenCSRF', 'name'=>'tokenCSRF',
@ -41,9 +35,11 @@ echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog'));
)); ));
?> ?>
<!-- TABS GENERAL --> <!-- General tab -->
<div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="general-tab"> <div class="tab-pane show active" id="general" role="tabpanel" aria-labelledby="general-tab">
<?php <?php
echo Bootstrap::formTitle(array('title'=>$L->g('Site')));
echo Bootstrap::formInputText(array( echo Bootstrap::formInputText(array(
'name'=>'title', 'name'=>'title',
'label'=>$L->g('Site title'), 'label'=>$L->g('Site title'),
@ -79,17 +75,10 @@ echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog'));
'placeholder'=>'', 'placeholder'=>'',
'tip'=>$L->g('you-can-add-a-small-text-on-the-bottom') 'tip'=>$L->g('you-can-add-a-small-text-on-the-bottom')
)); ));
echo '
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary mr-2" name="save">'.$L->g('Save').'</button>
<a class="btn btn-secondary" href="'.HTML_PATH_ADMIN_ROOT.'dashboard" role="button">'.$L->g('Cancel').'</a>
</div>
';
?> ?>
</div> </div>
<!-- TABS ADVANCED --> <!-- Advanced tab -->
<div class="tab-pane" id="advanced" role="tabpanel" aria-labelledby="advanced-tab"> <div class="tab-pane" id="advanced" role="tabpanel" aria-labelledby="advanced-tab">
<?php <?php
echo Bootstrap::formTitle(array('title'=>$L->g('Content'))); echo Bootstrap::formTitle(array('title'=>$L->g('Content')));
@ -214,18 +203,10 @@ echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog'));
'tip'=>DOMAIN.$site->uriFilters('blog'), 'tip'=>DOMAIN.$site->uriFilters('blog'),
'disabled'=>Text::isEmpty($site->uriFilters('blog')) 'disabled'=>Text::isEmpty($site->uriFilters('blog'))
)); ));
echo '
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary mr-2" name="save">'.$L->g('Save').'</button>
<a class="btn btn-secondary" href="'.HTML_PATH_ADMIN_ROOT.'dashboard" role="button">'.$L->g('Cancel').'</a>
</div>
';
?> ?>
</div> </div>
<!-- SEO tab -->
<!-- TABS SEO -->
<div class="tab-pane" id="seo" role="tabpanel" aria-labelledby="seo-tab"> <div class="tab-pane" id="seo" role="tabpanel" aria-labelledby="seo-tab">
<?php <?php
echo Bootstrap::formTitle(array('title'=>$L->g('Extreme friendly URL'))); echo Bootstrap::formTitle(array('title'=>$L->g('Extreme friendly URL')));
@ -280,17 +261,53 @@ echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog'));
'tip'=>$L->g('Variables allowed').' <code>{{tag-name}}</code> <code>{{site-title}}</code> <code>{{site-slogan}}</code> <code>{{site-description}}</code>', 'tip'=>$L->g('Variables allowed').' <code>{{tag-name}}</code> <code>{{site-title}}</code> <code>{{site-slogan}}</code> <code>{{site-description}}</code>',
'placeholder'=>'' 'placeholder'=>''
)); ));
echo '
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary mr-2" name="save">'.$L->g('Save').'</button>
<a class="btn btn-secondary" href="'.HTML_PATH_ADMIN_ROOT.'dashboard" role="button">'.$L->g('Cancel').'</a>
</div>
';
?> ?>
</div> </div>
<script>
$(document).ready(function() {
<!-- TABS SOCIAL NETWORKS --> // Parent autocomplete
var homepageXHR;
var homepageList; // Keep the parent list returned to get the key by the title page
$("#jshomepageTMP").autoComplete({
minChars: 1,
source: function(term, response) {
// Prevent call inmediatly another ajax request
try { homepageXHR.abort(); } catch(e){}
homepageXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-published", {query: term},
function(data) {
homepageList = data;
term = term.toLowerCase();
var matches = [];
for (var title in data) {
if (~title.toLowerCase().indexOf(term))
matches.push(title);
}
response(matches);
});
},
onSelect: function(e, term, item) {
// homepageList = array( pageTitle => pageKey )
var key = homepageList[term];
$("#jshomepage").attr("value", key);
}
});
$("#jshomepageTMP").change(function() {
if ($(this).val()) {
$("#jsuriBlog").removeAttr('disabled');
$("#jsuriBlog").attr('value', '/blog/');
} else {
$("#jsuriBlog").attr('value', '');
$("#jsuriBlog").attr('disabled', 'disabled');
$("#jshomepage").attr("value", '');
}
});
});
</script>
<!-- Social Network tab -->
<div class="tab-pane" id="social" role="tabpanel" aria-labelledby="social-tab"> <div class="tab-pane" id="social" role="tabpanel" aria-labelledby="social-tab">
<?php <?php
echo Bootstrap::formInputText(array( echo Bootstrap::formInputText(array(
@ -320,15 +337,6 @@ echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog'));
'tip'=>'' 'tip'=>''
)); ));
echo Bootstrap::formInputText(array(
'name'=>'googlePlus',
'label'=>'Google+',
'value'=>$site->googlePlus(),
'class'=>'',
'placeholder'=>'',
'tip'=>''
));
echo Bootstrap::formInputText(array( echo Bootstrap::formInputText(array(
'name'=>'instagram', 'name'=>'instagram',
'label'=>'Instagram', 'label'=>'Instagram',
@ -373,19 +381,13 @@ echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog'));
'placeholder'=>'', 'placeholder'=>'',
'tip'=>'' 'tip'=>''
)); ));
echo '
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary mr-2" name="save">'.$L->g('Save').'</button>
<a class="btn btn-secondary" href="'.HTML_PATH_ADMIN_ROOT.'dashboard" role="button">'.$L->g('Cancel').'</a>
</div>
';
?> ?>
</div> </div>
<!-- TABS TIMEZONE AND LANGUAGES --> <!-- Timezone and language tab -->
<div class="tab-pane" id="language" role="tabpanel" aria-labelledby="language-tab"> <div class="tab-pane" id="language" role="tabpanel" aria-labelledby="language-tab">
<?php <?php
echo Bootstrap::formTitle(array('title'=>$L->g('Language and timezone')));
echo Bootstrap::formSelect(array( echo Bootstrap::formSelect(array(
'name'=>'language', 'name'=>'language',
@ -424,59 +426,7 @@ echo Bootstrap::pageTitle(array('title'=>$L->g('Settings'), 'icon'=>'cog'));
'placeholder'=>'', 'placeholder'=>'',
'tip'=>$L->g('Current format').': '.Date::current($site->dateFormat()) 'tip'=>$L->g('Current format').': '.Date::current($site->dateFormat())
)); ));
echo '
<div class="form-group mt-4">
<button type="submit" class="btn btn-primary mr-2" name="save">'.$L->g('Save').'</button>
<a class="btn btn-secondary" href="'.HTML_PATH_ADMIN_ROOT.'dashboard" role="button">'.$L->g('Cancel').'</a>
</div>
';
?> ?>
</div> </div>
<?php
echo Bootstrap::formClose();
?>
<script> <?php echo Bootstrap::formClose(); ?>
$(document).ready(function() {
// Parent autocomplete
var homepageXHR;
var homepageList; // Keep the parent list returned to get the key by the title page
$("#jshomepageTMP").autoComplete({
minChars: 1,
source: function(term, response) {
// Prevent call inmediatly another ajax request
try { homepageXHR.abort(); } catch(e){}
homepageXHR = $.getJSON(HTML_PATH_ADMIN_ROOT+"ajax/get-published", {query: term},
function(data) {
homepageList = data;
term = term.toLowerCase();
var matches = [];
for (var title in data) {
if (~title.toLowerCase().indexOf(term))
matches.push(title);
}
response(matches);
});
},
onSelect: function(e, term, item) {
// homepageList = array( pageTitle => pageKey )
var key = homepageList[term];
$("#jshomepage").attr("value", key);
}
});
$("#jshomepageTMP").change(function() {
if ($(this).val()) {
$("#jsuriBlog").removeAttr('disabled');
$("#jsuriBlog").attr('value', '/blog/');
} else {
$("#jsuriBlog").attr('value', '');
$("#jsuriBlog").attr('disabled', 'disabled');
$("#jshomepage").attr("value", '');
}
});
});
</script>