UI Improve when create new/edit content

This commit is contained in:
Diego Najar 2019-04-23 23:10:46 +02:00
parent 8aeceff207
commit c0bf0f6583
4 changed files with 72 additions and 31 deletions

View File

@ -64,11 +64,28 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
try { try {
$pageKey = $layout['parameters']; $pageKey = $layout['parameters'];
$page = new Page($pageKey); $page = new Page($pageKey);
$uuid = $page->uuid();
} catch (Exception $e) { } catch (Exception $e) {
Log::set(__METHOD__.LOG_SEP.'Error occurred when trying to get the page: '.$pageKey, LOG_TYPE_ERROR); Log::set(__METHOD__.LOG_SEP.'Error occurred when trying to get the page: '.$pageKey, LOG_TYPE_ERROR);
Redirect::page('content'); Redirect::page('content');
} }
// Images prefix directory
define('PAGE_IMAGES_KEY', $page->uuid());
// Images and thubmnails directories
if (IMAGE_RESTRICT) {
define('PAGE_IMAGES_DIRECTORY', (IMAGE_RELATIVE_TO_ABSOLUTE? '' : HTML_PATH_UPLOADS_PAGES.PAGE_IMAGES_KEY.'/'));
define('PAGE_IMAGES_URL', (IMAGE_RELATIVE_TO_ABSOLUTE? '' : DOMAIN_UPLOADS_PAGES.PAGE_IMAGES_KEY.'/'));
define('PAGE_THUMBNAILS_DIRECTORY', PATH_UPLOADS_PAGES.PAGE_IMAGES_KEY.DS.'thumbnails'.DS);
define('PAGE_THUMBNAILS_HTML', HTML_PATH_UPLOADS_PAGES.PAGE_IMAGES_KEY.'/thumbnails/');
define('PAGE_THUMBNAILS_URL', DOMAIN_UPLOADS_PAGES.PAGE_IMAGES_KEY.'/thumbnails/');
} else {
define('PAGE_IMAGES_DIRECTORY', (IMAGE_RELATIVE_TO_ABSOLUTE? '' : HTML_PATH_UPLOADS));
define('PAGE_IMAGES_URL', (IMAGE_RELATIVE_TO_ABSOLUTE? '' : DOMAIN_UPLOADS));
define('PAGE_THUMBNAILS_DIRECTORY', PATH_UPLOADS_THUMBNAILS);
define('PAGE_THUMBNAILS_HTML', HTML_PATH_UPLOADS_THUMBNAILS);
define('PAGE_THUMBNAILS_URL', DOMAIN_UPLOADS_THUMBNAILS);
}
// Title of the page // Title of the page
$layout['title'] .= ' - '.$L->g('Edit content').' - '.$page->title(); $layout['title'] .= ' - '.$L->g('Edit content').' - '.$page->title();

View File

@ -35,5 +35,26 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// UUID of the page is need it for autosave and media manager // UUID of the page is need it for autosave and media manager
$uuid = $pages->generateUUID(); $uuid = $pages->generateUUID();
// Images prefix directory
define('PAGE_IMAGES_KEY', $uuid);
// Images and thubmnails directories
if (IMAGE_RESTRICT) {
define('PAGE_IMAGES_DIRECTORY', (IMAGE_RELATIVE_TO_ABSOLUTE? '' : HTML_PATH_UPLOADS_PAGES.PAGE_IMAGES_KEY.'/'));
define('PAGE_IMAGES_URL', (IMAGE_RELATIVE_TO_ABSOLUTE? '' : DOMAIN_UPLOADS_PAGES.PAGE_IMAGES_KEY.'/'));
define('PAGE_THUMBNAILS_DIRECTORY', PATH_UPLOADS_PAGES.PAGE_IMAGES_KEY.DS.'thumbnails'.DS);
define('PAGE_THUMBNAILS_HTML', HTML_PATH_UPLOADS_PAGES.PAGE_IMAGES_KEY.'/thumbnails/');
define('PAGE_THUMBNAILS_URL', DOMAIN_UPLOADS_PAGES.PAGE_IMAGES_KEY.'/thumbnails/');
// Create the directory to store the images
Filesystem::mkdir(PAGE_THUMBNAILS_DIRECTORY, true);
} else {
define('PAGE_IMAGES_DIRECTORY', (IMAGE_RELATIVE_TO_ABSOLUTE? '' : HTML_PATH_UPLOADS));
define('PAGE_IMAGES_URL', (IMAGE_RELATIVE_TO_ABSOLUTE? '' : DOMAIN_UPLOADS));
define('PAGE_THUMBNAILS_DIRECTORY', PATH_UPLOADS_THUMBNAILS);
define('PAGE_THUMBNAILS_HTML', HTML_PATH_UPLOADS_THUMBNAILS);
define('PAGE_THUMBNAILS_URL', DOMAIN_UPLOADS_THUMBNAILS);
}
// Title of the page // Title of the page
$layout['title'] = $L->g('New content').' - '.$layout['title']; $layout['title'] = $L->g('New content').' - '.$layout['title'];

