kopia lustrzana https://github.com/wagtail/wagtail
TypedTableBlock: Use SVG for add button icons; use rem units for styling (#7647)
* TypedTableBlock: Use SVG for add button icons; use rem units for styling * Fix add row button positioning in Safaripull/7718/head
Scott Cranfill
Matt Westcott
rodzic
e55ca05520
commit
76419482fd
client/src/entrypoints/contrib/typed_table_block
__snapshots__
wagtail/contrib/typed_table_block/static_src/typed_table_block/scss
|
|
@ -8,15 +8,21 @@ exports[`wagtail.contrib.typed_table_block.blocks.TypedTableBlock it renders cor
|
|||
<div class=\\"typed-table-block__wrapper\\">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th></th><th><input type=\\"hidden\\" name=\\"mytable-column-0-type\\" value=\\"test_block_a\\"><input type=\\"hidden\\" name=\\"mytable-column-0-order\\" value=\\"0\\"><button type=\\"button\\" class=\\"button button-small button-secondary prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">+</button><input name=\\"mytable-column-0-heading\\" class=\\"column-heading\\" placeholder=\\"Column heading\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace white no delete-column\\" aria-label=\\"Delete column\\" title=\\"Delete column\\">
|
||||
<tr><th></th><th><input type=\\"hidden\\" name=\\"mytable-column-0-type\\" value=\\"test_block_a\\"><input type=\\"hidden\\" name=\\"mytable-column-0-order\\" value=\\"0\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">
|
||||
<svg class=\\"icon icon-plus icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-plus\\"></use></svg>
|
||||
</button><input name=\\"mytable-column-0-heading\\" class=\\"column-heading\\" placeholder=\\"Column heading\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace no delete-column\\" aria-label=\\"Delete column\\" title=\\"Delete column\\">
|
||||
<svg class=\\"icon icon-bin icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-bin\\"></use></svg>
|
||||
</button></th><th><input type=\\"hidden\\" name=\\"mytable-column-1-type\\" value=\\"test_block_b\\"><input type=\\"hidden\\" name=\\"mytable-column-1-order\\" value=\\"1\\"><button type=\\"button\\" class=\\"button button-small button-secondary prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">+</button><input name=\\"mytable-column-1-heading\\" class=\\"column-heading\\" placeholder=\\"Column heading\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace white no delete-column\\" aria-label=\\"Delete column\\" title=\\"Delete column\\">
|
||||
</button></th><th><input type=\\"hidden\\" name=\\"mytable-column-1-type\\" value=\\"test_block_b\\"><input type=\\"hidden\\" name=\\"mytable-column-1-order\\" value=\\"1\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">
|
||||
<svg class=\\"icon icon-plus icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-plus\\"></use></svg>
|
||||
</button><input name=\\"mytable-column-1-heading\\" class=\\"column-heading\\" placeholder=\\"Column heading\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace no delete-column\\" aria-label=\\"Delete column\\" title=\\"Delete column\\">
|
||||
<svg class=\\"icon icon-bin icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-bin\\"></use></svg>
|
||||
</button></th><th class=\\"control-cell\\">
|
||||
<button type=\\"button\\" class=\\"button button-small button-secondary append-column\\" data-append-column=\\"\\" aria-label=\\"Add column\\" title=\\"Add column\\">+</button>
|
||||
<button type=\\"button\\" class=\\"button button-small button-secondary append-column button--icon text-replace white\\" data-append-column=\\"\\" aria-label=\\"Add column\\" title=\\"Add column\\"><svg class=\\"icon icon-plus icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-plus\\"></use></svg></button>
|
||||
</th></tr>
|
||||
</thead>
|
||||
<tbody><tr><td class=\\"control-cell\\"><button type=\\"button\\" class=\\"button button-small button-secondary prepend-row\\" aria-label=\\"Insert row\\" title=\\"Insert row\\">+</button></td><td><div class=\\"field char_field widget-text_input fieldname-test_charblock\\">
|
||||
<tbody><tr><td class=\\"control-cell\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace prepend-row\\" aria-label=\\"Insert row\\" title=\\"Insert row\\">
|
||||
<svg class=\\"icon icon-plus icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-plus\\"></use></svg>
|
||||
</button></td><td><div class=\\"field char_field widget-text_input fieldname-test_charblock\\">
|
||||
<div class=\\"field-content\\">
|
||||
<div class=\\"input\\">
|
||||
<p name=\\"mytable-cell-0-0\\" id=\\"mytable-cell-0-0\\">Block A widget</p>
|
||||
|
|
@ -30,9 +36,11 @@ exports[`wagtail.contrib.typed_table_block.blocks.TypedTableBlock it renders cor
|
|||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div></td><td class=\\"control-cell\\"><input type=\\"hidden\\" name=\\"mytable-row-0-order\\" value=\\"0\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace white no delete-row\\" aria-label=\\"Delete row\\" title=\\"Delete row\\">
|
||||
</div></td><td class=\\"control-cell\\"><input type=\\"hidden\\" name=\\"mytable-row-0-order\\" value=\\"0\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace no delete-row\\" aria-label=\\"Delete row\\" title=\\"Delete row\\">
|
||||
<svg class=\\"icon icon-bin icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-bin\\"></use></svg>
|
||||
</button></td></tr><tr><td class=\\"control-cell\\"><button type=\\"button\\" class=\\"button button-small button-secondary prepend-row\\" aria-label=\\"Insert row\\" title=\\"Insert row\\">+</button></td><td><div class=\\"field char_field widget-text_input fieldname-test_charblock\\">
|
||||
</button></td></tr><tr><td class=\\"control-cell\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace prepend-row\\" aria-label=\\"Insert row\\" title=\\"Insert row\\">
|
||||
<svg class=\\"icon icon-plus icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-plus\\"></use></svg>
|
||||
</button></td><td><div class=\\"field char_field widget-text_input fieldname-test_charblock\\">
|
||||
<div class=\\"field-content\\">
|
||||
<div class=\\"input\\">
|
||||
<p name=\\"mytable-cell-1-0\\" id=\\"mytable-cell-1-0\\">Block A widget</p>
|
||||
|
|
@ -46,15 +54,17 @@ exports[`wagtail.contrib.typed_table_block.blocks.TypedTableBlock it renders cor
|
|||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div></td><td class=\\"control-cell\\"><input type=\\"hidden\\" name=\\"mytable-row-1-order\\" value=\\"1\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace white no delete-row\\" aria-label=\\"Delete row\\" title=\\"Delete row\\">
|
||||
</div></td><td class=\\"control-cell\\"><input type=\\"hidden\\" name=\\"mytable-row-1-order\\" value=\\"1\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace no delete-row\\" aria-label=\\"Delete row\\" title=\\"Delete row\\">
|
||||
<svg class=\\"icon icon-bin icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-bin\\"></use></svg>
|
||||
</button></td></tr></tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class=\\"control-cell\\"></td>
|
||||
<td>
|
||||
<button type=\\"button\\" class=\\"button button-small button-secondary prepend-row\\" aria-label=\\"Add row\\" title=\\"Add row\\" data-add-row=\\"\\" style=\\"\\">+</button>
|
||||
</td>
|
||||
<td class=\\"control-cell\\">
|
||||
<button type=\\"button\\" class=\\"button button-small button-secondary button--icon text-replace prepend-row\\" aria-label=\\"Add row\\" title=\\"Add row\\" data-add-row=\\"\\" style=\\"\\">
|
||||
<svg class=\\"icon icon-plus icon\\" aria-hidden=\\"true\\" focusable=\\"false\\">
|
||||
<use href=\\"#icon-plus\\"></use>
|
||||
</svg>
|
||||
</button></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -60,11 +60,14 @@ export class TypedTableBlock {
|
|||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="control-cell"></td>
|
||||
<td>
|
||||
<button type="button" class="button button-small button-secondary prepend-row"
|
||||
aria-label="${h(strings.ADD_ROW)}" title="${h(strings.ADD_ROW)}" data-add-row>+</button>
|
||||
</td>
|
||||
<td class="control-cell">
|
||||
<button type="button"
|
||||
class="button button-small button-secondary button--icon text-replace prepend-row"
|
||||
aria-label="${h(strings.ADD_ROW)}" title="${h(strings.ADD_ROW)}" data-add-row>
|
||||
<svg class="icon icon-plus icon" aria-hidden="true" focusable="false">
|
||||
<use href="#icon-plus"></use>
|
||||
</svg>
|
||||
</button></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
|
@ -167,7 +170,10 @@ export class TypedTableBlock {
|
|||
const headerRow = this.thead.children[0];
|
||||
// delete all header cells except for the control columns
|
||||
headerRow.replaceChildren(headerRow.firstElementChild, headerRow.lastElementChild);
|
||||
this.appendColumnButton.text(this.blockDef.meta.strings.ADD_COLUMN).removeAttr('aria-label').removeAttr('title');
|
||||
this.appendColumnButton.text(this.blockDef.meta.strings.ADD_COLUMN)
|
||||
.removeClass('button--icon text-replace white')
|
||||
.removeAttr('aria-label')
|
||||
.removeAttr('title');
|
||||
|
||||
// delete all body rows
|
||||
this.tbody.replaceChildren();
|
||||
|
|
@ -213,9 +219,11 @@ export class TypedTableBlock {
|
|||
this.deletedFieldsContainer.appendChild(column.deletedInput);
|
||||
|
||||
const prependColumnButton = $(`<button type="button"
|
||||
class="button button-small button-secondary prepend-column"
|
||||
class="button button-secondary button-small button--icon text-replace prepend-column"
|
||||
aria-label="${h(this.blockDef.meta.strings.INSERT_COLUMN)}"
|
||||
title="${h(this.blockDef.meta.strings.INSERT_COLUMN)}">+</button>`);
|
||||
title="${h(this.blockDef.meta.strings.INSERT_COLUMN)}">
|
||||
<svg class="icon icon-plus icon" aria-hidden="true" focusable="false"><use href="#icon-plus"></use></svg>
|
||||
</button>`);
|
||||
$(newHeaderCell).append(prependColumnButton);
|
||||
prependColumnButton.on('click', () => {
|
||||
this.toggleAddColumnMenu(prependColumnButton, (chosenBlockDef) => {
|
||||
|
|
@ -230,7 +238,7 @@ export class TypedTableBlock {
|
|||
newHeaderCell.appendChild(column.headingInput);
|
||||
|
||||
const deleteColumnButton = $(`<button type="button"
|
||||
class="button button-secondary button-small button--icon text-replace white no delete-column"
|
||||
class="button button-secondary button-small button--icon text-replace no delete-column"
|
||||
aria-label="${h(this.blockDef.meta.strings.DELETE_COLUMN)}"
|
||||
title="${h(this.blockDef.meta.strings.DELETE_COLUMN)}">
|
||||
<svg class="icon icon-bin icon" aria-hidden="true" focusable="false"><use href="#icon-bin"></use></svg>
|
||||
|
|
@ -255,11 +263,18 @@ export class TypedTableBlock {
|
|||
});
|
||||
/* after first column is added, enable adding rows */
|
||||
this.addRowButton.show();
|
||||
this.appendColumnButton.text('+').attr(
|
||||
'aria-label', this.blockDef.meta.strings.ADD_COLUMN
|
||||
).attr(
|
||||
'title', this.blockDef.meta.strings.ADD_COLUMN
|
||||
);
|
||||
this.appendColumnButton.html(
|
||||
'<svg class="icon icon-plus icon" aria-hidden="true" focusable="false"><use href="#icon-plus"></use></svg>'
|
||||
)
|
||||
.addClass(
|
||||
'button--icon text-replace white'
|
||||
)
|
||||
.attr(
|
||||
'aria-label', this.blockDef.meta.strings.ADD_COLUMN
|
||||
)
|
||||
.attr(
|
||||
'title', this.blockDef.meta.strings.ADD_COLUMN
|
||||
);
|
||||
|
||||
if (opts && opts.addInitialRow && this.tbody.children.length === 0) {
|
||||
/* add an initial row */
|
||||
|
|
@ -315,9 +330,11 @@ export class TypedTableBlock {
|
|||
controlCellBefore.className = 'control-cell';
|
||||
rowElement.appendChild(controlCellBefore);
|
||||
const prependRowButton = $(`<button type="button"
|
||||
class="button button-small button-secondary prepend-row"
|
||||
class="button button-secondary button-small button--icon text-replace prepend-row"
|
||||
aria-label="${h(this.blockDef.meta.strings.INSERT_ROW)}"
|
||||
title="${h(this.blockDef.meta.strings.INSERT_ROW)}">+</button>`);
|
||||
title="${h(this.blockDef.meta.strings.INSERT_ROW)}">
|
||||
<svg class="icon icon-plus icon" aria-hidden="true" focusable="false"><use href="#icon-plus"></use></svg>
|
||||
</button>`);
|
||||
$(controlCellBefore).append(prependRowButton);
|
||||
prependRowButton.on('click', () => {
|
||||
this.insertRow(row.position);
|
||||
|
|
@ -348,7 +365,7 @@ export class TypedTableBlock {
|
|||
controlCellAfter.appendChild(row.positionInput);
|
||||
|
||||
const deleteRowButton = $(`<button type="button"
|
||||
class="button button-secondary button-small button--icon text-replace white no delete-row"
|
||||
class="button button-secondary button-small button--icon text-replace no delete-row"
|
||||
aria-label="${h(this.blockDef.meta.strings.DELETE_ROW)}"
|
||||
title="${h(this.blockDef.meta.strings.DELETE_ROW)}">
|
||||
<svg class="icon icon-bin icon" aria-hidden="true" focusable="false"><use href="#icon-bin"></use></svg>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
&__wrapper {
|
||||
overflow-x: auto;
|
||||
// Reserve space for the add column menu.
|
||||
min-height: 320px;
|
||||
min-height: 20rem;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 2.5em 0 1em 2.5em;
|
||||
margin: 2.5rem 0 1rem 2.5rem;
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
@ -17,46 +17,51 @@
|
|||
button.prepend-column,
|
||||
button.append-column {
|
||||
position: absolute;
|
||||
left: -1.2em;
|
||||
top: -2.2em;
|
||||
left: -0.9rem;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
button.delete-column {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 13px;
|
||||
right: 0.625rem;
|
||||
top: 0.875rem;
|
||||
}
|
||||
|
||||
input.column-heading {
|
||||
padding-right: 3em;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
tbody tr,
|
||||
tfoot tr {
|
||||
position: relative;
|
||||
|
||||
button.prepend-row {
|
||||
left: -2.5em;
|
||||
left: -2rem;
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
top: -0.9rem;
|
||||
}
|
||||
|
||||
button.delete-row {
|
||||
margin-left: 5px;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
td:not(.control-cell) {
|
||||
vertical-align: top;
|
||||
min-width: 320px;
|
||||
min-width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul.add-column-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -0.9rem;
|
||||
z-index: 100;
|
||||
min-width: 10em;
|
||||
min-width: 10rem;
|
||||
background-color: $color-white;
|
||||
|
||||
button {
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue