mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Always display StreamField "Add" buttons

pull/10295/head
Thibaud Colas 2023-03-29 09:23:02 +01:00
rodzic 6b32591c85
commit e1861978eb
5 zmienionych plików z 48 dodań i 90 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

7
client/src/components/StreamField/blocks/ListBlock.js
Wyświetl plik

@ -60,12 +60,9 @@ class InsertPosition extends BaseInsertionControl {
super(placeholder, opts);
this.onRequestInsert = opts && opts.onRequestInsert;
const animate = opts && opts.animate;
const title = h(opts.strings.ADD);
const button = $(`
<button type="button" title="${h(
opts.strings.ADD,
)}" data-streamfield-list-add
class="c-sf-add-button c-sf-add-button--visible">
<button type="button" title="${title}" data-streamfield-list-add class="c-sf-add-button">
<svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
</button>
`);

11
client/src/components/StreamField/blocks/StreamBlock.js
Wyświetl plik

@ -77,7 +77,7 @@ class StreamBlockMenu extends BaseInsertionControl {
const dom = $(`
<div>
<button type="button" title="${comboBoxTriggerLabel}" class="c-sf-add-button c-sf-add-button--visible">
<button type="button" title="${comboBoxTriggerLabel}" class="c-sf-add-button">
<svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
</button>
</div>
@ -142,7 +142,6 @@ class StreamBlockMenu extends BaseInsertionControl {
if (this.onRequestInsert) {
this.onRequestInsert(this.index, { type: change.selectedItem.type });
}
this.addButton.removeClass('c-sf-add-button--always-visible');
this.close();
}
@ -157,10 +156,6 @@ class StreamBlockMenu extends BaseInsertionControl {
}
}
reveal() {
this.addButton.addClass('c-sf-add-button--always-visible');
}
open() {
if (!this.canAddBlock) {
return;
@ -394,10 +389,6 @@ export class StreamBlock extends BaseSequenceBlock {
setState(values) {
super.setState(values);
if (values.length === 0) {
/* for an empty list, begin with the toggle revealed */
this.inserters[0].reveal();
}
}
setError(error) {

52
client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap
Wyświetl plik

@ -8,7 +8,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"3\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@ -70,7 +70,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@ -132,7 +132,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"fake-uuid-v4-value\\">
<input type=\\"hidden\\" name=\\"the-prefix-2-deleted\\" value=\\"\\">
@ -194,7 +194,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button></div>
</div>"
@ -208,7 +208,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@ -270,7 +270,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@ -332,7 +332,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button></div>
</div>"
@ -346,7 +346,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@ -408,7 +408,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@ -470,7 +470,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button></div>
</div>"
@ -484,7 +484,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"3\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@ -546,7 +546,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath-disabled=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-2-deleted\\" value=\\"\\">
@ -608,7 +608,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@ -670,7 +670,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button></div>
</div>"
@ -684,7 +684,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@ -746,7 +746,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"1\\">
@ -808,7 +808,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button></div>
</div>"
@ -822,7 +822,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@ -884,7 +884,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@ -946,7 +946,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button></div>
</div>"
@ -960,7 +960,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@ -1022,7 +1022,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@ -1084,7 +1084,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button></div>
</div>"
@ -1098,7 +1098,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
</div><div class=\\"\\"><p class=\\"help-block help-critical\\">At least three blocks are required</p>
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@ -1160,7 +1160,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@ -1222,7 +1222,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
</div>
</div>
</section>
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
</div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button></div>
</div>"

38
client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap
Wyświetl plik

@ -8,7 +8,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"3\\">
<div data-streamfield-stream-container=\\"\\"><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"1\\">
@ -72,7 +72,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"2\\">
@ -136,7 +136,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"fake-uuid-v4-value\\">
@ -200,7 +200,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div></div>
@ -215,7 +215,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
<div data-streamfield-stream-container=\\"\\"><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"2\\">
@ -279,7 +279,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"1\\">
@ -343,7 +343,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div></div>
@ -358,7 +358,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
<div data-streamfield-stream-container=\\"\\"><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"2\\">
@ -422,7 +422,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"1\\">
@ -486,7 +486,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div></div>
@ -501,7 +501,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
<div data-streamfield-stream-container=\\"\\"><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"1\\">
@ -565,7 +565,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"2\\">
@ -629,7 +629,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div></div>
@ -644,7 +644,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
<div data-streamfield-stream-container=\\"\\"><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"1\\">
@ -708,7 +708,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"true\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"true\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-tippy-root=\\"\\" id=\\"tippy-5\\" style=\\"z-index: 9999; visibility: visible; transition: none; position: absolute; left: 0px; top: 0px; margin: 0px;\\"><div class=\\"tippy-box\\" data-state=\\"hidden\\" tabindex=\\"-1\\" data-theme=\\"dropdown\\" data-animation=\\"fade\\" style=\\"max-width: 350px; transition-duration: 0ms;\\" role=\\"tooltip\\"><div class=\\"tippy-content\\" data-state=\\"hidden\\" style=\\"transition-duration: 0ms;\\"><div><div class=\\"w-combobox\\"><label id=\\"downshift-0-label\\" for=\\"downshift-0-input\\" class=\\"w-sr-only\\">Search options…</label><div class=\\"w-combobox__field\\"><input aria-activedescendant=\\"\\" aria-autocomplete=\\"list\\" aria-controls=\\"downshift-0-menu\\" aria-expanded=\\"false\\" aria-labelledby=\\"downshift-0-label\\" autocomplete=\\"off\\" id=\\"downshift-0-input\\" role=\\"combobox\\" type=\\"text\\" placeholder=\\"Search options…\\" value=\\"\\"></div><div id=\\"downshift-0-menu\\" role=\\"listbox\\" aria-labelledby=\\"downshift-0-label\\" class=\\"w-combobox__menu\\"><div class=\\"w-combobox__optgroup\\"><div role=\\"option\\" aria-selected=\\"false\\" id=\\"downshift-0-item-0\\" class=\\"w-combobox__option w-combobox__option--col1\\"><div class=\\"w-combobox__option-icon\\"><svg class=\\"icon icon-placeholder \\" aria-hidden=\\"true\\"><use href=\\"#icon-placeholder\\"></use></svg></div><div class=\\"w-combobox__option-text\\">Test Block A</div></div><div role=\\"option\\" aria-selected=\\"false\\" id=\\"downshift-0-item-1\\" class=\\"w-combobox__option w-combobox__option--col2\\"><div class=\\"w-combobox__option-icon\\"><svg class=\\"icon icon-pilcrow \\" aria-hidden=\\"true\\"><use href=\\"#icon-pilcrow\\"></use></svg></div><div class=\\"w-combobox__option-text\\">Test Block B</div></div></div></div></div></div></div></div></div></div><div data-contentpath=\\"2\\">
@ -772,7 +772,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div></div>
@ -787,7 +787,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
</div><div class=\\"\\"><p class=\\"help-block help-critical\\">At least three blocks are required</p>
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
<div data-streamfield-stream-container=\\"\\"><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"1\\">
@ -851,7 +851,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div><div data-contentpath=\\"2\\">
@ -915,7 +915,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
</div>
</section>
</div><div>
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
</div></div>

30
client/src/components/StreamField/scss/components/c-sf-add-button.scss
Wyświetl plik

@ -9,8 +9,6 @@
background-color: $color-white;
padding: 0;
cursor: pointer;
opacity: 0;
pointer-events: none;
border: 1px solid currentColor;
border-radius: theme('borderRadius.full');
margin-inline-start: -1px;
@ -25,25 +23,6 @@
transform: rotate(45deg);
}
&--visible {
opacity: 1;
pointer-events: unset;
@media (hover: hover) {
opacity: 0;
.w-panel--nested:is(:hover, :focus-within) & {
opacity: 1;
}
}
}
&--always-visible {
@media (hover: hover) {
opacity: 1;
}
}
&:hover,
&:focus-visible {
color: $color-white;
@ -52,18 +31,9 @@
&[disabled] {
opacity: 0.2;
pointer-events: none;
@media (forced-colors: active) {
color: GrayText;
}
@media (hover: hover) {
opacity: 0;
.w-panel--nested:is(:hover, :focus-within) & {
opacity: 0.2;
}
}
}
}