Post editing: quasi-popup in place of sliding unit

This commit is contained in:
Marcin Kurczewski 2014-02-17 22:59:11 +01:00
parent 65c6caa13c
commit eee6421775
3 changed files with 52 additions and 9 deletions

View file

@ -165,9 +165,28 @@ i.icon-fav {
margin: 2px; margin: 2px;
} }
#inner-content {
position: relative;
}
.unit.edit-post { .unit.edit-post {
position: absolute;
margin-top: 0;
padding: 1em;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 1em 1em rgba(255, 255, 255, 0.8);
z-index: 99;
top: 0;
left: 0;
right: 0;
display: none; display: none;
} }
.unit.edit-post ul.tagit,
.unit.edit-post input:not([type=file]) {
background: rgba(255, 255, 255, 0.75);
}
.unit.edit-post ul.tagit input {
background: transparent;
}
ul.tagit { ul.tagit {
display: block; display: block;
vertical-align: middle; vertical-align: middle;

View file

@ -12,7 +12,6 @@ $(function()
aDom.addClass('inactive'); aDom.addClass('inactive');
var formDom = $('form.edit-post'); var formDom = $('form.edit-post');
formDom.data('original-data', formDom.serialize());
if (formDom.find('.tagit').length == 0) if (formDom.find('.tagit').length == 0)
{ {
$.getJSON('/tags?json', {filter: 'order:popularity,desc'}, function(data) $.getJSON('/tags?json', {filter: 'order:popularity,desc'}, function(data)
@ -36,16 +35,41 @@ $(function()
else else
aDom.removeClass('inactive'); aDom.removeClass('inactive');
var editUnit = formDom.parents('.unit');
var postUnit = $('.post-wrapper');
if (!$(formDom).is(':visible')) if (!$(formDom).is(':visible'))
{ {
formDom.parents('.unit') formDom.data('original-data', formDom.serialize());
.show().css('height', formDom.height()).hide()
.slideDown(function() editUnit.show();
var editUnitHeight = formDom.height();
editUnit.css('height', editUnitHeight);
editUnit.hide();
if (postUnit.height() < editUnitHeight)
postUnit.animate({height: editUnitHeight + 'px'}, 'fast');
editUnit.slideDown('fast', function()
{ {
$(this).css('height', 'auto'); $(this).css('height', 'auto');
}); });
} }
$('html, body').animate({ scrollTop: $(formDom).offset().top + 'px' }, 'fast'); else
{
editUnit.slideUp('fast');
var postUnitOldHeight = postUnit.height();
postUnit.height('auto');
var postUnitHeight = postUnit.height();
postUnit.height(postUnitOldHeight);
if (postUnitHeight != postUnitOldHeight)
postUnit.animate({height: postUnitHeight + 'px'});
if ($('.post-wrapper').height() < editUnitHeight)
$('.post-wrapper').animate({height: editUnitHeight + 'px'});
return;
}
formDom.find('input[type=text]:visible:eq(0)').focus(); formDom.find('input[type=text]:visible:eq(0)').focus();
}); });

View file

@ -309,16 +309,16 @@ $canEditAnything = count(array_filter($editPostPrivileges)) > 0;
</div> </div>
<div id="inner-content"> <div id="inner-content">
<div class="post-wrapper post-type-<?php echo strtolower(PostType::toString($this->context->transport->post->type)) ?>">
<?php echo $this->renderFile('post-file-render') ?>
</div>
<?php if ($canEditAnything): ?> <?php if ($canEditAnything): ?>
<div class="unit edit-post"> <div class="unit edit-post">
<?php $this->renderFile('post-edit') ?> <?php $this->renderFile('post-edit') ?>
</div> </div>
<?php endif ?> <?php endif ?>
<div class="post-wrapper post-type-<?php echo strtolower(PostType::toString($this->context->transport->post->type)) ?>">
<?php echo $this->renderFile('post-file-render') ?>
</div>
<?php <?php
LayoutHelper::addStylesheet('comment-list.css'); LayoutHelper::addStylesheet('comment-list.css');
LayoutHelper::addStylesheet('comment-small.css'); LayoutHelper::addStylesheet('comment-small.css');