diff --git a/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js b/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js
index ea052f6686..fe0acb33d2 100644
--- a/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js
+++ b/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js
@@ -45,12 +45,16 @@ export class TypedTableBlock {
- |
+
+
+ |
-
+
`);
$(placeholder).replaceWith(dom);
@@ -193,9 +197,11 @@ export class TypedTableBlock {
column.headingInput = document.createElement('input');
column.headingInput.name = this.prefix + '-column-' + column.id + '-heading';
+ column.headingInput.placeholder = 'Column heading';
newHeaderCell.appendChild(column.headingInput);
- const prependColumnButton = $('');
+ const prependColumnButton = $(``);
$(newHeaderCell).append(prependColumnButton);
prependColumnButton.on('click', () => {
this.toggleAddColumnMenu(prependColumnButton, (chosenBlockDef) => {
@@ -203,7 +209,8 @@ export class TypedTableBlock {
});
});
- const deleteColumnButton = $('');
+ const deleteColumnButton = $(``);
$(newHeaderCell).append(deleteColumnButton);
deleteColumnButton.on('click', () => {
this.deleteColumn(column.position);
@@ -294,13 +301,15 @@ export class TypedTableBlock {
row.positionInput.value = row.position;
controlCell.appendChild(row.positionInput);
- const prependRowButton = $('');
+ const prependRowButton = $(``);
$(controlCell).append(prependRowButton);
prependRowButton.on('click', () => {
this.insertRow(row.position);
});
- const deleteRowButton = $('');
+ const deleteRowButton = $(``);
$(controlCell).append(deleteRowButton);
deleteRowButton.on('click', () => {
this.deleteRow(row.position);
diff --git a/gulpfile.js/config.js b/gulpfile.js/config.js
index 6377b98799..5acfaa2290 100644
--- a/gulpfile.js/config.js
+++ b/gulpfile.js/config.js
@@ -33,6 +33,7 @@ var apps = [
new App(path.join('wagtail', 'contrib', 'styleguide'), {'appName': 'wagtailstyleguide'}),
new App(path.join('wagtail', 'contrib', 'settings'), {'appName': 'wagtailsettings'}),
new App(path.join('wagtail', 'contrib', 'modeladmin'), {'appName': 'wagtailmodeladmin'}),
+ new App(path.join('wagtail', 'contrib', 'typed_table_block'), {'appName': 'typed_table_block'}),
];
module.exports = {
diff --git a/wagtail/contrib/typed_table_block/blocks.py b/wagtail/contrib/typed_table_block/blocks.py
index 4a4b5600f9..ded0bcb2c3 100644
--- a/wagtail/contrib/typed_table_block/blocks.py
+++ b/wagtail/contrib/typed_table_block/blocks.py
@@ -303,7 +303,11 @@ class TypedTableBlockAdapter(Adapter):
def media(self):
return forms.Media(js=[
versioned_static('typed_table_block/js/typed_table_block.js'),
- ])
+ ], css={
+ 'all': [
+ versioned_static('typed_table_block/css/typed_table_block.css'),
+ ]
+ })
register(TypedTableBlockAdapter(), TypedTableBlock)
diff --git a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss
new file mode 100644
index 0000000000..b6fdf6519d
--- /dev/null
+++ b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss
@@ -0,0 +1,32 @@
+.typed-table-block {
+ table {
+ margin-top: 1.5em;
+ margin-left: 1.5em;
+ }
+
+ th {
+ position: relative;
+
+ button.prepend-column {
+ position: absolute;
+ left: -1.2em;
+ top: -2.2em;
+ }
+
+ button.delete-column {
+ position: absolute;
+ right: 8px;
+ top: 1em;
+ }
+ }
+
+ tbody tr {
+ position: relative;
+
+ button.prepend-row {
+ left: -2.5em;
+ position: absolute;
+ top: -1em;
+ }
+ }
+}