View File

@ -24,7 +24,7 @@ echo Bootstrap::formOpen(array(
// The UUID is generated in the controller // The UUID is generated in the controller
echo Bootstrap::formInputHidden(array( echo Bootstrap::formInputHidden(array(
'name'=>'uuid', 'name'=>'uuid',
'value'=>$uuid 'value'=>$page->uuid()
)); ));
// Type = published, draft, sticky, static // Type = published, draft, sticky, static
@ -61,20 +61,8 @@ echo Bootstrap::formOpen(array(
<div id="jseditorToolbarLeft"> <div id="jseditorToolbarLeft">
<button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php echo $L->g('Save') ?></button> <button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php echo $L->g('Save') ?></button>
<button type="button" class="btn btn-sm btn-secondary" id="jsbuttonSave"><?php $L->p('Discard') ?></button>
<!-- <?php if (count($page->children())==0): ?> <span id="jsswitchButton" data-switch="<?php echo ($page->draft()?'draft':'publish') ?>" class="ml-2 text-secondary switch-button"><i class="fa fa-square switch-icon-<?php echo ($page->draft()?'draft':'publish') ?>"></i> <?php echo ($page->draft()?$L->g('Draft'):$L->g('Publish')) ?></span>
<button type="button" class="btn btn-sm btn-danger" id="jsbuttonDelete" data-toggle="modal" data-target="#jsdeletePageModal"><?php $L->p('Delete') ?></button>
<?php endif; ?> -->
<span class="d-inline-block align-middle ml-1">
<div class="switch" style="width:<?php echo max(100,Text::length($L->g('Publish'))* 15) ?>px">
<input type="radio" class="switch-input" name="switch" value="" id="jsPublishSwitch" <?php echo (!$page->draft()?'checked':'') ?>>
<label for="jsPublishSwitch" class="switch-label switch-label-off"><?php $L->p('Publish') ?></label>
<input type="radio" class="switch-input" name="switch" value="" id="jsDraftSwitch" <?php echo ($page->draft()?'checked':'') ?>>
<label for="jsDraftSwitch" class="switch-label switch-label-on"><?php $L->p('Draft') ?></label>
<span class="switch-selection"></span>
</div>
</span>
</div> </div>
<?php if($page->scheduled()): ?> <?php if($page->scheduled()): ?>
@ -125,7 +113,7 @@ echo Bootstrap::formOpen(array(
'selected'=>'', 'selected'=>'',
'class'=>'', 'class'=>'',
'value'=>$page->description(), 'value'=>$page->description(),
'rows'=>3, 'rows'=>5,
'placeholder'=>$L->get('this-field-can-help-describe-the-content') 'placeholder'=>$L->get('this-field-can-help-describe-the-content')
)); ));
?> ?>
@ -395,10 +383,21 @@ $(document).ready(function() {
}; };
} }
// Button switch
$("#jsswitchButton").on("click", function() {
if ($(this).data("switch")=="publish") {
$(this).html('<i class="fa fa-square switch-icon-draft"></i> <?php $L->p('Draft') ?>');
$(this).data("switch", "draft");
} else {
$(this).html('<i class="fa fa-square switch-icon-publish"></i> <?php $L->p('Publish') ?>');
$(this).data("switch", "publish");
}
});
// Button Save // Button Save
$("#jsbuttonSave").on("click", function() { $("#jsbuttonSave").on("click", function() {
// If the switch is setted to "published", get the value from the selector // If the switch is setted to "published", get the value from the selector
if ($("#jsPublishSwitch").is(':checked')) { if ($("#jsswitchButton").data("switch")=="publish") {
var value = $("#jstypeSelector option:selected").val(); var value = $("#jstypeSelector option:selected").val();
$("#jstype").val(value); $("#jstype").val(value);
} else { } else {

View File

@ -49,21 +49,14 @@ echo Bootstrap::formOpen(array(
<!-- TOOLBAR --> <!-- TOOLBAR -->
<div id="jseditorToolbar"> <div id="jseditorToolbar">
<div id="jseditorToolbarRight" class="btn-group btn-group-sm float-right" role="group" aria-label="Toolbar right"> <div id="jseditorToolbarRight" class="btn-group btn-group-sm float-right" role="group" aria-label="Toolbar right">
<button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><span class="oi oi-image"></span> <?php $L->p('Images') ?></button> <button type="button" class="btn btn-light" id="jsmediaManagerOpenModal" data-toggle="modal" data-target="#jsmediaManagerModal"><span class="fa fa-image"></span> <?php $L->p('Images') ?></button>
<button type="button" class="btn btn-light" id="jsoptionsSidebar" style="z-index:30"><span class="oi oi-cog"></span> <?php $L->p('Options') ?></button> <button type="button" class="btn btn-light" id="jsoptionsSidebar" style="z-index:30"><span class="fa fa-cog"></span> <?php $L->p('Options') ?></button>
</div> </div>
<div id="jseditorToolbarLeft"> <div id="jseditorToolbarLeft">
<button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php $L->p('Save') ?></button> <button type="button" class="btn btn-sm btn-primary" id="jsbuttonSave"><?php $L->p('Save') ?></button>
<span class="d-inline-block align-middle ml-1"> <button type="button" class="btn btn-sm btn-secondary" id="jsbuttonSave"><?php $L->p('Discard') ?></button>
<div class="switch" style="width:<?php echo max(100,Text::length($L->g('Publish'))* 15) ?>px"> <span id="jsswitchButton" data-switch="publish" class="ml-2 text-secondary switch-button"><i class="fa fa-square switch-icon-publish"></i> <?php $L->p('Publish') ?></span>
<input type="radio" class="switch-input" name="switch" value="" id="jsPublishSwitch" checked>
<label for="jsPublishSwitch" class="switch-label switch-label-off"><?php $L->p('Publish') ?></label>
<input type="radio" class="switch-input" name="switch" value="" id="jsDraftSwitch">
<label for="jsDraftSwitch" class="switch-label switch-label-on"><?php $L->p('Draft') ?></label>
<span class="switch-selection"></span>
</div>
</span>
</div> </div>
</div> </div>
<script> <script>
@ -110,7 +103,7 @@ echo Bootstrap::formOpen(array(
'selected'=>'', 'selected'=>'',
'class'=>'', 'class'=>'',
'value'=>'', 'value'=>'',
'rows'=>3, 'rows'=>5,
'placeholder'=>$L->get('this-field-can-help-describe-the-content') 'placeholder'=>$L->get('this-field-can-help-describe-the-content')
)); ));
?> ?>
@ -340,10 +333,21 @@ $(document).ready(function() {
}; };
} }
// Button switch
$("#jsswitchButton").on("click", function() {
if ($(this).data("switch")=="publish") {
$(this).html('<i class="fa fa-square switch-icon-draft"></i> <?php $L->p('Draft') ?>');
$(this).data("switch", "draft");
} else {
$(this).html('<i class="fa fa-square switch-icon-publish"></i> <?php $L->p('Publish') ?>');
$(this).data("switch", "publish");
}
});
// Button Save // Button Save
$("#jsbuttonSave").on("click", function() { $("#jsbuttonSave").on("click", function() {
// If the switch is setted to "published", get the value from the selector // If the switch is setted to "published", get the value from the selector
if ($("#jsPublishSwitch").is(':checked')) { if ($("#jsswitchButton").data("switch")=="publish") {
var value = $("#jstypeSelector option:selected").val(); var value = $("#jstypeSelector option:selected").val();
$("#jstype").val(value); $("#jstype").val(value);
} else { } else {