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

Replace StreamField block picker with new ComboBox

pull/9920/head
Thibaud Colas 2023-01-18 10:18:38 +00:00
rodzic a176616cda
commit 8b231d19c6
10 zmienionych plików z 118 dodań i 473 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
client/src/components/Draftail/__snapshots__/index.test.js.snap
Wyświetl plik

@ -13,7 +13,6 @@ Object {
"autoCorrect": null,
"blockTypes": Array [],
"bottomToolbar": [Function],
"commandPalette": [Function],
"commandToolbar": [Function],
"commands": true,
"controls": Array [],

9
client/src/components/StreamField/StreamField.scss
Wyświetl plik

@ -1,13 +1,4 @@
$grid-gutter-width: 30px;
$type-button-padding-vertical: 10px;
$type-button-padding-horizontal: 10px;
$add-transition-duration: 0.3s;
$border-radius: 3px;
$add-panel-gutter: 8px;
@import 'scss/components/c-sf-add-button';
@import 'scss/components/c-sf-add-panel';
@import 'scss/components/c-sf-button';
[aria-expanded='true'] + .w-panel__heading .c-sf-block__title {
@apply w-sr-only;

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

@ -1,6 +1,8 @@
/* eslint-disable no-underscore-dangle */
import React from 'react';
import ReactDOM from 'react-dom';
import { v4 as uuidv4 } from 'uuid';
import tippy from 'tippy.js';
import {
BaseSequenceBlock,
@ -10,6 +12,12 @@ import {
import { escapeHtml as h } from '../../../utils/text';
import { hasOwn } from '../../../utils/hasOwn';
import { range } from '../../../utils/range';
import ComboBox, {
comboBoxLabel,
comboBoxNoResults,
comboBoxTriggerLabel,
} from '../../ComboBox/ComboBox';
import { hideTooltipOnEsc } from '../../../includes/initTooltips';
/* global $ */
@ -69,145 +77,104 @@ class StreamBlockMenu extends BaseInsertionControl {
constructor(placeholder, opts) {
super(placeholder, opts);
this.groupedChildBlockDefs = opts.groupedChildBlockDefs;
const animate = opts.animate;
const dom = $(`
<div>
<button data-streamblock-menu-open type="button" title="${h(
opts.strings.ADD,
)}"
class="c-sf-add-button c-sf-add-button--visible">
<button type="button" title="${comboBoxTriggerLabel}" class="c-sf-add-button c-sf-add-button--visible">
<svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
</button>
<div data-streamblock-menu-outer>
<div data-streamblock-menu-inner class="c-sf-add-panel"></div>
</div>
</div>
`);
$(placeholder).replaceWith(dom);
this.element = dom.get(0);
this.addButton = dom.find('[data-streamblock-menu-open]');
this.addButton.click(() => {
this.toggle();
});
this.outerContainer = dom.find('[data-streamblock-menu-outer]');
this.innerContainer = dom.find('[data-streamblock-menu-inner]');
this.hasRenderedMenu = false;
this.isOpen = false;
this.addButton = dom.find('button');
this.combobox = document.createElement('div');
this.canAddBlock = true;
this.disabledBlockTypes = new Set();
this.close({ animate: false });
if (animate) {
dom.hide().slideDown();
}
this.tooltip = tippy(this.addButton.get(0), {
content: this.combobox,
trigger: 'click',
interactive: true,
theme: 'dropdown',
arrow: false,
placement: 'bottom',
plugins: [hideTooltipOnEsc],
onShow: this.renderMenu.bind(this),
onHidden: () => {
ReactDOM.render(null, this.combobox);
},
});
}
renderMenu() {
if (this.hasRenderedMenu) return;
this.hasRenderedMenu = true;
const items = this.groupedChildBlockDefs.map(([group, blockDefs]) => {
const groupItems = blockDefs
// Allow adding all blockDefs even when disabled, so validation only impedes when saving.
// Keeping the previous filtering here for future reference.
// .filter((blockDef) => !this.disabledBlockTypes.has(blockDef.name))
.map((blockDef) => ({
type: blockDef.name,
label: blockDef.meta.label,
icon: blockDef.meta.icon,
}));
this.groupedChildBlockDefs.forEach(([group, blockDefs]) => {
if (group) {
const heading = $('<h4 class="c-sf-add-panel__group-title"></h4>').text(
group,
);
this.innerContainer.append(heading);
}
const grid = $('<div class="c-sf-add-panel__grid"></div>');
this.innerContainer.append(grid);
blockDefs.forEach((blockDef) => {
const button = $(`
<button type="button" class="c-sf-button action-add-block-${h(
blockDef.name,
)}">
<svg class="icon icon-${h(
blockDef.meta.icon,
)} c-sf-button__icon" aria-hidden="true">
<use href="#icon-${h(blockDef.meta.icon)}"></use>
</svg>
${h(blockDef.meta.label)}
</button>
`);
grid.append(button);
button.click(() => {
if (this.onRequestInsert) {
this.onRequestInsert(this.index, { type: blockDef.name });
}
this.close({ animate: true });
});
});
return {
label: group || '',
type: group || '',
items: groupItems,
};
});
// Disable buttons for any disabled block types
this.disabledBlockTypes.forEach((blockType) => {
$(`button.action-add-block-${h(blockType)}`, this.innerContainer).attr(
'disabled',
'true',
);
});
ReactDOM.render(
<ComboBox
label={comboBoxLabel}
placeholder={comboBoxLabel}
items={items}
getItemLabel={(type, item) => item.label}
getItemDescription={(item) => item.label}
getSearchFields={(item) => [item.label, item.type]}
noResultsText={comboBoxNoResults}
onSelect={this.onSelectBlock.bind(this)}
/>,
this.combobox,
);
}
onSelectBlock(change) {
if (this.onRequestInsert) {
this.onRequestInsert(this.index, { type: change.selectedItem.type });
}
this.addButton.removeClass('c-sf-add-button--always-visible');
this.close();
}
setNewBlockRestrictions(canAddBlock, disabledBlockTypes) {
this.canAddBlock = canAddBlock;
this.disabledBlockTypes = disabledBlockTypes;
// Disable/enable menu open button
if (this.canAddBlock) {
this.addButton.removeAttr('disabled');
} else {
this.addButton.attr('disabled', 'true');
}
// Close menu if its open and we no longer can add blocks
if (!canAddBlock && this.isOpen) {
this.close({ animate: true });
}
// Disable/enable individual block type buttons
$('button', this.innerContainer).removeAttr('disabled');
disabledBlockTypes.forEach((blockType) => {
$(`button.action-add-block-${h(blockType)}`, this.innerContainer).attr(
'disabled',
'true',
);
});
}
toggle() {
if (this.isOpen) {
this.close({ animate: true });
} else {
this.open({ animate: true });
}
reveal() {
this.addButton.addClass('c-sf-add-button--always-visible');
}
open(opts) {
open() {
if (!this.canAddBlock) {
return;
}
this.renderMenu();
if (opts && opts.animate) {
this.outerContainer.slideDown();
} else {
this.outerContainer.show();
}
this.addButton.addClass('c-sf-add-button--close');
this.outerContainer.attr('aria-hidden', 'false');
this.isOpen = true;
this.addButton.attr('aria-expanded', 'true');
this.tooltip.show();
}
close(opts) {
if (opts && opts.animate) {
this.outerContainer.slideUp();
} else {
this.outerContainer.hide();
}
this.addButton.removeClass('c-sf-add-button--close');
this.outerContainer.attr('aria-hidden', 'true');
this.isOpen = false;
close() {
this.addButton.attr('aria-expanded', 'false');
this.tooltip.hide();
}
}
@ -431,8 +398,8 @@ export class StreamBlock extends BaseSequenceBlock {
setState(values) {
super.setState(values);
if (values.length === 0) {
/* for an empty list, begin with the menu open */
this.inserters[0].open({ animate: false });
/* for an empty list, begin with the toggle revealed */
this.inserters[0].reveal();
}
}

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

@ -517,7 +517,8 @@ describe('telepath: wagtail.blocks.StreamBlock with labels that need escaping',
test('it renders correctly', () => {
boundBlock.inserters[0].open();
expect(document.body.innerHTML).toMatchSnapshot();
const listbox = document.querySelector('[role="listbox"]');
expect(listbox.innerHTML).toMatchSnapshot();
});
});
@ -589,7 +590,7 @@ describe('telepath: wagtail.blocks.StreamBlock with maxNum set', () => {
// Test menu
expect(
document
.querySelector('button[data-streamblock-menu-open]')
.querySelector('button[title="Insert a block"]')
.getAttribute('disabled'),
).toBe(null);
};
@ -606,7 +607,7 @@ describe('telepath: wagtail.blocks.StreamBlock with maxNum set', () => {
// Test menu
expect(
document
.querySelector('button[data-streamblock-menu-open]')
.querySelector('button[title="Insert a block"]')
.getAttribute('disabled'),
).toEqual('disabled');
};
@ -807,28 +808,9 @@ describe('telepath: wagtail.blocks.StreamBlock with blockCounts.max_num set', ()
).toBe(null);
// Test menu item
expect(
document
.querySelector('button.action-add-block-test_block_a')
.getAttribute('disabled'),
).toBe(null);
};
const assertCannotAddBlock = () => {
// Test duplicate button is always enabled
// querySelector always returns the first element it sees so this only checks the first block
expect(
document
.querySelector('button[title="Duplicate"]')
.getAttribute('disabled'),
).toBe(null);
// Test menu item
expect(
document
.querySelector('button.action-add-block-test_block_a')
.getAttribute('disabled'),
).toEqual('disabled');
expect(document.querySelector('[role="listbox"]').innerHTML).toContain(
'Test Block &lt;A&gt;',
);
};
test('addSibling capability works', () => {
@ -873,7 +855,7 @@ describe('telepath: wagtail.blocks.StreamBlock with blockCounts.max_num set', ()
assertCanAddBlock();
});
test('initialising at max_num disables adding new block of that type', () => {
test('initialising at max_num retains ability to add new block of that type', () => {
document.body.innerHTML = '<div id="placeholder"></div>';
const boundBlock = blockDef.render($('#placeholder'), 'the-prefix', [
{
@ -894,10 +876,10 @@ describe('telepath: wagtail.blocks.StreamBlock with blockCounts.max_num set', ()
]);
boundBlock.inserters[0].open();
assertCannotAddBlock();
assertCanAddBlock();
});
test('insert disables new block', () => {
test('insert retains ability to add new block', () => {
document.body.innerHTML = '<div id="placeholder"></div>';
const boundBlock = blockDef.render($('#placeholder'), 'the-prefix', [
{
@ -924,10 +906,10 @@ describe('telepath: wagtail.blocks.StreamBlock with blockCounts.max_num set', ()
2,
);
assertCannotAddBlock();
assertCanAddBlock();
});
test('delete enables new block', () => {
test('delete does not change availability of new block', () => {
document.body.innerHTML = '<div id="placeholder"></div>';
const boundBlock = blockDef.render($('#placeholder'), 'the-prefix', [
{
@ -948,7 +930,7 @@ describe('telepath: wagtail.blocks.StreamBlock with blockCounts.max_num set', ()
]);
boundBlock.inserters[0].open();
assertCannotAddBlock();
assertCanAddBlock();
boundBlock.deleteBlock(2);

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

@ -8,12 +8,9 @@ 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 data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-order\\" value=\\"0\\">
@ -81,12 +78,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"2\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-order\\" value=\\"1\\">
@ -154,12 +148,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"fake-uuid-v4-value\\">
<input type=\\"hidden\\" name=\\"the-prefix-2-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-2-order\\" value=\\"2\\">
@ -227,12 +218,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div></div>
</div>"
`;
@ -245,12 +233,9 @@ 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 data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"2\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-order\\" value=\\"0\\">
@ -318,12 +303,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-order\\" value=\\"1\\">
@ -391,12 +373,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div></div>
</div>"
`;
@ -409,12 +388,9 @@ 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 data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"2\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-order\\" value=\\"0\\">
@ -482,12 +458,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-order\\" value=\\"1\\">
@ -555,12 +528,9 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div></div>
</div>"
`;
@ -573,12 +543,9 @@ 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 data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-order\\" value=\\"0\\">
@ -646,12 +613,9 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"2\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-order\\" value=\\"1\\">
@ -719,12 +683,9 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div></div>
</div>"
`;
@ -737,12 +698,9 @@ 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 data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-order\\" value=\\"0\\">
@ -810,23 +768,10 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible c-sf-add-button--close\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"true\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"\\" aria-hidden=\\"false\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"><div class=\\"c-sf-add-panel__grid\\"><button type=\\"button\\" class=\\"c-sf-button action-add-block-test_block_a\\">
<svg class=\\"icon icon-placeholder c-sf-button__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
Test Block A
</button><button type=\\"button\\" class=\\"c-sf-button action-add-block-test_block_b\\">
<svg class=\\"icon icon-pilcrow c-sf-button__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
Test Block B
</button></div></div>
</div>
</div><div data-contentpath=\\"2\\">
<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\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-order\\" value=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-type\\" value=\\"test_block_b\\">
@ -893,12 +838,9 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div></div>
</div>"
`;
@ -911,12 +853,9 @@ 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 data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-order\\" value=\\"0\\">
@ -984,12 +923,9 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"2\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-order\\" value=\\"1\\">
@ -1057,186 +993,11 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div></div>
</div>"
`;
exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it renders correctly 1`] = `
"<div class=\\"c-sf-help\\">
<div class=\\"help\\">
use <strong>plenty</strong> of these
</div>
</div><div class=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
<div data-streamfield-stream-container=\\"\\"><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible c-sf-add-button--close\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"\\" aria-hidden=\\"false\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"><div class=\\"c-sf-add-panel__grid\\"><button type=\\"button\\" class=\\"c-sf-button action-add-block-test_block_a\\">
<svg class=\\"icon icon-placeholder c-sf-button__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
Test Block &lt;A&gt;
</button><button type=\\"button\\" class=\\"c-sf-button action-add-block-test_block_b\\">
<svg class=\\"icon icon-pilcrow c-sf-button__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
Test Block &lt;B&gt;
</button></div></div>
</div>
</div><div data-contentpath=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-order\\" value=\\"0\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-type\\" value=\\"test_block_a\\">
<input type=\\"hidden\\" name=\\"the-prefix-0-id\\" value=\\"1\\">
<section class=\\"w-panel w-panel--nested\\" id=\\"block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel=\\"\\">
<div class=\\"w-panel__header\\">
<a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\" data-panel-anchor=\\"\\">
<svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-link\\"></use>
</svg>
</a>
<button class=\\"w-panel__toggle\\" type=\\"button\\" aria-label=\\"Toggle section\\" aria-describedby=\\"block-1-heading\\" data-panel-toggle=\\"\\" aria-controls=\\"block-1-content\\" aria-expanded=\\"true\\">
<svg class=\\"icon icon-placeholder w-panel__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-placeholder\\"></use>
</svg>
</button>
<h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-1-heading\\" data-panel-heading=\\"\\">
<span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
<span class=\\"c-sf-block__type\\">Test Block &lt;A&gt;</span>
<span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
</h2>
<a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-1-section\\" aria-labelledby=\\"block-1-heading\\">
<svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-link\\"></use>
</svg>
</a>
<div class=\\"w-panel__divider\\"></div>
<div class=\\"w-panel__controls\\" data-panel-controls=\\"\\">
<div class=\\"w-panel__controls-cue\\">
<svg class=\\"icon icon-dots-horizontal w-panel__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-dots-horizontal\\"></use>
</svg>
</div>
<button type=\\"button\\" class=\\"button button--icon text-replace white\\" title=\\"Move up\\" disabled=\\"disabled\\">
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"button button--icon text-replace white\\" title=\\"Move down\\">
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"button button--icon text-replace white\\" title=\\"Duplicate\\">
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"button button--icon text-replace white\\" title=\\"Delete &amp; kill with fire\\">
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div id=\\"block-1-content\\" class=\\"w-panel__content\\">
<div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<div class=\\"w-field w-field--char_field w-field--text_input\\" data-field=\\"\\">
<div class=\\"w-field__errors\\" id=\\"the-prefix-0-value-errors\\" data-field-errors=\\"\\">
<svg class=\\"icon icon-warning w-field__errors-icon\\" aria-hidden=\\"true\\" hidden=\\"\\"><use href=\\"#icon-warning\\"></use></svg>
</div>
<div class=\\"w-field__input\\" data-field-input=\\"\\">
<p name=\\"the-prefix-0-value\\" id=\\"the-prefix-0-value\\">Block A widget</p>
</div>
<div id=\\"the-prefix-0-value-helptext\\" data-field-help=\\"\\"></div>
</div>
</div>
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div><div data-contentpath=\\"2\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-order\\" value=\\"1\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-type\\" value=\\"test_block_b\\">
<input type=\\"hidden\\" name=\\"the-prefix-1-id\\" value=\\"2\\">
<section class=\\"w-panel w-panel--nested\\" id=\\"block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel=\\"\\">
<div class=\\"w-panel__header\\">
<a class=\\"w-panel__anchor w-panel__anchor--prefix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\" data-panel-anchor=\\"\\">
<svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-link\\"></use>
</svg>
</a>
<button class=\\"w-panel__toggle\\" type=\\"button\\" aria-label=\\"Toggle section\\" aria-describedby=\\"block-2-heading\\" data-panel-toggle=\\"\\" aria-controls=\\"block-2-content\\" aria-expanded=\\"true\\">
<svg class=\\"icon icon-pilcrow w-panel__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-pilcrow\\"></use>
</svg>
</button>
<h2 class=\\"w-panel__heading w-panel__heading--label\\" aria-level=\\"3\\" id=\\"block-2-heading\\" data-panel-heading=\\"\\">
<span data-panel-heading-text=\\"\\" class=\\"c-sf-block__title\\"></span>
<span class=\\"c-sf-block__type\\">Test Block &lt;B&gt;</span>
<span class=\\"w-required-mark\\" data-panel-required=\\"\\">*</span>
</h2>
<a class=\\"w-panel__anchor w-panel__anchor--suffix\\" href=\\"#block-2-section\\" aria-labelledby=\\"block-2-heading\\">
<svg class=\\"icon icon-link w-panel__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-link\\"></use>
</svg>
</a>
<div class=\\"w-panel__divider\\"></div>
<div class=\\"w-panel__controls\\" data-panel-controls=\\"\\">
<div class=\\"w-panel__controls-cue\\">
<svg class=\\"icon icon-dots-horizontal w-panel__icon\\" aria-hidden=\\"true\\">
<use href=\\"#icon-dots-horizontal\\"></use>
</svg>
</div>
<button type=\\"button\\" class=\\"button button--icon text-replace white\\" title=\\"Move up\\">
<svg class=\\"icon icon-arrow-up\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-up\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"button button--icon text-replace white\\" title=\\"Move down\\" disabled=\\"disabled\\">
<svg class=\\"icon icon-arrow-down\\" aria-hidden=\\"true\\">
<use href=\\"#icon-arrow-down\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"button button--icon text-replace white\\" title=\\"Duplicate\\">
<svg class=\\"icon icon-duplicate\\" aria-hidden=\\"true\\">
<use href=\\"#icon-duplicate\\"></use>
</svg>
</button><button type=\\"button\\" class=\\"button button--icon text-replace white\\" title=\\"Delete &amp; kill with fire\\">
<svg class=\\"icon icon-bin\\" aria-hidden=\\"true\\">
<use href=\\"#icon-bin\\"></use>
</svg>
</button></div>
</div>
<div id=\\"block-2-content\\" class=\\"w-panel__content\\">
<div class=\\"w-field__wrapper\\" data-field-wrapper=\\"\\">
<div class=\\"w-field w-field--char_field w-field--admin_auto_height_text_input\\" data-field=\\"\\">
<div class=\\"w-field__errors\\" id=\\"the-prefix-1-value-errors\\" data-field-errors=\\"\\">
<svg class=\\"icon icon-warning w-field__errors-icon\\" aria-hidden=\\"true\\" hidden=\\"\\"><use href=\\"#icon-warning\\"></use></svg>
</div>
<div class=\\"w-field__input\\" data-field-input=\\"\\">
<p name=\\"the-prefix-1-value\\" id=\\"the-prefix-1-value\\">Block B widget</p>
</div>
<div id=\\"the-prefix-1-value-helptext\\" data-field-help=\\"\\"></div>
</div>
</div>
</div>
</section>
</div><div>
<button data-streamblock-menu-open=\\"\\" type=\\"button\\" title=\\"Add\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
<svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
</button>
<div data-streamblock-menu-outer=\\"\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
<div data-streamblock-menu-inner=\\"\\" class=\\"c-sf-add-panel\\"></div>
</div>
</div></div>
</div>"
`;
exports[`telepath: wagtail.blocks.StreamBlock with labels that need escaping it renders correctly 1`] = `"<div class=\\"w-combobox__optgroup\\"><div role=\\"option\\" aria-selected=\\"false\\" id=\\"downshift-2-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 &lt;A&gt;</div></div><div role=\\"option\\" aria-selected=\\"false\\" id=\\"downshift-2-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 &lt;B&gt;</div></div></div>"`;

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

@ -18,10 +18,10 @@
.icon {
width: theme('spacing.3');
height: theme('spacing.3');
transition: transform $add-transition-duration ease-in-out;
transition: transform 0.3s ease;
}
&--close .icon {
&[aria-expanded='true'] .icon {
transform: rotate(45deg);
}
@ -38,6 +38,12 @@
}
}
&--always-visible {
@media (hover: hover) {
opacity: 1;
}
}
&:hover,
&:focus-visible {
color: $color-white;

24
client/src/components/StreamField/scss/components/c-sf-add-panel.scss
Wyświetl plik

@ -1,24 +0,0 @@
@use 'sass:math';
.c-sf-add-panel {
position: relative;
padding: $grid-gutter-width * 0.25 0 $grid-gutter-width;
user-select: none;
&__group-title {
margin: 5px 0;
font-weight: 600;
}
&__grid {
display: flex;
flex-flow: row wrap;
margin-inline-start: -$add-panel-gutter;
margin-inline-end: -$add-panel-gutter;
margin-bottom: math.div($grid-gutter-width, 2);
&:last-child {
margin-bottom: 0;
}
}
}

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

@ -1,36 +0,0 @@
.c-sf-button {
flex: 1 1 200px;
margin: $add-panel-gutter;
appearance: none;
color: $color-grey-1;
line-height: 1.833;
font-weight: 600;
font-size: 12px;
font-family: $font-sans;
text-align: start;
background: $color-grey-5;
padding: $type-button-padding-vertical $type-button-padding-horizontal;
border: 1px solid $color-grey-4;
border-radius: $border-radius;
outline: none;
cursor: pointer;
overflow: hidden;
&:hover,
&:focus {
color: $color-white;
background-color: $color-teal;
}
&[disabled] {
opacity: 0.2;
pointer-events: none;
}
&__icon {
width: 16px;
height: 16px;
margin-inline-end: 0.5em;
vertical-align: text-top;
}
}

7
client/src/entrypoints/admin/telepath/widgets.js
Wyświetl plik

@ -160,7 +160,7 @@ class DraftailInsertBlockCommand {
this.split = split;
this.blockMax = addSibling.getBlockMax(blockDef.name);
this.icon = `#icon-${blockDef.meta.icon}`;
this.icon = blockDef.meta.icon;
this.description = blockDef.meta.label;
this.type = blockDef.name;
}
@ -220,7 +220,7 @@ class DraftailSplitCommand {
this.description = gettext('Split block');
}
icon = '#icon-cut';
icon = 'cut';
type = 'split';
onSelect({ editorState }) {
@ -326,7 +326,7 @@ class BoundDraftailWidget {
new DraftailInsertBlockCommand(this, blockDef, addSibling, split),
);
return {
label: group || gettext('Blocks'),
label: group || gettext('StreamField blocks'),
type: `streamfield-${group}`,
items: blockControls,
};
@ -343,7 +343,6 @@ class BoundDraftailWidget {
options.commands = [
{
label: gettext('Rich text'),
type: 'blockTypes',
},
{

2
client/src/includes/initTooltips.ts
Wyświetl plik

@ -3,7 +3,7 @@ import tippy, { Content, Props, Instance } from 'tippy.js';
/**
* Hides tooltip when escape key is pressed
*/
const hideTooltipOnEsc = {
export const hideTooltipOnEsc = {
name: 'hideOnEsc',
defaultValue: true,
fn({ hide }: Instance) {