kopia lustrzana https://github.com/wagtail/wagtail
Animate ListBlock / StreamBlock insertion controls on insert/delete
This reduces the jumpiness on insertion and deletion. For nested sequences, it's not possible to eliminate the jump entirely without editing the CSS, because the insert button is `display: inline-block` which gives it a minimum height of the containing block's line-height - as a result, this spacing appears immediately as soon as the block changes from display:none to visible.pull/6931/head
rodzic
7361b0901f
commit
f18a15e142
|
@ -156,10 +156,14 @@ export class BaseInsertionControl {
|
|||
this.index = newIndex;
|
||||
}
|
||||
|
||||
delete() {
|
||||
delete({ animate = false }) {
|
||||
if (animate) {
|
||||
$(this.element).slideUp().attr('aria-hidden', 'true');
|
||||
} else {
|
||||
$(this.element).hide().attr('aria-hidden', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class BaseSequenceBlock {
|
||||
|
@ -252,6 +256,7 @@ export class BaseSequenceBlock {
|
|||
this._onRequestInsert(newIndex, inserterOpts);
|
||||
},
|
||||
strings: this.blockDef.meta.strings,
|
||||
animate,
|
||||
}
|
||||
);
|
||||
this.inserters.splice(index + 1, 0, inserter);
|
||||
|
@ -281,7 +286,7 @@ export class BaseSequenceBlock {
|
|||
deleteBlock(index, opts) {
|
||||
const animate = opts && opts.animate;
|
||||
this.children[index].markDeleted({ animate });
|
||||
this.inserters[index].delete();
|
||||
this.inserters[index].delete({ animate });
|
||||
this.children.splice(index, 1);
|
||||
this.inserters.splice(index, 1);
|
||||
|
||||
|
|
|
@ -33,6 +33,7 @@ class InsertPosition extends BaseInsertionControl {
|
|||
constructor(placeholder, opts) {
|
||||
super(placeholder, opts);
|
||||
this.onRequestInsert = opts && opts.onRequestInsert;
|
||||
const animate = opts && opts.animate;
|
||||
|
||||
const button = $(`
|
||||
<button type="button" title="${h(opts.strings.ADD)}" data-streamfield-list-add
|
||||
|
@ -48,6 +49,10 @@ class InsertPosition extends BaseInsertionControl {
|
|||
this.onRequestInsert(this.index);
|
||||
}
|
||||
});
|
||||
|
||||
if (animate) {
|
||||
button.hide().slideDown();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -38,6 +38,7 @@ class StreamBlockMenu extends BaseInsertionControl {
|
|||
constructor(placeholder, opts) {
|
||||
super(placeholder, opts);
|
||||
this.groupedChildBlockDefs = opts.groupedChildBlockDefs;
|
||||
const animate = opts.animate;
|
||||
|
||||
const dom = $(`
|
||||
<div>
|
||||
|
@ -65,6 +66,9 @@ class StreamBlockMenu extends BaseInsertionControl {
|
|||
this.canAddBlock = true;
|
||||
this.disabledBlockTypes = new Set();
|
||||
this.close({ animate: false });
|
||||
if (animate) {
|
||||
dom.hide().slideDown();
|
||||
}
|
||||
}
|
||||
|
||||
renderMenu() {
|
||||
|
|
Ładowanie…
Reference in New Issue